带有响应的自定义gutenberg块中的多图像

如何解决带有响应的自定义gutenberg块中的多图像

我想创建一个自定义的gutenberg块，其中包含多个图像。到目前为止，我仅克隆并重命名了第一张图像就集成了两个图像，它可以正常工作，但看起来非常“烦琐”;）。

问题是：我对react和使用react创建块的理解非常基础，因此我不知道如何更好/更有效地处理它。

我的代码：

/**
 * BLOCK: heroblock
 *
 * Registering a basic block with Gutenberg.
 * Simple block,renders and saves the same content without any interactivity.
 */

//  Import CSS.
import './editor.scss';
import './style.scss';

const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
const { RichText,AlignmentToolbar,BlockControls,MediaUpload  } = wp.blockEditor;
const { Button } = wp.components;


/**
 * Register: aa Gutenberg Block.
 *
 * Registers a new block provided a unique name and an object defining its
 * behavior. Once registered,the block is made editor as an option to any
 * editor interface where blocks are implemented.
 *
 * @link https://wordpress.org/gutenberg/handbook/block-api/
 * @param  {string}   name     Block name.
 * @param  {Object}   settings Block settings.
 * @return {?WPBlock}          The block,if it has been successfully
 *                             registered; otherwise `undefined`.
 */
registerBlockType( 'cgb/block-heroblock',{
    // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
    title: __( 'heroblock - CGB Block' ),// Block title.
    icon: 'shield',// Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
    category: 'common',// Block category — Group blocks together based on common traits E.g. common,formatting,layout widgets,embed.
    keywords: [
        __( 'heroblock — CGB Block' ),__( 'CGB Example' ),__( 'create-guten-block' ),],/**
     * The edit function describes the structure of your block in the context of the editor.
     * This represents what the editor will render when the block is used.
     *
     * The "edit" property must be a valid function.
     *
     * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
     *
     * @param {Object} props Props.
     * @returns {Mixed} JSX Component.
     */
    attributes: {
        // Content of first Richtext Element
        content: {
           type: 'array',source: 'children',selector: 'p',},// Content of aside element
        asidecontent: {
            type: 'array',selector: 'aside',// Alignment string for Text ALignment
        textAlignment: {
            type: 'string',imageAlt: {
            attribute: 'alt',selector: '.card__image'
        },imageUrl: {
            attribute: 'src',imageAlt_2: {
            attribute: 'alt',selector: '.card__image_2'
        },imageUrl_2: {
            attribute: 'src',selector: '.card__image_2'
        }
     },supports: {
        align: true,align: [ 'left','right','wide','full' ],edit: ( props ) => {
        const { attributes: { content,asidecontent,textAlignment,imageAlt,imageUrl,imageAlt_2,imageUrl_2 },setAttributes,className } = props;

        const alignmentClass = (textAlignment != null) ? 'has-text-align-' + textAlignment : '';

        const onChangeContent = ( newContent ) => {
           setAttributes( { content: newContent } );
        };


        const onChangeAside = ( newAside ) => {
            setAttributes( { asidecontent: newAside } );
         };

        // Image Button function
         const getimageButton = (openEvent) => {
             if(imageUrl) {
                 return (
                     <img
                         src={ imageUrl }
                         onClick={ openEvent }
                         className="image"
                     />
                 );
             }
             else {
                 return (
                     <div className="button-container">
                         <Button
                             onClick={ openEvent }
                             className="button button-large"
                         >
                             Pick an image
                         </Button>
                     </div>
                 );
             }
         };

         const getimageButton2 = (openEvent) => {
            if(imageUrl_2) {
                return (
                    <img
                        src={ imageUrl_2 }
                        onClick={ openEvent }
                        className="image"
                    />
                );
            }
            else {
                return (
                    <div className="button-container">
                        <Button
                            onClick={ openEvent }
                            className="button button-large"
                        >
                            Pick an image
                        </Button>
                    </div>
                );
            }
        };


        return (
            <div className={alignmentClass,className}>
                <BlockControls>
                    <AlignmentToolbar
                        value={textAlignment}
                        onChange={(newalign) => setAttributes({ textAlignment: newalign })}
                    />
                </BlockControls>
                <MediaUpload
                    onSelect={ media => { setAttributes({ imageAlt: media.alt,imageUrl: media.url }); } }
                    type="image"
                    value={ props.imageID }
                    render={ ({ open }) => getimageButton(open) }
                />
                <MediaUpload
                    onSelect={ media => { setAttributes({ imageAlt_2: media.alt,imageUrl_2: media.url }); } }
                    type="image"
                    value={ props.imageID_2 }
                    render={ ({ open }) => getimageButton2(open) }
                />
                <RichText
                    tagName="p"
                    onChange={ onChangeContent }
                    value={ content } 
                />
                <RichText
                    tagName="aside"
                    onChange={ onChangeAside }
                    value={ asidecontent }
                />
           </div>
        );
     },save: ( props ) => {
        const { attributes } = props;
        const alignmentClass = (attributes.textAlignment != null) ? 'has-text-align-' + attributes.textAlignment : '';

         const cardImage = (src,alt) => {
             if(!src) return null;

             if(alt) {
                 return (
                     <img
                         className="card__image"
                         src={ src }
                         alt={ alt }
                     />
                 );
             }

             // No alt set,so let's hide it from screen readers
             return (
                 <img
                     className="card__image"
                     src={ src }
                     alt=""
                     aria-hidden="true"
                 />
             );
         };

         const cardImage_2 = (src,alt) => {
            if(!src) return null;

            if(alt) {
                return (
                    <img
                        className="card__image_2"
                        src={ src }
                        alt={ alt }
                    />
                );
            }

            // No alt set,so let's hide it from screen readers
            return (
                <img
                    className="card__image_2"
                    src={ src }
                    alt=""
                    aria-hidden="true"
                />
            );
        };


        return (
            <div className={alignmentClass}>
                { cardImage(attributes.imageUrl,attributes.imageAlt) }
                { cardImage_2(attributes.imageUrl_2,attributes.imageAlt_2) }
                <RichText.Content tagName="p" value={ props.attributes.content } />
                <RichText.Content tagName="aside" value={ props.attributes.asidecontent } />
            </div>
        )
     },} );