テキストを入力できるサイドバーのコントロール作成｜create-block

polo-web — Wed, 28 May 2025 06:42:41 +0000

TextControlを使ってサイドバーにテキストを入力するボックスを作成。

テキストコントロール：https://developer.wordpress.org/block-editor/reference-guides/components/text-control/

こんな感じになる。

TextControl

TextControlコンポーネントを使用すると、テキストを入力して編集することができるようになる。

ブロック名：Local-Polo/text-control

サイドバーの入力ボックスからテキストをコンテンツに入れる

コンテンツに直接入力することは出来ない。

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "create-block/text-control",
	"version": "0.1.0",
	"title": "Text Control",
	"category": "widgets",
	"icon": "smiley",
	"description": "Example block scaffolded with Create Block tool.",
	"example": {},
	"supports": {
		"html": false
	},
	"attributes": {
		"content": {
			"type": "string",
			"default": "テキストの入力..."
		}
	},
	"textdomain": "text-control",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css",
	"viewScript": "file:./view.js"
}

以下の23行目は content が入力（true）されているなら p タグ内の content に入れる、ということになる。

import { __ } from '@wordpress/i18n';

import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl } from '@wordpress/components';

import './editor.scss';

export default function Edit({ attributes, setAttributes }) {
	const { content } = attributes;

	return (
		<>
			
				
					 setAttributes({ content: value })}
					/>
				
			
			
				{content && {content}}
			
		
	);
}

import { useBlockProps } from '@wordpress/block-editor';

export default function save({ attributes }) {
	const { content } = attributes;
	return (
		
			{content && {content}}
		
	);
}

.wp-block-create-block-text-control {
	
}

.wp-block-create-block-text-control {
	background-color: #21759b;
	color: #fff;
	padding: 5px 20px;
}

１つのプラグインに複数のブロックをまとめる｜create-block

polo-web — Fri, 23 May 2025 09:09:12 +0000

create-blockで、簡単にプラグインのひな型ができるのはいいが、出来上がるブロックは一つしか出来ない。
これを複数まとめてプラグインにするには？

ブロック名：polo-multiple-block

WordPress v6.8.1 を使用
@wordpress/create-block@4.67.0を使用

このページで作成したファイルをダウンロード

polo-multiple-block.zip

1 ファイル 89 MB

ダウンロード

仕上がりは以下のようになる。自分で作成したカテゴリーの中に、自作のブロックを複数入れる。
これは多くのプラグイン開発者が行なっている方法だと思う。

プラグインの開発は「Local」というツールを使用している。手元にあるサーバーなのでアクセスが簡単だし、トラブルでも慌てることがないのでプラグイン開発には必須のアイテムだと思う。

ここで作成した

まず @wordpress/create-block からスタート

まず最初は複数のプラグインの全体のためのブロック名で以下のコマンドを実行する。
これはプラグインとして登録する名前「polo-multiple-block」になる。

もちろん名前は何でも良い、ここでは「polo-multiple-block」として始める。poloは私のサイトの愛称なので自分がわかりやすいように先頭につけた。

以下のコマンドの前に必ず cd でプラグインに移動しておく必要がある。

pluginsに移動できたら以下を実行する。

npx @wordpress/create-block polo-multiple-block

出来上がったフォルダ構成を変更

インストール後の各プラグインの構造は次のようになっているはずである。

polo-multiple-block //新規作成したプラグイン名
  ├── build
  ├── node_modules 
  ├── polo-multiple-block.php 
  ├── package-lock.json
  ├── package.json 
  ├── readme.txt
  └── src
   	   └── polo-multiple-block //新規作成したプラグイン名
             ├── block.json
   		     ├── edit.js
   		     ├── editor.scss
   		     ├── index.js
   		     ├── save.js
   		     ├── style.scss
             └── view.js

ブロックを有効にする

ここでブロックが表示されるか確認するために Polo Multiple Block を有効にする。

ウィジェットにPolo Multiple Blockを確認表示できた。

編集作業で Visual Studio Code を起動する

編集にはVisual Studio Codeを使用している。このVSCを起動してプラグイン内にある「polo-multiple-block」の全てのファイルを開く。

VSCメニューから「ターミナル -> 新しいターミナル」を選択。以下を実行しておく。

npm start

polo-blocks フォルダを作成する

複数のブロックを入れるためのpolo-blocksフォルダを新しく作成する。

これは次のようにする。
srcフォルダの下にpolo-blocksフォルダを新しく作る。
先にできていた src の中にある polo-multiple-block のフォルダを中身が入ったまま、polo-blocksの中に入れる。

以下の通りになる。

polo-multiple-block
  ├── build
  ├── node_modules 
  ├── polo-multiple-block.php  
  ├── package-lock.json
  ├── package.json 
  ├── readme.txt
  └── src
       └── polo-blocks //フォルダを新規作成
   	         └── polo-multiple-block 
                   ├── block.json 
   		           ├── edit.js
   		           ├── editor.scss
   		           ├── index.js
   		           ├── save.js
   		           └── style.scss

この移動した時点でもブロックは表示される。

しかし、polo-blocksフォルダを作成して polo-multiple-blockフォルダを移動したら必ず以下の作業が必要になる。これをしないとパスがおかしくなるから。

ここがポイント polo-blocks にパスを通すために polo-multiple-block.php 内の register_block_type を書き換える

上で作成したpolo-blocksフォルダを使えるようにするためにこの設定が必要になる。

PHPファイルにはブロックを登録するPHPの関数があり、initというWordPressのアクションフックでこの関数が実行されるようになっている。

ここで２行目の(glob(plugin_dir_path(FILE) . 'build/polo-blocks/*') as $block)という部分は自分（polo-multiple-block.phpファイル）がいるディレクトリの中のbuildフォルダを指しているらしい。
そして、その中にblock.jsonというファイルがあれば、その内容に基づいてブロックを登録するという機能を果たしていて、これを複数のフォルダに対してその数だけ実行すれば複数のブロックが一度に登録されるという仕組みをつくっているらしい。この設定の後は何もしなくても自動的に書き直してくるのかな？

実際にどんなふうにコード書くかというと以下のようになるならしい。
polo-blocksとなっているところが新しく作成したpolo-blocksフォルダにあたる。これがポイント！

function create_block_polo_multiple_block_block_init() {
	foreach (glob(plugin_dir_path(__FILE__) . 'build/polo-blocks/*') as $block) {
		// Static block
		register_block_type($block);
	}
}
add_action( 'init', 'create_block_polo_multiple_block_block_init' );

glob(plugin_dir_path(__FILE__) . 'build/polo-blocks/*')でbuild/polo-blocks内のフォルダ名が配列で渡るので、それをループで回してブロック登録を行うということらしい。
従って、これによりbuild/polo-blocks内にブロックを増やしていけば、登録されるブロックが増えていくことになる。

polo-multiple-block.php の全ての内容

パスとして’build/polo-blocks/*’が指定されているのが分かると思う。
関数内の最初に入れる必要がある。後の方に入れるとうまく動作しない。





この最初のブロックを fiest-block に変更する



後に入れるブロック名と合わせるためにpolo-multiple-blockをfirst-blockに変更する。



polo-multiple-block
  ├── build
  ├── node_modules 
  ├── polo-multiple-block.php  
  ├── package-lock.json
  ├── package.json 
  ├── readme.txt
  └── src
       └── polo-blocks
   	         └── first-block  //フォルダ名を変更した
                   ├── block.json 
   		           ├── edit.js
   		           ├── editor.scss
   		           ├── index.js
   		           ├── save.js
   		           └── style.scss



ここでフォルダのブロック名を変更しても、実際のブロック名は変更されていない、そのままPolo Multiple Blockで表示されるので、First Blockと表示されるように変更しておく。



変わっていない！



block.jsonで変更する。変更箇所は６行目を “title”: “First Block” に変更する。



{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "create-block/polo-multiple-block",
	"version": "0.1.0",
	"title": "First Block",
	"category": "widgets",
	"icon": "smiley",
	"description": "Example block scaffolded with Create Block tool.",
	"example": {},
	"supports": {
		"html": false
	},
	"textdomain": "polo-multiple-block",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css",
	"viewScript": "file:./view.js"
}



変わった！



これでFirst Blockという名前で実際のブロックも「widgets」に表示されるようになる。



この後、新しく追加するプラグインは全て「polo-blocks」に入れることになる。
そして Visual Studio Code の編集画面ではファイルの構造が自動的に更新されて表示される。



２番目以降のブロックの入れ方



ここで create-block の –no-plugin を利用して、新しく作った「polo-blocks」フォルダの中に２番目以降のブロック追加していく。
この–no-pluginによる追加ブロックは src より上のファイルを入れないで src 内の単体ブロックのみを作成することになる。



２つ目のブロックを直接「polo-blocks」フォルダへインストールするために、ターミナルでsrc内の新しく作成した「polo-blocks」フォルダへcdで移動、その後以下のコマンドを実行。







npx @wordpress/create-block second-block --no-plugin



これで「blocks」内に新しい「second-block」が作成される。
以下のように非常にシンプルなファイル構成になる。従ってインストールも早い！







フォルダとファイルが追加され、以下のように構造になっているのを確認。



polo-multiple-block
├── build
├── node_modules 
├── polo-multiple-block.php  
├── package-lock.json
├── package.json 
├── readme.txt
└── src
	└── polo-blocks 
		└── first-block
              ├── block.json  
			  ├── edit.js 
			  ├── editor.scss　
			  ├── index.js
			  ├── save.js
              ├── style.scss
			  └── view.js
		└── second-block     //npx --no-plugin 実行で作成されたフォルダとファイル
              ├── block.json
			  ├── edit.js 
			  ├── editor.scss　
			  ├── index.js
			  ├── save.js
              ├── style.scss
			  └── view.js



これで１つの「polo-multiple-block」という名前のプラグインに２つ目の内蔵されたブロックが作成されたことになる。







　これは「polo-multiple-block」という名前のプラグインを１つインストールすると２つのブロックが追加されたことになる。



カスタムカテゴリーの作成



よく見るように、このプラグイン専用のカテゴリーを作成したい。



カテゴリーは普通だとblock.jsonでそのまま指定するだけだが、独自のカテゴリーの場合、他の設定が必要になる。デフォルト以外のカテゴリーを設定すると「未分類」と表示される。



カスタムカテゴリーは polo-multiple-block.php に以下を追加するだけ。
８行目titleに「Polo Block」のように希望のカテゴリー名を入れるだけ。Block Filters説明サイト



ここでは「Polo Block」としているが、実際に表示されるのは全て大文字になる。



この作業はその後のblock.jsonの設定まで続けてやらないと実行されないので注意！



function polo_new_block_category( $block_categories ) {

	$block_categories[] = array(
		'slug' => 'polo-custom-category',
		'title' => 'Polo Blocks',
		'icon' => null,
	);
	return $block_categories;

}
add_filter( 'block_categories_all', 'polo_new_block_category' );



first-blockのblock.jsonを修正する



後はblock.jsonのカテゴリーに上で設定したslugのcustom-categoryを各block.jsonのカテゴリーに以下のように入れるだけ。



上の７行目slugのpolo-custom-categoryを下のblock.jsonファイルに”category”: “polo-custom-category”と入れる。



{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "create-block/polo-multiple-block",
	"version": "0.1.0",
	"title": "Polo Multiple Block",
	"category": "polo-custom-category",
	"icon": "smiley",
	"description": "Example block scaffolded with Create Block tool.",
	"example": {},
	"supports": {
		"html": false
	},
	"textdomain": "polo-multiple-block",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css",
	"viewScript": "file:./view.js"
}



同じくsecond-blockも同じように修正する



７行目を”polo-custom-category”に変更する。
first-blockと全く同じ作業で、後追加する場合も同じように修正していけば同じカテゴリーに次々と追加されることになる。



{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "create-block/second-block",
	"version": "0.1.0",
	"title": "Second Block",
	"category": "polo-custom-category",
	"icon": "smiley",
	"description": "Example block scaffolded with Create Block tool.",
	"example": {},
	"supports": {
		"html": false
	},
	"textdomain": "second-block",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css",
	"viewScript": "file:./view.js"
}



これでPOLO BLOCKというカスタムカテゴリーに２つのブロックが登録されたことになる。







カテゴリーの入る位置を指定する、ブロックカテゴリの並べ替え



最初のままだと一番下に表示された、一番先頭に表示するには？



既に入れているpolo-multiple-block.phpのfunction polo_new_block_category( $block_categories )のところを以下のファイルと入れ替える。



変更前：



function polo_new_block_category( $block_categories ) {

	$block_categories[] = array(
		'slug' => 'polo-custom-category',
		'title' => 'Polo Blocks',
		'icon' => null,
	);
	return $block_categories;

}
add_filter( 'block_categories_all', 'polo_new_block_category' );



上の箇所を削除して、下のファイル全部をそのまま入れる。



13行目の$position = 0; にすると一番最初に表示されるようになる。
他の人も同じ設定ならどうなるのかが不明。



function polo_new_block_category( $cats ) {

	// 任意のインデックスを持つ新しい配列要素を作成する
	$new = array(
		'literallyanything' => array(
			'slug'  => 'polo-custom-category',
			'title' => 'Polo Blocks',
			'icon' => null,
		)
	);

	// ここでカスタムカテゴリを表示する位置を決める
	$position = 0; // もし2なら – テキストとメディアの後なので、技術的には3番目の位置？
	$cats = array_slice( $cats, 0, $position, true ) + $new + array_slice( $cats, $position, null, true );

	// 配列のインデックスをリセットする
	$cats = array_values( $cats );

	return $cats;
}
add_filter( 'block_categories_all', 'polo_new_block_category' );



以下のように先頭に入った。







ビルドする



ビルドするときはmy-blockディレクトリで実行すること、それ以外だとエラーになる。







npm run build



webpack 5.99.9 compiled successfully in 797 ms と出ると正常にコンパイルされたことになる。



上記のコマンドで srcフォルダ内の最適化されたファイルを build/ フォルダに生成することになる。（JavaScript と CSS の最適化（圧縮や不要部分の削除））



次に以下のコマンドでZIP を書き出す



polo-multiple-block.php（プラグインのメインファイル）や build/ 内の最適化済みファイルを ZIP 化する。



npm run plugin-zip



Done. polo-multiple-block.zip is ready!　と出たら完了。
zipファイルは作成したプラグインの中に出力されている。







ここで一度貴重な経験をしたのは、このブロックをインストールするとき同じ名前のカスタムカテゴリーが他にあった場合、エラーになるということ。
インストールまでは問題なくいくが、有効化するときに「重大なエラーが発生した」となる。同じカテゴリー名で自分が作成したブロックが先に有効になっていると、このエラーになる。注意！



ブロックのカスタムアイコンの作成



WordPressのダッシュアイコンだとblock.jsonのアイコンで簡単に設定できる。



ダッシュアイコン：https://developer.wordpress.org/resource/dashicons/#pets







上の右の「pets」をコピーして



アイコンの登録は通常block.jsonに以下のようにダッシュアイコンなら簡単n登録できる。



"icon": "pets",







しかしオリジナルアイコンはblock.jsonでは登録することはできない。



まず、作成したアイコンが必要、しかし一から作るのは面倒なので、ここではテストということなのでFontAwesomeからフリーのSVGをダウンロードすることにする。



必ずSVG形式を選択。



ブロックのアイコンとして FontAwesome アイコンを使う



FontAwesomeからSVGを選択してその下をコピーする。







コードをコピーする







コメントなど不要な部分を削除はいらない。以下が削除する部分。







次にblock.jsonのアイコン設定部分を削除。



index.jsに移動して、以下を作成、最後のコンマを忘れずにエラーになる。



icon : {
src : 
},



以下がindex.jsでの全てのファイルになる。



ここではfirst-block/index.jsでのブロックアイコンの変更設定になる。



import { registerBlockType } from '@wordpress/blocks';

import './style.scss';

import Edit from './edit';
import save from './save';
import metadata from './block.json';

registerBlockType(metadata.name, {
	icon: {
		src: 
	},

	edit: Edit,
	save,
});



説明ではblock.jsonの”icon”: “smiley”を削除すること、とあったがそのまま入れた状態でもエラーにはならないし、アイコンも問題なく表示されるようになった。上書きされるようだ。
しかし一応消しておいた方が良いかも。







アイコンの大きさと色を変更するには



ここviewBoxで、アイコンの大きさと色も替えることができる。大きさは多分そのままが一番いいのではと思うので多分変更する必要はないはずである。







viewBoxの中の４つの数値でコントロール。
よく分からないが最初の数字は左右の位置を調整できる？、右に行くにはプラス左はマイナスの数値を入れる。２番目は上下？３番目はアイコンを入れるボックスの天地の大きさ？最後は横幅？も少し調べる必要があるが、そんなに大きさを気にする必要は無いかも。参考までに



色を変更する



5行目に以下のように追加するだけ



icon: {
		src: ,
		foreground : '#fe0000'
	},



赤色のアイコンになった



カテゴリーのタイトルの横にアイコンを入れる



polo-multiple-block.phpの一部だがこの中の8行目、iconのnullのところにダッシュアイコンを入れる。



	$new = array(
		'literallyanything' => array(
			'slug'  => 'polo-custom-category',
			'title' => 'Polo Blocks',
			'icon' => null,
		)
	);



アイコンを入れたpolo-multiple-block.php全ファイル



 array(
			'slug'  => 'polo-custom-category',
			'title' => 'Polo Blocks',
			'icon' => 'smiley',
		)
	);

	// ここでカスタムカテゴリを表示する位置を決める
	$position = 0; // もし2なら – テキストとメディアの後なので、技術的には3番目の位置？
	$cats = array_slice( $cats, 0, $position, true ) + $new + array_slice( $cats, $position, null, true );

	// 配列のインデックスをリセットする
	$cats = array_values( $cats );

	return $cats;
}
add_filter( 'block_categories_all', 'polo_new_block_category' );



アイコンが追加された。







自作のアイコンを使いたい場合もあると思う



この作り方を説明したサイトはいっぱいあるので、そちらを参考に。



参考サイト：https://www.vektor-inc.co.jp/post/wordpress-block-variation/

create-block – Macな暮らし

Font Awesome のアイコンピッカーを作成｜create-block

選択されたアイコン

Font Awesome のアイコンを使う｜create-block

SVG + JS ファイルを使う方法

SVG + JSで設定する

ブロックにダウンロードした Font Awesome ファイルを配置する

プロジェクトでFont Awesomeを参照

カラーとサイズの設定

テキストを入力できるサイドバーのコントロール作成｜create-block

TextControl

サイドバーの入力ボックスからテキストをコンテンツに入れる

text-control.zip

１つのプラグインに複数のブロックをまとめる｜create-block

polo-multiple-block.zip

まず @wordpress/create-block からスタート

出来上がったフォルダ構成を変更

ブロックを有効にする

編集作業で Visual Studio Code を起動する

polo-blocks フォルダを作成する

ここがポイント polo-blocks にパスを通すために polo-multiple-block.php 内の register_block_type を書き換える

この最初のブロックを fiest-block に変更する

２番目以降のブロックの入れ方

カスタムカテゴリーの作成

カテゴリーの入る位置を指定する、ブロックカテゴリの並べ替え

ビルドする

次に以下のコマンドでZIP を書き出す

ブロックのカスタムアイコンの作成

ブロックのアイコンとして FontAwesome アイコンを使う

アイコンの大きさと色を変更するには

カテゴリーのタイトルの横にアイコンを入れる

自作のアイコンを使いたい場合もあると思う

HTML「表示/非表示」の設定 – create-block

create-block 色々な設定項目のヒント

ビルド

アイコン付きの囲み枠の作成

WordPressのダッシュアイコンを使ったアイコンの表示

frame-block.zip

@wordpress/create-blockで自作ブロックに挑戦！

開発環境の作成

前提条件

Localアプリ内のpluginsに@wordpress/create-blockのインストール

Visual Studio Codeで「my-first-block」ファイルを開く

編集が終了したらビルドして本番のブロックを作成する

create-block { …blockProps }と{ useBlockProps }

useBlockPropsを使った例

記述の仕方も色々

コンソールにログを出力 – create-block