PHP
WordPress
JSX
React
Gutenberg

Wordpress Gutenberg よく使いそうなコンポーネントまとめ

この記事は?

Wordpressの新エディタGutenbergをいじってて
よく使いそうだと思ったコンポーネントをまとめていきます
追記編集していきます

TextControl と TextareaControl

テキスト編集のコンポーネント。
onChangeでイベントオブジェクトじゃなく中身の文字列だけが渡されるようになってるので、値の取り出しとかしなくていいので普通にtextareaとか書いちゃうより楽です。

JSX
const {TextControl, TextareaControl} = wp.components;

registerBlockType('myPlugin/myBlock',{
    edit({attributes,className,setAttributes}){
        return [
            <TextControl
                onChange={(newText1)=>setAttributes({text1: newText1});}
            />,
            <TextareaControl
                onChange={(newText2)=>setAttributes({text2: newText2});}
            />
        ];
    }
);

RichText

ちょっとした文字装飾ができるテキスト編集のコンポーネント。
使い方は基本TextControlと同じなのだけどこいつはwp.componentsではなくwp.editorにいます。

JSX
const {RichText} = wp.editor;

registerBlockType('myPlugin/myBlock',{
    edit({attributes,className,setAttributes}){
        return [
            <RichText
                onChange={(newText)=>setAttributes({text: newText});}
            />
        ];
    }
);

CheckboxControl

チェックボックスのコンポーネント
多分一番使ってるコンポーネント
チェックボックスをポチポチするだけで
要素を入れたり消したりできるのはユーザー的に便利

JSX
const {RangeControl} = wp.components;

registerBlockType('myPlugin/myBlock',{
    edit({attributes,className,setAttributes}){
        return [
            <CheckboxControl
                label='真偽値'
                help={bool?'真':'偽'}
                onChange={(bool)=>{setAttributes({bool:bool});}}
                checked={bool}
            />
        ];
    }
);

RangeControl

スライダーで数値の入力できるコンポーネント
ユーザー入力を特定の範囲の数値に保証できるのがいいところ
こういうこと簡単にできるのは便利

JSX
const {RangeControl} = wp.components;

registerBlockType('myPlugin/myBlock',{
    edit({attributes,className,setAttributes}){
        return [
            <RangeControl
                label='数値'
                onChange={(number)=>{setAttributes({number:number});}}
                value={number}
                min={0}
                max={12}
            />
        ];
    }
);

ServerSideRender

php側のregister_block_typeでrender_callbackを指定して
サーバーサイドでレンダリングするように作られたブロックをプレビューするコンポーネント。
使い方とかは公式ハンドブックのCreating dynamic blocksで大体わかります、大体だけ。
要は編集画面上で検索とかサーバーサイドの処理が絡むようなものをプレビューしながら編集できるわけです。
render_callbackとServerSideRenderを使ったブロックの仕組みはショートコードの後継となるものと思われます。
その場でプレビューできるってだけでなくパラメータの指定もドロップダウンとかトグルとかのUIで直感的に、タイポの心配なくできるので、ユーザーにとっては完全上位互換になるでしょう。

JSX
const {ServerSideRender} = wp.components;

registerBlockType('myPlugin/myBlock',{
    edit({attributes,className,setAttributes}){
        return [
            <ServerSideRender
                block='myPlugin/myBlock'
                attributes={attributes}
            />
        ];
    }
);

注意点としてはattributesの設定をjs側ではなくphp側
つまりregister_block_typeのパラメータで指定しないと
サーバーサイドでエラーになってしまうこと

考えてみりゃ当たり前ですが、考えずにやってるとつまづきます、つまづきました。

ということでregister_block_typeでrender_callbackとattributesは大体セットで指定することになります。

こんな感じに

PHP
register_block_type('myPlugin/myBlock',[
    'render_callback'=>function($attr){
        return sprintf('<p class="%s">MyBlock</p>',$attr['className']);
    },
    'attributes=>[
        'className'=>['default'=>'myclass']
    ]
]);

InspectorControls と PanelBody

ブロックを選択した時に表示されるサイドバーのコンポーネント。
PanelBodyでtitleを指定すると折りたたみにできます。
サイドバーはまず基本この二つを使って作ることになるだろうと思います。

JSX
const {InspectorControls} = wp.editor;
const {PanelBody} = wp.components;

registerBlockType('myPlugin/myBlock',{
    edit({attributes,className,setAttributes}){
        return [
            <InspectorControls>
                <PanelBody title="パネルのタイトル">
                //ここにパネルの中身を書く
                </PanelBody>
            </InspectorControls>
        ];
    }
);

PanelBodyは本来はPanelに入れてPanelHeaderと共に使うものっぽいんですが
正直Panelコンポーネントは見にくい使いにくいです、PanelBodyだけでいいです。

InspectorControlsってかなり使いそうなものなのに、公式ハンドブックにはBlock Controls: Toolbars and Inspectorのページで「InspectorControlsはHTMLモードでも表示されるからテキスト編集とかのは入れちゃダメだよ」という注意書きにしか登場してなくて、使い方とか全然書かれてません。

この情報が書かれていないハンドブックは不親切だと思います(切実)

InnerBlocks

ブロックを入れ子にするためのコンポーネントです。
なんとなくコンテンツの構造を複雑にさせないためにブロックは入れ子にできるようにしないだろうと思ってたんですが、できるようにしたようです。

JSX
const {InnerBlocks} = wp.components;

registerBlockType('myPlugin/myBlock',{
    edit({attributes,className,setAttributes}){
        return [
            <InnerBlocks template={[['core/paragraph'],['core/image']]}/>,
        ];
    },
    save({attributes,className,setAttributes}){
        return <InnerBlocks.Content/>
    }
);

allowedBlocksで入れ子にできるブロックを制限しつつ自由に組み合わせ
templateで指定した固定の構造で組み合わせ

値やID与えるようになっていないため
一つのブロックにInnerBlocksは一つしか置けないです

また、saveはinnerBlocksを含む場合配列にすることができません
saveは単一のコンポーネントを返す必要があります

この情報が書かれていないハンドブックは不親切だと思います(切実)

詳しい情報はGitHub