在构建自定义主题或使用子主题时，您可能需要移除或隐藏某些样式功能，无论是针对单个核心区块还是完整的主题样式变体。
这样做不仅仅是出于个人喜好。它通常可以带来实际优势，例如提升性能、更一致的设计和更简洁的用户界面。
实现这些目标的方法各不相同，可能取决于您的需求和技能。本文中的示例以 Twenty Twenty-Five (TT5) 的子主题为例，这是一款现代 WordPress 区块主题。
注销取决于其注册方式
就我们的目的而言，当我们提到注销区块或主题样式变体时，我们会区分完全移除和部分移除，以及变体是完全移除还是仅仅从界面中隐藏。这些区别非常重要。
要了解如何注销区块，首先要了解它的注册方式。例如，使用 JavaScript 注册的核心区块最好也使用该语言注销。相比之下，主题样式变体是在 PHP 中注册的，因此可能需要采用不同的方法。
注销自定义区块的注册不在本文讨论范围内，您的方法取决于这些区块最初的注册方式。
什么是样式变体？
WordPress 区分块样式和主题样式变体。区块样式是特定区块的视觉替代方案，例如按钮区块的“填充”或“轮廓”样式。区 块样式变体在核心、 theme.json、 block.json（或插件）中注册。
另一方面，主题样式变体是完整的视觉替代方案，包括在唯一的 theme.json 文件中定义的颜色、字体和布局。它们允许用户在不更改主题的情况下在网站的不同外观（皮肤）之间切换。TT5 除了默认样式外，还提供了八种样式变体。
迈出第一步：将脚本加入队列
由于我们正在使用子主题，因此您必须小心地将脚本正确加入队列。
此设置可帮助您入门，包括将我们自定义的 unregister-blocks.js 文件加入队列。
// Enqueue Parent and Child Styles
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
['parent-style'],
wp_get_theme()->get('Version')
);
});
// Enqueue styles in the WordPress admin
add_action('admin_enqueue_scripts', function () {
wp_enqueue_style(
'child-admin-style',
get_stylesheet_uri(),
[],
wp_get_theme()->get('Version')
);
});
// Enqueue JavaScript for block editor
add_action('enqueue_block_editor_assets', function () {
wp_enqueue_script(
'unregister-core-blocks',
get_stylesheet_directory_uri() . '/js/unregister-blocks.js',
['wp-blocks', 'wp-dom-ready', 'wp-edit-post'],
null,
true
);
});
如您所见，我们在 js/unregister-blocks.js 中有一个 JavaScript 文件，其中包含本文的所有脚本。
请勿对 JavaScript 文件使用 get_template_directory_uri()，因为它指向父主题。
时机至关重要
在 WordPress 中使用 PHP 时，了解钩子何时触发至关重要。您应该熟悉基本的加载顺序，该顺序始于 wp-settings.php：
- 常量
- 全局变量
- 核心组件
- 加载插件
- 加载主题
确定自定义函数的正确运行时间是 WordPress 开发中最棘手且最令人沮丧的部分之一。
注销核心区块样式
假设您希望删除核心区块的样式。在本例中，我们希望删除按钮区块的轮廓样式。
由于填充和轮廓按钮样式已在 TT5 的 theme.json 文件中注册，因此我们使用 JavaScript 来处理该过程。
wp.domReady(() => {
if (wp.blocks && wp.blocks.unregisterBlockStyle) {
wp.blocks.unregisterBlockStyle('core/button', 'outline');
}
});
结果是删除了工具栏和侧边栏中的大纲样式。
已移除的按钮区块轮廓样式不再可见。
注销核心区块
假设您希望移除某个区块的所有块样式。更合理的方法是注销该区块（或多个区块）。这可以通过移除您不想让用户使用的区块来简化插入器，并提高性能。
此处，“引言”区块已被移除。
wp.domReady(() => {
wp.blocks.unregisterBlockType('core/quote');
});
如果在 Quote 区块已使用后运行脚本，会发生什么情况？WordPress 会在编辑器中显示“此区块已不可用”的消息，但内容仍会在前端渲染。用户可以手动编辑或转换区块回退到的原始 HTML 视图。
移除 Quote 区块后的页面编辑器视图。
您可以保留原样，也可以将其转换为 HTML 格式以保留内容和样式。
如何取消注册多个区块？在本例中，我们通过运行 foreach 循环来移除 Quote 和 Heading 区块，从而提供一种非常高效的操作方法。
wp.domReady(() => {
const blocksToRemove = [
'core/quote',
'core/heading',
];
blocksToRemove.forEach((blockName) => {
if (wp.blocks.getBlockType(blockName)) {
wp.blocks.unregisterBlockType(blockName);
}
});
});
如果需要的话，这个脚本可以方便地删除其他区块。
已移除引言和标题区块的区块插入器面板。
取消注册主题样式变体
区块主题中样式变体的美妙之处在于它们无需注册，就像您过去使用其他 WordPress 扩展程序时那样。
相反，只需将格式正确的 theme.json 文件放置在子主题的根目录或 /styles 目录中，Core 就会自动识别它们。
您很容易认为需要一个函数来取消注册样式变体，但区块主题的工作方式有所不同。
与区块样式一样，没有默认的 UI 来删除不需要的样式变体。
让我们从最简单的方法开始，逐步进行。样式变体之所以如此易于“注册”或添加到区块主题中，恰恰是因为“取消注册”非常困难。因此，我们提供了几种方法。
移除主题样式变体
有几种方法可以移除像 TT5 这样的块状主题中的 Evening 样式变体。
如果您没有使用子主题，最直接的方法是从父主题中删除相应的 .json 文件。例如，从 /styles 目录中删除 01-evening.json 文件会完全移除 Evening 样式变体。
但是，我们不建议这样做，因为该文件很可能会在下次主题更新后重新出现。
更好、更安全的方法是使用子主题并覆盖样式变体。您可以通过在同一路径下创建一个具有相同文件名的空白文件来实现此目的。要覆盖 01-evening.json 文件，请在子主题的 /styles 目录中添加一个名为 01-evening.json 的空文件。
这种方法并不能真正“取消注册”样式变体；它只是将其无效化。WordPress 仍然可以识别该文件，但由于它不包含任何设置，因此样式变体在 UI 中不可见，并且无法正常运行。此覆盖仅在子主题在父主题加载后才有效，因此请务必确认您的子主题已正确设置。
使用CSS隐藏变体
另一种解决方法是使用 CSS 从 UI 中隐藏样式变体。这不会将其从内存或 REST API 中删除，也不会减少前端臃肿，但可以阻止用户在整站编辑器中选择它。
以下是隐藏夜间变体的示例：
/* Hide specific global style variations in the Site Editor */
.edit-site-global-styles-variations_item[data-slug="morning"],
.edit-site-global-styles-variations_item[data-name="evening"],
.edit-site-global-styles-variations_item[title="Evening"],
.edit-site-global-styles-variations_item[aria-label*="Evening"] {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
此功能可在“编辑器”>“样式”>“浏览样式”面板中操作。如果用户之前启用了“夜间”变体，该变体仍会应用，但用户无法重新选择或切换到该变体。
使用JavaScript隐藏变体
您也可以使用 JavaScript 隐藏变体，该变体通过 PHP 注入，使用 wp_add_inline_script 实现。这有点像 hack，因为样式变体是在 PHP 中注册的，但有时这是可靠操作 UI 的唯一实用方法。
以下是一个实际示例：
// Inject JS to hide specific style variations in the Site Editor UI
add_action('enqueue_block_editor_assets', function () {
wp_add_inline_script(
'unregister-core-blocks',
<< {
const interval = setInterval(() => {
document.querySelectorAll(
'[aria-label*="Noon"], [title*="Evening"], [data-name="noon"], [data-slug="evening"]'
).forEach(el => {
el.style.display = 'none';
});
}, 500);
// Stop the interval after 5 seconds
setTimeout(() => clearInterval(interval), 5000);
});
JS
);
});
此脚本会等待 DOM 加载完毕，然后在几秒钟内反复扫描并隐藏变体。它比较脆弱（因为它依赖于加载时间和类名），但当您需要在不影响文件系统的情况下隐藏特定变体时，它就很有效。
注：即使您使用 CSS 或 JS 隐藏了变体，如果已应用该变体，它仍然会在 REST API 和块数据中可用。这些方法主要是为了提升编辑器体验，而不是为了改善底层主题数据。
小结
保持网站整洁，去除无用元素，可以提升用户体验，并且在许多情况下还能提升网站性能。
我们这里提供的示例提供了注销样式变体的可靠方法。我们希望这些示例也能帮助您理解为何注销样式变体会令人困惑。
评论留言