【WordPress6.4】主题.json的更改点

2 年 ago
逸, 科
3 minutes

首先这篇文章总结了关于 theme.json 文件的变化，该文件可以集中管理 WordPress 主题的功能、布局和样式等，这些变化发生在 WordPress 6.4 版本中。

对于theme.json的整体概述，请参见标题为“【WordPress5.9 / 6.0版】theme.json 全解説”的文章。如果您不了解theme.json是什么，或者不了解每个部分（属性）的作用，请务必先阅读此文章。另外，有关WordPress 6.1、WordPress 6.2、WordPress 6.3的更改，请分别参阅以下文章。

    • 【WordPress6.1】theme.json の変更点

 

    • 【WordPress6.2】theme.json の変更点

 

    【WordPress6.3】theme.json の変更点

变更清单为了那些只想大致了解更改内容的人，我将列出 WordPress 6.4 的更改内容。如果您想更详细地了解，请参阅以下各节的解释。

    • 背景画像を設定出来るようにする settings.background.backgroundImage プロパティが追加された (解説)

 

    • レイアウト関連 UI を有効化・無効化出来るようにする settings.layout.allowEditing プロパティが追加された (解説)

 

    • Lightbox の設定に関する settings.lightbox プロパティが追加された (解説)

 

    • Fluid Typography で、ビューポート幅 (settings.typography.fluid.maxViewportWidth、 settings.typography.fluid.minViewportWidth) を設定出来るようになった (解説)

writing-mode を設定出来るようにする settings.typography.writingMode プロパティが追加された (解説)
サイト全体またはブロックのデフォルトスタイルとして、 writing-mode を設定出来るようになった (解説)

备忘录·注意事项请注意，小版本升级可能会稍微改变规格。请查看WordPress的git存储库或WordPress.org的发布新闻（Make WordPress Core）以获取最新的规格确认。

预备工作如果您想要准备一个原创主题来实践本文的内容，请在创建的主题文件夹中准备以下文件。这些是将其识别为块主题并在前端能够查看内容所需的最低限度的文件。

/*
Theme Name: My Theme
Text Domain: mytheme
*/

<!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
<div class="wp-block-query">
	<!-- wp:post-template -->
	<!-- wp:post-title {"isLink":true} /-->
	<!-- wp:post-excerpt /-->
	<!-- /wp:post-template -->
</div>
<!-- /wp:query -->

<!-- wp:post-title /-->
<!-- wp:post-content {"layout":{"inherit":true}} /-->

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "900px"
		}
	}
}

设置

设置.背景.背景图片可以将背景图像设置为块。默认值为false。也可以在设置.appearanceTools中选择接受此功能。

目前，只有组块能够支持此属性。要启用该属性，请在 theme.json 文件中选择如下设置。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "900px"
		},
		"background": {
			"backgroundImage": true
		}
	}
}

然后，在群组区块的侧边栏上将显示以下的用户界面，以便可以设置背景图片。

settings.background.backgroundImage.png
如果希望在其他包含自定义模块的模块中选择此支持，需要在模块端添加此支持。可以通过模块的元数据文件 block.json 来选择使用 supports.background.backgroundImage。

有几种方法可以实现这一点，但本次将介绍使用 register_block_type_args 过滤钩子的方法。

以下是一个代码示例，在核心（子级）的列块中添加背景图片支持。

<?php
function custom_register_block_type_args( $args, $block_type ) {
	if ( 'core/column' !== $block_type ) {
		return $args;
	}

	$args['supports'] = array(
		'background' => array(
			'backgroundImage' => true,
		),
	);

	return $args;
}
add_filter( 'register_block_type_args', 'custom_register_block_type_args', 10, 2 );

顺便提一下，为什么不是使用 settings.backgroundImage，而是特意嵌套了 settings.background.backgroundImage。这可能是因为将来可能考虑添加与背景图片相关的其他属性（如background-repeat、background-position、background-size 等）。

布局设置允许编辑设置是否启用与布局相关的用户界面。默认值为true。

布局相关的用户界面是指显示在以下布局面板上的用户界面。

    • Justification (配置)

 

    • Orientation (方向)

 

    • Allow to wrap to multiple lines (複数行に折り返す)

 

    • Inner blocks use content width (コンテント幅を使用するインナーブロック)

 

    • Content (コンテンツ)

 

    Wide (幅広)

您可以通过以下代码来禁用与布局相关的用户界面。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "900px",
			"allowEditing": false
		}
	}
}

举例来说，如果支持布局控制的组块和按钮组块，侧边栏的显示将发生以下变化。

settings.layout.allowEditing_button_false.png当allowediting为false时，无论是哪个区块，都没有设置和样式标签。这是因为禁用了与布局相关的用户界面，因此设置标签中可用的控件被移除，因此设置标签本身消失了，而样式标签的内容将在初始显示中呈现，这是根据规格说明而确定的。

设置.灯箱Lightbox在设置中有enabled属性和allowEditing属性。

从WordPress 6.3版本开始，图片块可以使用所谓的灯箱功能。默认情况下，此功能是关闭的，但可以通过网站编辑器或块的个别设置来启用。

settings.lightbox_1.png如果您希望在可用的图片块侧边栏中为每个块启用Lightbox，则上述是用于启用UI的。但如果您希望默认情况下对整个图片块启用此功能，则可以按照以下步骤操作：进入“站点编辑器 > 样式按钮 > 块 > 图片 > 设置面板”。

settings.lightbox_2.gif
然后，您可以通过以下属性来控制此Lightbox的默认设置和UI显示。

enabled (デフォルト値は false): Lightbox をデフォルトで有効にするかどうか

allowEditing (デフォルト値は true): Lightbox の UI を表示するかどうか

例如，以下是一段可以将 Lightbox 默认启用但不显示 UI（用户界面）的代码示例，实现与默认相反的操作。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "900px",
		},
		"lightbox": {
			"allowEditing": false,
			"enabled": true
		}
	}
}

请注意：在 WordPress 6.4 Beta2 阶段，如果在 settings 属性下直接设置，即在根级别设置，将不起作用。这个问题也已在 Gutenberg 存储库中作为问题进行了报告。

相反地，需要在图像块的块级别上进行定义，如下所示。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "900px"
		},
		"blocks": {
			"core/image": {
				"lightbox": {
					"allowEditing": false,
					"enabled": true
				}
			}
		}
	}
}

设置.排版.流体.最大视窗宽度, 设置.排版.流体.最小视窗宽度在流式排版中，设置视口的最小宽度和最大宽度。

WordPress 6.1现在可以使用Fluid字体大小。在WordPress 6.2中，可以设置生成clamp函数时的最小字体大小值。视口宽度过去被固定为最小宽度为320px，最大宽度为1600px，但在WordPress 6.3中，可以更改这两个值。

这一部分是表示由Fluid Typography生成的clamp函数在图表中的视口部分。

settings.typography.fluid.viewportWidth_1.png
现代流体排版编辑器的引用

作为一个例子，我们可以定义一个名为“x-large”的字体大小变量，它可以在20像素到40像素之间流动地改变字体大小，并且同时还改变了视口的宽度。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "900px"
		},
		"typography": {
			"fontSizes": [
				{
					"fluid": {
						"min": "20px",
						"max": "40px"
					},
					"size": "40px",
					"slug": "x-large"
				}
			],
			"fluid": {
				"minViewportWidth": "600px",
				"maxViewportWidth": "1000px"
			}
		}
	}
}

当将此字体大小应用于一个块时，根据定义，在更改屏幕宽度时可看出其遵循以下规则的字体大小。

    • ビューポート幅が1000px以上: 40px

 

    • ビューポート幅が601px ～ 999px: ビューポート幅に応じて変わる

 

    ビューポート幅が600px以下: フォントサイズは 20px
settings.typography.fluid.viewportWidth_1.gif

设置.字体排版.书写方式控制是否启用写入模式（writing-mode）的设置。默认值为false。

可使用该支持的核心模块包括如下：

    • 段落 (core/paragraph)

 

    • 見出し (core/heading)

 

    • 脚注 (core/footnotes)

 

    前の投稿、次の投稿 (core/post-navigation-link)
{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "900px"
		},
		"typography": {
			"writingMode": true
		}
	}
}
settings.typography.writingMode.png注意事项是，此支持并不是将区块编辑器本身变成类似日语小说那样内容整体从右向左流动的所谓“竖排”，而是通过控制每个区块的 writing-mode 值（vertical-rl 或 horizontal-tb）来进行支持。

设置.块
这是一个用于控制单独启用/禁用功能的区块。

现在，您可以在设置属性的根级别上定义的属性，也可以在代码块级别进行控制。

以下是一个示例代码，它仅禁用了组块布局相关的用户界面。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "900px"
		},
		"blocks": {
			"core/group": {
				"layout": {
					"allowEditing": false
				}
			}
		}
	}
}

风格

文字排版风格设置整个网站的 writing-mode 值。

给出一个代码示例，例如，当设置为 “vertical-rl” 时，整个块编辑器和前端的管理栏文字方向也会改变，因此我认为不需要在此根级别进行设置。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "900px"
		}
	},
	"styles": {
		"typography": {
			"writingMode": "vertical-rl"
		}
	}
}

样式.区块这是用于将样式应用于特定区块的部分。

以 writingMode 属性为例，可以在 styles 属性的根级别上定义新的写作模式。以下是一个将垂直-自右向左写入模式（writing-mode:vertical-rl）默认应用于标题块的示例代码。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "900px"
		}
	},
	"styles": {
		"blocks": {
			"core/heading": {
				"typography": {
					"writingMode": "vertical-rl"
				}
			}
		}
	}
}

bannerAds