WP Gutenberg, как импортировать EditableText (как альтернативу RichText)?

Question

Мне нужен блок Гутенберга, который запрашивает строку без формата

Поэтому вместо использования RichText я бы сказал, что EditableText - это тот компонент, который мне нужен

Здесь документация https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/editable-text

В моем коде проблема в том, что я даже не могу импортировать компонент

import { EditableText } from '@wordpress/block-editor'
//import { EditableText } from '@wordpress/components'
import { RichText  } from '@wordpress/block-editor'

console.log(EditableText) // nothing
console.log(RichText)

Я вижу, что RichText живет в wp.editor и в wp.blocEditor, но я нигде не могу найти EditableText

Почему так? Этот элемент устарел? Если да, то какой альтернативой может быть добавление входного блока без форматирования?

EDIT: Я всегда могу использовать простой элемент <input>, как сказано здесь https://developer.wordpress.org/block-editor/developers/richtext/#unwanted -formatting-options-still-display , но я хотел бы знать, почему EditableText недоступен или как я могу его импортировать

Answer 1

Я думаю, это потому, что блок EditableText еще нестабилен, в текущей версии я вижу, что он основан на компоненте RichText:

import RichText from '../rich-text';

const EditableText = forwardRef( ( props, ref ) => {
    return (
        <RichText
            ref={ ref }
            { ...props }
            __unstableDisableFormats
            preserveWhiteSpace
        />
    );
} );

К сожалению, он вылетает, когда я пытаюсь его использовать (возможно, я делаю это неправильно), и использование RichText в качестве кода из EditableText не работает.

Решение : в документации RichText указано, что вы можете использовать атрибут formattingControls, даже если он не рекомендуется для «простого ввода текста»: https://developer.wordpress.org/block-editor/developers/richtext/#unwanted -formatting-options-still-display

В качестве альтернативы, чтобы получить «чистую» реализацию Гутенберга вашего поля input, вы можете использовать TextControl (остерегайтесь imports в примере, он расположен в @wordpress/components, а не @wordpress/blocks):

import { TextControl } from '@wordpress/components';
import { withState } from '@wordpress/compose';

const MyTextControl = withState( {
    className: '',
} )( ( { className, setState } ) => ( 
    <TextControl
        label="Additional CSS Class"
        value={ className }
        onChange={ ( className ) => setState( { className } ) }
    />
) );