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 (
<>
<InspectorControls>
<PanelBody title="設定" initialOpen={true}>
<TextControl
label="テキストの入力..."
value={content}
onChange={(value) => setAttributes({ content: value })}
/>
</PanelBody>
</InspectorControls>
<div {...useBlockProps()}>
{content && <p>{content}</p>}
</div>
</>
);
}import { useBlockProps } from '@wordpress/block-editor';
export default function save({ attributes }) {
const { content } = attributes;
return (
<div {...useBlockProps.save()}>
{content && <p>{content}</p>}
</div>
);
}.wp-block-create-block-text-control {
}.wp-block-create-block-text-control {
background-color: #21759b;
color: #fff;
padding: 5px 20px;
}