管理Gutenberg中的两个可编辑字段

我正在构建一个古腾堡区块插件，它包含两个字段，一个DOI名称和一个标题。我可以成功地管理一个，但我不确定如何同时编辑/保存两个。到目前为止，我已经：

( 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
) );

我不太清楚如何超越这一点。

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

相关推荐