适用于初学者的Gutenberg教程:创建您的第一个Block插件

古登堡初学者教程


如果您打算在2020年为WordPress开发任何东西,那么忽略古腾堡(Gutenberg)根本不是一种选择。插件和主题都必须与Gutenberg很好地合作,并在用户在WordPress仪表板中看到的所有内容中提供一致的用户体验。特别是由于古腾堡现在是WordPress不可或缺的一部分–简称为块编辑器.

话虽这么说,但是开始使用古腾堡并不容易。几年前,您可以只使用记事本来编写高质量的WordPress插件,但现在这个过程变得更加困难了.

古腾堡使用WordPress REST API,JavaScript和React等技术。因此,与古腾堡合作需要对插件和主题有新的要求.

好消息是,我们今天将讨论所有这些! 这篇文章是初学者的Gutenberg教程,他们希望首次为Gutenberg创建插件.

我们主要关注为古腾堡(Gutenberg)创建插件的各个方面-设置开发环境,创建基本插件以及使用块的一些细微差别.

1.设置您的古腾堡开发环境

要开始古腾堡开发,您需要一些JavaScript和React的基础知识。这是针对WordPress开发人员的JavaScript教程。此外,古腾堡(Gutenberg)中的其他软件包可能需要使用NodeJS软件包管理器npm.

您可以使用安装程序在Windows或MacOS上安装NodeJS的最新稳定版本 在官方网站上. 如果您有Linux服务器,则可以编译源代码或使用相应的程序包管理器(如apt和yum)。例如,如果您使用的是Ubuntu,请在终端上运行以下命令.

sudo apt更新
sudo apt安装nodejs npm

安装成功后,可以运行以下命令来验证NodeJS的版本.

nodejs –version

勾选这些框后,最好使用当前Gutenberg插件(独立插件)甚至其开发版本的实例来设置测试WordPress网站–您可以得到 来自GitHub.

Note️注意;虽然古登堡(Gutenberg)现在已内置在WordPress中,但该版本不是最新版本。古腾堡(Gutenberg)的开发工作仍然是分开进行的,所有新功能都首先包含在古腾堡(Gutenberg)独立插件中。自从其包含在WordPress 5.0中以来,核心中的实际Gutenberg版本尚未进行任何重大更新。您始终希望使用最新版本的Gutenberg,因为它为您提供了更好的机会来对您的作品进行过时的验证,并确保您的创作与后来WordPress核心中的所有内容保持一致.

另一方面,如果您打算为核心的Gutenberg插件做出贡献,那么该存储库将 贡献准则 关于如何设置本地环境以及设置更改以供审核的信息.

��最后,如果您希望将现有的插件改编成古腾堡(Gutenberg),请参阅以下详细的教程,了解如何实现此目的:第1部分和第2部分.

为了开始使用已准备好与Gutenberg合作的模板插件目录,您可以考虑使用 古腾堡样板插件. 这样的解决方案可以帮助您了解基本的文件结构,以便您可以专注于插件的内容。要使用样板,请下载并安装插件 从这里(zip). 安装并激活样板插件将激活示例块,我们将在本教程中进行探讨。您可以在样板的插件位置的相应目录中找到每个块的代码.

2.初始配置

提醒您,古腾堡(Gutenberg)引入了块的概念,它们替代了标准TinyMCE编辑器画布。在某些情况下,块还可以替换短代码和其他插件用来以各种方式添加到WordPress内容的其他内容元素.

如果您有兴趣为古腾堡(Gutenberg)开发,最常用的方法是构建一个插件,该插件可以创建新块并将其提供给用户。这正是我们在本古登堡教程中要做的.

以下各节从头到尾描述了该过程.

我们将要构建的特定插件会打印出具有可自定义特定背景的消息。只是一个示例构建,但是您可以采用此处介绍的原理并将其应用于您自己的更复杂的插件.

构建这样的插件的基础知识应该很熟悉。首先,在WordPress的plugins目录中创建一个新目录。在其中,我们将放置四个文件:

  • index.php –该文件包含有关新古腾堡块的元数据.
  • block.js –此JavaScript文件注册自定义古腾堡块.
  • editor.css –该文件包含编辑器的样式.
  • style.css –此文件包含块前端的样式.

列表中的前两个文件负责注册块,而后两个文件定义块元素的视觉样式.

3.注册块

在为古腾堡(Gutenberg)注册区块的这一步骤中,我们将大致涵盖两件事:

  • 用WordPress的PHP引擎注册插件的元数据,
  • 用古腾堡运行的React框架注册该块.

index.php文件包含该块和编辑器的入队资产.

  • 首先,通过add_action注册自定义函数.
  • 然后,使用wp_enqueue_style和wp_enqueue_script函数定义用于列出块和编辑器的JavaScript和CSS文件的路径的函数.

让我们通过下面的PHP代码总结一下:

add_action(’enqueue_block_editor_assets’,’gb_block_01_basic_editor_assets’);

函数gb_block_01_basic_editor_assets(){
//脚本.
wp_enqueue_script(
‘gb-block-01-basic’,
plugins_url(’block.js’,__FILE__),
array(’wp-blocks’,’wp-i18n’,’wp-element’),
filemtime(plugin_dir_path(__FILE__)。’block.js’)
);

//样式.
wp_enqueue_style(
‘gb-block-01-基本编辑器’,
plugins_url(’editor.css’,__FILE__),
array(’wp-edit-blocks’),
filemtime(plugin_dir_path(__FILE__)。’editor.css’)
);
}

这定义了基本编辑器的资源。对于该块,仅需要CSS文件,该文件通过wp_enqueue_style函数定义.

block.js文件描述了Gutenberg编辑器中该块的属性。我们定义以下属性和属性:

  • title –块的标题
  • 图标–为该块显示的图标;您可以从中选择任何图标 dashicons的集合
  • category –块所属的组。块组的示例是 "共同," "格式化," "嵌入."
  • edit –一个返回DOM元素的JavaScript函数。我们使用wp.element.createElement函数创建一个自定义段落DOM元素p,并在其中写入自定义文本。当用户单击编辑器中的块时,Gutenberg会调用此属性.

(function(){
var registerBlockType = wp.blocks.registerBlockType;

registerBlockType(’gb / basic-01’,{
标题:__(’GB Basic’,’GB’),
图标:“ shield-alt”,
类别:“普通”,

编辑:功能(道具){
返回wp.element.createElement(
‘p’,
{className:props.className},
‘你好,世界! —来自编辑器(01 Basic Block)。
);
},

});
})();

同样,您可以创建一个保存属性,当从前端选择该块时将调用该属性.

在上面的代码中,我们用props.className定义了p元素的className,它将创建一个以wp-block开头的类名,然后是该块的名称。在本古腾堡教程的下一部分,我们定义此类的样式.

4.定制块

如前一节所述,本教程的下一步是定义块元素的属性。让我们定义背景色,文本色和边框.

.wp-block-gb-basic-01 {
颜色:#000;
背景:mistyrose;
边框:0.2rem纯红色;
}

除了CSS文件,您还可以添加SCSS文件并使用Node进行编译。此外,这是 古腾堡元素造型教程 来自CSS技巧.

您的第一个Gutenberg教程的结果

我们终于准备好测试我们创建的块了。如果古腾堡(Gutenberg)插件已激活,请转到 + 图标,然后检查是否有新块出现.

古登堡新区

接下来,如果单击该块,您将注意到看到了上面的消息,带有CSS文件的背景色和边框:

行动中的障碍

结论

我们到您的第一本古腾堡教程的结尾。希望这有用。诚然,我们在这里构建的内容并不是超级复杂,但是它应该使您了解与Gutenberg合作时的基本结构以及如何计划下一个插件.

首先,我们讨论了建立古腾堡开发环境的步骤。接下来,我们引入了样板插件来帮助进一步开发。然后,讨论的重点转移到注册和样式化新块的各个步骤.

我希望这个Gutenberg教程能帮助您创建第一个Gutenberg插件!

如有任何疑问,请在下面的评论中删除.

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

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