Как получить className с ServerSideRender Гутенберга?

Question

Я пытаюсь сделать блок из PHP с помощью ServerSideRender следующим образом:

js файл:

/**
 * 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 файл:

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

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

Рендер:

   <div>txt</div>

Ожидаемое:

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

Кажется, все работает правильно, но div с именем класса не отображается.

Есть предложения, чтобы это исправить? заранее спасибо.

Answer 1

Вы хотите изменить функцию render_block на:

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

Также см. официальный учебник по созданию динамических блоков .