Gutenberg：允许在 RichText 中添加其他格式

Question

我创建了一个相当简单的手风琴块，它非常适合基本文本。问题是我用于手风琴内容的控件是 RichText，它只允许使用粗体等基本格式。

如果我既要创建无序列表又要创建基本文本怎么办？我目前正在使用 multiline: "p"，但我如何添加额外的元素以便我也可以在其中包含 UL 元素？

我能想到的只有两个想法，我不知道如何实现。第一个是使用 BlockControls 扩展块工具栏以包含额外的 UL 格式化程序，第二个是使用另一个元素而不是 RichText - 例如 Freeform（可能已重命名为 Classic Editor？） - 但我找不到关于这些的任何文档。

这是我当前代码的示例：

属性

attributes: {
    title: {
        type: 'string',     
        selector: '.hd-accordion-title',
    },  
    content: {
        type: 'array',
        source: 'children',
        selector: '.hd-accordion-content',
    }
},

编辑

edit: function( props ) {
        var title = props.attributes.title;     
        var content = props.attributes.content;

        function onChangeTitle(newTitle) {
            props.setAttributes({
                title: newTitle
            });
        }

        function onChangeContent(newContent) {
            props.setAttributes({
                content: newContent
            });
        }   

        return [
            (
                <div className={"hd-accordion"}>
                    <RichText
                        tagName="h3"
                        className= "hd-accordion-title"
                        value= { title }
                        onChange= { onChangeTitle }
                        placeholder = "Title"
                        keepPlaceholderOnFocus = { true }
                        multiline= { false }
                    />              
                    <RichText
                        tagName="div"
                        className="hd-accordion-content"
                        value={ content }
                        onChange= { onChangeContent }
                        placeholder = "content"
                        multiline="p"
                    />
                </div>
            )
        ];
    },

Answer 1

您可以像这样注册新的格式选项-

添加简单格式按钮

registerFormat( 'bold', {
    selector: 'strong',
    edit( { isActive, toggleFormat } ) {
        return (
            <Fragment>
                <Shortcut
                    type="primary"
                    key="b"
                     onUse={ () => toggleFormat() }
                />
                <ToolbarControls>
                    <ToolbarButton
                        icon="editor-bold",
                        title={ __( 'Bold' ) }
                        isActive ={ isActive }
                        onClick={ () => toggleFormat() }
                    />
                </ToolbarControls>
            </Fragment>
        );
    },
} );

添加一个 Link 按钮

registerFormat( 'link', {
selector: 'a',
attributes: {
    url: {
        source: 'attribute',
        attribute: 'href',
    },
},
edit( { isActive, removeFormat } ) {
    return (
        <Fragment>
            <Shortcut
                type="access"
                key="s"
                onUse={ () => removeFormat() }
            />
            <Shortcut
                type="access"
                key="a"
                onUse={ /* Set state and pass to LinkContainer */ }
            />
            <Shortcut
                type="primary"
                key="k"
                onUse={ /* Set state and pass to LinkContainer */ }
            />
            <ToolbarControls>
                { isActive && <ToolbarButton
                    icon="editor-unlink",
                    title={ __( 'Unlink' ) }
                    onClick={ () => removeFormat() }
                /> }
                { ! isActive && <ToolbarButton
                    icon="admin-links",
                    title={ __( 'Link' ) }
                    onClick={ () => /* Set state and pass to LinkContainer */ }
                /> }
            </ToolbarControls>
            <LinkContainer { ...props } />
        </Fragment>
    );
},
} );

添加图像按钮

registerFormat( 'image', {
selector: 'img',
attributes: {
    url: {
        source: 'attribute',
        attribute: 'src',
    },
},
edit: class ImageFormatEdit extends Component {
    constructor() {
        super( ...arguments );
        this.state = {
            modal: false;
        };
    }

    openModal() {
        this.setState( { modal: true } )
    }

    closeModal() {
        this.setState( { modal: false } )
    }

    render() {
        const { insertObject } = this.props;

        return (
            <Fragment>
                <InserterItems>
                    <InserterItem
                        icon="inline-image",
                        title={ __( 'Inline Image' ) }
                        onClick={ openModal }
                    />
                </InserterItems>
                { this.state.modal && <MediaUpload
                    type="image"
                    onSelect={ ( { id, url, alt, width } ) => {
                        this.closeModal()
                        insertObject( {
                            src: url,
                            alt,
                            class: `wp-image-${ id }`,
                            style: `width: ${ Math.min( width, 150 ) }px;`,
                        } );
                    } }
                    onClose={ this.closeModal }
                    render={ ( { open } ) => {
                        open();
                        return null;
                    } }
                /> }
            </Fragment>
        );
    }
},
} );

您可能会偶尔遇到一些错误。相关 ticket

Gutenberg：允许在 RichText 中添加其他格式

Gutenberg: Allow additional formatting in RichText

wordpress

wordpress-gutenberg

gutenberg-blocks