时间戳

首页 > 解决方案 > WP Gutenberg，如何导入 EditableText （作为 RichText 的替代品）？

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

问题描述

我需要一个古腾堡块，它要求一个没有格式的字符串

所以不是使用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.editorwp.blocEditorEditableText

这是为什么？此元素是否已弃用？如果是这样，在不格式化的情况下添加输入块的替代方法是什么？

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

标签： wordpresswordpress-gutenberggutenberg-blocks

解决方案

我认为这是因为该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 -静止显示

或者，要获得您的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 } ) }
    />
) );

推荐阅读