カスタムブロックjsx書き方色々

<a href="#"></a>

#の部分をサイドバーの入力フォームで設定する仕組み

import { registerBlockType } from '@wordpress/blocks'; // ブロックを登録するための関数
import { InspectorControls } from '@wordpress/block-editor'; // エディターのサイドバー (InspectorControls) を作成するためのコンポーネント
import { PanelBody, TextControl } from '@wordpress/components'; // サイドバーに表示されるコンポーネント (PanelBody, TextControl)

// ブロックを登録する関数 registerBlockType を使って 'wdl/test-1' というブロックを作成
registerBlockType('wdl/test-1', {
    title: 'Test Block 1', // ブロックのタイトル (エディターに表示される名前)
    icon: 'megaphone', // ブロックのアイコン (ここでは WordPress に用意されているアイコンの 'megaphone' を指定)
    category: 'layout', // ブロックが属するカテゴリー (ここでは 'layout' カテゴリーに分類)
    
    // ブロックの属性を定義
    attributes: {
        buttonUrl: { // この属性はリンクボタンのURLを格納するためのもの
            type: 'string', // URLは文字列型
            default: '#', // デフォルトでは `#` が設定されている
        },
    },

    // ブロックがエディター内でどのように表示・編集されるかを定義する `edit` 関数
    edit: function(props) {
        // props にはブロックの属性やメソッドが含まれる
        const { attributes, setAttributes } = props; // 属性 (attributes) と、属性を更新するための関数 (setAttributes) を props から取得
        const { buttonUrl } = attributes; // attributes から buttonUrl を取り出す

        // URLが変更された時に呼び出される関数
        function onChangeButtonUrl(newUrl) {
            setAttributes({ buttonUrl: newUrl }); // `setAttributes` を使って新しいURLを保存
        }

        return (
            <div className="wp-block-wdl-test-1"> {/* ブロックのメインのラップ要素 */}
                <InspectorControls> {/* サイドバー (InspectorControls) を定義 */}
                    <PanelBody title="リンクの設定"> {/* サイドバー内のパネル (PanelBody) に「リンクの設定」というタイトルを表示 */}
                        <TextControl
                            label="リンク先URL" // フォームのラベルとして「リンク先URL」を表示
                            value={buttonUrl} // `buttonUrl` 属性の値をフォームに表示
                            onChange={onChangeButtonUrl} // フォームに値が入力されたときに `onChangeButtonUrl` 関数が呼ばれる
                        />
                    </PanelBody>
                </InspectorControls>

                {/* エディター内にリンクを表示する部分 */}
                <div>
                    <a href={buttonUrl} target="_blank" rel="noopener noreferrer"> {/* `href` に `buttonUrl` の値を入れる */}
                        リンクはこちら {/* リンクテキスト */}
                    </a>
                </div>
            </div>
        );
    },

    // ブロックが保存されるときにどのようにHTMLが生成されるかを定義する `save` 関数
    save: function(props) {
        // props から attributes を取得
        const { attributes } = props;
        const { buttonUrl } = attributes; // attributes から buttonUrl を取り出す

        return (
            <div className="wp-block-wdl-test-1"> {/* 保存時のメインラップ要素 */}
                <a href={buttonUrl} target="_blank" rel="noopener noreferrer"> {/* 保存時の `a` タグにリンクのURLをセット */}
                    リンクはこちら {/* 保存時のリンクテキスト */}
                </a>
            </div>
        );
    }
});