WordPress Gutenberg Block API：创建自定义块

新的WordPress编辑器（代号Gutenberg）将于5.0版中发布。 现在是掌握它的完美时机，然后它才能进入WordPress核心。 在本系列中，我将向您展示如何使用Block API并创建自己的内容块，您可以使用这些内容块来构建帖子和页面。

在本文中，我们将在my-custom-block插件中创建第二个块，以显示来自PlaceIMG Web服务的随机图像。 您还可以通过从下拉选择控件中选择图像类别来自定义块。

但是首先，我们将学习在继续所有重要的registerBlockType()函数之前，如何将块脚本和样式排入队列，这对于在Gutenberg中创建块至关重要。

使块脚本和样式入队

要添加块所需JavaScript和CSS，我们可以使用Gutenberg提供的两个新的WordPress挂钩：

• enqueue_block_editor_assets
• enqueue_block_assets

仅当古腾堡（Gutenberg）插件处于活动状态时才可用，并且它们的工作方式与标准WordPress钩子入队脚本相似。 但是，它们专门用于处理Gutenberg块。

enqueue_block_editor_assets挂钩仅将脚本和样式添加到管理编辑器。 这使它非常适合排队JavaScript来注册块，而CSS可以为块设置的用户界面元素设置样式。

但是，对于块输出，您希望您的块在大多数情况下都在编辑器中呈现与前端相同的效果。 使用enqueue_block_assets可使此操作变得容易，因为样式会自动添加到编辑器和前端。 如果需要，您还可以使用此挂钩来加载JavaScript。

但是您可能想知道如何仅在前端排队脚本和样式。 没有WordPress挂钩可让您直接执行此操作，但您可以通过在enqueue_block_assets挂钩回调函数内添加条件语句来解决此问题。

add_action( 'enqueue_block_assets', 'load_front_end scripts' );
function load_front_end scripts() {
    if( !is_admin() {
        // enqueue front end only scripts and styles here
    }
}

要使用这两个新的钩子实际加入脚本和样式，可以wp_enqueue_style()使用标准的wp_enqueue_style()和wp_enqueue_scripts()函数。

但是，您需要确保使用正确的脚本依赖项。 要在编辑器上排队脚本，可以使用以下依赖项：

• 脚本： array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-components' )
• 样式： array( 'wp-edit-blocks' )

当同时为编辑器和前端添加样式时，可以使用以下依赖项：

• array( 'wp-blocks' )

这里值得一提的是，我们的my-custom-block插件排队的实际文件是JavaScript和CSS的编译版本，而不是包含JSX和Sass源代码的文件。

这只是手动使文件入队时要记住的事情。 如果您尝试加入包括React，ES6 +或Sass的原始源代码，那么您将遇到许多错误。

这就是为什么使用诸如create-guten-block类的工具包会很有用，因为它会自动为您处理和排队脚本！

注册古腾堡块

要创建一个新块，我们需要通过调用registerBlockType()并传入块名和一个配置对象来向Gutenberg registerBlockType() 。 该对象具有许多需要适当说明的属性。

首先，让我们看一下块名称。 这是第一个参数，是由两部分组成的字符串，即名称空间和块名称本身，并用正斜杠字符分隔。

例如：

registerBlockType(
    'block-namespace/block-name',
    {
        // configuration object
    }
);

如果要在插件中注册多个块，则可以使用相同的名称空间来组织所有块。 但是，名称空间对于您的插件必须是唯一的，这有助于防止命名冲突。 如果已经通过另一个插件注册了具有相同名称的块，则会发生这种情况。

第二个registerBlockType()参数是一个设置对象，需要指定许多属性：

• title （字符串）：在编辑器中显示为可搜索的块标签
• description （可选字符串）：描述块的用途
• icon （可选的Dashicon或JSX元素）：与块关联的图标
• category （字符串）：块出现在“ 添加块”对话框中的位置
• keywords （可选数组）：块搜索中最多使用三个关键字
• attributes （可选对象）：处理动态块数据
• edit （函数）：返回要在编辑器中呈现的标记的函数
• save （函数）：一个函数，该函数返回要在前端渲染的标记
• useOnce （可选的布尔值）：限制块被添加多次
• supports （可选对象）：定义块支持的功能

假设我们使用JSX进行块开发，这是一个非常简单的块的示例registerBlockType()调用的样子：

registerBlockType(
    'my-unique-namespace/ultimate-block',
    {
        title: __( 'The Best Block Ever', 'domain' ),
        icon: 'wordpress',
        category: 'common',
        keywords: [ __( 'sample', 'domain' ), __( 'Gutenberg', 'domain' ), __( 'block', 'domain' ) ],
        edit: () => <h2>Welcome to the Gutenberg Editor!</h2>,
        save: () => <h2>How am I looking on the front end?</h2>
    }
);

请注意，我们怎么没包括的条目description ， attributes ， useOnce ，并supports性能？ 可以安全地忽略任何可选字段（与您的块无关）。 例如