古登堡块-使用编辑器更改块的编辑部分。块编辑过滤器。如何更改加价?

时间:2020-10-14 作者:Tim

我想编辑core/heading 阻止以更改其标记<h1>Hello world</h1><h1><span>Hello world</span></h1>. 注意<span> 元素之间。

下面的代码不能正常工作。它将跨度添加到块外部,作为包装器。<span><h1>Hello world</h1></span>. 有没有办法改变<BlockEdit/> 要素目标应该是不要将span元素添加到内容字段中。

我想,如果修改编辑部分,我是否也应该在保存部分上镜像这一点?

const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;
const { InspectorControls } = wp.blockEditor;
const { PanelBody } = wp.components;

const withInspectorControls =  createHigherOrderComponent( ( BlockEdit ) => {

    return ( props ) => {

        if (props.name !== "core/heading") {
            return <BlockEdit { ...props } />;
        }
        
        return (
            <Fragment>
                <span>
                    <BlockEdit { ...props } />
                </span>
            </Fragment>
        );
    };
}, "withInspectorControl" );

wp.hooks.addFilter( \'editor.BlockEdit\', \'my-plugin/with-inspector-controls\', withInspectorControls );

2 个回复
最合适的回答,由SO网友:kraftner 整理而成

不幸的是,现在有一种方法可以改变现有块的标记,而不是在附加标记中对其进行包装:

它接收原始块块编辑组件并返回一个新的包装组件。资料来源:https://developer.wordpress.org/block-editor/developers/filters/block-filters/#editor-blockedit

要在编辑器中实现您当前想要的功能,唯一的方法是创建标题块的您自己的版本,以替换核心块。

但是您可以做的,而且可能是更好的方法,因为您将默认标记保留在数据库中,就是使用render_block 滤器

然后,您可以使用正则表达式或更坚实的东西,如DOM解析器(例如。https://github.com/wasinger/htmlpagedom) 以任意方式更改输出上的标记。

<?php
add_filter(\'render_block\', function ($blockContent, $block) {

    if ($block[\'blockName\'] !== \'core/heading\') {
        return $blockContent;
    }           

    $pattern = \'/(<h[^>]*>)(.*)(<\\/h[1-7]{1}>)/i\';
    $replacement = \'$1<span>$2</span>$3\';
    return preg_replace($pattern, $replacement, $blockContent);

}, 10, 2);
我也写过a blog post 关于配置Gutenberg的各种方法,其中还包括render_block 过滤和一些围绕它的推理,以防你想深入挖掘。

SO网友:Lovor

可以通过使用blocks.registerBlockType 滤器有关详细说明,请参阅to this article by Jim Schofield

但是,不要调用自定义代码中包装的默认编辑和保存函数(如本文中所述),而只需提供您自己的代码即可。

相关推荐

Can I make plugins required?

我正在开发自己的Wordpress主题,将用于多个客户端。它有一个主题选项页面,这样我每次都可以轻松自定义网站,但我也会在我制作的每个网站上使用一些插件(如SEO插件、安全性等)。有没有办法让它们成为“必需的”,这样我就可以得到这些插件的列表,这样当我在新网站上安装主题时就不必在插件目录中找到它们了?