在WordPress块主题中使用新的约束布局-css教程-PHP中文网

首页

web前端

css教程

在WordPress块主题中使用新的约束布局

Jennifer Aniston

Mar 09, 2025 am 10:07 AM

Using The New Constrained Layout In WordPress Block Themes

WordPress站点编辑器（现已正式命名）的主要目标之一是将基本的块样式从CSS迁移到结构化的JSON。JSON文件是机器可读的，这使得基于JavaScript的站点编辑器可以直接在WordPress中配置主题的全局样式。

但这项工作尚未完全完成！如果我们查看Twenty Twenty-Two (TT2)默认主题，有两个主要问题尚未解决：样式交互（如：hover、：active、：focus）以及布局容器的边距和填充。您可以看到这些问题是如何在TT2的style.css文件中临时修复的，而不是将其添加到theme.json文件中。

WordPress 6.1修复了这些问题，我想专门研究后者。现在我们有了布局容器边距和填充的JSON化样式，这为我们提供了更灵活、更强大的方法来定义主题布局中的间距。

我们讨论的是哪种间距？

首先，我们已经有了根级填充，这是对元素填充的一种花哨的说法。这很好，因为它确保了在所有页面和文章中共享的元素上的一致间距。但还有更多内容，因为现在我们有一种方法可以让块绕过该填充并使其全宽对齐。这要归功于填充感知对齐，这是theme.json中一个新的可选功能。因此，即使您有根级填充，您仍然可以允许，例如，图像（或其他一些块）突破并全宽显示。

这让我们想到了另一件事：受约束的布局。这里的想法是，嵌套在布局中的任何块都遵守布局的内容宽度（这是一个全局设置），并且不会流出该宽度。我们可以使用对齐方式逐块覆盖此行为，但稍后我们会讨论。

让我们从……开始

根级填充

再说一次，这不是什么新鲜事。自从实验性的Gutenberg插件在11.7版本中引入它以来，我们就有能力在theme.json中设置元素的填充。我们将其设置在styles.spacing对象上，在这里我们有margin和padding对象来定义body的顶部、右侧、底部和左侧间距：

<code>{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}</code>

这是一个全局设置。因此，如果我们打开DevTools并检查元素，我们将看到这些CSS样式：

<code>body {
  margin-top: 60px;
  margin-right: 30px;
  margin-bottom: 60px;
  margin-left: 30px;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
}</code>

不错。但问题是如何允许某些块突破该间距以填充整个屏幕，边缘到边缘。这就是间距存在的原因，对吧？它有助于防止这种情况发生！

但是，在块编辑器中工作时，确实有很多情况下您可能希望在一个性实例中突破该间距。假设我们在页面上放置一个图像块，并且我们希望它全宽显示，而其余内容遵守根级填充？

进入……

填充感知对齐

在尝试创建第一个在theme.json文件中定义所有样式的默认WordPress主题时，首席设计师Kjell Reigstad在这个GitHub问题中说明了突破根级填充的挑战性方面。

WordPress 6.1中的新功能旨在解决此问题。让我们接下来深入研究这些内容。

useRootPaddingAwareAlignments

创建了一个新的useRootPaddingAwareAlignments属性来解决这个问题。它实际上是在Gutenberg插件v13.8中首次引入的。原始的pull request很好地介绍了它的工作原理。

<code>{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}</code>

首先要注意，这是一个我们必须选择加入的功能。该属性默认设置为false，我们必须将其显式设置为true才能启用它。还要注意，我们也已将appearanceTools设置为true。这使我们能够在站点编辑器中使用UI控件来设置样式边框、链接颜色、排版以及间距（包括边距和填充）。

将appearanceTools设置为true会自动使块选择边距和填充，而无需将settings.spacing.padding或setting.spacing.margin设置为true。

当我们启用useRootPaddingAwareAlignments时，我们将获得具有在前端元素上设置的根填充值的自定义属性。有趣的是，它还将填充应用于.editor-styles-wrapper类，以便在后端块编辑器中工作时显示间距。太酷了！我在四处挖掘时能够在DevTools中确认这些CSS自定义属性。

启用useRootPaddingAwareAlignments还会将左右填充应用于支持上述全局样式图像中的“内容”宽度和“宽”宽度值的任何块。我们也可以在theme.json中定义这些值：

<code>body {
  margin-top: 60px;
  margin-right: 30px;
  margin-bottom: 60px;
  margin-left: 30px;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
}</code>

如果全局样式设置与theme.json中定义的不同，则全局样式优先。您可以在我的上一篇文章中了解所有关于管理块主题样式的信息。

contentSize是块的默认宽度。
wideSize提供“宽”布局选项，并为块伸展创建一个更宽的列。

因此，最后一个代码示例将给我们以下CSS：

<code>{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "useRootPaddingAwareAlignments": true,
    // etc.
  },</code>

[id]表示WordPress自动生成的唯一数字。

但猜猜我们还得到了什么？全对齐！

<code>{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "640px",
      "wideSize": "1000px"
    }
  }
}</code>

看到了吗？通过启用useRootPaddingAwareAlignments并定义contentSize和wideSize，我们还获得了用于控制添加到页面和文章的块宽度的三种容器配置的全对齐CSS类。

这适用于以下特定于布局的块：列、组、文章内容和查询循环。

块布局控件

假设我们将上述任何特定于布局的块添加到页面。当我们选择块时，块设置UI将根据我们在theme.json（或全局样式UI）中定义的settings.layout值提供新的布局设置。“内部块使用内容宽度”设置默认启用。如果我们将其关闭，则容器没有max-width，并且其中的块会边缘到边缘显示。

如果我们保持切换打开，则嵌套块将遵守contentWidth或wideWidth值（稍后会详细介绍）。或者，我们可以使用数字输入在此一次性实例中定义自定义contentWidth和wideWidth值。这是极大的灵活性！

宽块

我们刚刚查看的设置是在父块上设置的。一旦我们将块嵌套在内部并选择它，我们就可以在该块中使用contentWidth、wideWidth或全宽显示的附加选项。

请注意，WordPress如何将根级填充CSS自定义属性乘以-1以在选择“全宽”选项时创建负边距。

使用受约束的布局

我们刚刚介绍了WordPress 6.1带来的新的间距和对齐方式。这些是特定于块以及块内任何嵌套块的。但是WordPress 6.1还引入了新的布局功能，以在主题模板中获得更大的灵活性和一致性。

例如：WordPress完全重构了其Flex和Flow布局类型，并为我们提供了一种受约束的布局类型，这使得使用站点编辑器的全局样式UI中的内容宽度设置更容易在主题中对齐块布局。

Flex、Flow和受约束的布局

这三种布局类型之间的区别在于它们输出的样式。Isabel Brison有一篇优秀的文章很好地概述了这些差异，但让我们在这里对其进行释义以供参考：

Flow布局：在margin-block方向上在嵌套块之间添加垂直间距。这些嵌套块也可以左对齐、右对齐或居中对齐。
受约束的布局：与Flow布局完全相同，但对嵌套块的宽度约束基于contentWidth和wideWidth设置（在theme.json或全局样式中）。
Flex布局：这在WordPress 6.1中没有更改。它使用CSS Flexbox创建一个默认水平流动（一行）的布局，但也可以垂直流动，因此块一个接一个地堆叠。使用CSS gap属性应用间距。

这种新的布局类型为每个布局创建语义类名：

Justin Tadlock对不同的布局类型和语义类进行了广泛的介绍，包括用例和示例。

更新您的主题以支持受约束的布局

如果您已经在使用自己制作的块主题，您将需要将其更新以支持受约束的布局。在theme.json中只需要交换几件事：

<code>{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}</code>

这些是最近发布的已启用useRootPaddingAwareAlignments的间距设置并具有更新的theme.json文件来定义受约束布局的块主题：

禁用布局样式

基本布局样式是WordPress 6.1 Core中默认的功能。换句话说，它们开箱即用。但是，如果我们需要，我们可以使用functions.php中的这段小代码禁用它们：

<code>{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}</code>

这里有一个重要的警告：禁用对默认布局类型的支持也会删除这些布局的所有基本样式。这意味着您需要为间距、对齐方式以及在不同模板和块上下文中显示内容所需的任何其他内容编写自己的样式。

总结

作为全宽图像的忠实粉丝，新的包含WordPress 6.1布局和填充感知对齐功能是我最喜欢的两个功能。与其他工具一起使用，包括更好的边距和填充控制、流畅的排版以及更新的列表和引用块等，这充分证明了WordPress正在朝着更好的内容创建体验迈进。

现在，我们必须等待并观察普通设计师和内容创建者如何使用这些令人难以置信的工具并将其提升到一个新的水平。

由于站点编辑器开发迭代正在进行中，我们应该始终预料到前方道路的艰难。但是，作为一个乐观主义者，我很想看看WordPress 6.2的下一个版本会发生什么。我密切关注的一些事情包括正在考虑包含的功能、对粘性定位的支持、内部块包装器的新的布局类名、更新的页脚对齐选项以及向封面块添加受约束和流动布局选项。

此GitHub问题#44720列出了计划用于WordPress 6.2的与布局相关的讨论。