今回は、Gutenberg Handbook の「ColorPalette」を参考に、このコンポーネントを使ったサンプルを作ってみました。
Editorモードで、文字の色と背景色、をカラーパレットでえらんだら、記事に「color block」という文字を、選んだ色で表示するBlockを作っていきます。出来上がると、こんな感じです。
Edit

記事

作成準備
今回、create-guten-blockというジェネレータを使って元になるBlockを作成して、block.jsファイルをカスタマイズという流れです。まずは、元になるBlockを作成するために次のコマンドを打ちましょう。
pluginsフォルダに移動
ターミナルを開いて、自分のwordpressのpluginsフォルダで実行します。私の場合、こんな感じのフォルダ。
cd /var/www/html/wp-content/plugins
Blockを作成
移動したら、「create-guten-block」コマンドで、pluginのテンプレートをジェネレート
npx create-guten-block my-block
cd my-block
これで、元になるBlockの作成が終わりました。今回は、追加のライブラリを使うので、@wordpress/components をインストール。
npm install @wordpress/components --save
ここまで行ったら、次のコマンドを打って、自動ビルドをSTARTします。
npm start
ColorPaletteを実装
それでは、コードの実装をしていきます。次のファイルを編集していきます。 my-block/src/block/block.js

block.js
基本的には、参考にしたサイト「ColorPalette」のソースを書いていけば動くのですが、editとsaveの間で colorの値を受け渡しするために、setAttributes を組み込んでいます。
/**
* BLOCK: my-block
*
* Registering a basic block with Gutenberg.
* Simple block, renders and saves the same content without any interactivity.
*/
// Import CSS.
import './style.scss';
import './editor.scss';
const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
import { ColorPalette } from '@wordpress/components';
import { withState } from '@wordpress/compose';
const MyColorPalette = withState( {
color: '#f00',
} )( ( { color, setState, onChange } ) => {
const colors = [
{ name: 'red', color: '#D8464F' },
{ name: 'lightgreen', color: '#4BA4A6' },
{ name: 'green', color: '#003D3A' },
];
return (
<ColorPalette
colors={ colors }
value={ color }
onChange={ ( color ) => {
onChange(color);
setState( { color } );
} }
/>
)
} );
registerBlockType( 'cgb/block-my-block', {
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
title: __( 'my-block - CGB Block' ), // Block title.
icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
keywords: [
__( 'my-block — CGB Block' ),
__( 'CGB Example' ),
__( 'create-guten-block' ),
],
edit: function( {setAttributes} ) {
return (
<div style={{background: 'LightGray', fontSize: '16px', padding:'12px'}}>
背景:
<MyColorPalette onChange={ (background) => setAttributes({background}) }></MyColorPalette>
文字の色:
<MyColorPalette onChange={ (color) => setAttributes({color}) }></MyColorPalette>
</div>
);
},
save: function( props ) {
var divStyle = {
color: props.attributes.color,
background: props.attributes.background,
width: '100%',
height: '100%'
}
return (
<div style={divStyle}>
color block
</div>
);
},
} );
Blockを確認
wordpressの設定画面で、pluginをactivateしたあと、記事の投稿でBlockが使えるようになっていれば完成です。(※ Plugin名、Block名は、ジェネレーターで作成されたものをそのまま使っていれば、my-block と言う名前になっていると思います。)
plugins

記事の作成中
