カスタムブロックを追加してみた 2
この記事は約 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 ) {
if ( $post->post_type !== 'post' ) {
return $categories;
}
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.cssと style.cssを編集します。
editor.css がブロックの
エディタ側スタイル、
style.css がブロックの
フロント側スタイルとなります。
最後に
サンプルを弄るかたちの
カスタムブロックですが、
それなりに使えるかと思います。
自己満足の部分も
多々ある気がしますが・・(汗)
これは!と思った方は
是非お試しくださいませ。
最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
まだ、コメントがありません