.EDITOR-STYLES-包装器覆盖我在Gutenberg中的块样式

时间:2021-09-03 作者:AGKlem

我正在研究我的第一个主题,它是用定制的古腾堡积木建造的。我已经成功注册了块并将它们的特定样式表排队,但我遇到了一个有点痛苦的问题。许多“我的块”会覆盖“我的样式”中的全局样式。css文件。但是,当我启用编辑器样式时。编辑器样式包装类正在取代块样式。

举个例子,下面是我的全局容器样式:

div.tmp-container-fixed {
    flex-direction: row;
}
在我的特定于块的样式表中:

section.sign-up .tmp-container-fixed {
    flex-direction: column;
}
以及编辑器的样式。css输出:

.editor-styles-wrapper div.tmp-container-fixed {
    flex-direction: row;
}
我理解为什么编辑器样式会覆盖块样式。我想知道,有没有办法将每个块的编辑器样式表排队,以输出如下内容:

.editor-styles-wrapper section.sign-up .tmp-container-fixed {
    flex-direction: column;
}
我想我可以编写一个自定义编辑器样式表,但我希望有一种更简单的方法来实现这一点。

非常感谢!

1 个回复
SO网友:AGKlem

这并不是我一直在寻找的解决方案,但我意识到,通过在块样式表中使标记更加具体,我能够防止大多数问题的发生。通过在tmp容器固定类的前面添加div标记,我能够在Gutenberg中正确渲染块。(见下文)

section.sign-up div.tmp-container-fixed {
    flex-direction: column;
}

相关推荐