2

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.

enter image description here

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

enter image description here

1 Answer 1

2

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!

4
  • Thanks, man !! Feels like WP Core is so confusing. I tried to make it as a plugin. Can this be done with ACF?
    – MC Naveen
    May 21, 2020 at 14:28
  • To my knowledge, this cannot be done with ACF.
    – Welcher
    May 21, 2020 at 14:41
  • Alright. Then I have no other option left. I'll add these stuff manually to images.
    – MC Naveen
    May 22, 2020 at 0:14
  • Let me know how it goes and please mark this as the answer if it works out.
    – Welcher
    May 22, 2020 at 0:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.