跳至正文

发现古腾堡：WordPress 的最新编辑器指南

发现古腾堡：WordPress 的最新编辑器指南

Gutenberg是 WordPress 的新编辑器，它将完全取代当前的TinyMCE 驱动的编辑器。这是一个雄心勃勃的项目，可以说它将在许多方面改变 WordPress，并将影响普通最终用户和开发人员，特别是那些依赖编辑器屏幕在 WordPress 上工作的人。这是它的样子。

右侧边栏打开的古腾堡编辑器并显示一个块选项
很明显，它的灵感来自于 Medium 编辑器 UI。

Gutenberg 还在 WordPress 中引入了一种称为“块”的新范例。

“块”是一个抽象术语，用于描述由网页内容或布局组成的标记单元。这个想法结合了我们今天在 WordPress 中通过短代码、自定义 HTML 实现的概念，并将发现嵌入到一个单一的一致的 API和用户体验中。

另请阅读： 如何自定义 WordPress 编辑器样式

设置项目

知道 Gutenberg 是建立在 React 之上的事实后，一些开发人员担心入门级开发人员开发 Gutenberg 的门槛太高。

如果您刚刚开始使用 React.js，设置 React.js 可能会非常耗时且令人困惑。您至少需要 JSX 转换器、Babel，根据您的代码，您可能需要一些 Babel 插件，以及像Webpack、Rollup或Parcel这样的 Bundler 。

幸运的是，WordPress 社区中的一些人挺身而出，并试图让开发 Gutenberg 尽可能容易，让每个人都可以遵循。今天，我们有一个工具可以生成 Gutenberg 样板文件，这样我们就可以立即开始编写代码，而不是被工具和配置弄糊涂了。

创建谷腾块

这create-guten-block是 Ahmad Awais 发起的一个项目。它是一个零配置工具包( #0CJS)，允许您使用一些现代堆栈预设开发 Gutenberg 块，包括 React、Webpack、ESNext、Babel、ESLint 和 Sass。按照说明开始使用 Create Guten Block。

使用 ES5（ECMAScript 5）

使用所有这些工具来创建一个简单的“hello-world”块可能看起来太多了。如果您想保持堆栈精简，您实际上可以使用您可能已经熟悉的普通好 ol’ ECMAScript 5 开发一个 Gutenberg 块。如果您的计算机上安装了 WP-CLI 1.5.0，您可以简单地运行……

1个
wp scaffold block <slug> [--title=<title>] [--dashicon=<dashicon>] [--category=<category>] [--theme] [--plugin=<plugin>] [--force]

…为您的插件或主题生成古腾堡块样板。这种方法更明智，特别是对于您在古腾堡时代之前开发的现有插件和主题。

您可能希望将这些块集成到您的插件或主题中，而不是创建一个新插件来容纳古腾堡块。为了让每个人都能轻松理解本教程，我们将使用 ECMAScript 5 和 WP-CLI。

注册一个新块

Gutenberg 目前作为插件开发，只要团队认为准备就绪，就会合并到 WordPress 5.0。因此，目前，您需要从中的插件页面wp-admin安装它。安装并激活它后，如果您使用的是 Windows 计算机，请在终端或命令提示符中运行以下命令。

1个
wp scaffold block series --title="HTML5 Series" --theme

此命令将为当前活动的主题生成一个块。我们的区块将包含以下文件：

1个
2个
3个
4个
5个
6个
.
├── series
│   ├── block.js
│   ├── editor.css
│   └── style.css
└── series.php

functions.php让我们在我们的主题中加载我们块的主文件：

1个
2个
3个
if ( function_exists( 'register_block_type' ) ) {
  require get_template_directory() . '/blocks/series.php';
}

请注意，我们将文件加载包含在条件中。这确保了与以前的 WordPress 版本的兼容性，我们的块仅在 Gutenberg 存在时加载。我们的 Block 现在应该可以在 Gutenberg 界面中使用了。

这是我们插入块时的样子。

古腾堡 API

Gutenberg 引入了两组 API 来注册一个新的 Block。如果我们查看series.php，我们会发现以下代码注册了我们的新块。它还在前端和编辑器上加载样式表和 JavaScript。

1个
2个
3个
4个
5个
register_block_type( 'twentyseventeen/series', array(
    'editor_script' => 'series-block-editor',
    'editor_style' => 'series-block-editor',
    'style' => 'series-block',
) );

正如我们在上面看到的，我们的 Block 是 named twentyseventeen/series， Block 名称必须是唯一的并且具有命名空间，以避免与其他插件带来的其他 Block 发生冲突。

此外，古腾堡还提供了一组新的 JavaScript API 来与编辑器中的“块”界面进行交互。由于 API 非常丰富，我们将重点关注一些我认为您应该了解的细节，以获得一个简单但功能强大的 Gutenberg Block。

wp.blocks.registerBlockType

首先，我们将调查wp.blocks.registerBlockType. 此函数用于向古腾堡编辑器注册一个新的“块”。它需要两个参数。第一个参数是 Block 名称，它应该跟在register_block_typePHP 端函数中注册的名称之后。第二个参数是一个对象，它定义了 Block 属性，如标题、类别和一些用于呈现 Block 界面的函数。

1个
2个
3个
4个
5个
6个
7
8个
9
var registerBlockType = wp.blocks.registerBlockType;
 
registerBlockType( 'twentyseventeen/series', {
    title: __( 'HTML5 Series' ),
    category: 'widgets',
    keywords: [ 'html' ],
    edit: function( props ) { },
    save: function( props ) { }
} );

wp.element.createElement

此功能允许您在帖子编辑器的“块”中创建元素。该函数基本上是React函数wp.element.createElement的抽象，因此它接受相同的参数集。第一个参数采用元素的类型，例如段落、a或 a，如下所示：createElement()spandiv

1个
wp.element.createElement('div');

我们可以将函数别名为一个变量，这样写起来会更短。例如：

1个
2个
var el = wp.element.createElement;
el('div');

如果你更喜欢使用新的 ES6 语法，你也可以这样做：

1个
2个
const { createElement: el } = wp.element;
el('div');

我们还可以在第二个参数上添加名称或元素属性，如下所示：classid

1个
2个
3个
4个
5个
var el = wp.element.createElement;
el('div', {
    'class': 'series-html5',
    'id': 'series-html-post-id-001'
});

如果没有内容，我们创建的内容div将毫无意义。我们可以在第三个参数的参数上添加内容：

1个
2个
3个
4个
5个
var el = wp.element.createElement;
el('p', {
    'class': 'series-html5',
    'id': 'series-html-post-id-001'
}, 'This article is part of our "HTML5/CSS3 Tutorials series" - dedicated to help make you a better designer and/or developer. Click here to see more articles from the same series' );

wp.components

wp.components顾名思义，它包含古腾堡组件的集合。这些组件在技术上是React 自定义组件，包括 Button、Popover、Spinner、Tooltip 和许多其他组件。我们可以将这些组件重用到我们自己的 Block 中。在下面的示例中，我们添加了一个按钮组件。

1个
2个
3个
4个
var Button = wp.components.Button;
el( Button, {
    'class': 'download-button',
}, 'Download' );

属性

Attributes 是在我们的 Block 中存储数据的方式，这些数据可以是内容、颜色、对齐方式、URL 等。我们可以从传递给函数的 Properties 中获取属性，如下所示edit()：

1个
2个
3个
4个
5个
6个
7
8个
edit: function( props ) {
    var content = props.attributes.seriesContent;
 
    return el( 'div', {
        'class': 'series-html5',
        'id': 'series-html-post-id-001'
    }, content );
}

要更新属性，我们使用setAttributes()函数。通常我们会更改某些操作的内容，例如单击按钮、填写输入、选择选项等。在下面的示例中，我们使用它来添加 Block 的后备内容，以防发生意外情况到我们的seriesContent属性。

1个
2个
3个
4个
5个
6个
7
8个
9
10
11
12
13
14
15
16
17
edit: function( props ) {
 
    if ( typeof props.attributes.seriesContent === 'undefined' || ! props.attributes.seriesContent ) {
        props.setAttribute({
            seriesContent: 'Hello World! Here is the fallback content.'
        })
    }
 
    var content = props.attributes.seriesContent;
 
    return [
        el( 'div', {
            'class': 'series-html5',
            'id': 'series-html-post-id-001'
        }, content ),
    ];
}

保存块

该save()函数的工作方式与 类似edit()，不同之处在于它定义了要保存到 post 数据库的 Block 的内容。保存块内容非常简单，如下所示：

1个
2个
3个
4个
5个
6个
7
8个
9
10
11
12
13
14
15
save: function( props ) {
 
    if ( ! props || ! props.attributes.seriesContent ) {
        return;
    }
 
    var content = props.attributes.seriesContent;
 
    return [
        el( 'div', {
            'class': 'series-html5',
            'id': 'series-html-post-id-001'
        }, content ),
    ];
}

下一步是什么？

古腾堡将使 WordPress 生态系统变得更好（或可能更糟）。它使开发人员能够采用一种新的方式来开发 WordPress 插件和主题。古腾堡只是一个开始。很快，“块”范式将扩展到 WordPress 的其他领域，例如设置 API 和小部件。

深入学习 JavaScript；这是进入古腾堡并与 WordPress 行业的未来保持联系的唯一途径。如果您已经熟悉 JavaScript 基础知识、怪癖、功能、工具、优点和缺点，我真的相信您会跟上古腾堡的速度。

如前所述，Gutenberg 公开了丰富的 API，足以对您的 Block 执行几乎任何操作。您可以选择是使用普通的旧 JavaScript、使用 ES6 语法的 JavaScript、React 还是 Vue 来编写您的 Block。

想法和灵感

我创建了一个非常（非常）简单的 Gutenberg Block，您可以在我们的 Github 帐户的存储库中找到它。此外，我还整理了一些存储库，您可以从中激发灵感来构建更复杂的 Block。

进一步参考

标签: