web-dev-qa-db-ja.com

Gutenbergの2つの編集可能フィールドを管理する

私は2つのフィールド、DOI名とタイトルを取るグーテンベルクブロックプラグインを構築しています。私は1つをうまく管理できますが、2つを同時に編集/保存する方法がわかりません。これまでのところ私は持っています：

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

そして、私はこの点までにどうやって進めるかというのはあまりにも素朴ではありません。

plugin-developmentblock-editor
3
jshwlkr

2.2ではEditableはRichTextに置き換えられました。

これは、2つのRichTextコンポーネントを一緒に編集/保存する例です。

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

私の答えはes5ではないことをお詫び申し上げますが、ESNextではそれほど簡単ではありません（ツーリングには @ahmadawais create-guten-block の使用を強くお勧めします）。

3
David Sword