自分でシンプルに追加（編集不可ブロック）
functions.phpに追加したいブロックの記述を書けば追加できる。
ここでは追加するブロックのコードを独立して管理するべく、プラグインとして作成してみる。
pluginsファイルの作成
任意のプラグインフォルダを追加。
plugins/my-gutenberg同フォルダ内にindex.phpを作成して、以下のように記述。
<?php
/**
* Plugin Name: My Gutenberg
*/ここまででプラグインの作成自体は完了。
次項でブロックの中身を作成していく。
ブロックの定義
先程作成したindex.phpにブロックの定義を記述する。
<?php
/**
* Plugin Name: My Gutenberg
*/
function my_gutenberg_sample() {
// ブロックに使用するスクリプトを登録
wp_register_script(
'my-gutenberg-script',
plugins_url( 'block.js', __FILE__ ),
array( 'wp-blocks', 'wp-element' ),
'1.0.0',
true
);
// ブロックを登録し、ブロックで使用するスクリプトを指定
register_block_type( 'my-gutenberg/my-sample00', array(
'editor_script' => 'my-gutenberg-script',
) );
}
add_action( 'init', 'my_gutenberg_sample' );ブロックに使用するjsの作成と記述
( function( blocks, element ) {
var el = element.createElement;
var blockStyle = {
backgroundColor: '#efa336',
color: '#fff',
padding: '16px',
};
blocks.registerBlockType( 'my-gutenberg/my-sample00', {
title: 'My Gutenberg Example',
icon: 'format-aside',
category: 'layout',
edit: function() {
return el(
'p',
{ style: blockStyle },
'テスト'
);
},
save: function() {
return el(
'p',
{ style: blockStyle },
'テスト'
);
},
} );
}(
window.wp.blocks,
window.wp.element
) );ブロック名
registerBlockType()の最初の引数でブロック名を指定する。書式はnamespace/block名である必要がある。
namespaceは固有の文字列であれば何でもいい。ここではブロック名であることを示すmy-gutenbergを用いてmy-gutenberg/my-sample00とした。
パラメータ
title
ここで指定した文言が管理画面でブロック名として表示される
icon
ここで指定したアイコンが管理画面でブロックを示すアイコンとして使用される。
アイコンの指定は、以下のページから使用したいアイコンを選んで、
アイコンの右に表示されているdashicons-xxxxxからdashicons-を除いた文言を記述する。
上記例の場合、dashicons-format-asideを指定したということ。
category
ブロックを表示する際のグループを指定。
上記例の場合はレイアウトブロックとして表示される。
指定できるグループは以下。
common: 一般ブロックformatting: フォーマットlayout: レイアウト要素widgets: ウィジェットembed: 埋め込み
edit
管理画面で表示されるブロックの内容を記述
save
ブログ側で実際に表示される内容を記述