How to receive className with ServerSideRender of Gutenberg?

Question

I'm trying to render a block from PHP with ServerSideRender as follows:

js file:

/**
 * WordPress dependencies
 */
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { ServerSideRender } = wp.components;

/**
 * Internal dependencies
 */
import icons from './../../utils/icons';

registerBlockType( 'name/blockname', {
  title: __( 'blockname' ),
  description: __( 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.' ),
  keywords: [ __( 'recent post' ) ],
  icon: icons.block,
  category: 'xyz',

  edit: ( props ) => {
    const {
      className,
      attributes,
    } = props;

    return (
      <ServerSideRender
        block="name/blockname"
        attributes={ attributes }
        className={ className }
      />
    );
  },

  save: () => {
    return null;
  },
} );

php file:

register_block_type( '.../blockname', array(
   'attributes'      => array(
      'className'    => array(
         'type'      => 'string',
      ),
   ),
   'render_callback' => 'render_block',
) );

function render_block( $attr, $content ) {
    return 'txt';
}

Render:

   <div>txt</div>

Expected:

   <div class="wp-block-name-blockname">txt</div>

Everything seems to work correctly but the div with the class name is not being rendered.

Any suggestion to fix this? thank you in advance.

Answer 1

You want to change your render_block function to:

function render_block( $attr, $content ) {
  return sprintf(
    '<div class="wp-block-name-blockname %1$s">txt</div>',
    esc_attr( $attr['className'] )
  );
}

Also see the official tutorial of creating dynamic blocks.