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

这是为什么？这个元素被弃用了吗？如果是这样，添加不带格式的输入块的替代方法是什么？

编辑： 我总是可以使用普通的 <input> 元素，如此处所述 https://developer.wordpress.org/block-editor/developers/richtext/#unwanted-formatting-options-still-display 但我想知道为什么 EditableText 不可用或如何导入它

Answer 1

我认为这是因为 EditableText 块还不稳定，在 the current version 中，我可以看到它是基于 RichText 组件的：

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

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

不幸的是，当我尝试使用它时它崩溃了（我可能做错了），并且使用 RichText 作为 EditableText 中建议的代码不起作用。

解决方案：the documentation of RichText indicates that you can use the formattingControls attribute even though it is not recommended for "just text input": 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 } ) }
    />
) );

WP Gutenberg，如何导入 EditableText （作为 RichText 的替代品）？

WP Gutenberg, how to import EditableText (as an alternative to RichText )?

wordpress

wordpress-gutenberg

gutenberg-blocks