Гутенберг: разрешить дополнительное форматирование в RichText

Я создал довольно простой блок аккордеона, и он отлично подходит для основного текста. Проблема в том, что я использую элемент управления для содержимого аккордеона 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>
            )
        ];
    },

wordpress wordpress-gutenberg gutenberg-blocks
person Harmonic    schedule 16.11.2018    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вы можете зарегистрировать новые параметры форматирования, например:

Добавление кнопки простого форматирования

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

Добавление кнопки ссылки

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

Здесь и там вы можете встретить несколько ошибок. Соответствующий билет

person Ashiquzzaman Kiron    schedule 18.11.2018
comment
Спасибо! Я уже обнаружил это (очевидно, очень новый), но с треском не смог заставить его работать с UL, но, возможно, используя ваши примеры, мне повезет больше. На данный момент я просто написал шорткод под названием [list] для обтекания любых элементов, который автоматически превращает список абзацев в UL. - person Harmonic; 19.11.2018