WordPress古腾堡编辑器模块开发教程

文 / @WordPress主题

WordPress古腾堡编辑器是WordPress 5.0版本中新增的默认编辑器，它取代了之前的经典编辑器。古腾堡编辑器以块的形式组织内容，每个块可以是文本、图像、视频、音频等元素。这种编辑方式更加直观和灵活，也方便开发者进行模块开发。以下是古腾堡编辑器模块开发的教程：

  1. 确认你的插件支持WordPress 5.0及以上版本。如果插件需要在WordPress 5.0以下版本中运行，你需要同时支持经典编辑器和古腾堡编辑器。
  2. 创建一个新的PHP文件，该文件将包含你的模块代码。你可以将该文件保存在你的插件目录下或者在你的主题目录下创建一个子目录，然后将文件保存在该目录下。为了避免命名冲突，建议使用独特的名称。
  3. 在你的PHP文件中，创建一个名为"register_block_type"的函数。这个函数将注册你的块类型，并指定块的属性和行为。下面是一个简单的例子：
php
function register_my_block() {
wp_register_script(
'my-block', //块脚本名称
plugins_url( 'my-block.js', __FILE__ ), //块脚本的路径
array( 'wp-blocks', 'wp-element' ), //依赖项
filemtime( plugin_dir_path( __FILE__ ) . 'my-block.js' ) //版本号
);

register_block_type( 'my-plugin/my-block', array(
'editor_script' => 'my-block',
'attributes' => array(
'text' => array(
'type' => 'string',
'default' => '',
),
'backgroundColor' => array(
'type' => 'string',
'default' => 'white',
),
),
'render_callback' => 'my_block_render_callback',
) );
}

add_action( 'init', 'register_my_block' );

在上面的代码中，我们首先使用"wp_register_script"函数注册了一个块脚本。然后使用"register_block_type"函数注册了一个名为"my-plugin/my-block"的块类型。这个块类型有两个属性：一个是"文本"，一个是"背景颜色"。我们还指定了一个"render_callback"函数，该函数将渲染块的内容。

  1. 创建一个名为"my-block.js"的JavaScript文件，并将其保存在与PHP文件相同的目录下。这个文件将包含你的块的渲染逻辑。下面是一个简单的例子：
javascript
(function( wp ) {
var el = wp.element.createElement;
var registerBlockType = wp.blocks.registerBlockType;

registerBlockType( 'my-plugin/my-block', {
title: 'My Block',
icon: 'smiley',
category: 'common',
attributes: {
text: {
type: 'string', 

添加UTHEME为好友
扫码添加UTHEME微信为好友
· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。
相关文章
没有找到适合的程序？来找我们定制吧！
联系我们