如何在WordPress中创建自定义块

2019/03/02

WordPress 5.0发布后,编辑器推出了一个全新的古腾堡编辑器。该编辑器采用的是基于块的编辑方式。通过这种方式,把WordPress编辑器功能提升了很多。也就是说,把所有的内容都是通过块的方式进行封装编辑。那么如何在WordPress中自定义块呢?下面笔者通过两种方式进行讲解。

在WordPress中自定义块有两种方式:

  1. 手动方式;
  2. 插件方式。

如何手动创建自定义块(分2步)

古腾堡编辑器的Block API是您需要的工具。在本节中,我将帮助您设置一个新的插件,以便为您的编辑器添加一个块。为此,您只需要两个文件(以及一些代码)。

第1步:创建一个插件来调用您的块文件

创建自定义古腾堡编辑器块的最简洁方法是设置一个“排队”或调用块脚本的插件,并将它们添加到编辑器中。

要开始使用,请使用FileZilla等客户端通过SFTP访问您的网站。进入后,导航到WordPress安装文件夹并进入wp-content/plugins目录。在里面,你会找到你网站上所有插件的文件夹:

现在,右键单击目录中的任意位置并创建一个新文件夹。我会打电话给我比如test-block

打开文件夹,创建一个新的plugin.php文件(可以给出一个更相关的名称),然后打开空文件,并添加以下代码:

<?php
/**
 * Plugin Name: Test Plugin
 * Author: dianjinwp
 * Version: 1.0.0
 */
 
function loadMyBlock() {
  wp_enqueue_script(
    'my-new-block',
    plugin_dir_url(__FILE__) . 'test-block.js',
    array('wp-blocks','wp-editor'),
    true
  );
}
  
add_action('enqueue_block_editor_assets', 'loadMyBlock');

这会创建一个将块脚本排入队列的函数 – test-block.js在本例中。当然,这个文件还不存在(但很快就会存在)。

此外,该功能还包括两个脚本依赖项 – wp-blockswp-editor。前者处理其他功能中的块注册,而wp-editor包含您可能需要的几个基本组件,例如Rich Text。

第2步:注册块并配置其属性

准备好PHP文件后,就可以设置test-block.jsJavaScript文件了。继续在同一个插件目录中创建此文件plugin.php

文件准备好后,使用文本编辑器打开它,准备编写代码!此示例是一个非常简单的块,可让您为页面添加带边框的文本框:

* 该区注册了一个新的块,设置图标和分类,并显示字段类型. */
 
wp.blocks.registerBlockType('brad/border-box', {
  title: '简易盒',
  icon: 'smiley',
  category: 'common',
  attributes: {
    content: {type: 'string'},
    color: {type: 'string'}
  },
 
/* 这里配置内容和颜色盒的字段工作方式, 并设置了必要的元素 */
 
  edit: function(props) {
    function updateContent(event) {
      props.setAttributes({content: event.target.value})
    }
    function updateColor(value) {
      props.setAttributes({color: value.hex})
    }
    return React.createElement(
      "div",
      null,
      React.createElement(
        "h3",
        null,
        "简易盒"
      ),
      React.createElement("input", { type: "text", value: props.attributes.content, onChange: updateContent }),
      React.createElement(wp.components.ColorPicker, { color: props.attributes.color, onChangeComplete: updateColor })
    );
  },
  save: function(props) {
    return wp.element.createElement(
      "h3",
      { style: { border: "3px solid " + props.attributes.color } },
      props.attributes.content
    );
  }
})

正如您所看到的,这使用JavaScript和React来设置所有内容。我还在代码中添加了一些注释,但总而言之,它注册并配置了基本的块属性。在初始部分之后,我配置了字段的工作方式。此示例包括边框的文本字段和颜色选择器。

之后您可以启用该自定义的插件,来使用我们创建的简易盒了。

您可以使用插件来创建自定义块

如果您想了解块API的工作原理,学习如何手动创建自定义块非常有用。但是,您可以使用WordPress插件来帮助您更快地创建块。这里提供2个插件供测试。

1. BLOCK LAB

简而言之,Block Lab使您可以直接从WordPress仪表板创建自定义块。该插件允许您设置任意数量的块,您可以设置名称,类别,图标,描述,并指明要为每个块包含哪些字段。

但是,请注意,您仍需要进行一些轻量编码来设置每个块的模板。即便如此,您仍然可以跳过注册每个块并将其脚本排入队列的大部分内容。

2. LAZY BLOCKS

如果您根本不想处理任何代码,Lazy Blocks可能是你需要的。此插件使您可以使用预先构建的元素列表创建自定义块,包括文本,密码和图像字段,以及颜色和日期选择器等。

可用元素的选择足够广泛,您可以将一些很酷的块组合在一起,但如果您想要创建一些非常具体的内容,那么使用更高级的解决方案可能会更好。

发表评论

电子邮件地址不会被公开。 必填项已用*标注