如何为古腾堡改编您的插件:第1部分(Block API)

如何为古腾堡改编您的插件:第1部分(Block API)

如何为古腾堡改编您的插件:第1部分(Block API)
СОДЕРЖАНИЕ
02 июня 2020

"我有一个插件," 你说, "我如何使它成为古腾堡就绪的?"


这个故事很简单。古腾堡(Gutenberg)是WordPress中的新编辑经验,它将在下一个主要版本中合并为核心。许多插件跟不上这个 将会过时. 因此,在为时已晚之前为Gutenberg调整插件至关重要.

谁受到影响?

几乎所有插件 与后期编辑有任何关系的人都会受到古腾堡的影响。例如,如果您的插件在TinyMCE中添加了一个按钮,然后在编辑器中放置了一个短代码,那么这将是一个坏消息。它将结束.
为Gutenberg调整您的插件:第1部分(Block API)

"我需要为古腾堡修改我的插件吗?"

那么哪些插件需要为Gutenberg更新?可以使用的任何插件:

  • 自定义元框
  • 简码
  • TinyMCE按钮
  • 或根本没有任何编辑器功能

尽管某些插件仍可与Gutenberg一起使用,例如添加简单元框的插件,但对于您的用户而言,体验将不那么顺利.

甚至简码都将像以前一样继续工作,但是它只是编辑器中的纯文本节点,而古腾堡的所有简码插件都将遵循其块UI并易于用户使用.

因此,是的,用户将更喜欢为古腾堡体验而设计的插件。剩下的将被竞争对手插件取代.

只是为了给您一个想法,下面是一个示例,该示例显示了我们的插件为用户带来的标准旧编辑体验 (一个), 然后是古腾堡的样子 (b) –经过优化的插件.

(b)Feedzy RSS Feed-适用于Gutenberg的插件

不要怕!我们在这里为您提供支持古腾堡插件的帮助。有很多方法可以将插件集成到Gutenberg中,具体取决于您的插件如何工作,本文将在本文中进行讨论。.

事先要知道的事情古登堡(Gutenberg)是用React写的。而且Gutenberg插件是用JavaScript编码的,对于仅使用PHP进行编码的开发人员来说,这也是一个艰难的过渡。虽然您不需要了解React即可为Gutenberg制作插件,但您需要对JavaScript有一些基本的了解。如果您以前从事过React和JSX的工作,那么对您而言,这将是相似的理由.

虽然还不够 古腾堡官方文件, 它的Github存储库为开发人员提供了很多有价值的信息。如果您想深入学习Gutenberg开发,则必须对Gutenberg GitHub存储库中正在发生的一切保持警惕,因为该项目的发展非常快,而且每天都在变化.

如何为古腾堡修改您的插件

古腾堡(Gutenberg)的API为我们提供了许多扩展编辑器的方法,例如Block API,Shortcode API等。使用哪种API取决于我们正在构建的插件类型.

如果您的插件是简单的简码插件,则可以使用Block API为编辑器创建漂亮的块。但是,如果您的插件使用了块不够的复杂元框,则可以使用补充工具栏API.

另外,我们将使用现代的JavaScript开发工具堆栈,例如NodeJS,NPM,webpack和ESNext。我们将为您提供示例文件,因此您无需担心设置开发环境.

在这篇文章中,我们将研究 如何通过使用Block API使您的插件与Gutenberg兼容. 我们将介绍其他方法(侧边栏API,发布面板,状态栏 & 如果需要,请在第二部分中提供类似的API).

您可以在以下位置找到所有提到的示例 这个GitHub仓库.

古腾堡开发环境

为Gutenberg开发需要您设置一系列工具,例如NPM,webpack,Babel和JSX。这需要很多时间和精力,因此我们为您准备了环境.

Gutenberg Boilerplate是一个插件,具有最少的Gutenberg开发设置和示例。它包含一个块和侧栏示例。您可以使用它扩展到您的自定义块.

古腾堡样板

您可以分叉或克隆 古腾堡锅炉库 给你 / wp-content / plugins / 并将其用作您的开发环境.

之后,您需要将NodeJS安装到计算机上才能开始。导航到Gutenberg Boilerplate文件夹,然后运行npm install

从这一点开始,您需要知道在开发过程中将使用的三个命令:

  • npm install –克隆项目时安装项目依赖项.
  • npm run dev –在开发过程中编译代码。您只需运行一次,它将一直关注更改.
  • npm run build –完成开发过程后,编译代码以优化构建.

块API

块是Gutenberg的基本元素,它是基于块的编辑器。块API允许您为古腾堡制作块。您可以制作可以呈现基本HTML,简码的块,甚至可以制作动态块以显示,例如,您的最新帖子.

基于现有插件的过程

在我们的示例中,我们将对Gotenberg块采用Click to Tweet短代码。此“点击鸣叫”短代码将使用您的文本呈现一个“鸣叫框”,以及一个用于鸣叫该文本的按钮。像这样:

点击鸣叫布局

我们的简码看起来像这样:

[clicktotweet tweet ="要显示的文字" tweetsent ="发推文" 按钮="鸣叫" 主题="点击鸣叫"]

我们的简码具有四个参数:

  • 鸣叫:出现在您网站上的文字.
  • 推文:发到Twitter的文字.
  • 按钮:鸣叫按钮文字.
  • 主题:单击为推文主题或单击为推文替代主题.

使用Block API为Gutenberg调整插件

使用Gutenberg可以使用两种方法,要么将HTML呈现到前端,要么可以使用Gutenberg块将shortcode呈现到前端。对于本文,我们将做后者.

所有代码都在 GitHub上的Hello Gutenberg插件存储库. 您可以克隆存储库以查看正在使用的插件,或修改代码.

排队古腾堡的脚本/样式

首先,我们需要使用enqueue_block_assets将脚本和样式加入到Gutenberg编辑器中:

/ **
*排队前端和编辑器JavaScript和CSS
* /
函数hello_gutenberg_scripts(){
$ blockPath =’/dist/block.js’;
$ stylePath =’/dist/block.css’;

//使捆绑的块JS文件入队
wp_enqueue_script(
‘hello-gutenberg-block-js’,
plugins_url($ blockPath,__FILE__),
[‘wp-i18n’,’wp-blocks’,’wp-editor’,’wp-components’],
filemtime(plugin_dir_path(__ FILE__)。$ blockPath)
);

//排队前端和编辑器块样式
wp_enqueue_style(
‘hello-gutenberg-block-css’,
plugins_url($ stylePath,__FILE__),
”,
filemtime(plugin_dir_path(__ FILE__)。$ stylePath)
);

}

//钩子脚本函数插入块编辑器钩子
add_action(’enqueue_block_assets’,’hello_gutenberg_scripts’);

我们在脚本中添加了四个依赖关系,这些依赖关系将在我们的代码块中使用。让我们首先了解这些依赖性:

wp-i18n是Gutenberg的国际化功能版本,例如 __(). wp-blocks用于registerBlockType函数,该函数注册您的块。我们将wp-editor和wp-components脚本用于模块中的各种组件.

现在,我们已经将您的资产排队,我们可以开始将代码块写入 /src/block.js 文件.

导入依赖项

如果您使用的是Gutenberg Boilerplate,那么您的 block.js 文件应具有基本的块结构,可用于为古腾堡构建插件:

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

const {registerBlockType} = wp.blocks;

/ **
*寄存器块
* /
导出默认的registerBlockType(’gutenberg-boilerplate / block’,{
//块标题
标题:__(’Gutenberg Boilerplate’),
//方块说明
描述:__(’示例块。’),
//块类别
类别:“普通”,
//方块图示
图标:“管理员站点”,
//块关键字
关键字:[
__(’样板’),
__( ‘你好,世界’ ),
__(’示例’),
],
属性:{
},
//定义编辑界面
编辑:道具=> {
返回(

{__(’Hello Backend’)}

);
},
//定义前端接口
保存:道具=> {
返回(

{__(’Hello Frontend’)}

);
},
});

您可以运行npm run dev来开始实时编译我们的代码.

首先,我们将在顶部导入所需的所有组件和库:

/ **
*块依赖
* /

从“类名”中导入类名;

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

const {registerBlockType} = wp.blocks;

const {
富文本,
检查器控件,
块控件,
} = wp.editor;

const {
面板主体,
TextareaControl,
文字控件,
大石con,
工具列,
纽扣,
工具提示,
} = wp.components;

首次进口 类名 我们使用npm安装了它以在代码中使用多个类,因为JSX不允许元素中包含多个类.

我们将学习使用它们时已导入的其他组件.

定义属性

现在,我们将为我们的古腾堡块定义四个属性,与我们的短代码相同:

属性:{
鸣叫:{
类型:“字符串”,
},
发推文:{
类型:“字符串”,
},
按钮:{
类型:“字符串”,
默认值:__(’Tweet’),
},
主题:{
类型:“布尔值”,
默认值:false,
},
},

如您所见,所有属性都与我们的简码相同。所有属性都有一个类型键,该键告诉Gutenberg它的数据类型。您可以使用字符串,数字,布尔值 & 对象作为接受类型.

一些属性还包含默认值。属性还可以具有其他属性,例如源和选择器,我们在示例中将不使用它们,但是您可以 在这里了解更多关于他们的信息.

编辑界面

现在,我们将构建块的编辑界面,该界面将成为显示-用户在Gutenberg中编辑块时将看到它.

为了获得一个基本的想法,我们可以先对代码块进行硬编码,然后通过替换代码中的以下区域在此代码块上进行构建:

//定义编辑界面
编辑:道具=> {
返回(

{__(’Hello Backend’)}

);
},

使用以下代码:

//定义编辑界面
编辑:道具=> {
返回[

南瓜和企鹅

鸣叫

];
},

这应该使您对我们的最终结果有所了解。它看起来像这样:

古腾堡插件

该块的第一个元素是tweet文本区域。我们将用一个可编辑的文本字段替换它,类似于古腾堡的标题栏.

我们将使用 富文本 我们先前导入以替换我们的硬编码文本的组件.

我们的RichText组件有五个参数。 format是一个字符串,因为我们将使用简码在前端显示元素。如果我们想在属性中使用选择器,那么format应该是一个数组.

RichText默认具有一些格式设置选项,例如粗体和斜体,我们已通过在formattingControls参数中传递空数组来禁用了它们.

当字段中没有文本时,占位符是占位符文本,并且在发生更改事件时onChange将触发onChangeTweet函数.

最后,值将是我们字段的值,它将取自我们先前定义的tweet属性.

定义RichText区域后,我们需要构建onChangeTweet函数,该函数将在文本字段中的值更改时触发.

//定义编辑界面
编辑:道具=> {
const onChangeTweet =值=> {
props.setAttributes({tweet:value});
};
返回[
…其余代码

我们将RichText字段的值传递给onChangeTweet函数,该函数使用 props.setAttributes 更新tweet属性值的功能.

当您使用积木时,您将立即看到古腾堡的力量.

古腾堡的RichField

很棒吗?

区块检查器

在为古腾堡(Gutenberg)构建插件时,您无需每次都重新发明轮子来制作插件选项面板。古腾堡为我们提供了一种简化的方式来允许自定义块,并确保每个用户都对内置UI模式有一致的体验.

与RichText组件类似,InspectorControls组件在选择该块时会添加一个侧边栏。像这样:

古腾堡检查员控制

我们还将使用TextareaControl和TextControl将文本区域和文本输入字段添加到检查器区域.

我们将在您的return语句中添加以下代码:

!! props.isSelected && (

),

props.isSelected检查以确保仅在选择块时才显示检查器.

与RichText类似,TextareaControl和TextControl组件也具有值和onChange方法.

我们还需要更改块显示的代码以适应新的更改。在我们的例子中,我们只需要在按钮中添加按钮文本,因为推文将被添加到链接中,因此我们不需要在后端显示它。.

您可以将初始代码中的超链接替换为以下内容:


{props.attributes.button}

如前所述,我们正在从代码中删除超链接,因为我们不需要在后端显示它。这将使我们的块看起来像这样:

Gutenberg单击以发布检查器控件

Block Inspector可能是您的块的强大工具。如果您的插件的高级选项对于编辑器区域而言过于复杂,则可以将其放在“检查器”区域中.

我们将在块中添加最后一个选项以完成下一部分中的JavaScript部分.

块工具栏

块工具栏是另一个预构建的UI组件,我们可以使用它向块添加更多选项。当您选择它时,它将显示在您的块上方。例:

古腾堡块工具栏

理想情况下,“块工具栏”应包含您的块的主要控件,而Inspector托管次要控件。但是,这值得商and,具体取决于您的障碍.

我们将使用“块工具栏”区域托管替代样式控件.

与Block Inspector相似,我们需要在return语句中添加以下代码,以将Block Toolbar添加到我们的块中:

!! props.isSelected && (

),

我们使用BlockControls和Toolbar组件将工具栏添加到块中。与Block Inspector相似,props.isSelected确保仅在将焦点放在block上时工具栏才会显示.

我们还将Tooltip和Button组件用于控件。工具提示组件包裹在按钮组件周围,以确保当您将鼠标悬停在控件上时可以看到工具提示,以提供更多上下文.

Button组件使用的是我们在本文前面导入的classnames模块。我们使用classnames函数为控件提供了三个类。第三类是活动的,仅当我们的主题属性值为true时出现.

它的onChange函数将主题属性切换为true / false。最后,Dashicon组件用于显示我们控件的图标.

我们还必须更改我们的代码以使其与更改一起使用。我们需要替换以下行:

带有:

我们正在检查theme属性是true还是false,并相应地将一个类分配给我们的代码块.

现在,您的块应如下所示:

点击鸣叫工具栏

我们已经完成了Gutenberg块的JavaScript端部分。您可以找到文件的完整源代码 这里.

现在,我们将通过处理服务器端输出来完成我们的代码块.

服务器端渲染

Gutenberg允许您使用服务器端渲染在前端显示块。服务器端渲染使我们可以为短代码创建块.

首先,我们将用以下代码替换它,使save方法返回null:

//定义前端接口
救() {
//用PHP渲染
返回null;
},

我们将使用register_block_type PHP函数在PHP中注册我们的块类型:

如果(function_exists(’register_block_type’)){
//将服务器端渲染挂钩到渲染回调中
register_block_type(
‘hello-gutenberg / click-to-tweet’,[
‘render_callback’=> ‘hello_gutenberg_block_callback’,
‘属性’=> 数组(
‘tweet’=> 数组(
‘类型’=> ‘串’,
),
‘tweetsent’=> 数组(
‘类型’=> ‘串’,
),
‘按钮’=> 数组(
‘类型’=> ‘串’,
‘默认’=> ‘鸣叫’,
),
‘主题’=> 数组(
‘类型’=> ‘布尔’,
‘默认’=> 假,
),
),
]
);
}

我们的register_block_type函数。我们首先将块名称以及参数数组传递给它.

第一个参数是render_callback函数,该函数调用我们的hello_gutenberg_block_callback函数以进行服务器端渲染.

在渲染回调之后,我们将属性作为数组传递,类似于我们在渲染回调函数中使用的block.js文件.

我们的渲染回调函数如下所示:

函数hello_gutenberg_block_callback($ attr){
extract($ attr);
如果(isset($ tweet)){
$ theme =($ theme === true?’click-to-tweet-alt’:’click-to-tweet’);
$ shortcode_string ='[clicktotweet tweet ="%s" tweetsent ="%s" 按钮="%s" 主题="%s"]’;
return sprintf($ shortcode_string,$ tweet,$ tweetsent,$ button,$ theme);
}
}

我们提取所有属性,然后将其返回到我们的短代码中。这就是为Gutenberg改编您的短代码插件所需的一切.

您可以在此找到本文中使用的所有代码。 你好古腾堡 资料库.

在下一部分中,我们将介绍其他适用于Gutenberg的现有插件的方法,包括Sidebar API.

如果您对如何为Gutenberg调整插件有任何疑问,请在评论中提问!

别忘了加入我们的速成班,以加快WordPress网站的速度。通过一些简单的修复,您甚至可以减少50-80%的加载时间:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector