after uploading a photo my block is selected, so I can change properties. But when I select another block, then by clicking on that photo I can't select my block. I can select only through list view. Does anybody know how I can fix it?

blocks.registerBlockType( 'testblock/my-image', {
    apiVersion: 2,
    title: 'My image',
    icon: 'format-image',
    category: 'media',
    example: {
        attributes: {
            id: '123',
            alt: '',
            url: 'http://mypage/wp-content/uploads/2021/02/hairdrayer.jpg'
        },
    },
    attributes: {
        id: {
            type: 'number',
            default: 0
        },
        alt: {
            type: 'string',
            default: ""
        },
        url: {
            type: 'string',
            default: ""
        }
    },
    edit: ( props ) => {                
        return (
        <>
            {
                <InspectorControls>
                    <PanelBody title="Image Settings" initialOpen={ true }>
                        { props.attributes.id != 0 && 
                        <>
                        <PanelRow>
                            <TextControl 
                                onChange={ newAlt => props.setAttributes({ alt: newAlt }) }
                                value={ props.attributes.alt }
                                help="Describe the purpose of the image. Leave empty if the image is purely decorative."
                                label="Alt Text"
                            />
                        </PanelRow>
                        </>
                        }
                    </PanelBody>
                </InspectorControls>
            }
                    
            { props.attributes.id === 0 && 
            <MediaPlaceholder
                onSelect={ (media) => {
                    props.setAttributes({ 
                        id: media.id,
                        alt: media.alt, 
                        url: media.url
                    })
                }}
                allowedTypes = { [ 'image/gif', 'image/jpeg', 'image/png', 'image/svg+xml' ] }
                multiple = { false }
                labels = { { 
                    title: 'Responsive image',
                    instructions: 'Upload an image file, pick one from your media library.'                     
                } }
            />
            }

            <img 
                src={ props.attributes.url }
                alt={ props.attributes.alt }
            />                      
        </>
        );
    },
    save: ( props ) => {
        return (
            <img 
                src={ props.attributes.url }
                alt={ props.attributes.alt }
            />                          
        );
    },
});

after uploading a photo my block is selected, so I can change properties. But when I select another block, then by clicking on that photo I can't select my block. I can select only through list view. Does anybody know how I can fix it?

blocks.registerBlockType( 'testblock/my-image', {
    apiVersion: 2,
    title: 'My image',
    icon: 'format-image',
    category: 'media',
    example: {
        attributes: {
            id: '123',
            alt: '',
            url: 'http://mypage/wp-content/uploads/2021/02/hairdrayer.jpg'
        },
    },
    attributes: {
        id: {
            type: 'number',
            default: 0
        },
        alt: {
            type: 'string',
            default: ""
        },
        url: {
            type: 'string',
            default: ""
        }
    },
    edit: ( props ) => {                
        return (
        <>
            {
                <InspectorControls>
                    <PanelBody title="Image Settings" initialOpen={ true }>
                        { props.attributes.id != 0 && 
                        <>
                        <PanelRow>
                            <TextControl 
                                onChange={ newAlt => props.setAttributes({ alt: newAlt }) }
                                value={ props.attributes.alt }
                                help="Describe the purpose of the image. Leave empty if the image is purely decorative."
                                label="Alt Text"
                            />
                        </PanelRow>
                        </>
                        }
                    </PanelBody>
                </InspectorControls>
            }
                    
            { props.attributes.id === 0 && 
            <MediaPlaceholder
                onSelect={ (media) => {
                    props.setAttributes({ 
                        id: media.id,
                        alt: media.alt, 
                        url: media.url
                    })
                }}
                allowedTypes = { [ 'image/gif', 'image/jpeg', 'image/png', 'image/svg+xml' ] }
                multiple = { false }
                labels = { { 
                    title: 'Responsive image',
                    instructions: 'Upload an image file, pick one from your media library.'                     
                } }
            />
            }

            <img 
                src={ props.attributes.url }
                alt={ props.attributes.alt }
            />                      
        </>
        );
    },
    save: ( props ) => {
        return (
            <img 
                src={ props.attributes.url }
                alt={ props.attributes.alt }
            />                          
        );
    },
});

• theme-development
• block-editor

1 Answer 1

When using apiVersion: 2 you must use the new useBlockProps hook to implement standard block behavior for your custom block. In your case you would "tell" the editor to treat your <img> as a block wrapper. This needs to be implemented in Edit and in Save and is explained here in detail: https://make.wordpress/core/2020/11/18/block-api-version-2/

Alternatively you could leave out apiVersion: 2 and try again. The editor will automatically add a wrapper element to your block enabling standard block behaviour.

Hope this helps.