WordPress5.0注册block


为了使发布内容更加简单,我们创建一个新内容类型–block,它可以让你在一篇文章选择不同样式块状区域。而不像之前的完全靠自己编辑,接下来我会详细解释这一部分。

包含静态内容的block是由JavaScript文件使用registerBlockType函数注册的。此函数负责指定block的形式,为的是让编辑器理解block的显示方式、编辑时的更改操作以及最终保存在内容中所需的行为。

加载js

虽然block在编辑器中的操作是在javascript中实现的,但是您需要注册block服务器端,以确保在加载编辑器时使用到javascript。使用wp_register_script和wp_register_style注册js和css,然后使用editor_script和editor_style 设置将它们与指定block关联起来。

<?php

function gutenberg_boilerplate_block() {
    wp_register_script(
        'gutenberg-boilerplate-es5-step01',
        plugins_url( 'step-01/block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element' )
    );

    register_block_type( 'gutenberg-boilerplate-es5/hello-world-step-01', array(
        'editor_script' => 'gutenberg-boilerplate-es5-step01',
    ) );
}
add_action( 'init', 'gutenberg_boilerplate_block' );

注意:
wp-blocks包括注册block类型和相关功能
wp-element包括WordPress Element abstraction为block提供的html结构
如果要使用wp-editor中的组件(例如RichText组件),还需要将wp-editor添加到里头。

注册block

在js已经加载的情况下,我们来看block的实现:

var el = wp.element.createElement,
    registerBlockType = wp.blocks.registerBlockType,
    blockStyle = { backgroundColor: '#900', color: '#fff', padding: '20px' };

registerBlockType( 'gutenberg-boilerplate-es5/hello-world-step-01', {
    title: 'Hello World (Step 1)',

    icon: 'universal-access-alt',

    category: 'layout',

    edit: function() {
        return el( 'p', { style: blockStyle }, 'Hello editor.' );
    },

    save: function() {
        return el( 'p', { style: blockStyle }, 'Hello saved content.' );
    },
} );

注册一个block后,马上可以看到它出现在编辑器插入器对话框中,使用标题、图标和类别中的值组织其显示。您可以从内置DashIcons图标集中选择一个图标,或者使用自定义SVG图像作为block图标。
block名最好以主题特有的命名方式作为前缀。以防止多个主题使用相同名称注册block时发生冲突。
“编辑”和“保存”功能分别描述编辑器上下文中块的结构和保存的内容。虽然在这个简单的示例中差异并不明显,但在下面的部分中,我们将探讨如何使用这些功能在编辑器预览中启用block的自定义。

联系我们

WPMEE


Copyright © 甘肃第四维网络技术有限公司 2019
本站由UCloud提供云计算服务