TextControl — это компонент для стандартного ввода текста (<input type=»text» ../>), который позволяет пользователи вводят и редактируют текст в однострочном графическом интерфейсе.

Пример:

TextControl

При разработке блоков удобно таким образом задавать дополнительные атрибуты, например data-name, так же можно использовать для вывода текста (не стоит), но для таких целей лучше использоваться ReachText.

Пример использования:

block.json:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "sample-block/sample-text-control",
  "version": "0.0.1",
  "title": "Sample Text Control",
  "category": "widgets",
  "icon": "smiley",
  "description": "Sample Text Control",
  "editorScript": "file:./index.js",
  "attributes": {
    "dataName": {
      "type": "string",
      "default": ""
    }
  }
}

edit.jsx:

export default function Edit({attributes, setAttributes}) {

    return ([
        <InspectorControls>
            <PanelBody>
                <TextControl
                    label="Data neme"
                    value={attributes.dataName}
                    onChange={(val) => setAttributes({dataName: val})}
                />
            </PanelBody>
        </InspectorControls>,
        <div>
            <a href="#" data-name={attributes.dataName}>Link text</a>
        </div>
        ,
    ]);
};

save.jsx:

export default function Save({attributes}) {

    return (
        <div>
            <a href="#" data-name={attributes.dataName}>Link text</a>
        </div>
    );
};

index.js:

const {registerBlockType} = wp.blocks;


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


registerBlockType(metadata.name, {
    title: metadata.title,
    description: metadata.description,
    icon: metadata.icon,
    category: metadata.category,
    attributes: metadata.attributes,

    edit: Edit,

    save: Save,
});
}

Вид в редакторе

Так выглядит на фронте: