カスタムブロックを追加してみた 2

2019年1月13日

この記事は約 6 分で読めます。

4.5

1. はじめに
2. 使用するブロックだけ表示する
3. オリジナルのカテゴリーを追加する
4. オリジナルカテゴリーにブロックを登録する
5. CSSを編集する
6. 最後に

はじめに

前回は
カスタムブロックを
導入する所までの記事を書きました。
https://neco913.kirara.st/post-3485/

今日は
以下の画像のような
状態を目指します。

オリジナル (4to6 Blocks) のカテゴリー
Dashicons の変更と追加 (layout & carrot)
記事とエディタの両方にスタイルを充てる

使用するブロックだけ表示する

使わないブロックは
表示していても仕方ないので
消してしまいます。

gutenberg-examples/index.phpの
表示しない行をコメントアウトします。

defined( 'ABSPATH' ) || exit;

// include '01-basic/index.php';
// include '01-basic-esnext/index.php';
// include '02-stylesheets/index.php';
include '03-editable/index.php';
// include '03-editable-esnext/index.php';
include '04-controls/index.php';
// include '04-controls-esnext/index.php';
// include '05-recipe-card/index.php';
// include '05-recipe-card-esnext/index.php';

二度と使わないのなら
消してしまうのもアリです。

オリジナルのカテゴリーを追加する

次に
gutenberg-examples/index.phpに
オリジナルのカテゴリーを追加する
ソースを記述します。

※ functions.php からでも可能だそうです。

defined( 'ABSPATH' ) || exit;

// オリジナルのカテゴリーを追加する
function my_plugin_block_categories( $categories, $post ) {
    return array_merge(
        $categories,
        array(
            array(
                'slug' => 'my-category',   //ブロックカテゴリーのスラッグ
                'title' => '4to6 Blocks',  //ブロックカテゴリーの表示名
                'icon'  => 'layout',    //アイコンの指定（Dashicons名）
            ),
        )
    );
}
add_filter( 'block_categories', 'my_plugin_block_categories', 10, 2 );

// include '01-basic/index.php';
// include '01-basic-esnext/index.php';
// include '02-stylesheets/index.php';
include '03-editable/index.php';
// include '03-editable-esnext/index.php';
include '04-controls/index.php';
// include '04-controls-esnext/index.php';
// include '05-recipe-card/index.php';
// include '05-recipe-card-esnext/index.php';

【 slug 】【 title 】【 icon 】
これらを任意に変更します。

【WordPress】Guternbergにオリジナルのブロックカテゴリーを追加する方法 | WEMO

WordPress5からの新エディタ、Guternbergでは様々なブロックタイプが用意されており、それぞれの特徴を ...

https://wemo.tech/2210

オリジナルカテゴリーにブロックを登録する

gutenberg-examples/03-editable/block.js
gutenberg-examples/04-controls/block.js
を編集します。

blocks.registerBlockType( 'gutenberg-examples/example-03-editable', {
	title: __( '4to6 Blocks: Editable', 'gutenberg-examples' ),
　　　　　　　　　　// お好きなタイトルに変更
	icon: 'carrot', // お好きなDashiconsを指定する
	category: 'my-category', // オリジナルカテゴリーを指定する

【 title 】【 icon 】
これらを任意に変更します。
【 category 】は
gutenberg-examples/index.phpの
【 slug 】で指定した
オリジナルカテゴリーを指定します。

アイコンの指定は
以下の dashicons を利用します。
dashicons のアイコン名
(接頭辞 dashicons- は書きません。)
を指定すると表示されます。