Created
March 19, 2025 16:19
-
-
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(({ | |
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); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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