WordPress 5.8+ 设置布局和内容宽度的新方式

WordPress 5.8 引入了全局设置和全局样式。它们允许主题作者使用 theme.json 控制编辑器中的可用功能和不同块并为其设置样式。

通过使用 theme.json 文件，除了全局样式和设置功能之外，主题作者还可以选择加入块容器的布局功能。

文章目录

布局配置

从历史上看，主题有责任提供CSS样式以支持对齐内容（左、右）。随着 WordPress 5.0 中块编辑器的引入，新的对齐方式已添加到组合中（宽对齐、完整对齐）。除此之外，块编辑器允许用户使用容器块（组、列块），这可能会改变其内部块的定位和对齐方式。考虑所有这些变化对于主题作者来说已成为一项非常艰巨的任务。为了解决这些问题，WordPress 5.8 引入了布局功能和配置。

阅读：WordPress 5.8+ 引入了主题的编辑器控制文件 theme.json

如何迁移我的主题

具有居中内容区域的主题，需要在其 `theme.json` 文件中定义布局设置：

{
   "settings": {
       "layout": {
           "contentSize": "800px",
           "wideSize": "1000px"
       }
   }
}

块编辑器将自动读取此配置并在编辑器中提供相应的样式。它将允许所有对齐正常工作，而无需调用 add_theme_support( 'align-wide' )。

主题仍然需要在其站点的前端提供相应的样式，例如：

.entry-content > * {
     max-width: 800px;
     margin-left: auto !important;
     margin-right: auto !important;
 }
 .entry-content > .alignwide {
     max-width: 1000px;
 }
 .entry-content > .alignfull {
     max-width: none;
 }
 .entry-content > .alignleft {
     float: left;
     margin-right: 2em;
 }
 .entry-content > .alignright {
     float: right;
     margin-right: 2em;
 }

注意：

WordPress 不可能为所有主题自动生成这些样式，因为上例中的 entry-content 类名不是强制性的，可能不存在。将来，随着即将推出的块主题的引入，将不再需要这些样式。