How to Add extra option to Image Block Settings?

Question

How to add an option to Gutenberg Image block which lets me choose where the image is allowed to Pin in Pinterest or not (like Checkbox) along with Pin Description.

Here are the example data to be inserted.

Any possibility to add a checkbox and description textbox in image block settings?

Answer 1

This can be done using block filters.

First, you'll need to filter block attributes for the image block to be able to save the new items:

const { addFilter } = wp.hooks;
function filterAttributes( settings, name ) {

    if ( 'core/image' === name && settings.attributes ) {

        settings.attributes.description = {
            type: 'string',
            default: ''
        };

        settings.attributes.nopin = {
            type: 'boolean',
            default: false
        };
     }
    return settings;
 }

addFilter( 'blocks.registerBlockType', 'wpse', filterAttributes );

Next, you'll want to filter the InspectorControls for the image block to add your new controls:

const { addFilter } = wp.hooks;
const { createHigherOrderComponent } = wp.compose;
const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => {

    return ( props ) => {
        return (
            <>
                { ( 'core/image' !== props.name ) &&
                    <InspectorControls>
                        // YOUR CUSTOM CONTROLS GO HERE
                    </InspectorControls>
                }
                <BlockEdit { ...props } /> // THIS IS ALL OF THE OTHER CONTROLS AND CAN GO ABOVE YOUR STUFF AS WELL
            </>
        );
    };
}, 'withInspectorControl' );

addFilter( 'editor.BlockEdit', 'wpse', withInspectorControls );

You'll need to manage the custom controls part as I don't know the details there.

Hope this helps!