如何为WordPress Gutenberg准备插件

最新推荐文章于 2023-07-02 15:07:43 发布

cunjie3951

最新推荐文章于 2023-07-02 15:07:43 发布

阅读量446

点赞数

文章标签： python javascript java js php ViewUI

古腾堡（Gutenberg）是一个全新的编辑界面，它将改变人们使用WordPress的方式。您准备好进行这种更改了吗？如果您是插件开发人员，则需要为Gutenberg准备自己的插件。

如果您尚未听说过Gutenberg，它是一个新的WordPress编辑器，它将改变您编写内容的方式。在古腾堡（Gutenberg）下，将设置为成为版本5的WordPress核心的一部分，内容中的每个元素都将是一个块（段落，图像，块引用，标题等类型）。

甚至metabox也不一样。

简单的元框应该与Gutenberg一起使用，尽管它们的显示方式会有所不同。但是，如果您有复杂的metabox，例如Yoast SEO插件中的metabox，则必须针对Gutenberg进行测试，并可能只为Gutenberg创建一个新的metabox。

那么哪些插件需要为Gutenberg更新？具有以下功能的插件：

自定义帖子类型
复杂的元框
简码
或编辑器功能

作为插件开发人员，我们可以采用两种方法：支持 Gutenberg或禁用 Gutenberg。支持古腾堡（Gutenberg）意味着我们将付出更多的精力来重构我们的代码（甚至可能重复一些代码），以便我们的插件用户在使用它时不会遇到任何困难。

如何禁用古腾堡

如果我们决定不支持古腾堡，那么我们需要禁用古腾堡。我们可以完全禁用古腾堡，也可以仅在使用插件的地方禁用它。在本节中，我将使用自己的插件“ Simple Giveaways”，该插件具有自定义帖子类型和元框。

完全禁用古腾堡

我不建议您通过插件执行此操作。相反，您可能想通过管理员通知来通知您的插件用户，您的插件不适用于Gutenberg，因此他们可以恢复为经典编辑器。

可以通过安装插件Classic Editor来完成还原。或者，您可以为插件创建一个新设置，然后执行以下操作将其禁用：

<?php

add_filter( 'gutenberg_can_edit_post_type', '__return_false' );

可以在函数gutenberg_can_edit_post_type找到此过滤器，该函数用于检查是否可以将Gutenberg加载到该特定帖子类型上。如果我们总是返回false ，则意味着我们将完全不支持古腾堡。

按帖子类型禁用古腾堡

如果您的插件具有自定义帖子类型，则您可能要禁用该特定帖子类型的Gutenberg。要为您的自定义帖子类型禁用古腾堡，您只需更改您的帖子类型配置即可。

编辑支持

如果您的帖子类型不支持编辑器，则古腾堡将不会加载。如果您的自定义帖子类型不需要编辑器，则这是适当的。

<?php

$args = array(
	'label'        => __( 'Simple Giveaways', 'giveasap' ),
	'labels'       => $labels,
	'supports'     => array( 
        'title', 
        //'editor', Disabling Gutenberg
        'thumbnail', 
        ),
	'hierarchical' => false,
	// ... 
);
register_post_type( 'giveasap', $args );

REST API支持

也许您需要编辑器，但在REST API中不需要它？如果您不支持REST API，则不会加载Gutenberg。与以上示例类似，我们将在post类型配置中执行此操作。

<?php

$args = array(
	'label'        => __( 'Simple Giveaways', 'giveasap' ),
	// ...
	'show_in_rest' => false, // Disable Gutenberg
	// ...
);
register_post_type( 'giveasap', $args );

通过将参数show_in_rest设置为false ，我们将禁用该帖子类型的古腾堡。

职位类型支持

我们可以使用前面提到的过滤器仅对自定义帖子类型禁用Gutenberg。

<?php

add_filter( 'gutenberg_can_edit_post_type', function( $can_edit, $post_type ){
    if ( $can_edit && 'giveasap' === $post_type ) {
        return false;
    }
    return $can_edit;
}, 20, 2 );

使用此代码，我们正在检查是否使用自定义帖子类型。如果是，则返回false。这不会影响任何其他帖子类型。

使用元框禁用古腾堡

如果您有复杂的元框，则可能会花费很长时间来创建可支持Gutenberg的插件版本。如果是这种情况，您可以禁用古腾堡，直到您可以使用古腾堡的东西。

要使用元框禁用古腾堡，您需要将它们定义为不兼容 。

<?php

add_meta_box( 
    'giveasap_users', 
    __( 'Users', 'giveasap' ), 
    'giveasap_metabox_users', 
    array( 'giveasap' ), 
    'side', 
    'high', 
    array(
        // Not Compatible. Disable Gutenberg.
        '__block_editor_compatible_meta_box' => false,
    )
);

如果您想学习如何使用复杂的元框来支持Gutenberg，则需要学习如何将它们转换为块以及如何保存它们。请务必查看WordPress Gutenberg手册。

如何支持古腾堡

比禁用古腾堡更好的选择是支持它！

由于metabox可能是开箱即用的，因此您在这里没有太多工作（除非它们是高级的，如我们之前所了解）。在支持古腾堡（Gutenberg）时，您将主要工作是为您的短代码甚至小部件创建新的块。

简码也将立即可用。但是，为了提供更好的用户体验，您可能应该为他们做一个障碍。

您可以创建静态和动态块。静态块将完全用JavaScript编写，并且输出HTML将保存在内容中。

动态块有些不同。您还必须创建JavaScript部分，以便它与Gutenberg编辑器一起使用。但是，您还将定义一个PHP函数，当在您的网站的正面显示该内容时将调用该函数来呈现它。

为了理解静态和动态块，让我们看一个简单的示例（一个简单的警报块），并以两种方式实现它。

注册块

要注册一个块，首先我们需要在PHP中定义它，然后在JavaScript中定义它。

<?php
/**
 * Registering Our Blocks
 */
function guten_tuts_block() {
    wp_register_script(
        'guten-tuts',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-i18n' )
    );

    register_block_type( 'guten-tuts/alert', array(
        'editor_script' => 'guten-tuts',
    ) );
    // Our Dynamic block.
    register_block_type( 'guten-tuts/alertdynamic', array(
        'render_callback' => 'guten_tuts_dynamic_alert'
    ) );
}
add_action( 'init', 'guten_tuts_block' );

注册脚本时，我们需要在此处定义依赖项。 wp-block和wp-element依赖性是我们在创建块时需要的依赖项。

我不会详细介绍块或整个API。要了解更多，您应该阅读《古腾堡手册》。

JavaScript阻止文件

我们JavaScript文件block.js的开头将具有以下内容：

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

静态块

现在让我们定义我们的静态块。由于我们的警报只是文本，因此我们需要一个属性： text 。在我们的edit功能（用于编辑器中）中，我们将有一个RichText块。此块使我们可以插入文本，添加样式等。

属性text的定义将告诉古腾堡在div内剥离文本。我们还告诉古腾堡，这将是所有子元素的数组。仅举例来说，此<div><em>em text</em> other text <strong>bold text</strong></div>会转换为三个元素的数组：“ em文本”，“其他文本”和 “粗体”及其结构，例如em和bold 。

这些属性的转换发生在save方法的输出中。

registerBlockType( 'guten-tuts/alert', {
    title: __( 'Guten Tuts - Alert' ),

    icon: 'megaphone',

    category: 'layout',

    attributes: {
        text : {
            type: 'array',
            source: 'children',
            selector: 'div',
        }
    },

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

        function onChangeText( newText ) {
            props.setAttributes( { text: newText } );
        }

        return el(
            RichText,
            {
                tagName: 'div',
                className: props.className,
                onChange: onChangeText,
                value: content,
                isSelected: props.isSelected,
                style: blockStyle
            }
        );
    },

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

        return el( 'div', { style: blockStyle, className: props.className }, text );
    },
} );

动态块

动态块将具有edit方法，但save方法将返回null 。我们这里不需要save方法，因为我们将定义一个PHP回调函数来在前面呈现动态块。

我们之前已经注册了回调guten_tuts_dynamic_alert ：

<?php

// ...
// Our Dynamic block.
register_block_type( 'guten-tuts/alertdynamic', array(
    'render_callback' => 'guten_tuts_dynamic_alert'
) );
// ...

此回调还将接收参数$attributes 。这将是所有已注册属性的数组。该行为与注册简码非常相似。

函数guten_tuts_dynamic_alert将如下所示：

<?php

/**
 * Dynamic output of our Alert
 * 
 * @param array $attributes Block Attributes.
 * 
 * @return string
 */
function guten_tuts_dynamic_alert( $attributes ) {
    if ( ! isset( $attributes['text'] ) || ! $attributes['text'] ) { return; }
    ob_start();
    ?>
    <div style="background:red;color:white;padding:1em;"><?php echo esc_html( $attributes['text'] ); ?></div>
    <?php
    return ob_get_clean();
}

输出只是带有一些文本的div元素。

据我所知，我们不能将RichText用于动态块，因为属性不会更新。如果我错了，请在评论中让我知道！

我们将使用常规input来输入警报的文本。由于这里没有save方法，因此我将属性text定义为简单的字符串。

registerBlockType( 'guten-tuts/alertdynamic', {
    title: __( 'Guten Tuts - Dynamic Alert' ),

    icon: 'megaphone',

    category: 'layout',

    attributes: {
        text : {
            type: 'string', 
            selector: 'div',
        },
    },

    edit: function( props ) {
        var content = props.attributes.text;
        blockStyle['width'] = '100%';
        function onChangeText( e ) {
            var newText = e.target.value;
       
            props.setAttributes( { text: newText } );
        }

        return el(
            'input',
            {
                className: props.className + ' widefat',
                onChange: onChangeText,
                value: content,
                isSelected: props.isSelected,
                style: blockStyle
            }
        );
    },

    save: function( props ) {
        return null;
    },
} );

您将看到一个常规input ，该input的背景颜色和样式与RichText块不同。当然，您可以更改它并模仿相同的样式。

由于我们的PHP呈现的警报的背景颜色与JavaScript代码中定义的背景颜色不同，因此我们也可以在正面看到差异。

结论

为Gutenberg准备插件可能需要很多工作。但是由于Gutenberg与WordPress的其余部分一样可扩展，因此您具有很大的灵活性来支持您在Gutenberg中的插件功能。

立即开始安装Gutenberg并针对您的插件进行测试。

翻译自: https://code.tutsplus.com/tutorials/how-to-prepare-your-plugins-for-wordpress-gutenberg--cms-30877

cunjie3951

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何为WordPress Gutenberg准备插件

古腾堡（Gutenberg）是一个全新的编辑界面，它将改变人们使用WordPress的方式。您准备好进行这种更改了吗？如果您是插件开发人员，则需要为Gutenberg准备自己的插件。如果您尚未听说过Gutenberg，它是一个新的WordPress编辑器，它将改变您编写内容的方式。在古腾堡（Gutenberg）下，将设置为成为版本5的WordPress核心的一部分，内容中的每个元素...
复制链接

扫一扫