如何使您的插件与Gutenberg兼容:第2部分(Sidebar API)

如果您想使您的插件与Gutenberg兼容,那么您可以/应该采取几种方法-取决于您的插件的功能以及它如何向用户提供其功能.


在本迷你系列的第一部分中,我们探讨了Gutenberg的Block API,这是大多数插件在Gutenberg兼容性方面所需要的。这次,我们将探索古腾堡难题的另一个部分– 古腾堡的侧边栏API.

为了确保我们在同一页面上,简要说明一下:

  • 古腾堡的Block API非常广泛,可以让您将几乎所有内容都构建为块,但是有时这还不够.
  • 另一方面,补充工具栏API允许插件注册补充工具栏,以使它们的功能超出块范围。侧边栏类似于块检查器.

使您的插件与Gutenberg-Sidebar API兼容

例如,Yoast SEO演示了使用的Gutenberg Sidebar API:

古腾堡侧边栏API

您在哪里可以使用补充工具栏API?

我们最近致力于制作插件– WP产品评论 –准备古腾堡。 WP Product Review使用元字段将评论数据添加到帖子中,由于各种向后兼容的原因,我们无法成为一个障碍。因此,我们使用了补充工具栏API.

我们将WP Product Review集成到Gutenberg编辑器中的方法如下:WP产品评论Gutenberg

当用户指出帖子是带有侧边栏切换的评论时,他们将能够通过侧边栏选项配置有关其评论框的所有信息.

WP产品评论是补充工具栏API有用的示例之一。另一个很好的例子是 算了吧 插件,允许用户使用侧边栏从Unsplash和Giphy插入股票图像.

在这篇文章中,我将引导您完成实现类似操作的过程,并通过Sidebar API使您的插件与Gutenberg兼容.

默认情况下,元数据盒已经为古腾堡准备好了,但还不够

让我们从元框开始。让我们来看一个使用简单的meta框向编辑器屏幕上的用户提供某些功能的插件.

经典编辑器中的外观如下所示:

经典编辑器中的元框

您可以使用以下代码创建这样的元框-您也可以在 你好古腾堡 资料库:

/ **
*注册Hello Gutenbert Meta Box
* /
函数hello_gutenberg_add_meta_box(){
add_meta_box(’hello_gutenberg_meta_box’,__(’Hello Gutenberg Meta Box’,’hello-gutenberg’),’hello_gutenberg_metabox_callback’,’post’);
}
add_action(’add_meta_boxes’,’hello_gutenberg_add_meta_box’);

/ **
* Hello Gutenberg Metabox回调
* /
函数hello_gutenberg_metabox_callback($ post){
$ value = get_post_meta($ post->ID,“ _ hello_gutenberg_field”,true);
?>
<?php _e(’您的名字是什么?’,’hello-gutenberg’) ?>

<?的PHP
}

/ **
*保存你好古腾堡元框
* /
函数hello_gutenberg_save_postdata($ post_id){
如果(array_key_exists(’hello_gutenberg_field’,$ _POST)){
update_post_meta($ post_id,’_hello_gutenberg_field’,$ _POST [‘hello_gutenberg_field’]);;
}
}
add_action(’save_post’,’hello_gutenberg_save_postdata’);

所以这里要问的问题是:

我们是否首先需要使此古腾堡兼容?

在这一点上,我们应该考虑问自己什么是古腾堡兼容的。例如,如果您在古腾堡(Gutenberg)中使用此非常元的框而不对其进行任何更改,它将仍然有效.

但是,当我们谈论Gutenberg兼容性时,我们不仅在谈论在Gutenberg环境中使用的插件,而且还像在使用Gutenberg *.

"为什么?" –您会问。简而言之,在古腾堡成为默认编辑器后将开始使用WordPress的用户会发现旧的方法是违反直觉的。此外,他们期望编辑器中的所有内容都具有更像古腾堡的风格.

如果您不为用户提供本机的感觉,那么他们一定会寻找更适合古腾堡的替代方案.

最后,让我们开始编写一些代码!

补充工具栏API入门

我们将开始在Gutenberg中对补充工具栏进行编码,以包括我们的meta字段。您可以继续使用 古腾堡样板 仓库为起点.

为古腾堡做好准备

在开始之前,我们首先需要告诉古腾堡,我们不会在古腾堡使用我们的meta框。您可以通过将__back_compat_meta_box参数传递给add_meta_box函数来实现,如下所示:

/ **
*注册Hello Gutenberg Metabox
* /
函数hello_gutenberg_add_meta_box(){
add_meta_box(’hello_gutenberg_meta_box’,__(’Hello Gutenberg Meta Box’,’hello-gutenberg’),’hello_gutenberg_metabox_callback’,’post’,array(
‘__back_compat_meta_box’=> 假,
));
}
add_action(’add_meta_boxes’,’hello_gutenberg_add_meta_box’);

《古腾堡手册》详细介绍了如何处理将PHP meta框移植到古腾堡(这里).

这样可以确保我们的旧PHP meta框不再出现在Gutenberg中。现在,我们还需要通过将其添加到WordPress REST API中来为Gutenberg做好准备。您可以添加以下代码以使用REST API注册meta字段:

/ **
*注册Hello Gutenberg Meta Field to Rest API
* /
函数hello_gutenberg_register_meta(){
register_meta(
‘post’,’_ hello_gutenberg_field’,数组(
‘类型’=> ‘串’,
‘单’=> 真正,
‘show_in_rest’=> 真正,

);
}
add_action(’init’,’hello_gutenberg_register_meta’);

这会将_hello_gutenberg_field添加到 REST API中的对象.

此功能仅能在REST API中显示我们的价值。现在,我们还需要添加一种使用REST API更新元字段的方法.

以下代码会将我们的自定义路由添加到WordPress REST API, / hello-gutenberg / v1 / update-meta /

/ **
*注册Hello Gutenberg Metabox到Rest API
* /
函数hello_gutenberg_api_posts_meta_field(){
register_rest_route(
‘hello-gutenberg / v1’,’/ update-meta’,数组(
‘方法’=> ‘POST’,
‘回调’=> ‘hello_gutenberg_update_callback’,
‘args’=> 数组(
‘id’=> 数组(
‘sanitize_callback’=> “绝对”,
),
),

);
}
add_action(’rest_api_init’,’hello_gutenberg_api_posts_meta_field’);

/ **
*您好Gutenberg的Gutenberg REST API回调
* /
函数hello_gutenberg_update_callback($ data){
返回update_post_meta($ data [‘id’],$ data [‘key’],$ data [‘value’]);
}

REST API路由将用于从Gutenberg侧边栏修改我们的meta字段。您可以了解有关WordPress REST API的更多信息以及如何 从这里注册自定义路线.

同样,如果您想知道WordPress REST API是什么以及如何开始使用,可以阅读我们的博客文章:WordPress REST API:它是什么以及如何开始使用它.

在古腾堡添加侧边栏

让我们先从 古腾堡样板

/ **
*内部块库
* /
const {__} = wp.i18n;

const {片段} = wp.element;

const {
插件侧边栏,
插件侧边栏更多菜单项,
} = wp.editPost;

const {registerPlugin} = wp.plugins;

const组件=()=> (

{__(’Gutenberg Boilerplate’)}

{ __( ‘你好,世界!’ ) }

);

registerPlugin(’gutenberg-boilerplate’,{
图标:“管理员站点”,
渲染:组件,
});

这将在Gutenberg编辑器中插入一个非常简单的侧边栏。我们将以此为起点,并在此基础上建立我们的项目.

该示例代码来自我们的Gutenberg Boilerplate资源库,因此,我们需要替换所有出现的 "古腾堡样板" 与 "你好古腾堡".

使用的组件

尽管我们的侧边栏已经导入了许多组件,但我们将需要更多。您可以将代码的顶部替换为以下内容:

/ **
*内部块库
* /

const {__} = wp.i18n;

const {
插件侧边栏,
插件侧边栏更多菜单项
} = wp.editPost;

const {
面板主体,
文字控件
} = wp.components;

const {
零件,
分段
} = wp.element;

const {withSelect} = wp.data;

const {registerPlugin} = wp.plugins;

让我们快速了解我们已导入的所有组件.

  1. 如上一篇文章所述, __ 组件用于使我们的文本可翻译.
  2. 插件侧边栏 组件用于将侧边栏添加到古腾堡.
  3. 插件侧边栏更多菜单项 用于向Gutenberg菜单添加按钮,以切换侧边栏的可见性.
  4. 面板主体 组件用于将面板添加到侧边栏.
  5. 文字控件 用于我们的输入字段.
  6. 之后,我们导入了 零件分段 组件。它们都是我们在侧边栏中使用的React组件.
    • 片段组件用于对子列表进行分组,而无需向DOM添加额外的节点。我们需要在代码中使用Fragment组件,因为JSX不允许我们拥有多个父节点.
  7. withSelect 是一个高阶组件。要了解什么是高阶组件,建议您阅读 本文件.
  8. 最后,我们导入 registerPlugin, 这类似于我们在上一篇文章中使用的registerBlockType。无需注册块,而是registerPlugin注册您的插件.

添加控件

到目前为止,我们的侧边栏只是一个Component函数,但是由于我们将使用React的生命周期方法,因此我们将其变成一个React组件,如下所示:

类Hello_Gutenberg扩展了Component {
render(){
返回(

{__(’Hello Gutenberg’)}

{ __( ‘你好,世界!’ ) }


}
}

registerPlugin(’hello-gutenberg’,{
图标:“管理员站点”,
渲染:Hello_Gutenberg,
});

这应该使您的侧边栏可以使用纯文本.

现在,将我们的字段添加到侧边栏中。它应该使我们的组件看起来像这样:

类Hello_Gutenberg扩展了Component {
render(){
返回(

{__(’Hello Gutenberg’)}


}
}

首先,我们定义了一个初始状态,该状态基本上是元字段的键和值。之后,我们使用apiFetch从当前帖子中获取数据.

我们正在使用$ {this.props.postId}变量传递当前帖子的ID。我们稍后会回到这一点.

提取数据后,我们将使用REST API中的值更新状态.

现在,让我们回到postId变量。我们目前不知道当前帖子的ID,因此我们使用withSelect高阶组件,如下所示:

const HOC = withSelect((select)=> {
const {getCurrentPostId} = select(’core / editor’);
返回{
postId:getCurrentPostId(),
};
})(Hello_Gutenberg);

registerPlugin(’hello-gutenberg’,{
图标:“管理员站点”,
渲染:HOC,
});

这会将我们当前帖子的ID作为postId变量传递。现在您可以运行较旧的帖子,而我们的Gutenberg侧边栏将显示您的meta字段的值.

更新元值

现在,我们需要允许侧边栏也更新元值。与获取详细信息类似,我们将使用 wp.​​apiRequest 效用.

每次状态值更改时,我们都将使用REST API对其进行更新。为此,我们首先需要向我们的TextControl添加一个onChange事件,如下所示:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map