首页 问答 正文

如何在WordPress中为Gutenberg编辑器添加自定义块?

注册会员 / 悠然自学 / 2023-06-12/ 浏览 156 次

在WordPress中为Gutenberg编辑器添加自定义块,需要遵循以下步骤:

  1. 创建一个新的自定义块目录:在主题或插件目录中创建一个新的文件夹,用于存放自定义块的代码。

  2. 创建自定义块文件:在自定义块目录下创建一个新的PHP文件,用于定义自定义块的功能和样式。

  3. 添加依赖文件:在自定义块文件中,添加所需的依赖文件,以确保自定义块能够在编辑器中正确渲染。例如,可以通过添加下面的代码来加载所需的CSS和JavaScript文件:

function custom_block_scripts() {
    wp_enqueue_style( 'custom-block-css', plugins_url( '/path/to/custom-block.css', __FILE__ ) );
    wp_enqueue_script( 'custom-block-js', plugins_url( '/path/to/custom-block.js', __FILE__ ), array( 'wp-blocks', 'wp-element' ) );
}
add_action( 'enqueue_block_editor_assets', 'custom_block_scripts' ); 
  1. 注册自定义块:在自定义块文件中,注册自定义块并定义其属性。以下是一个示例代码,展示如何注册并定义一个基本的自定义块:
function register_custom_block() {
    register_block_type( 'custom-blocks/your-custom-block', array(
        'editor_script' => 'custom-block-js',
        'editor_style'  => 'custom-block-css',
        'render_callback' => 'custom_block_render',
    ) );
}
add_action( 'init', 'register_custom_block' ); 
  1. 自定义块渲染回调函数:在自定义块文件中,创建一个适当的渲染回调函数,用于定义自定义块在前台展示时的输出。以下是一个简单的示例:
function custom_block_render( $attributes ) {
    // 在这里定义自定义块的输出内容
    $output = '<div class="custom-block">' . $attributes['content'] . '</div>';
    return $output;
} 

在上述代码中,custom-block 是自定义块的CSS类名,而 $attributes['content'] 则代表自定义块中的内容。

完成上述步骤后,保存并上传你的自定义块文件。现在,在Gutenberg编辑器中应该能够找到你的自定义块了。编辑自定义块时应用的样式将基于你所定义的CSS文件,并且前台呈现时会调用所指定的渲染回调函数。

大家谈论
    我的见解