古腾堡后生生物的风格,就像他们属于网站一样

时间:2019-11-07 作者:John Dee

将元框添加到Gutenberg时,它看起来与编辑器中的其他项不同。有一个HR,字体不同。

enter image description here

有没有人知道如何修复这个问题,让它看起来像是网站的一个自然部分,而不是“一些垃圾机器人没有添加”。

示例代码:

function myMetaBox() {
    add_meta_box(
        \'MyMetaBox\',
        "Why the odd font?",
        \'myBoxOutputCallback\',
        \'post\',
        \'side\'
    );
}

add_action( \'add_meta_boxes\', \'myMetaBox\' );

function myBoxOutputCallback(){
    echo ("Gutenberg is a great addition! NOT!");
}

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

可以使用CSS删除下边框(HR):

#__BLOCK_ID__.postbox:not(.closed) .postbox-header{
    border-bottom: none;
}
p.s.变更__BLOCK_ID__ 至中使用的第一个参数add_meta_box() 作用

SO网友:Jacob Peattie

在您的示例中,讨论不是元框。元框不是块编辑器的本机部分,仅支持向后兼容。它们不是将这些设置框添加到块编辑器的正确现代方式。这就是为什么他们有不同的风格。

在块编辑器中,这些部分是"Panels", 适合于"Sidebar", 和是反应组件,就像块编辑器的其余部分一样。

关于创建这些内容的完整指南超出了此网站上单个答案的范围,但基本上您需要:

使用register_meta() 注册面板将使用的字段here, CSS技巧有一篇有用的文章详细介绍了这一点here.SlotFill, 明确地PluginDocumentSettingPanel, 将组件输出为现有侧栏中的面板(SlotFills有点像挂钩,允许您将组件添加到编辑器的各个部分)您可以继续使用元框,但它们在视觉上与本机组件不匹配,而本机组件是向编辑器添加字段的新的正确方法。

同样值得考虑的是,您要添加的字段作为常规块是否会更好地工作。创建这些的文档可用here.

相关推荐