如何在 WordPress 中将块编辑器和前端一起设置样式?
在开发主题时,我从来没有真正关心过 WordPress 编辑器是否看起来与前端相似。随着 5.9 中完整站点编辑的实现,我想改变这一点,并在块编辑器中看到实际上更接近前端外观的东西。
你把不同的风格放在哪里?如果我也将完整的前端 css 加载到后端,它会弄乱很多事情。
示例:
我有一个黑色主题。所以背景是黑色,字体颜色 白色的。我应该如何将其应用到后端?通常我给 背景设置直接整并改字体 使用 * {font-size: fff;}。我需要使用更具体的课程吗 从现在开始,不要进行此更改,例如在仪表板中 出色地? (一般我喜欢直接设计html元素的样式,可惜总是需要写很长的类名)
到目前为止,我还将自定义块样式放入我的主 css 文件中。 他们去哪里最好?
我应该做一些像后端 blockeditor css 这样的事情吗? css 和第三个文件,用于我想要两侧都有的样式?
我稍微查看了一下 theme.json,但其中包含所有块的完整样式看起来有点混乱。
我认为方向很明确;)您如何处理样式,对此有哪些有效的解决方案?
感谢您的提示、经验、链接或任何可能有助于解决我的困惑的内容。
干杯, 皮伊特
while developing themes, I never really cared about, if the WordPress editor looks similar to the front end. With the implementation of full site editing in 5.9, I would like to change this and see actually something in the block editor that is closer to the frontend look.
Where do you put the different styles? If I would load my full frontend css to the backend as well, it would mess up many things.
Examples:
I have a drak theme. So the background is black and the font-color
white. How should I apply this to the backend? Normally I give the
background settings directly to the whole and change the font
using * {font-size: fff;}. Do I need to use more specific classes
from now on to not have this changes for example in the dashboard as
well? (Generally I enjoy styling html elements directly, would be a pity to always need to write long class names)Until now I also put the custom block styles to my main css file.
Where they go best?Should I do something like a backend blockeditor css, a frontend only
css and a third file for styles I want to have on both sides?I had a little look on to theme.json, but it looks a bit messy to have the full styling of all blocks in there.
I think the direction is clear ;) How do you approach the styling, what are efficient solutions for this?
Thanks for tips, experiences, links or what ever might be helpful to dissolve my confusions.
Cheers,
Piiit
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
经过几周的搜索,现在是我的方法:
table
,而是编写.wp-block-table table
。只需要做少量的额外工作,就可以让编辑器看起来或多或少与最终网站一模一样,而且非常迷人。
After searching around for some weeks, here is now my approach:
table
in css, I write.wp-block-table table
.It's a pretty small amount of extra work and incredibly charming to have the editor look more or less exactly like the final website.