web-dev-qa-db-ja.com

カスタムGutenbergブロックでPanelColorSettingsを使用する方法

私はカスタムグーテンベルクブロックに取り組んでいます。私はいくつかのカスタムカラーピッカーを作成するために<PanelBody><BaseControl>と<ColorPalette>を使いましたが、組み込みの<PanelColorSettings>コンポーネントを使う方が効率的だと思われます。

カスタムブロックで<PanelColorSettings>コンポーネントを使用したことがありますか？私が見つけることができたこの技術の唯一の議論はここにありました： https://stackoverflow.com/questions/50480454/add-the-inbuilt-colour-palette-for-gutenberg-custom-block

plugin-developmentcustomizationblock-editor
2
wrydere

最初にコンポーネントをインポートする必要があります - 

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>
5
Ashiquzzaman Kiron