Gutenbergブロック開発

# Node.js（v16以上）とnpmをインストール後 # ブロックのひな型を生成（プラグインフォルダで実行） npx @wordpress/create-block my-pricing-block # 生成されたフォルダに移動 cd my-pricing-block # 開発サーバーを起動（ファイル変更を自動ビルド） npm start # 本番用ビルド npm run build

{ "apiVersion": 2, "name": "mfp/pricing-table", "title": "料金表カード", "category": "widgets", "icon": "money-alt", "description": "プラン名・価格・注目バッジ付きの料金表カードを挿入します", "textdomain": "my-pricing-block", "attributes": { "planName": { "type": "string", "default": "スタンダードプラン" }, "price": { "type": "string", "default": "\u00a51,980" }, "highlight": { "type": "boolean", "default": false } }, "editorScript": "file:./index.js", "style": "file:./style-index.css" }

import { useBlockProps, RichText, InspectorControls } from '@wordpress/block-editor'; import { PanelBody, ToggleControl } from '@wordpress/components'; export default function Edit( { attributes, setAttributes } ) { const { planName, price, highlight } = attributes; const blockProps = useBlockProps(); return ( <> {/* サイドバーのコントロール */} <InspectorControls> <PanelBody title="表示設定"> <ToggleControl label="注目プランとして強調表示" checked={ highlight } onChange={ val => setAttributes({ highlight: val }) } /> </PanelBody> </InspectorControls> {/* 編集画面のプレビュー */} <div { ...blockProps } className={ `pricing-card ${ highlight ? 'is-highlighted' : '' }` }> <RichText tagName="h3" value={ planName } onChange={ val => setAttributes({ planName: val }) } placeholder="プラン名を入力..." /> <RichText tagName="p" className="pricing-card__price" value={ price } onChange={ val => setAttributes({ price: val }) } placeholder="価格を入力..." /> </div> </> ); }

import { useBlockProps, RichText } from '@wordpress/block-editor'; export default function Save( { attributes } ) { const { planName, price, highlight } = attributes; const blockProps = useBlockProps.save(); return ( <div { ...blockProps } className={ `pricing-card ${ highlight ? 'is-highlighted' : '' }` }> <RichText.Content tagName="h3" value={ planName } /> <RichText.Content tagName="p" className="pricing-card__price" value={ price } /> </div> ); }

add_action( 'init', function() { register_block_pattern( 'mfp/hero-section', array( 'title' => 'ヒーローセクション', 'description' => '大きな見出しとボタンのセット', 'categories' => array( 'featured' ), 'content' => '<!-- wp:heading {"level":1} --><h1>タイトル</h1><!-- /wp:heading --><!-- wp:buttons --><div class="wp-block-buttons"><!-- wp:button --><div class="wp-block-button"><a class="wp-block-button__link">詳しく見る</a></div><!-- /wp:button --></div><!-- /wp:buttons -->', ) ); } );