如何在定制古腾堡块中使用PanelColorSetting？

时间：2018-10-01 作者：wrydere

我正在制作一个定制的古腾堡积木。我用过<PanelBody> <BaseControl> 和<ColorPalette> 然而，要创建一些自定义颜色选择器，使用内置<PanelColorSettings> 组成部分

有人用过吗<PanelColorSettings> 自定义块中的组件？我能找到的关于这项技术的唯一讨论是：https://stackoverflow.com/questions/50480454/add-the-inbuilt-colour-palette-for-gutenberg-custom-block

2 个回复
最合适的回答,由SO网友:Ashiquzzaman Kiron 整理而成

首先需要导入组件-

const {
    PanelColorSettings,
} = wp.editor;
然后在InspectorControls 您调用组件

<PanelColorSettings
                    title={ __( \'Color Settings\' ) }
                    colorSettings={ [
                        {
                            value: color,
                            onChange: ( colorValue ) => setAttributes( { color: colorValue } ),
                            label: __( \'Background Color\' ),
                        },
                        {
                            value: textColor,
                            onChange: ( colorValue ) => setAttributes( { textColor: colorValue } ),
                            label: __( \'Text Color\' ),
                        },
                    ] }
                >

</PanelColorSettings>

SO网友:Kaleb Heitzman
<PanelColorSettings
  title={__(\'Color Settings\')}
  colorSettings={[
    {
      value: props.attributes.backgroundColor,
      onChange: (color) => props.setAttributes({ backgroundColor: color }),
      label: __(\'Background Color\')
    },
    {
      value: props.attributes.textColor,
      onChange: (color) => props.setAttributes({ textColor: color }),
      label: __(\'Text Color\'),
      colors: [
        {
          name: \'white\',
          color: \'#fff\'
        },
        {
          name: \'black\',
          color: \'#222\'
        }
      ]
    }
  ]}
/>
结束
标签： plugin-development   customization   block-editor   小码农  

相关推荐

Admin Theme customization

我遵循wordpress codex网站上关于通过插件创建管理主题的说明。我激活了插件，但我的样式表没有包含在<head>.. 这是我的代码：add_action( \'admin_init\', \'kd_plugin_admin_init\' ); add_action( \'admin_menu\', \'kd_plugin_admin_menu\' ); function kd_plugin_admin_init() { /* Register