使用默认属性构建动态块

时间:2020-11-25 作者:Timo Giese

我的插件使用PHP中的渲染回调函数来显示块的内容。块仅存储与默认值不同的属性。

有没有办法将这些默认值传递到PHP中的渲染回调函数中?

我在考虑为其中一个属性设置一个无意义的默认值,因此如果第一次调用edit函数,它可以覆盖它们并为所有属性提供一个默认值。

但在我看来,这似乎有点老套,有没有更好的方法呢?

1 个回复
SO网友:hrsetyono

我也遇到了这个问题,我所做的是在PHP中定义属性并使用wp_localize_script 传递数组。

然后您可以将变量传入render_callback 使用use ($var)

例如:

$js = get_stylesheet_directory_uri() . \'/assets/js\';
$css= get_stylesheet_directory_uri() . \'/assets/css\';

$default_attributes = [
  \'alignment\' => [ \'type\' => \'string\', \'default\' => \'left\' ],
  \'iconPosition\' => [ \'type\' => \'string\', \'default\' => \'left\' ],

  \'textColor\' => [ \'type\' => \'string\', \'default\' => \'var(--text)\' ],
  \'bgColor\' => [ \'type\' => \'string\', \'default\' => \'var(--textInvert)\' ],
];


wp_register_script( \'my-block\', $dist . \'/my-block.js\', [ \'wp-blocks\', \'wp-dom\' ] , null, true );
wp_register_style( \'my-block\', $dist . \'/my-block.css\', [ \'wp-edit-blocks\' ] );

wp_localize_script( \'my-block\', \'myBlockLocalize\', [ \'attributes\' => $default_attributes ] );

register_block_type( \'my/block\', [
  \'editor_style\' => \'my-block\',
  \'editor_script\' => \'my-block\',
  \'render_callback\' => function( $atts, $inner_blocks = null ) use ( $default_attributes ) {
      $default_values = array_map( function( $a ) {
        return $a[\'default\'] ?? \'\';
      }, $default_attributes );

      $atts = wp_parse_args( $atts, $default_values );

      ob_start();
      // output the HTML here, I believe you can use get_template_parts()
      return ob_get_clean();
    }
] );
在您的JS中:

...

registerBlockType( \'my/block\', {
  title: \'My Block\',
  icon: \'id\',
  category: \'layout\',
  example: {},
  attributes: myBlockLocalize.attributes,
  
  // ...

} );

...

相关推荐