数値を使ってのブロックを作成。
ブロック名：Local-Polo/my-number-brock
現在うまく動作しているが、色を設定するとテキストと枠の色が同時に同じ色で変更されてしまう。
これを別々に色を設定する方法が現在まだ不明。
HTMLのみのシンプルな囲み枠を作成してみる
HTMLでは以下のようになり、これをブロックに反映させることにする。
しかし、ここでは囲み枠の太さを変えることしかまだできていない。
<div style="border: #ffb6c1 solid 1px; font-size: 100%; padding: 20px;"> ここに本文を入れます。 </div>数値で設定するということになるので、とりあえず枠の線の太さを数値で変化させるようにしてみる。
CSSを外部リンクで適用できない場合などに使用される style タグ。これを使用する。
pタグなどのhtml要素に対して、style=” “（style属性）を追加して、直接スタイルを指定する。
「CSS 枠線の幅」とかで検索すると「border-width」とか出てくる。このブロックではこれを直接使用しないで「borderWidth」と表現する。最初は小文字、２番目を大文字で「-」は外す。するとこれが実際に出力される時に「border-width」となる。
<p style = “border-width:1; “> となる。px が入っていないが、その場合はデフォルトで px らしい。
こんな感じで使う。styleはあくまでCSSのコードになる。
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
以上。
それでは実際にブロックを作成してみる
style.scssは何も設定していないので削除してもよい。そのまま開けておいても問題ない。
.wp-block-create-block-my-number-block {
}上と同じ。
.wp-block-create-block-my-number-block {
}① block.json の attributes に追加する。
“borderWidth” をまず定義（宣言）する。type は数値を扱うので integer、default は初期設定の数値。
"attributes": {
"borderWidth": {
"type": "integer",
"default": 1
}
},② edit.js で RangeControl（範囲コントロール）を追加。
// RangeControl のインポートを追加
import { RangeControl } from "@wordpress/components";数値が変わった時、更新するイベントハンドラーを export default function Edit 内に追加。
// 属性 borderWidth を更新するためのイベントハンドラーを追加
const onChangeColumnCount = (val) => {
setAttributes({ borderWidth: val });
};block.json の完成ファイル
“attributes”の”border”は線の種類なので”string”、”borderWidth”は枠囲みの線の太さなので”integer”
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "create-block/my-number-block",
"version": "0.1.0",
"title": "My Number Block",
"category": "widgets",
"icon": "smiley",
"description": "数値コントロールのブロック例",
"example": {},
"supports": {
"html": true,
"color": {
"gradients": true
},
"spacing": {
"margin": true,
"padding": true,
"blockGap": true
}
},
"attributes": {
"content": {
"type": "string",
"source": "html",
"selector": "p"
},
"border": {
"type": "string",
"default": "solid"
},
"borderWidth": {
"type": "integer",
"default": 1
},
"style": {
"type": "object",
"default": {
"color": {
"text": "#3a3a3a",
"background": "#f3faf1"
}
}
}
},
"textdomain": "multi-columns",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"viewScript": "file:./view.js"
}
edit.js の完成ファイル
import { __ } from "@wordpress/i18n";
import { useBlockProps, RichText, InspectorControls, } from "@wordpress/block-editor";
// SelectControl を追加でインポート
import { PanelBody, SelectControl } from "@wordpress/components";
import NumberControl from "./components/number-control";
import "./editor.scss";
//------------------- パーツの作成と全体のレイアウト設定 ------------------------------------------------
export default function Edit({ attributes, setAttributes }) {
// attributes から columnRuleStyle を分割代入して取得
const { border, borderWidth } = attributes;
// columnRuleStyle をスタイルのオブジェクト columnStyles に追加
const columnStyles = { border, borderWidth };
const onChangeContent = (val) => {
setAttributes({ content: val });//コンテンツのテキストが変更された時に入れる内容
};
const onChangeBborderWidth = (val) => {
setAttributes({ borderWidth: Number(val) });//外回り枠の太さ
};
const onChangeBorder = (val) => {
setAttributes({ border: val });//区切り線のスタイル
};
// 新たに PanelBody を追加してその中に SelectControl コンポーネントを追加
return (
<>
<InspectorControls>
<PanelBody title="枠の設定">
<NumberControl
label="枠回りの線の太さ"
onChange={onChangeBborderWidth}
value={borderWidth}
min={1}
max={8}
/>
<SelectControl
label="Style"
onChange={onChangeBorder}
value={border}
options={[
{
label: "None",
value: "none",
},
{
label: "Solid",
value: "solid",
},
{
label: "Dotted",
value: "dotted",
},
{
label: "Dashed",
value: "dashed",
},
{
label: "Double",
value: "double",
},
{
label: "Groove",
value: "groove",
},
{
label: "Ridge",
value: "ridge",
},
]}
/>
</PanelBody>
</InspectorControls>
<RichText
{...useBlockProps({ style: columnStyles })}
tagName="p"
onChange={onChangeContent}//テキストを変更したときの動作
value={attributes.content}//テキストを変更した時入れる内容
placeholder="テキストを入力してください ..."
/>
</>
);
}save.js の完成ファイル
import { useBlockProps, RichText } from "@wordpress/block-editor";
export default function save({ attributes }) {
// attributes から columnRuleStyle を分割代入で取得
const { border, borderWidth } = attributes;
// スタイルを表すオブジェクトに columnRuleStyle を追加
const columnStyles = { border, borderWidth };
return (
<RichText.Content
{...useBlockProps.save({ style: columnStyles })}
tagName="p"
value={attributes.content}//editで変更されたテキストの内容を表示する
/>
);
}