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!