WP，如何导入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

为什么会这样呢？这个元素被废弃了吗？如果是这样的话，在没有格式化的情况下添加输入块的替代方案是什么？

编辑：--我总是可以使用普通的<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字段的“纯”Gutenberg实现，可以使用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 } ) }
    />
) );