如何用标签包装古登堡标题块生成的所有标题

时间:2020-06-08 作者:Jasom Dotnet

古腾堡仍然是一个相对较新的概念,所以我缺乏经验(互联网也缺乏好的教程)。我的目标是用<span> 标签因此,请遵循以下代码

<h2>Tips and trics</h2>
它以这种方式呈现

<h2><span>Tips and trics</span></h2>
如何开始?这是JS还是PHP工作?是否有过滤器系列?在Wordpress上搜索哪些文档。组织?

1 个回复
SO网友:Welcher

可以使用blocks.getSaveElement 如以下示例所示进行筛选。我要强烈提醒大家,这可能会导致经济不景气。核心块是静态块。这意味着输出将保存到数据库中。如果要删除这些跨距,基本上需要重做所有跨距。如果删除了引入此功能的主题/插件,那么您将有没有跨距的新标题,但旧标题仍会有。

    wp.hooks.addFilter(
    \'blocks.getSaveElement\',
    \'wpse-368511\',
    ( el, type, attributes ) => {
        if ( \'core/heading\' === type.name ) {
            const { level, content } = attributes;
            switch ( level ) {
                case 2:
                    return ( <h2><span>{ content }</span></h2> );
                case 3:
                    return ( <h3><span>{ content }</span></h3> );
                case 4:
                    return ( <h4><span>{ content }</span></h4> );
                case 5:
                    return ( <h5><span>{ content }</span></h5> );
                default:
            }
        }
        return el;
    }
);
希望这有帮助!

相关推荐

使用Add_Filters()、Apply_Filter()、Add_action()和do_action()扩展插件

假设我正在开发一个与预订相关的插件。下次我想在那个插件上添加一个附加组件来支付。然后,我为贝宝支付添加了另一个附加组件。假设下面是html中的支付网关UI界面<div class=\"payments-options\"> <div class=\"bank-payment\"></div> <div class=\"cash-on-delivery\"></div> <!--- Here i