WordPressのブロックのプラグインと自作

覚書です。

WordPressのブロックエディタのプラグイン

WordPress.org 日本語

BlockMeister – Block Pattern Builder Visually create custom block patterns. No coding skills needed! Categorize them easily and use keywords for easy discoverability.

WordPress.org

Custom Block Patterns You can easily create your own block patterns and register them.

ただし、CocoonやSWELLのテーマはデフォルトで対応しているため、これらのプラグインは必要ありませんでした。

WordPressのパターン(旧再利用ブロック)

WordPressのパターン(旧再利用ブロック)はWordPressの標準機能のようです。CocoonもSwellも対応しています。

Cocoonの場合は

外観 > パターン

• 同期：修正すると、すべて同じパターンになる。
• 非同期：同じテンプレを使い回すけど、内容は変更したい。リストタグなどに便利。

JSONファイルでインポートできるようです。JSONファイルの方がお手軽です。

ただ、functions.phpで書く方法もあります。

次のような場合、functions.phpの方がよいでしょう。

• プラグイン化を検討している
• プラグイン化してCSSとHtmlを一緒にしたい
• プラグイン化して配布物のアップデート

WordPressのブロックの自作(functions.php)

今回はfunctions.phpで作成します。

function my_custom_block_patterns_init() {
    // 箇条書きリストパターン
    register_block_pattern(
        'my-custom-patterns/simple-bullet-list',
        array(
            'title'       => __( 'シンプルな箇条書きリスト', 'text-domain' ),
            'description' => __( '箇条書きのリストブロックパターンです', 'text-domain' ),
            'content'     => "<!-- wp:list -->\n<ul>\n\t<li>リストアイテム1</li>\n\t<li>リストアイテム2</li>\n\t<li>リストアイテム3</li>\n</ul>\n<!-- /wp:list -->",
        )
    );

    // 番号付きリストパターン
    register_block_pattern(
        'my-custom-patterns/simple-numbered-list',
        array(
            'title'       => __( 'シンプルな番号付きリスト', 'text-domain' ),
            'description' => __( '番号付きリストのブロックパターンです', 'text-domain' ),
            'content'     => "<!-- wp:list {\"ordered\":true} -->\n<ol>\n\t<li>ステップ1</li>\n\t<li>ステップ2</li>\n\t<li>ステップ3</li>\n</ol>\n<!-- /wp:list -->",
        )
    );
}
add_action( 'init', 'my_custom_block_patterns_init' );

プラスボタンを押してlistと検索して表示することはできます。

しかし、この方法は問題がありましたね。/(スラッシュ)をおしても検索になりません。

WordPressのブロックの自作(プラグイン化)

パターンではなくブロックに追加する方法がよさそうです。

ローカルを利用しましょう。

ithands

Local by Flywheelの使い方(ファイルの場所、エラー) | ithands Local by Flywheel(現・Local)の使い方、覚書です。 Local by Flywheelのダウンロード Download > Mac/WIndows > 仕事とメールアドレスは必須 > GET ITNO

ブロックエディタをちゃんと実装しようとすると、開発環境の導入やReactの勉強も必要でしょう。Udemyなどで勉強しましょう。

registerBlockTypeを使えばよさそうです。

こちらのサイトが平易な言葉でわかりやすかったです。

JSXを使うと

⭕️コードが簡潔に書くことができる

❌環境構築やビルドが必要

https://rakuraku-engineer.com/posts/wp-block-custom/

ビルド環境が必要か?

僕みたいなNext.jsなどでビルド環境慣れしている人はさっさと作った方がよさそうです。

ビルド設定 なし

• メリット
  • セットアップが楽（Babel, webpack など不要）
  • PHPファイル + JSファイルだけですぐ試せる
  • ブロックの実装を少しだけ足したい程度なら、最短で動作確認できる
• デメリット
  • ES5ベースの書き方になるため、コードがやや古くさい／煩雑になりがち
  • JSX や TypeScript などはそのまま使えない
  • 複数ファイルに分割しづらい・コード量が増えると管理が大変

ビルド設定 あり（Babel, webpack 等）

• メリット
  • ESNext(ES6+)以降の最新のJavaScript文法、JSX、TypeScript、SCSS など モダンな構文 が使える
  • 大規模でもモジュール分割しやすく、コードの管理が楽になる
  • Reactコンポーネント風に柔軟に書ける
• デメリット
  • 設定が必要（環境構築、パッケージ管理、ビルドスクリプト）
  • 覚えることや手間が増える
  • フロント側に出すアセットを最適化するなら、より複雑になる

WordPressのブロックの自作(JSON)

JSONはおそらくこういうコードのはずです(functions.phpで実装したため未検証)

{
  "version": 2,
  "namespace": "my-custom-patterns",
  "title": "シンプルな箇条書きリスト",
  "content": "<!-- wp:list --><ul><li>リストアイテム1</li><li>リストアイテム2</li><li>リストアイテム3</li></ul><!-- /wp:list -->"
}