在 WordPress 中更改 Gutenberg Blocks 编辑器的调色板

厌倦了在颜色主题选择器中为各个古腾堡块手动设置颜色？这里有两个方法，重新布局你喜欢的 WordPress 块编辑器颜色，更新默认颜色或添加自定义颜色。

闲话不多说，两种方法：

使用插件

这是一种方便的方法，可让您在 WordPress 管理员中更新默认调色板。我们发现可以很好地完成这项工作的轻量级插件是“ Block Editor Colors”。只需从插件页面下载它，您就可以在“设置 -> 编辑器颜色” （‘Settings -> Editor Colors‘）下更新颜色。

使用代码

使用主题（或插件）中的代码更新调色板是一个两步过程。

1. 将自定义颜色类添加到 functions.php。
2. 将您的颜色添加到样式表中的这些类。

在 functions.php 中添加你的颜色

<?php
/**
 * Add custom color palette in Block editor.
 */
function wpblockz_gutenberg_color_palette() {
	add_theme_support(
		'editor-color-palette', array(
			array(
				'name'  => esc_html__( 'Green', '@@textdomain' ),
				'slug' => 'green',
				'color' => '#b1ead4',
			),
			array(
				'name'  => esc_html__( 'Yellow', '@@textdomain' ),
				'slug' => 'yellow',
				'color' => '#fee95c',
			)
		)
	);
}
add_action( 'after_setup_theme', 'wpblockz_gutenberg_color_palette' );

为主题样式表中的类添加颜色

在您的样式表 (css/scss) 中，您需要将匹配类添加到您的自定义颜色。如果您为块选择背景颜色，它将添加一个名为‘has-{your-custom-color}-background-color’ 的类。您必须将此类添加到您的样式表中，并为其添加颜色，如下所示：

.has-green-background-color { background-color: #b1ead4; } 
.has-green-color { color: #b1ead4; }
.has-yellow-background-color { background-color: #fee95c; } 
.has-yellow-color { color: #fee95c; }

设置完成后，您将不必再考虑选择正确的颜色！将它与代码一起添加将最大限度地减少您的插件数量并将这些设置保留在您的代码中而不是在您的数据库中。如果您是 Web 开发人员，那么这就是您要走的路。