Gutenbergでオリジナルブロックを作成する超基本の方法を解説【WordPress】

WordPress5.0以降で採用されたGutenbergエディターでは、「ブロック」という単位でエディターを更新していきます。

段落にあたる<p>タグや、リストにあたる<ul>, <ol>など、全ての要素がブロックとして扱われます。

これはこれでHTMLやCSSを知らなくても直感的に扱えるため、何の知識も持たないクライアントさんが扱うことを想定したテーマなど、特定のユーザ向けには便利にできています。

ただ、WordPressに初めから実装されているブロックだけではデザイン性やオリジナル性に欠けます。

また、テーマ固有のカスタマイズなどを再現するにはブロックを組み合わせてグループにした上で特定のCSSを適用する、などの操作が必要になります。これでは操作が面倒な上に、クライアント向けでもありません。

そこで、今回はGutenbergにオリジナルのブロックを作成し、オリジナルデザインを簡単に適用させるカスタマイズ法を解説していきます。

初めに断っておきますが、functions.php、JavaScript、CSS、WordPressのファイル読込などの総合知識が必要になりますので、初心者向きではありません。

Step1. PHPでオリジナルブロック用エディターを作成する

最初に、ブロックエディタ用のCSS、JSを読み込みます。アクションフックにenqueue_block_assetsを登録しましょう。

ここではPHPファイルの編集が必要です。functions.phpなど、適宜必要な個所に記載して下さい。

// オリジナルブロック用JS、CSS
add_action( 'enqueue_block_assets', function() {
  // CSS
  wp_enqueue_style(
    'my-block-css',
     get_template_directory_uri(). '/my-block.css'
  );

  // JavaScript
  wp_enqueue_script(
    'my-block-js',
     get_template_directory_uri(). '/my-block.js'
  );
});

enqueue_block_assetsフックにはお馴染みのwp_enqueue_script()やwp_enqueue_style()を使用します。こうすることによって、指定したファイルがGutenbergにエディタ編集画面とフロントエンドの両方で読み込まれます。

なお、enqueue_block_editor_assetsというフックもあります。こちらは、Gutenbergのブロックエディタ編集画面にのみ読み込まれるフックです。

フロント側への読込が必要ない場合はenqueue_block_editor_assetsを使用しておけば、is_admin()などの記述が必要なくなります。

状況に合わせて適宜使用してください。

Step2. CSSでオリジナルブロックのスタイリングを行う

任意のCSSスタイリングを行っておきます。

style.cssやeditor-style.cssに記載してある場合、このステップは省略できる可能性があります。

オリジナルブロックを作成するとなると、通常はそれなりに複雑なCSSになります。ここでは説明の簡略化のため、枠線がつくだけのボックスを定義します。

今回のスクリプトの場合、記載するファイルはmy-block.cssになります。

@charset "UTF-8";
.my-block {
    padding: 20px;
    border: 3px solid #ff6600;
}

Step3. JavaScriptでオリジナルブロックのHTMLを書き出す

ブロックエディタに読み込んだJSで、オリジナルブロックを追加するためのJavaScriptを書きます。

まずは解説の簡略化のため、最低限の構成を記載します。構造が分かりやすいよう、あえて変数などを使用せずに冗長なサンプルになっています。適宜、ご自分の環境に合わせて書き変えて下さい。

今回の場合、記載するファイルはmy-block.jsです。

(function () {
    wp.blocks.registerBlockType( 'namespace/my-block', {
      title   : 'マイブロック', // 必須
      category: 'common', // 必須。WPデフォルトの一般ブロックに追加される
      edit    : function () {
        return wp.element.createElement( 'div', { className: 'my-block' }, 'My block. Editor.' );
      },
      save    : function () {
        return wp.element.createElement( 'div', { className: 'my-block' }, 'My block. Frontend.' );
      },
    });
})();

実行結果

ブロックエディタに「マイブロック」が追加される

ここまでを実行できると、Gutenbergのブロックエディタ上で「マイブロック」というブロックが追加されます。

オリジナルな内容のブロックが挿入される

また、このブロックを追加した場合の表示は、以下のようになります（フロントエンド側）。バックエンド（Gutenbergエディタ）側では、Frontendの部分がEditorになっているはずです。

オリジナルブロック用のCSSも適用されています。

静的ブロックの出来上がり

ここまでで、最も基本的なオリジナルの静的ブロックが出来上がりました。このままではブロックの中身を動的に書き変えることができないため、実用性には欠けます。

実用段階では、上記の基本的なオリジナルブロックを基準に、動的にブロックの中身の書き変えやブロックのスタイル変更などができるように改造していきます。

registerBlockTypeについて

動的書きかえについては次の機会に譲り、まずは基本的なregisterBlockType()の使用方法を解説したいと思います。

registerBlockTypeの使い方

基本的には、registerBlockType()でブロックを登録していきます。

registerBlockType( 'namespace/block-name', {});

namespace/block-nameとして構造化する必要があります。

ブロック名は英数字（小文字）とダッシュのみ使用可能で、文字で始まる必要があります。（数字で初めてはいけない）

また、作成されるブロックは、<!– wp:namespace/block-name –>のコメント区切り文字でブロックとして区切られます。

registerBlockTypeの属性

registerBlockType()の第2引数に、属性値を記載していきます。

titleとcategoryは必須です。それぞれ、表示タイトルとカテゴリを表します。

editでは、Gutenbergエディターで編集時に使用するブロックの構造を定義していきます。

saveには、保存時の定義を記載していきます。フロントエンド（実際のサイト表示）での表示となり、最終的なマークアップは、post_contentに保存されます。

(旧) 基本的なブロックの作成

(2024/6/16) この文書の原文は削除されました。以後は「ブロック開発の基本原理」以下を参照ください。便…

ja.wordpress.org

最後までお読みいただきありがとうございました。