@wordpress/scriptsでオリジナルブロック作成

@wordpress/scriptsとは

WordPress開発のためのNode.jsベースのビルドツールキットで、ビルドプロセスを簡素化することができます。

Babel:
Babelは、最新のJavaScript（ES6+）を古いブラウザでも動作する形に変換します

webpack:
webpackは、JavaScriptアプリケーションのための静的モジュールバンドラーです。複数のJavaScriptファイルを1つにまとめ複数のJavaScriptファイルを1つにまとめ、コードを最適化し、アプリケーションの読み込み速度を向上させます。

手順

npm プロジェクトの初期化

package.json ファイルを作成します。

npm init -y

@wordpress/scriptsのインストール

（WordPress のブロックエディター用のパッケージ）

npm install @wordpress/scripts @wordpress/blocks @wordpress/i18n @wordpress/block-editor @wordpress/components @wordpress/data react react-dom

package.jsonにスクリプトが追記されます

{
  "name": "my-theme-custom-block",
  "version": "1.0.0",
  "description": "My first WordPress custom block in a theme",
  "main": "build/index.js",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@wordpress/scripts": "^x.x.x"
  }
}

ソースファイルファイル作成

wp-content

　┣　themes

　　　　┣　custometheme（独自WPテーマ）

　　　　　　　┣　src　

　　　　　　　　　　┣　blocks（独自ブロックのソースフォルダを追加していく）

　　　　　　　　　　　　　┣　sample（独自ブロックのソースフォルダ）

　　　　　　　　　　　　　　　　┗　index.js

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';

registerBlockType('customtheme/simple01', {
    title: 'sample01',
    icon: 'smiley',
    category: 'text',
    edit: function() {

        // ブロックの属性を設定
        const blockProps = useBlockProps({
            className: 'my-custom-class',
            style: {
                backgroundColor: 'lightgrey',
                padding: '20px',
            }
        });

        return (
            <div { ...blockProps }>
                sample01 (エディター内)
            </div>
        );
    },
    save: function() {
        const blockProps = useBlockProps.save({
            className: 'my-custom-class',
            style: {
                backgroundColor: 'lightgrey',
                padding: '20px',
            }
        });
        return (
            <div { ...blockProps }>
                sample01 (フロントエンド)
            </div>
        );
    },
});

webpack.config.jsでビルドについての設定を記述

プロジェクトのルートに webpack.config.js を作成しカスタマイズ内容を記述

const defaultConfig = require('@wordpress/scripts/config/webpack.config');
const path = require('path');

module.exports = {
    ...defaultConfig,

    // エントリーポイントの設定
    entry: {
        sample01: path.resolve(__dirname, 'wp-content/themes/customtheme/src/blocks/sample01/index.js'),
    },

    // 出力の設定
    output: {
        path: path.resolve(__dirname, 'wp-content/themes/customtheme/build'),
        filename: '[name].js', // [name] には entry で指定したキーが入る
    },
};

functions.php編集

// カスタムブロックの登録
function my_theme_custom_block_init() {

  // register_block_type()の第一引数は「ドメイン名/ブロック名」でregisterBlockType()の第一引数と一致させる
  register_block_type( 'custom-theme/simple01', array(
    'editor_script' => 'sample01-block-script',
  ) );
}
add_action( 'init', 'my_theme_custom_block_init' );

// ブロックのスクリプトを読み込む
function my_theme_custom_block_enqueue_assets() {
  $asset_file_sample01 = include( get_template_directory() . '/build/sample01.asset.php' );

  wp_enqueue_script(
      'sample01-block-script',
      get_template_directory_uri() . '/build/sample01.js',
      $asset_file_sample01['dependencies'],
      $asset_file_sample01['version']
  );
}
add_action( 'enqueue_block_editor_assets', 'my_theme_custom_block_enqueue_assets' );

ビルドの実行

以下のコマンドを実行して、ソースコードをビルドします。

npm run build

Attributes Object
TextControl (@wordpress/components) の使用例

テキスト入力フィールドを作成するためのコンポーネントです。

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
import { TextControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

registerBlockType('customtheme/sample02', {
    title: 'テキスト入力ブロック',
    icon: 'edit',
    category: 'text',
    attributes: {
        content: {
            type: 'string',
            default: '',
        },
    },
    edit: function Edit({ attributes, setAttributes }) {
        const [text, setText] = useState(attributes.content);

        const blockProps = useBlockProps({
            className: 'my-text-input-block',
            style: {
                backgroundColor: 'lightgrey',
                padding: '20px',
            }
        });

        const onChangeContent = (newContent) => {
            setText(newContent);
            setAttributes({ content: newContent });
        };

        return (
            <div { ...blockProps }>
                <TextControl
                    label="テキストを入力"
                    value={text}
                    onChange={onChangeContent}
                    placeholder="ここにテキストを入力してください"
                />
                <p>入力されたテキスト: {text}</p>
            </div>
        );
    },
    save: function Save({ attributes }) {
        const blockProps = useBlockProps.save();
        return (
            <div { ...blockProps }>
                <p>{attributes.content}</p>
            </div>
        );
    },
});

参考サイト

[Gutenberg]オリジナルブロックの制作方法まとめ
https://sushirice.pro/create-theme/1532/