diff --git a/inc/blocks/image-comparison/block.json b/inc/blocks/image-comparison/block.json index d82781b..579a09f 100644 --- a/inc/blocks/image-comparison/block.json +++ b/inc/blocks/image-comparison/block.json @@ -83,11 +83,11 @@ }, "containerHeight": { "type": "string", - "default": "500px" + "default": "auto" }, "containerWidth": { "type": "string", - "default": "500px" + "default": "auto" } }, "supports": { diff --git a/src/blocks/image-comparison/components/Edit.js b/src/blocks/image-comparison/components/Edit.js index 9e6782e..33f5af1 100644 --- a/src/blocks/image-comparison/components/Edit.js +++ b/src/blocks/image-comparison/components/Edit.js @@ -27,6 +27,7 @@ const Edit = ({ attributes, setAttributes, clientId }) => { const [contentWidth] = useSettings('layout.contentSize'); const { + align, overflow, dividerInitialPosition, dividerAxis, @@ -72,20 +73,31 @@ const Edit = ({ attributes, setAttributes, clientId }) => { } }, [contentWidth]); + useEffect(() => { + if (['wide', 'full'].includes(align)) { + setAttributes({ + containerHeight: 'auto', + containerWidth: 'auto', + }); + } + }, [align, setAttributes]); + /** * Retrieve the inner blocks */ const [{ innerBlocks }] = wp.data.select('core/block-editor').getBlocksByClientId(clientId); - /** - * Determine whether to allow the resize handles to be - * displayed based on if an image is assigned or not - */ - innerBlocks.forEach((block) => { - if (block?.attributes?.id) { - shouldDisplayResize = true; - } - }); + if (!['wide', 'full'].includes(align)) { + /** + * Determine whether to allow the resize handles to be + * displayed based on if an image is assigned or not + */ + innerBlocks.forEach((block) => { + if (block?.attributes?.id) { + shouldDisplayResize = true; + } + }); + } /** * Only ever display the right, bottom, and bottomRight handles