wordpressは、数年前からクラシックエディターからブロックエディターへと変更になりより便利になりました。
アップデートするごとにブロックについてますます便利になっています。
ブロックをカスタマイズするプラグインは複数あるものの、自分の案件で絶対つかうであろう仕様をなんとかしてプラグインにできないかと考え、勉強してみました！
ちなみに初めてのブロック作成チュートリアルは、公式WordPress.orgにあります。
とても簡単です。
//公式にあるプラグイン簡単セットのコマンド
$ npx @wordpress/create-block gutenitem(ディレクトリ名)
この程度のテキストブロック…
使い道が見えない・・・
チュートリアルで、簡単にブロックができました！
さあ！使い道は・・・？
と疑問に思った方も多いかもしれません。
上記のチュートリアルでは、テキストしか入れることのできないブロックでした・・・
ネストしたブロック: InnerBlocks の使用
公式にちゃんと説明がありました↓↓
import { registerBlockType } from '@wordpress/blocks';
//以下にInnerBlocksを追記する
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
registerBlockType( 'gutenberg-examples/example-06', {
// ...
edit: () => {
const blockProps = useBlockProps();
return (
<div { ...blockProps }>
<InnerBlocks />
</div>
);
},
save: () => {
const blockProps = useBlockProps.save();
return (
<div { ...blockProps }>
<InnerBlocks.Content />
</div>
);
},
} );むちゃくちゃ簡単にできました！
テンプレートも作れる模様。
しかし、せっかくオリジナルのプラグインを作成したのに、複数のブロックを作成するとなると・・・
phpを自分でいじる必要がある。ディレクトリ構成も変える必要がある？
公式のコマンドで開発ディレクトリを作成するとわかるのですが、block.jsonが一つのものしか指していない・・・よくわからない・・・笑
わからない、そして忙しい・・・
自作プラグインに複数のブロックカスタマイズを入れる
よくよく調べてみると、公式にあるコマンドはよりシンプルな開発ディレクトリセットのようでした。
おそらく超上級者が使うならいろいろいじれて便利！みたいな。
いろいろ調べてみましたが、公式のやり方でやってる人はまだまだ少ないようで私にはよくわかりませんでした・・・笑
そこで、より簡単にオリジナルブロックができるように開発されていた方がいました！
$ npx create-guten-block my-custom-block(ディレクトリ名)
まじ神！！！
srcディレクトリの中にすでにblockファイルがあります。
このブロックファイル1つが、ブロックに相当する。
ブロックを2つに増やしたいときは、blockファイルをコピペして、中身のブロック名などを変更します。
ブロックの作り方
//InnerBlocksを追記
const { InnerBlocks } = wp.editor; // Inport block-editor
↑公式のやり方とは少し書き方が違います。
edit/saveのところは同じです。
複数ブロックを作成するときはregisterBlockTypeのところで、一意の名前にするように注意してください。
親切にも英語でコメントが書いてある。
registerBlockType( 'cgb/my-card-block', {
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
title: __( 'my-card - 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.名前のcgb/を外したら、なんかおかしくなった・・・笑
cgbはいるみたいです！
srcディレクトリないのblock.jsにそれぞれのブロックファイルを読み込ませることを忘れないように！
このblock.jsにインポートすることでちゃんと一つにビルドしてくれる。
ここのファイルに親切にも英語でちゃんとコメントがある。
テンプレート記入例
テンプレート可して使いまわしができるようにすれば、もっと便利になります。
//テンプレート記入例
const MY_TEMPLATE = [
//この場合は画像・見出し(levelで指定可能)・文章
[ 'core/image' ],
[ 'core/heading', { placeholder: 'Box Title', level: 3, className: 'card-style'}],
[ 'core/paragraph', { placeholder: 'Contents Text' } ],
[ 'core/button', { placeholder: 'ボタン' } ]
];
//
<InnerBlocks template={ MY_TEMPLATE } templateLock="all" />まとめ
オリジナルテーマを作成するときは、sectionブロックがあればいいなぁなど思っていましたが、このようにネストされたブロックを簡単に作成できちゃいました。
※現時点ではsectionブロックは標準ではないけど今後アプデがあればできる可能性はあります。
簡単に実装できちゃうので、試してみてください。