WordPress Gutenberg Block API：扩展块

最新推荐文章于 2024-06-20 09:36:22 发布

cunjie3951

最新推荐文章于 2024-06-20 09:36:22 发布

阅读量297

点赞数

文章标签： python java javascript vue js ViewUI

欢迎回到有关使用WordPress Gutenberg Block API创建自定义块的系列文章。本教程全部关于扩展我们在上一篇文章中创建的随机图像块。我们可以添加一个下拉控件来选择图像类别。我们将通过添加更多的阻止选项来继续进行自定义，以继续进行此操作。

具体来说，我们将看到如何在编辑器的各个部分中添加块设置。没错，您不仅限于直接在块本身上添加块控件！

最终的my-custom-block插件代码可以下载。只需单击右侧边栏中的链接，然后将zip文件下载到您的计算机，然后像安装其他任何WordPress插件一样安装它即可。您也可以在我们的GitHub存储库中找到源代码。

Gutenberg的开发正在以合理的速度进行，自上一教程发布以来，已有一个新的重要版本。本教程中使用的Gutenberg版本已更新至3.0.1，某些编辑器UI可能看起来与本系列以前的教程中显示的屏幕截图略有不同。

让我们扩展！

我们在上一教程中添加的下拉控件位于编辑器内部，位于随机图像标记的正下方。这很方便，但是我们还有其他选择。

我们还可以将块控件添加到弹出工具栏（在选择了块时出现）和块检查器面板。

在上面的屏幕截图中，我们可以看到段落块[1]的工具栏控件，以及面板检查器[3]中的相关控件。位置[2]显示了我们随机图像块的下拉控件。

您可能已经在考虑为自己的块设置选择哪个位置，但是您不必仅选择这些位置之一。它们不是互斥的。例如，对于段落块（如上所示），您可以看到设置在块检查器面板和工具栏之间进行了拆分。

此外，完全可以在编辑器中的不同位置使用两个单独的控件来影响相同的设置。您可能不想经常执行此操作，但是了解如何实现它很有用，因此稍后我们将介绍如何执行此操作。

直接块设置

让我们从最简单的向功能块添加功能的方法开始，该方法直接位于功能块的edit功能内。我们已经使用了这种方法来添加我们的随机图像下拉控件，因为它几乎不需要额外的工作。

我们不会在块本身上添加新控件，但是我们可以调整下拉控件的行为，使其更加直观。为了使其尽可能接近前端渲染，除非选择了该块，否则我们可以限制下拉菜单的显示。

现在让我们进行更改。如果您是上次学习本教程，请在您喜欢的编辑器中打开/my-custom-block/src/random-image/index.js 。这是我们随机图像块的主要JavaScript文件。

传递给所有街区的道具之一是isSelected ，它保持街区可见性的状态。我们可以使用它有条件地显示类别下拉控件。

首先，从props对象中拉出isSelected并将其添加到edit函数内的常量列表中。这很有用，因此我们可以使用缩写名称（即isSelected而不是props.isSelected ）进行props.isSelected 。

const { attributes: { category }, setAttributes, isSelected } = props;

接下来，我们可以使用此属性来确定是否应显示下拉控件：

{ isSelected && (
    <form onSubmit={ setCategory }>
        <select value={ category } onChange={ setCategory }>
            <option value="animals">Animals</option>
            <option value="arch">Architecture</option>
            <option value="nature">Nature</option>
            <option value="people">People</option>
            <option value="tech">Tech</option>
        </select>
    </form>
) }

这是isSelected为true的一种isSelected测试方式，因为我们不能在JSX代码内使用成熟JavaScript if语句。

确保您仍在监视文件中的更改，以便将任何块源代码（JSX，ES6 +，Sass等）都转换为有效JavaScript和CSS。如果您当前不在观察文件的更改，请在my-custom-block插件根文件夹中打开一个命令行窗口，然后输入npm start 。

打开古腾堡（Gutenberg）编辑器，然后添加随机图像块。这次，如果尚未单击该块，则下拉控件不可见。

这使块具有更多的交互感觉。

工具栏控件

如果您使用了Gutenberg的任何核心块（例如，段落块），那么您将熟悉工具栏设置。选择“段落”块后，将出现一个弹出工具栏，其中包含用于设置文本格式的按钮。对于具有开/关类型状态的块设置（例如，文本对齐或粗体或斜体格式），这种类型的控件非常有用。

我们将使用内置的对齐工具栏控件来允许下拉图像类别控件向左（默认），向右或居中对齐。

首先，我们需要从wp.blocks拉出AlignmentToolBar和BlockControls组件。这些使我们能够在选中块上方的浮动工具栏中显示对齐控件。这些是我们可以在自己的模块中使用的核心组件的一部分。

const {
    AlignmentToolbar,
    BlockControls,
    registerBlockType
} = wp.blocks;

BlockControls组件充当工具栏容器，并且AlignmentToolbar位于其中。

我们仍然需要手动连接对齐工具栏的行为，可以通过添加新的categoryAlign属性来存储块对齐状态（左，右或中心）来实现。

现在，我们的attributes对象包含两个设置。

attributes: {
    category: {
        type: 'string',
        default: 'nature'
    },
    categoryAlign: {
        type: 'string'
        default: ''
    }
}

categoryAlign属性的默认值为一个空字符串，这将导致默认情况下不应用任何对齐方式。

要引用新属性，我们可以像对下拉category属性一样将其值拉入其自己的常量变量。

const { attributes: { category, categoryAlign }, setAttributes, isSelected } = props;

现在我们需要做的就是将两个新组件放入edit功能并配置属性。

<BlockControls>
    <AlignmentToolbar
        value={ categoryAlign }
        onChange={ value => setAttributes( { categoryAlign: value } ) }
    />
</BlockControls>

如您所见，我们需要做的就是将Alignmenttoolbar的value属性分配给categoryAlign属性，并在每次单击新的工具栏按钮时调用setAttributes函数。该函数反过来更新categoryAlign属性，并使所有内容保持同步。

要应用下拉控件的对齐样式，我们需要在表单元素中添加一个style属性。

<form onSubmit={ setCategory } style={ {textAlign: categoryAlign} }>

请注意，我们不需要此控件来影响前端的任何内容，因此我们不需要向该块的save函数添加任何代码。

添加设置面板

块检查器面板为您提供了一个较大的区域来添加块控件，并且是放置更复杂控件的理想位置。

我们将集中精力在检查器面板中添加两个下拉控件。第一个将是类别下拉控件的副本，用于选择随机图像的类型。这演示了如何使多个控件更新公共属性。

当一个控件更新时，相应的控件也会自动更新！但是，实际上，通常每个设置只需要一个控件。

第二个下拉控件将允许您选择应用于随机图像的滤镜。 PlaceIMG Web服务支持两种类型的过滤器-灰度和棕褐色-我们可以通过在HTTP请求URL中简单地添加sepia或grayscale来在它们之间进行选择。如果我们不指定过滤器，则将返回标准的彩色图像。

这两个下拉菜单的代码非常相似，因此我们将它们添加在一起。

首先，让我们定义所需的新块和组件。

const {
    AlignmentToolbar,
    BlockControls,
    registerBlockType,
    InspectorControls
} = wp.blocks;

const {
    PanelBody,
    PanelRow
} = wp.components;

const {
    Fragment
} = wp.element;

在这里，新变量是InspectorControls ， PanelBody ， PanelRow和Fragment ，它们均用于帮助创建检查器面板UI。

当您需要从edit或save功能返回多个顶级元素但又不想将它们包装在将要输出的元素中时， <Fragment>组件非常有用。

<Fragment>根本不会在前端输出任何标记，并且就像一个不可见的容器。这只是返回多个顶级元素的一种便捷方法，它是以前的返回元素数组的替代方法。

我们只需要添加一个名为imageFilter新属性，因为现有的category属性可以重用。

attributes: {
    category: {
        type: 'string',
        default: 'nature'
    },
    categoryAlign: {
        type: 'string',
        default: ''
    },
    imageFilter: {
        type: 'string',
        default: ''
    }
}

在edit函数内部，我们需要添加一个引用了new属性的新变量。

const { attributes: { category, categoryAlign, imageFilter }, setAttributes, isSelected } = props;

添加块检查器面板非常容易。我们将使用的组件结构如下：

<InspectorControls>
    <PanelBody>
        <PanelRow>
            ...
        </PanelRow>
        <PanelRow>
            ...
        </PanelRow>
    </PanelBody>
    <PanelBody>
        <PanelRow>
            ...
        </PanelRow>
        <PanelRow>
            ...
        </PanelRow>
    </PanelBody>
</InspectorControls>

<InspectorControls>组件充当块检查器容器，而<PanelBody>定义各个可折叠部分。在其中的每个内部，您可以具有任意数量的<PanelRow>组件，这些组件又包含您的控件。

我们已经为类别下拉控件定义了标记，可以重复使用。为此，请将其抽象为一个单独的函数：

function showForm() {
    return (
        <form onSubmit={ setCategory } style={ {textAlign: categoryAlign} }>
            <select id="image-category" value={ category } onChange={ setCategory }>
                <option value="animals">Animals</option>
                <option value="arch">Architecture</option>
                <option value="nature">Nature</option>
                <option value="people">People</option>
                <option value="tech">Tech</option>
            </select>
        </form>
    );
}

每当我们需要呈现类别下拉控件时，都可以引用此函数。块检查器面板的标记必须在块标记之外，因此我们可以使用<Fragment>组件将它们都包装起来，然后再返回它们。

接下来，我们需要为类别和图像过滤器下拉列表添加块检查器组件。这些需要在<PanelRow>组件内部定义，我们还必须定义一个新的回调函数来处理onChange事件。这与上一教程中的类别下拉代码非常相似，因此您现在应该已经熟悉了。

综上所述， edit方法的return函数现在看起来像这样：

return (
    <Fragment>
        <InspectorControls>
            <PanelBody title={ __('Image Settings') }>
                <PanelRow>
                    <label>Set Filter</label>
                    { showForm() }
                </PanelRow>
                <PanelRow>
                    <label>Set Filter</label>
                    <form onSubmit={ setFilter }>
                        <select id="image-filter" value={ imageFilter } onChange={ setFilter }>
                            <option value="">None</option>
                            <option value="sepia">Sepia</option>
                            <option value="grayscale">Grayscale</option>
                        </select>
                    </form>
                </PanelRow>
            </PanelBody>
        </InspectorControls>
        <div className={ props.className }>
            <BlockControls>
                <AlignmentToolbar
                    value={ categoryAlign }
                    onChange={ value => setAttributes( { categoryAlign: value } ) }
                />
            </BlockControls>
            <RandomImage filter={ imageFilter } category={ category } />
            { isSelected && ( showForm() ) }
        </div>
    </Fragment>
);

并且setFilter回调定义为：

function setFilter( event ) {
    const selected = event.target.querySelector( '#image-filter option:checked' );
    setAttributes( { imageFilter: selected.value } );
    event.preventDefault();
}

为了获得过滤后的图像，我们需要更新RandomImage组件，以在每次更改下拉列表时接受新的过滤器值。

function RandomImage( { category, filter } ) {
    if(filter) {
        filter = '/' + filter;
    }
    const src = 'https://placeimg.com/320/220/' + category + filter;
    return <img src={ src } alt={ category } />;
}

请注意，我们如何在edit方法中使用此新组件属性将新的过滤器值发送到PlaceIMG。

<RandomImage filter={ imageFilter } category={ category } />

所有这些代码更改导致使用两个下拉控件创建新的块检查器面板，以更改图像类别和过滤器。

为了使新的filter属性也适用于前端，我们只需要更新save方法。

save: function( props ) {
    const { attributes: { category, imageFilter } } = props;
    return (
        <div>
            <RandomImage filter={ imageFilter } category={ category } />
        </div>
    );
}

前端图像过滤器

结论

在本文中，我们介绍了三种将设置添加到块的方法：

我们仅为每个块添加了基本设置，但是通过添加对多张图像的支持，添加图像标题以及控制样式（例如边框颜色，半径或随机图像大小），我们可以轻松地进一步实现此目的。

我敢肯定，到目前为止，您可能已经有了一些有关创建自己的自定义块的想法。我很想听听您在自己的项目中发现有用的块！

我们只是在Envato Tuts +上开始使用Gutenberg，所以如果您希望在以后的教程中更深入地了解Gutenberg块开发的任何特定方面，请通过评论告知我们。

翻译自: https://code.tutsplus.com/tutorials/wordpress-gutenberg-block-api-extending-blocks--cms-31320

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WordPress Gutenberg Block API：扩展块

欢迎回到有关使用WordPress Gutenberg Block API创建自定义块的系列文章。本教程全部关于扩展我们在上一篇文章中创建的随机图像块。我们可以添加一个下拉控件来选择图像类别。我们将通过添加更多的阻止选项来继续进行自定义，以继续进行此操作。具体来说，我们将看到如何在编辑器的各个部分中添加块设置。没错，您不仅限于直接在块本身上添加块控件！最终的my-custo...
复制链接

扫一扫