Remove height and width inputs (“Image Dimensions”) from core/image

  • somecodeiwrote

    (@somecodeiwrote)


    1 week, 5 days ago

    I’d like to remove the height and width inputs from the core/image block. I believe I want to fully remove the “Image Dimensions”.

    This repo which (I found here) does the job very well, but requires a new custom block, and placing an image in that block. The solution works, but is a tad clunky. I would like to disable these inputs by altering the core/image block.

    The post referenced above @czapla says, ” … the core/image block currently has a technical limitation which prevents the user from removing the “Image Dimensions” using the blocks.registerBlockType filter. I will fix it in the Gutenberg codebase …”

    It is possible the technical limitation still exists. I’ve tried every way I can think of, to disable the “Image Dimensions” using both blocks.registerBlockType and blocks.getBlockAttributes but neither seem to work. I was working with 

    "attributes": {
    		"allowResize": {
    			"type": "boolean",
    			"default": false
    		}
    	},

    and

    "providesContext": {
    "allowResize": "allowResize"
    }

    per the repo and the working plugin in attempt to modify the core/image block.

    Then, I found this documentation which says:

    isResizable

    A boolean control for showing the resize fields “Image Dimensions”. Set this to false if you want images to always be the fixed size of the selected image.

    I tried setting isResizable to false, but to no avail. I suspect I am doing something wrong.

    Any help would be appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    1 week, 4 days ago

    You shouldn’t modify core source code. Your efforts will be undone during the next update. You could modify an object’s properties from theme or plugin code during the page load process. It’s still rather clunky since the dimension fields might be briefly visible during page load.

    You could also hide the fields with CSS. Being out of sight would deter nearly all users, so the above modification might be unnecessary.

    Thread Starter somecodeiwrote

    (@somecodeiwrote)

    1 week, 4 days ago

    I don’t think I explained myself well. I am not looking to edit the core block itself. I agree that would be a bad idea.

    What I am looking to do, is streamline the admin. I want to disable the height and width inputs, as I am able to do with other things. I remove various pieces of Gutenberg functionality via a custom theme or plugin (depending on what I am working on).

    For example – in the theme.json …

    "dimensions": {
    "aspectRatio": false,
    "aspectRatios": [ { "name": "Normal", "slug": "555", "ratio": "auto" } ],
    "defaultAspectRatios": false
    }

    renders the Aspect Ratio functionality effectively inoperable. It is not perfect, but it does what I want it to, more or less.

    I have a JS file, which among other things, disables the duotone and shadow options …

    function removeImageSettings( settings, name ) {
    if ( ! settings?.supports ) { return settings; }
    if ( name === 'core/image' ) {
    return Object.assign( {}, settings, {
    supports: Object.assign( settings.supports, { 
    filter: { duotone: false, }, shadow: false,} ),
    } );
    }
    return settings;
    }
    addFilter( 'blocks.registerBlockType', 'modify-block-supports/remove-image-settings', removeImageSettings, );

    I disable the image rounded and default as well …

    wp.blocks.unregisterBlockStyle( 'core/image', 'default' );
    wp.blocks.unregisterBlockStyle( 'core/image', 'rounded' );

    None of these edits actually change the core source code. I am just turning options off, and the settings remain after updates to core.

    I am hoping to disable the core/image height and width inputs as well and using similar methods. I have a custom image block, that does this. I found the aforementioned image container block that does this too. I was hoping to simply hook into the attributes of the core/image block and disable this feature, like I am able to with other stuff.

    Make sense?

    Moderator bcworkz

    (@bcworkz)

    1 week, 3 days ago

    Yep, gotcha. Sadly not everything has an available hook where we can alter anything we please. I don’t specifically know if a hook exists for this or not. Since you’ve apparently found the source code, if you can find where a hook is asserted for this, then that’s the path to take. If there is none, we’re left with the other less desirable approaches already discussed.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.