2025年5月

数値を使ってのブロックを作成。ブロック名：my-number-brock HTMLのみのシンプルな囲み枠を作成してみる HTMLでは以下のようになり、これをブロックに反映させることにする。しかし、ここでは囲み枠の「太さ」と「スタイル」「カラー」を変えることしかまだできていない。 &lt;p style=&quot;border: #ffb6c1 solid 1px;&quot;&gt; ここに本文を入れます。 &lt;/p&gt; 数値で設定するということになるので、とりあえず枠の線の太さを数値で変化させるようにしてみる。 CSSを外部リンクで適用できない場合などに使用される style タグ。これを使用する。pタグなどのhtml要素に対して、style=” “（style属性）を追加して、直接スタイルを指定する。 「CSS 枠線の幅」とかで検索すると「border-width」とか出てくる。このブロックではこれを直接使用しないで「borderWidth」と表現する。最初は小文字、２番目を大文字で「-」は外す。するとこれが実際に出力される時に「border-width」となる。 実際の出力コード：&lt;p style = "border-width:1px; "> edit.js や save.js のプレビューを確認するための style.scss に以下を記述して完成形を作成して確認しておくと理解しやすい。確認が済んだら削除しておくこと。 .wp-block-create-block-my-number-block { background-color: #21759b; border-width: 1px dotted #f00; border-style: dotted; color: #fff; padding: 20px; margin: 20px; } @wordpress/create-blockのインストール CDでpluginsフォルダへ移動 cd /Users/polo/Local\ Sites/local-malon/app/public/wp-content/plugins pluginsファオルだへ移動できたらインストールする。 npx @wordpress/create-block my-first-block これでもひな型を作成できる。 npx create-guten-block my-first-block これでも良い。latestとは「最新」という意味。 npx @wordpress/create-block@latest my-first-block ターミナルで「Code is Poetry」となったら完了。インストールが完了したら、ブロックを必ず有効化する。 以下のコマンドで開発モード実行のスタートになる。 npm start 最後に使うことになるが、本番用のコードを作成するには、以下のコマンドを実行することになる。 npm run build 以上。 実際にブロックを作成してみる まず最初にやることは数値のコントロールをするために「components」フォルダを作成して、その中に「number-control.js」ファイルを作成する。 このファイルによって、数値を細かく設定できるようになる。 import { BaseControl } from &quot;@wordpress/components&quot;; const NumberControl = (props) =&gt; { const { min, max, step, value, onChange, label, ...additionalProps } = props; const minlength = min.toString().length; return ( &lt;BaseControl label={label}&gt; &lt;input type=&quot;number&quot; min={min} max={max} step={step} value={value} onChange={(e) =&gt; { let val = e.target.value; if (e.target.value.length &gt;= minlength) { val = val &gt; max ? max : val; val = val &lt; min ? min : val; } onChange(val); }} onBlur={(e) =&gt; { let val = e.target.value; if (e.target.value.length &lt; minlength) { val = min; } onChange(val); }} style={{ marginLeft: &quot;8px&quot; }} /&gt; &lt;/BaseControl&gt; ); }; export default NumberControl; ① block.json の attributes に追加する。 "borderWidth" オブジェクトをまず定義（宣言）する。type は数値を扱うので integer、default は初期設定の数値。 &quot;attributes&quot;: { &quot;borderWidth&quot;: { &quot;type&quot;: &quot;integer&quot;, &quot;default&quot;: 1 } }, ② edit.js で RangeControl（範囲コントロール）を追加。 import { RangeControl } from &quot;@wordpress/components&quot;; 数値が変わった時、更新するイベントハンドラーを export default function Edit 内に追加。 const onChangeColumnCount = (val) =&gt; { setAttributes({ borderWidth: val }); }; block.json の完成ファイル "attributes"の"border"は線の種類なので"string"、"borderWidth"は枠囲みの線の太さなので"integer" { &quot;$schema&quot;: &quot;https://schemas.wp.org/trunk/block.json&quot;, &quot;apiVersion&quot;: 3, &quot;name&quot;: &quot;create-block/my-number-block&quot;, &quot;version&quot;: &quot;0.1.0&quot;, &quot;title&quot;: &quot;My Number Block&quot;, &quot;category&quot;: &quot;widgets&quot;, &quot;icon&quot;: &quot;smiley&quot;, &quot;description&quot;: &quot;数値コントロールのブロック例&quot;, &quot;example&quot;: {}, &quot;supports&quot;: { &quot;html&quot;: true, &quot;color&quot;: { &quot;gradients&quot;: true }, &quot;spacing&quot;: { &quot;margin&quot;: true, &quot;padding&quot;: true, &quot;blockGap&quot;: true } }, &quot;attributes&quot;: { &quot;content&quot;: { &quot;type&quot;: &quot;string&quot;, &quot;source&quot;: &quot;html&quot;, &quot;selector&quot;: &quot;p&quot; }, &quot;border&quot;: { &quot;type&quot;: &quot;string&quot;, &quot;default&quot;: &quot;solid&quot; }, &quot;borderWidth&quot;: { &quot;type&quot;: &quot;integer&quot;, &quot;default&quot;: 1 }, &quot;style&quot;: { &quot;type&quot;: &quot;object&quot;, &quot;default&quot;: { &quot;color&quot;: { &quot;text&quot;: &quot;#3a3a3a&quot;, &quot;background&quot;: &quot;#f3faf1&quot; } } } }, &quot;textdomain&quot;: &quot;multi-columns&quot;, &quot;editorScript&quot;: &quot;file:./index.js&quot;, &quot;editorStyle&quot;: &quot;file:./index.css&quot;, &quot;style&quot;: &quot;file:./style-index.css&quot;, &quot;viewScript&quot;: &quot;file:./view.js&quot; } edit.js の完成ファイル import { __ } from &quot;@wordpress/i18n&quot;; import { useBlockProps, RichText, InspectorControls, } from &quot;@wordpress/block-editor&quot;; // SelectControl を追加でインポート import { PanelBody, SelectControl } from &quot;@wordpress/components&quot;; import NumberControl from &quot;./components/number-control&quot;; import &quot;./editor.scss&quot;; //------------------- パーツの作成と全体のレイアウト設定 ------------------------------------------------ export default function Edit({ attributes, setAttributes }) { // attributes から columnRuleStyle を分割代入して取得 const { border, borderWidth } = attributes; // columnRuleStyle をスタイルのオブジェクト columnStyles に追加 const columnStyles = { border, borderWidth }; const onChangeContent = (val) =&gt; { setAttributes({ content: val });//コンテンツのテキストが変更された時に入れる内容 }; const onChangeBborderWidth = (val) =&gt; { setAttributes({ borderWidth: Number(val) });//外回り枠の太さ }; const onChangeBorder = (val) =&gt; { setAttributes({ border: val });//区切り線のスタイル }; // 新たに PanelBody を追加してその中に SelectControl コンポーネントを追加 return ( &lt;&gt; &lt;InspectorControls&gt; &lt;PanelBody title=&quot;枠の設定&quot;&gt; &lt;NumberControl label=&quot;枠回りの線の太さ&quot; onChange={onChangeBborderWidth} value={borderWidth} min={1} max={8} /&gt; &lt;SelectControl label=&quot;Style&quot; onChange={onChangeBorder} value={border} options={[ { label: &quot;None&quot;, value: &quot;none&quot;, }, { label: &quot;Solid&quot;, value: &quot;solid&quot;, }, { label: &quot;Dotted&quot;, value: &quot;dotted&quot;, }, { label: &quot;Dashed&quot;, value: &quot;dashed&quot;, }, { label: &quot;Double&quot;, value: &quot;double&quot;, }, { label: &quot;Groove&quot;, value: &quot;groove&quot;, }, { label: &quot;Ridge&quot;, value: &quot;ridge&quot;, }, ]} /&gt; &lt;/PanelBody&gt; &lt;/InspectorControls&gt; &lt;RichText {...useBlockProps({ style: columnStyles })} tagName=&quot;p&quot; onChange={onChangeContent}//テキストを変更したときの動作 value={attributes.content}//テキストを変更した時入れる内容 placeholder=&quot;テキストを入力してください ...&quot; /&gt; &lt;/&gt; ); } save.js の完成ファイル import { useBlockProps, RichText } from &quot;@wordpress/block-editor&quot;; export default function save({ attributes }) { // attributes から columnRuleStyle を分割代入で取得 const { border, borderWidth } = attributes; // スタイルを表すオブジェクトに columnRuleStyle を追加 const columnStyles = { border, borderWidth }; return ( &lt;RichText.Content {...useBlockProps.save({ style: columnStyles })} tagName=&quot;p&quot; value={attributes.content}//editで変更されたテキストの内容を表示する /&gt; ); } .wp-block-create-block-my-number-block { } 上と同じ。 .wp-block-create-block-my-number-block { }