new

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

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

4.5

はじめに

前回は
カスタムブロックを
導入する所までの記事を書きました。
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 】
これらを任意に変更します。

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

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- は書きません。)
を指定すると表示されます。

CSSを編集する

gutenberg-examples/03-editable/
gutenberg-examples/04-controls/
editor.cssstyle.cssを編集します。

editor.css がブロックの
エディタ側スタイル、
style.css がブロックの
フロント側スタイルとなります。

最後に

サンプルを弄るかたちの
カスタムブロックですが、
それなりに使えるかと思います。

自己満足の部分も
多々ある気がしますが・・(汗)

これは!と思った方は
是非お試しくださいませ。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
カスタムブロックを追加してみた 2