Remove settings from Gutenberg core block

Question

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.

You can use https://developer.wordpress.org/block-editor/developers/filters/block-filters/#editor-blockedit . You will however still need some code from the block — niklas, Jan 21 '21 at 14:42
@niklas, would you apply this to the `core/image` block into this as the second argument of `wp.hooks.addFilter()`? — Dirk J. Faber, Jan 21 '21 at 16:28
Like in the example but only include the parts of `InspectorControls` that you want to use. Find that in the `core/image` — niklas, Jan 21 '21 at 19:07

score 0 · Answer 1 · answered Jun 08 '23 at 15:10

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

Remove settings from Gutenberg core block

1 Answers1