WordPress5.0 编辑block属性


我们的内置的block仍然不是很有趣,因为它缺少自定义消息外观的选项。在本节中,我们将实现一个RichText字段,允许用户指定自己的消息。在这样做之前,了解块的状态(“属性”)是如何保持和随时间变化的,这一点很重要。

属性

到目前为止,editsave函数返回了一个段落元素的简单样式。我们还了解了这些函数如何负责描述block外观的结构。如果用户更改了block,则可能需要更改此结构。为实现此目的,在整个编辑会话期间将block的状态保持为纯JavaScript对象,并且在发生更新时,edit再次调用该函数。换句话说:block的输出是其属性的函数

将块的表示维护为JavaScript对象的一个​​挑战是我们必须能够从保存的帖子内容中再次提取该对象。这是通过块类型的attributes属性实现的:

var el = wp.element.createElement,
    registerBlockType = wp.blocks.registerBlockType,
    RichText = wp.editor.RichText;

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

    icon: 'universal-access-alt',

    category: 'layout',

    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        }
    },

    edit: function( props ) {
        var content = props.attributes.content;

        function onChangeContent( newContent ) {
            props.setAttributes( { content: newContent } );
        }

        return el(
            RichText,
            {
                tagName: 'p',
                className: props.className,
                onChange: onChangeContent,
                value: content,
            }
        );
    },

    save: function( props ) {
        var content = props.attributes.content;

        return el( RichText.Content, {
            tagName: 'p',
            className: props.className,
            value: content
        } );
    },
} );

注册block类型时,该attributes属性描述了您希望在editsave函数中接收的属性对象的形状。每个值都是一个源函数,用于从块的标记中查找所需的值。

在上面的代码片段中,加载编辑器时,我们将提取content值作为已保存帖子标记中段落元素的HTML。

组件和RichText组件

早期的示例使用createElement函数来创建DOM节点,但也可以将此行为封装到“组件”中。这种组件有助于作为一种模式来共享共同的行为并将复杂性隐藏到自包含的单元中。有许多组件可用于实现块。您可以在上面的代码段中看到一个这样的组件:RichText组件。

RichText组件可以被视为一个超级动力textarea元素,可以进行丰富的内容编辑,包括粗体,斜体,超链接等。它与传统帖子编辑器的单个编辑器区域不同,实际上是由相同的TinyMCE驱动的图书馆。

将此行为实现为组件使您可以作为块实现者更加细化可编辑字段。您的块可能根本不需要RichText,或者它可能需要许多独立RichText元素,每个元素都在整个块状态的子集上运行。

因为RichText允许嵌套节点,所以在html从保存的内容中提取值时,通常会将其与属性源结合使用。您还将RichText.Contentsave函数中使用输出RichText值。

联系我们

WPMEE


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