在 WordPress 块主题中使用新的受限布局

Avatar of Ganesh Dahal
Ganesh Dahal 于

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费额度！

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

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

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

我们在谈论哪种间距？

首先，我们已经有了 **根级填充**，这是一种描述 <body> 元素上的填充的更高级的方式。 这很好，因为它确保了所有页面和帖子中共享的元素上的一致间距。

但还有更多内容，因为现在我们有一种方法可以让块绕过该填充并使其自身全宽对齐。 这是由于 **填充感知对齐**，这是 theme.json 中一项新的可选功能。 因此，即使您有根级填充，您仍然可以允许，例如，图像（或其他一些块）跳出并全宽显示。

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

让我们从…开始

根级填充

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

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

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

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;
}

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

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

输入…

填充感知对齐

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

根级填充阻止块占用整个视口宽度（左）。 但使用填充感知对齐，某些块可以“选择退出”该间距并占用整个视口宽度（右）。（图片来自：Kjell Reigstad）

WordPress 6.1 中创建了新功能来解决此问题。 让我们接下来深入探讨这些内容。

useRootPaddingAwareAlignments

创建了一个新的 useRootPaddingAwareAlignments 属性来解决此问题。 它实际上是在 Gutenberg 插件 v13.8 中首次引入的。 原始拉取请求 是关于其工作原理的很好的入门指南。

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

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

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

当我们确实启用 useRootPaddingAwareAlignments 时，我们将获得具有根级填充值的自定义属性，这些属性在前端的 <body> 元素上设置。 有趣的是，它还将填充应用于 .editor-styles-wrapper 类，因此在后端块编辑器中工作时会显示间距。 非常酷！

在四处挖掘时，我能够在 DevTools 中确认这些 CSS 自定义属性。

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

{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "640px",
      "wideSize": "1000px"
    }
  }
}

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

  • contentSize 是块的默认宽度。
  • wideSize 提供“宽”布局选项，并为块建立更宽的列以进行扩展。

因此，最后一个代码示例将为我们提供以下 CSS

/* The default content container */
.wp-container-[id] > * {
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The wider content container */
.wp-container-[id] > .alignwide {
  max-width: 1000px;
}

[id] 表示 WordPress 自动生成的唯一编号。

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

.wp-container-[id] .alignfull {
  max-width: none;
}

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

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

块布局控件

假设我们将上述任何一个特定于布局的块添加到页面中。 当我们选择该块时，块设置 UI 会根据我们在 theme.json（或全局样式 UI）中定义的 settings.layout 值为我们提供新的布局设置。

我们这里处理的是非常具体的块——可以嵌套其他块的块。 因此，这些布局设置实际上是关于控制这些嵌套块的宽度和对齐方式。“内部块使用内容宽度”设置默认启用。 如果我们将其关闭，则容器上没有 max-width，并且其中的块会边缘到边缘显示。

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

宽块

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

此图像块设置为尊重 contentWidth 设置（在上下文菜单中标记为“无”），但也可以设置为 wideWidth（标记为“宽宽度”）或“全宽”。

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

.alignfull 类在嵌套块上设置负边距，以确保它占用整个视口宽度，而不会与根级填充设置冲突。

使用受限布局

我们刚刚介绍了 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创建默认情况下水平流动（一行）的布局，但也可以垂直流动，以便区块一个接一个地堆叠。使用 CSSgap属性应用间距。

这套新的布局类型为每个布局创建了语义类名。

语义布局类布局类型支持的区块
.is-layout-flowFlow 布局列、组、帖子内容和查询循环。
.is-layout-constrained受限布局列、组、帖子内容和查询循环。
.is-layout-flexFlex 布局列、按钮、社交图标

Justin Tadlock 撰写了一篇关于不同布局类型和语义类的详尽文章，包括用例和示例。

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

如果您已经在使用自己制作的区块主题，则需要更新它以支持受限布局。只需在theme.json中交换几件事即可。

{
  "version": 2,
  "settings": {
    "layout": {
      "type": "constrained", // replaces `"inherit": true`
      "type": "default", // replaces `"inherit": false`
    }
  }
}

这些是最近发布的区块主题，它们已使用useRootPaddingAwareAlignments启用了间距设置，并且具有更新的theme.json文件，该文件定义了受限布局。

主题根级填充受限布局功能
TT3源代码源代码，模板
ProWP源代码源代码，模板
Triangulate源代码源代码，模板
Oaknut源代码源代码，模板
Loudness源代码源代码，模板
Pixl源代码源代码，模板
Block Canvas源代码源代码，模板
Rainfall源代码源代码，模板

禁用布局样式

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

// Remove layout styles.
add_theme_support( 'disable-layout-styles' );

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

总结

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

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

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

此GitHub 问题 #44720列出了计划在 WordPress 6.2 中进行的与布局相关的讨论。

其他资源

在深入研究所有这些内容时，我查阅并参考了许多资料来源。这里列出了我发现有帮助并且我认为您也可能喜欢的许多内容。

教程

WordPress 文章

GitHub 拉取请求和问题

嘘！ 创建一个 DigitalOcean 账户并获得 200 美元的免费信用额度 用于基于云的托管和服务。

评论

  1. CELCAMP
    评论永久链接#

    非常有用的文章，可惜的是 php 没有人会把它描述得这么好..

    回复
  2. MBAPPE IVEN
    评论永久链接#

    在 Kadence WP 主题中设计的计费网站是否支持此受限布局？我使用 FAQs 模块的体验不太好。我将检查 Kadence WP 是否支持该布局。

    回复
    • Geoff Graham
      评论永久链接#

      我理解 Kadence 有自己的布局控件。例如，您可以在页面上放置一个行布局块，并允许它在块的“结构”设置中全宽显示。然后，您可以在其中嵌套另一个行布局块，并在该块的“结构”设置中将其设置为使用内部容器宽度。内部容器宽度在主题的全局设置中。并且您可以在每个块的基础上覆盖它。

    • MBAPPE IVEN
      评论永久链接#

      是的，你说得对，我个人设计了我的网站。我还使用了行布局并使用了大小相同的图表。但是当我将页面最小化到最大程度时，我发现图表文本不平衡——破坏了布局大小相等。页面的其余内容和布局已调整大小，在文本方面也保持平衡。也许图表文本有问题。您也可以通过将其最小化到最大容量并查看图表来检查。

  3. Marcio Duarte
    评论永久链接#

    只是一个快速的更正：在块主题中允许受限布局，不需要手动更改 theme.json 中的 layout 设置。它不是 theme.json 架构 的一部分。只有模板——或模板部件——需要在代码中进行此定义。

    回复

发表评论

Your email address will not be published. Required fields are marked *

© 2024 . All rights reserved.