Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove settings from Gutenberg core block

From the core/image block in Gutenberg, I am trying to remove both the 'image size' and 'image dimension' settings. Is this possible to do without copying the entire block and removing the parts I wish to omit? The only things that come close to what I want is A) removing an image style:

// Remove 'rounded' default style.
wp.domReady( () => {
  unregisterBlockStyle('core/image', 'rounded');
});

and B) removing a panel from the editor (not a block) with:

const { removeEditorPanel } = wp.data.dispatch('core/edit-post');
removeEditorPanel( 'discussion-panel' );

I could use CSS to hide the settings, but I wish to remove them entirely.

like image 875
Dirk J. Faber Avatar asked Oct 11 '25 20:10

Dirk J. Faber


1 Answers

I haven't tried to remove the Image Size settings but you can test this approach I used to remove the Dimension settings for Margin and Padding.

import { select } from '@wordpress/data';
import { addFilter } from '@wordpress/hooks';

/**
 * Component to disable dimension settings based on block context.
 *
 * @param {Object} settings - The block settings object.
 * @param {string} settingsName - The name of the settings being modified.
 * @param {string} clientId - The block id.
 * @param {string} blockName - The block name.
 * @returns {Object} The updated block settings object.
 */
const disableDimensionSettings = (settings, settingsName, clientId, blockName) => {

    // Retrieve current user with capability to update settings
    const { canUser } = select('core');
    const currentUser = canUser('update', 'settings');

    // Retrieve the current post type
    const { getCurrentPostType } = select('core/editor');
    const currentPostType = getCurrentPostType();
    
    // Disable these block settings.
        const disabledBlockSettings = [
            'spacing.padding',
            'spacing.margin',
        ];

    if (
        disabledBlockSettings.includes( settingsName ) &&
        currentPostType === 'page' &&
        !currentUser // Add this condition for Admin only access
    ) {
        return false;
    }

    return settings;
};

addFilter(
    'blockEditor.useSetting.before',
    'my-plugin/disable-dimension-settings',
    disableDimensionSettings
);

Here is the link for the full guide on how to Restrict WordPress Gutenberg Block Settings Based on Post Type, User Roles, or Block Context

like image 98
Jeffrey Carandang Avatar answered Oct 14 '25 17:10

Jeffrey Carandang



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!