如果只想获取选定的颜色名称，则可以使用getColorObjectByColorValue() 中的函数@wordpress/block-editor 程序包，即wp.blockEditor.getColorObjectByColorValue 在浏览器中。该函数接受两个参数：颜色列表（每个都是color 和name 属性）和颜色（十六进制代码，例如。#17a2b8) 你想在颜色列表中找到的。例如：
导入或加载函数：
//import { InspectorControls, getColorObjectByColorValue } from \'@wordpress/block-editor\';
const { InspectorControls, getColorObjectByColorValue } = wp.blockEditor;
const colorList = [
{ name: \'bg-danger\', color: \'#dc3545\' },
{ name: \'bg-dark\', color: \'#343a40\' },
{ name: \'bg-info\', color: \'#17a2b8\' },
{ name: \'bg-light\', color: \'#f8f9fa\' },
{ name: \'bg-secondary\', color: \'#6c757d\' },
{ name: \'bg-warning\', color: \'#ffc107\' },
];
// ...
registerBlockType( \'my/block\', ... );
edit() 函数，您可以使用
getColorObjectByColorValue( colorList, backgroundColor ) 获取包含选定颜色的颜色数据/对象。
但实际上，您不一定需要使用getColorObjectByColorValue() 作用您可以使用find() JavaScript中的原型/函数Array... 示例：
const color = colorList.find( ( obj ) => ( backgroundColor === obj.color ) );
所以我要说的是，定义颜色列表并在检索所选颜色时使用它。
奖励：转换backgroundColor 到具有color 和name 作为属性，您不必将其转换为对象，只需添加另一个属性，如backgrounColorName, 但我认为这对你和我都有用。：）我还包括了一个样本render_callback 只显示颜色代码和名称的函数。
定义块属性：
attributes: {
backgroundColor: {
type: \'object\',
properties: {
color: {
type: \'string\',
default: \'#ffffff\',
format: \'hex-color\',
},
name: {
type: \'string\',
default: \'\',
},
},
default: {
color: \'#ffffff\',
name: \'\',
},
},
},
backgroundColor.color):
<ColorPalette
colors={ colorList }
value={ backgroundColor.color }
onChange={ ( value ) => setAttributes({ backgroundColor: {
color: value,
name: getColorObjectByColorValue( colorList, value ).name,
} })}
/>
register_block_type( \'my/block\', [
// The schema should match the one used in your JavaScript.
\'attributes\' => [
\'backgroundColor\' => [
\'type\' => \'object\',
\'properties\' => [
\'color\' => [
\'type\' => \'string\',
\'default\' => \'#ffffff\',
\'format\' => \'hex-color\',
],
\'name\' => [
\'type\' => \'string\',
\'default\' => \'\',
],
],
\'default\' => [
\'color\' => \'#ffffff\',
\'name\' => \'\',
],
],
],
\'render_callback\' => \'my_block_render_callback\',
] );
render_callback:
function my_block_render_callback( $attrs, $content ) {
$background = $attrs[\'backgroundColor\'];
echo \'color: \' . $background[\'color\'];
echo \'; name: \' . $background[\'name\'];
}
我希望这会有所帮助，有关属性的更多详细信息，请查看：
