テーマやプラグインに自作のGutenbergブロックの機能を搭載する方法を紹介します。
テーマやプラグインの自作方法を理解した上でご覧ください。
説明不足な所も多くありますが、あえて複雑で頭に入らないなどにならないようにカットしてます。
Gutenberg対応ブロックとは
Gutenberg対応ブロックとは、ビジュアルエディターでブロックとして利用できて、編集などを視覚的にビジュアルエディターに対応させたものです。Gutenberg対応＝ビジュアルエディター対応といっても過言ではありません。
WordPressのビジュアルエディターでの利用が一般的になってきましたが、
ブロックというもの自体は、クラシックエディタの頃からショートコードで呼び出したり、テーマ、プラグインから呼び出して利用されていました。
サイトを見てる側からはGutenberg対応で実装しようが、非対応であろうが特に違いはありません。
もちろん今もまだショートコードで引数を渡して表示用としてだけ作られたブロックを使う事はできますので、自分しか利用することの無いブロックをGutenberg対応にする必要はありません。
しかし、実装方法が違うためにGutenberg対応ブロックにするかどうかはブロックを作る段階で先に決めておくほうが良いです。
環境準備
WordPress が提供する環境を利用し、ビジュアルエディター内での設定などの部分を作るのに便利なのでJSX環境を用意します。
Node.jsのインストールは省略します。
プラグインフォルダやテーマフォルダ内にワークスペースとして今回は[block-dev]として作成し、package.json を生成。
▼PC内 [block-dev]フォルダ
npm init -y
npm install --save-dev --save-exact @wordpress/scriptsインストール完了後下記 ▼package.json 7行目あたり書き換え部分
"scripts": {
"start": "wp-scripts start",
"build": "wp-scripts build"
}npm run startで開発モード、CTRL+Cで終了、npm run buildでビルドできるようになる
ディフォルトのビルドパスを変更するために webpack.config.js を生成し書き換える。
下記は[newblock]と[newblock2]の２つのブロックを１つ上の[blocks]フォルダに作る場合の例
[blocks-dev]は本番環境で必要ないため[blocks]をアップすればいいだけにしたい設定です。
▼webpack.config.js
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const path = require('path');
module.exports = {
...defaultConfig,
entry: {
'newblock': './src/newblock.js',
'newblock2': './src/newblock2.js',
},
output: {
path: path.join(__dirname, '../blocks'),
filename: '[name].js'
}
}サンプルスクリプト
ブロックの内容は変数を設定で変更して表示が変わるだけのサンプルブロックソースです。
ファイル名や登録名など同じものを指定する必要があるものは色を揃えてわかりやすくしています。
▼src/newblock.js コンパイル前のソースです
import { registerBlockType } from '@wordpress/blocks';
registerBlockType( 'myblock/new-block', {
title: 'にゅーぶろっく',
icon: 'calendar-alt',
category: 'myblockscategory',
supports: {html: false,},
attributes: {
myargument: {type: 'number',default: 1},
},
example: {
attributes: {myargument: 1},
},
edit: ( props ) => {
const { attributes: { myargument }, setAttributes } = props;
const getInspectorControls = () => {
return (
<InspectorControls>
<PanelBody title='変数設定' initialOpen={true}>
<RangeControl label='引数' value={ myargument } onChange={ (val) => props.setAttributes({ myargument: val }) } min={ 1 } max={ 10 }/>
</PanelBody>
</InspectorControls>
);
}
return ([
getInspectorControls(),
<Fragment>
<ServerSideRender block={props.name} attributes={{ myargument }}/>
</Fragment>
]);
},
save: () => { return null }
});npm run buildでビルドする
▼newblock.php 表示用のnewblock.phpを作りレンダー関数として準備する
<?php
function newblock_render($attr, $content) {
ob_start();
echo '引数は'.$attr['myargument'].'です';
$output = ob_get_contents();
ob_end_clean();
return $output;
}
?>▼function.phpやプラグインphp 外部ファイルにしたのでrequire_onceしておく
require_once plugin_dir_path( __FILE__ ). '/newblock.php';▼function.phpやプラグインphp enqueue_block_editor_assetsにフックしてwp_enqueue_scriptで登録
function my_gutenberg_editor_enqueue() {
wp_enqueue_script('my-gb-newblock',plugins_url( 'blocks/newblock.js', __FILE__ ),[ 'wp-blocks', 'wp-element', 'wp-components' ,'wp-server-side-render' ],filemtime(plugin_dir_path( __FILE__ ).'/blocks/newblock.js'),true);
}
add_action( 'enqueue_block_editor_assets', 'my_gutenberg_editor_enqueue' );
▼function.phpやプラグインphp initにフックして register_block_type で登録
function my_init() {
register_block_type( 'myblock/new-block', array('editor_script' => 'my-gb-newblock',
'render_callback' => 'newblock_render',
'attributes' => [
'myargument' => ['type' => 'number','default' => 1],
]
) );
}
add_action( 'init', 'my_init' );▼function.phpやプラグインphp カスタムブロックカテゴリーの登録
function ecm_block_categories( $categories, $post ) {
return array_merge($categories,array(array('slug' => 'myblockscategory','title' => '自作ブロック','icon' => 'admin-settings',),));
}
add_filter( 'block_categories', 'ecm_block_categories', 10, 2 );registerBlockTypeのカテゴリでtext,media,design,widgets,theme,embedなど既に存在するものを選べばカスタムブロックカテゴリーは必要なし。
以上で簡単なGutenberg対応ブロックが稼働したはずです。
関数やコンポーネントに関して詳しく調べたい方は developer.wordpress.org で検索してください
さいごに
簡単なGutenberg対応ブロックを実装することはできたでしょうか？
説明不足な所も沢山ありますが、逆に説明が多すぎると余計わけわからなくなったりすると思います。自分がはじめそうでした。
まずは、シンプルに実装してみてましょう。
