wordpress - 如何使用 Gutenberg 的 ServerSideRender 接收 className？

Question

我正在尝试使用 ServerSideRender 从 PHP 渲染一个块，如下所示：

.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'] )
  );
}

另请参阅创建动态块的官方教程。

Answer 2

render_callback不支持从传递给的参数获取默认属性。这里有一个未解决的问题：https ://github.com/WordPress/gutenberg/issues/13811 。className您必须按照示例以编程方式设置。包括以下：

function block_classes( $name, $attributes = array() ) {
    $classes = array( 'wp-block-' . $name );
    if ( isset( $attributes['align'] ) && $attributes['align'] ) {
        array_push( $classes, 'align' . $attributes['align'] );
    }
    if ( isset( $attributes['className'] ) && $attributes['className'] ) {
        array_push( $classes, $attributes['className'] );
    }
    return implode(  ' ', $classes );
}