Skip to content

Instantly share code, notes, and snippets.

@stokesman
Created March 19, 2025 16:19
Show Gist options
  • Save stokesman/6d259c4ce335ab997356f2b6e2bb9acf to your computer and use it in GitHub Desktop.
Save stokesman/6d259c4ce335ab997356f2b6e2bb9acf to your computer and use it in GitHub Desktop.
WP plugin: ensure the Image block will omit extraneous elements when not resizable. E.g. inside a Gallery block.
(({
compose: { createHigherOrderComponent },
element: { cloneElement, createElement: el },
hooks: { addFilter },
}) => {
const ImageInUnresizableContext = ({ blockEdit, blockEditProps: { context } }) => {
// If resize is not allowed then the Image block should omit the element used to
// limit the max width. Due to a bug it won’t, but it can be made to by adding a
// `type` property to the `__unstableParentLayout` prop.
if ( context.allowResize === false ) {
const { props } = blockEdit;
const { __unstableParentLayout: parentLayout } = props;
// Take the type from `default.type` in the layout definition. Inside a
// Gallery block this is currently 'flex'. Hardcoding the value could work
// but given this could be running when the image is inside other blocks
// there’s a chance that would cause breakage.
const nextType =
parentLayout.default?.type && { type: parentLayout.default.type };
const nextProps = {
...props,
__unstableParentLayout: {
...parentLayout,
...nextType
}
};
return cloneElement( blockEdit, nextProps );
}
return blockEdit
}
addFilter(
'editor.BlockEdit',
's8/image-in-unresizable-context',
createHigherOrderComponent((BlockEdit) => (blockEditProps) => {
const blockEdit = el(BlockEdit, blockEditProps);
return blockEditProps.name !== 'core/image'
? blockEdit
: el(ImageInUnresizableContext, { blockEdit, blockEditProps });
}, 'ImageInUnresizableContext')
);
})(wp);
<?php
/**
* Plugin Name: Image block filter № 69566
* Description: Ensures the Image block will omit extraneous elements when not resizable. E.g. inside a Gallery block.
*
* @package s8-image-block-filter-69566
*/
namespace s8\WP\ImageBlockFilter69566;
function hook() {
wp_enqueue_script(
's8-image-block-filter-69566',
plugins_url( 'image-block-filter.js', __FILE__ ),
array(
'wp-compose',
'wp-element',
'wp-hooks',
),
filemtime( plugin_dir_path( __FILE__ ) . 'image-block-filter.js' ),
true
);
}
add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\\hook' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment