修改核心/段落块

时间:2019-01-06 作者:Michael

我正在尝试扩展core/paragraph 阻止向Gutenberg检查器添加其他设置(?)(右侧面板设置)但我遇到了尚未注册的问题。我试着从简单开始,只是想了解正在发生的事情,只是暂时更改块的标题。

我看过许多关于如何实现这一目标的文章/自述/讨论:
-https://riad.blog/2017/10/16/one-thousand-and-one-way-to-extend-gutenberg-today/
-https://github.com/WordPress/gutenberg/tree/master/packages/hooks
-https://wordpress.org/gutenberg/handbook/designers-developers/developers/filters/block-filters/

我最接近的是第一篇文章,在这篇文章中,您取消注册,进行更改,然后重新注册块。唯一的问题是,当我试图注销该块时,它会说Block "core/paragraph" is not registered. :(。

这是我的functions.php 其中,我将块编辑器资源排入队列:

class StarterSite extends Site {
    /** @var string App Version */
    const VERSION = \'0.0.1\';

    public function __construct() {
        parent::__construct();
        $this->register_autoload();
        $this->register_timber();
    }

    ...

    public function backend() {
        add_action(\'init\', [$this, \'register_menus\']);
        add_action(\'after_setup_theme\', [$this, \'theme_supports\']);
        add_theme_support(\'editor-styles\');
        add_action(\'admin_enqueue_scripts\', [$this, \'admin_enqueue_scripts\']);
        add_action(\'enqueue_block_assets\', [$this, \'enqueue_block_editor_assets\']);
    }

    ...

    public function enqueue_block_editor_assets() {
        wp_register_script(\'block-js\', get_stylesheet_directory_uri() . \'/dist/js/blocks.js\', [\'wp-blocks\'], self::VERSION, true);
        wp_enqueue_script(\'block-js\');
        wp_enqueue_style(\'site-gutenberg-css\', get_stylesheet_directory_uri() . \'/dist/css/gutenberg.css\', [\'wp-edit-blocks\'], \'1.0.0\', \'all\');
    }
}


$site = new StarterSite();

if (!is_admin() || wp_doing_ajax()) {
    $site->frontend();
}
else {
    $site->backend();
}
这是我的JS,它被编译到dist/js/blocks.js 文件:

console.log(wp.blocks.getBlockTypes());

let paragraphBlock = wp.blocks.unregisterBlockType(\'core/paragraph\');
paragraphBlock.title = \'Text\';
wp.blocks.registerBlockType(\'core/paragraph\', paragraphBlock);
Theconsole.log(wp.blocks.getBlockTypes()); 在浏览器控制台中显示:

因此,在这一点上,问题肯定是因为核心块尚未注册,但如何等待这些块注册?我如何等待注册特定块才能知道我可以修改该块?

UPDATE<我找到了this documentation

因此,我添加了以下代码片段:

wp.blocks.registerBlockStyle( \'core/paragraph\', {
    name: \'container\',
    label: \'Fixed Container\'
} );
wp.blocks.registerBlockStyle( \'core/paragraph\', {
    name: \'container-fluid\',
    label: \'Fluid Container\'
} );
这将在块中添加“样式”部分:enter image description here

这是推荐的解决方案吗?

如果是,如何将其应用于ALL 以编程方式阻止?我仍然遇到加载问题,其中并非所有块都可用于我的脚本。例如,当我在脚本执行时循环使用可用块时:

wp.blocks.getBlockTypes().forEach(function (e) {
    console.log(e);
});
我得到以下信息:enter image description here

1 个回复
SO网友:Jon Paul Vivere

与您的目标非常相似,我最近想向所有现有块添加块样式。我发现在加载一个编辑器页面时,我必须等待WP editor JS数据填充,然后再添加我的样式,而且,这里没有回调挂钩。所以我选择添加一个不太优雅的延迟循环。

我的解决方案是可行的,但它还不够健壮(例如,延迟循环应该在一段时间后退出,如果将来的WP更新改变了“块类型”结构,应该会正常失败,等等),但它可能会让您朝着可行的方向前进。

使用WordPress Block Filters tutorial 为管理员/编辑器页面加载指定的JavaScript文件。下面是我的代码中实现此功能的重要片段:

"use strict";
wp.domReady(function () {

    function addFullWidthStylesToAll(block_types) {
        for (let block_type of block_types) {
            wp.blocks.registerBlockStyle(block_type.name, {
                name: \'full-page-width\',
                label: \'Full Page Width\',
            });
        }

    }

    (function waitForBlocksDataToFill() {
        let block_types = wp.data.select(\'core/blocks\').getBlockTypes();
        if (0 === block_types.length) {
            setTimeout(waitForBlocksDataToFill, 100);

        } else {
            addFullWidthStylesToAll(block_types)

        }
    })();

});

相关推荐