如何在 WordPress 中将块编辑器和前端一起设置样式?

发布于 2025-01-11 08:34:22 字数 627 浏览 0 评论 0原文

在开发主题时,我从来没有真正关心过 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

猥︴琐丶欲为 2025-01-18 08:34:23

经过几周的搜索,现在是我的方法:

  • 网站背景、字体类型和颜色的常规样式由 theme.json 处理。
  • 页脚、cookienotice、页眉的样式以及我不需要加载到编辑器的所有内容都通过正常的 style.css 加载。
  • 我想要两边的样式,我放入一个单独的 editor-style.css 并将其通过functions.php加载到前端和后端。为了不遇到一般 WordPress 界面的麻烦,我总是直接寻址这些块。因此,我不只是在 css 中编写 table,而是编写 .wp-block-table table
  • 在我大量使用 ACF 插件来创建自定义块之前。 (非常强大,但在编辑器中看起来相当无组织)由于新的块模式功能,我可以非常轻松地替换几乎所有 ACF 块。

只需要做少量的额外工作,就可以让编辑器看起来或多或少与最终网站一模一样,而且非常迷人。

After searching around for some weeks, here is now my approach:

  • General styles for website background, font type and color, are handled by the theme.json.
  • Styles for footer, cookienotice, header and everything I don't need to load to the editor are loading over the normal style.css.
  • Styles I want on both sides, I put in a seperate editor-style.css and load it over functions.php to front- and back-end. To not run in to troubbles with the general wordpress interface I always adress the blocks directly. So instead of just writing table in css, I write .wp-block-table table.
  • Before I heavily used ACF Plugin to create custom blocks. (Very powerful, but looks pretty unorganized in the editor) Thanks to the new block pattern feature, I could replace almost all ACF Blocks surprisingly easy.

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文