Gutenberg: Zusätzliche Formatierung in RichText zulassen

Ich habe einen ziemlich einfachen Akkordeonblock erstellt, der sich hervorragend für einfachen Text eignet. Das Problem ist, dass das Steuerelement, das ich für den Akkordeoninhalt verwende, der RichText ist, der nur grundlegende Formatierungen wie Fett zulässt.

Was wäre, wenn ich neben einfachem Text auch eine unsortierte Liste erstellen möchte? Ich verwende derzeit multiline: "p"aber wie kann ich zusätzliche Elemente hinzufügen, damit ich auch UL-Elemente darin haben kann?

Die einzigen zwei Ideen, die mir einfallen, weiß ich nicht, wie ich sie umsetzen soll. Die erste besteht darin, die Blocksymbolleiste mit zu erweitern BlockControls um zusätzliche Formatierer für UL einzuschließen, und das zweite besteht darin, ein anderes Element anstelle von RichText zu verwenden – wie Freeform (das möglicherweise in Classic Editor umbenannt wurde?) -, aber ich kann keine Dokumentation dazu finden.

Hier ist ein Beispiel für meinen aktuellen Code:

ATTRIBUTE

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

BEARBEITEN

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>
            )
        ];
    },

Sie können neue Formatierungsoptionen wie folgt registrieren:

Hinzufügen einer einfachen Formatierungsschaltfläche

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>
        );
    },
} );

Hinzufügen eines Link-Buttons

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>
    );
},
} );

Bildschaltfläche hinzufügen

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>
        );
    }
},
} );

Sie könnten hier und da auf einige Fehler stoßen. Relevant Fahrkarte