web-dev-qa-db-fra.com

Gérer deux champs modifiables dans gutenberg

Je construis un plugin gutenberg block qui prend deux champs, un nom DOI et un titre. Je peux en gérer un avec succès, mais je ne sais pas comment en éditer/en sauvegarder deux en même temps. Jusqu'à présent j'ai:

( function( blocks, components, i18n, element, _ ) {
const el = element.createElement;
const editable = blocks.Editable;
const __ = i18n.__;

blocks.registerBlockType( 'doib/doi', {
    title: __( 'DOI', 'doib' ),
    icon: 'id',
    category: 'widgets',
    attributes: {
        doi: {
            type: 'string',
        },
        title: {
            type: 'string',
        },
    },
    supports: {
        html: false,
    },
    edit: function( props ) {
        const focus = props.focus;

        function onChangeDOI( updated ) {
            props.setAttributes( { doi: updated } );
        }

        return (
            el(
                editable,
                {
                    className: props.className,
                    value: props.attributes.doi,
                    placeholder: __( 'Enter DOI name. Takes the form of "10.1000/xyz123".' ),
                    onChange: onChangeDOI,
                    focus: focus,
                    onFocus: props.setFocus,
                },
            )
        );
    },
    save: function( props ) {
        return (
            el( 'div', { className: props.className, dataDoi: props.attributes.doi },
                props.attributes.doi,
            )
        );
    },
} );
}(
    window.wp.blocks,
    window.wp.components,
    window.wp.i18n,
    window.wp.element
) );

Et je ne sais pas trop comment procéder à partir de là.

plugin-developmentblock-editor
3
jshwlkr

Editable a été remplacé par RichText en 2.2.

Voici un exemple de deux composants RichText en cours de modification/enregistrement:

const { __ } = wp.i18n;
const {
    registerBlockType,
    RichText,
} = wp.blocks;

registerBlockType( 'wtv/wtv', {
    title: __( 'wtv', 'wtv' ),
    icon: 'id',
    category: 'widgets',
    keywords: [ __( 'wtv' ), __( 'wtv' ), __( 'wtv' ) ],
    attributes: {
        doi: {
            type: 'string',
            selector: '.doi',
            default: '',
        },
        title: {
            type: 'string',
            selector: '.title',
            default: '',
        },
    },
    edit( { attributes, setAttributes, className } ) {
        const onChangeDOI = value => {
            setAttributes( { doi: value } );
        };
        const onChangeTitle = value => {
            setAttributes( { title: value } );
        };
        return (
            <div className={ className } >
                <RichText
                    tagname="div"
                    placeholder="Enter DOI name. Takes .."
                    value={ attributes.doi }
                    onChange={ onChangeDOI }
                />
                <RichText
                    tagname="div"
                    placeholder="Title .."
                    value={ attributes.title }
                    onChange={ onChangeTitle }
                />
            </div>
        );
    },
    save: function( props ) {
        return ( <div className={ props.className } >
            <div className="doi">
                { props.attributes.doi }
            </div>
            <div className="title">
                { props.attributes.title }
            </div>
        </div> );
    },
} );

Je suis désolé, ma réponse n’est pas dans es5, mais c’est beaucoup plus facile dans ESNext (recommande vivement d’utiliser @ahmadawais create-guten-block pour l’outillage).

3
David Sword