カスタムブロックの作り方 基礎・手順（制作中）

//必要な関数をインポート
import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';
//スタイルをインポート
import './style.scss';
import './editor.scss';

//ブロックの登録
registerBlockType('wdl/lw-test-1', {
    title: '基本のシンプルブロック', // ブロックのタイトル
    icon: 'edit', // アイコン
    category: 'common', // カテゴリ（WordPress内でどこに表示されるか）
    attributes: {
        content: {
            type: 'string', // テキストデータとして保存
            default: 'デフォルトテキスト' // デフォルト値
        },
    },
    //エディターでの表示
    edit: function(props) {
        const { attributes, setAttributes } = props;

        return (
            <div>
                <RichText
                    tagName="p" // 表示するHTMLタグ
                    value={attributes.content} // テキストの内容
                    onChange={(newContent) => setAttributes({ content: newContent })} // テキストが変更された時の処理
                    placeholder="ここにテキストを入力" // テキストが入力されるまでのプレースホルダー
                />
            </div>
        );
    },
    //フロントエンドでの表示
    save: function(props) {
        return (
            <div>
                <RichText.Content
                    tagName="p"
                    value={props.attributes.content} // 保存されたテキストを表示
                />
            </div>
        );
    }
});

//必要な関数をインポート
// registerBlockType: カスタムブロックを登録するための関数
// RichText: リッチテキスト（エディタで編集できるテキスト）を扱うためのコンポーネント
import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';

//スタイルをインポート
// style.scss: フロントエンド用のスタイルシート
// editor.scss: エディタ用のスタイルシート（ブロックエディタ内の表示用）
import './style.scss';
import './editor.scss';

//ブロックの登録
registerBlockType('wdl/lw-test-1', {
    // ブロックのタイトル
    // エディタ内で表示される名称
    title: '基本のシンプルブロック',

    // アイコン
    // ブロック選択時に表示されるアイコンを指定
    icon: 'edit', 

    // カテゴリ
    // ブロックがどのカテゴリに表示されるか。'common' は一般的なカテゴリ
    category: 'common', 

    // attributes
    // ブロックに保存されるデータを定義します。ここではテキスト（content）を保存
    attributes: {
        content: {
            // テキストデータとして保存（他に 'array', 'boolean', 'object' なども指定可能）
            type: 'string', 
            // デフォルトのテキスト内容
            default: 'デフォルトテキスト' 
        },
    },

    // edit関数
    // ブロックエディタ内でブロックを編集するUIを定義します
    // propsにはブロックの状態（attributes）とそれを更新する関数（setAttributes）などが渡されます
    edit: function(props) {
        // propsから attributes と setAttributes を分割して取得
        const { attributes, setAttributes } = props;

        // ブロックエディタ内に表示するHTML
        return (
            <div>
                {/* RichText コンポーネント */}
                {/* tagName: リッチテキストを表示するHTMLタグ（ここでは <p> タグ） */}
                {/* value: 現在のテキストデータを表示 */}
                {/* onChange: テキストが変更された時に、setAttributesを使って新しい値を保存 */}
                {/* placeholder: テキストが未入力の時に表示するプレースホルダー */}
                <RichText
                    tagName="p" // 表示するHTMLタグ（<p> タグとして表示）
                    value={attributes.content} // テキストの内容をattributesから取得
                    onChange={(newContent) => setAttributes({ content: newContent })} // テキストが変更された時に新しいテキストを保存
                    placeholder="ここにテキストを入力" // プレースホルダー
                />
            </div>
        );
    },

    // save関数
    // ブロックが保存されたとき、フロントエンドに表示されるHTMLを定義
    save: function(props) {
        // フロントエンドに表示するHTML
        return (
            <div>
                {/* RichText.Contentコンポーネント */}
                {/* tagName: フロントエンドに表示するHTMLタグ（<p> タグ） */}
                {/* value: 保存されたテキスト内容を表示 */}
                <RichText.Content
                    tagName="p" // フロントエンドに <p> タグとして表示
                    value={props.attributes.content} // 保存されたテキスト内容を取得して表示
                />
            </div>
        );
    }
});