From 3daf7b4567691a08ea3d5a97a5d2f19341dc8ad3 Mon Sep 17 00:00:00 2001 From: Paul English Date: Mon, 7 Oct 2024 14:55:25 +0100 Subject: [PATCH 01/10] fix: assign height and width a default value of null Fixes an issue where editing settings.layout.contentSize in theme.json would not change the width of the block. --- inc/blocks/image-comparison/block.json | 4 ++-- .../image-comparison/components/Edit.js | 22 +++++++------------ 2 files changed, 10 insertions(+), 16 deletions(-) diff --git a/inc/blocks/image-comparison/block.json b/inc/blocks/image-comparison/block.json index d82781b..d475e3a 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": null }, "containerWidth": { "type": "string", - "default": "500px" + "default": null } }, "supports": { diff --git a/src/blocks/image-comparison/components/Edit.js b/src/blocks/image-comparison/components/Edit.js index 9e6782e..bc98eb6 100644 --- a/src/blocks/image-comparison/components/Edit.js +++ b/src/blocks/image-comparison/components/Edit.js @@ -3,7 +3,6 @@ */ import { ResizableBox } from '@wordpress/components'; import { useInnerBlocksProps, useBlockProps, useSettings } from '@wordpress/block-editor'; -import { useEffect } from '@wordpress/element'; /** * Internal dependencies @@ -46,10 +45,16 @@ const Edit = ({ attributes, setAttributes, clientId }) => { customCaptionTextColour, captionBackgroundColour, customCaptionBackgroundColour, - containerHeight, - containerWidth, } = attributes; + /** + * Overwrite the default size of the block with the theme's + * defined contentSize, if it exists. This should only be + * applied if these values have not been specifically set by a user. + */ + const containerHeight = attributes.containerHeight ?? '500px'; + const containerWidth = attributes.containerWidth ?? contentWidth ?? '500px'; + const innerBlockSettings = { template: [['bigbite/image-comparison-item'], ['bigbite/image-comparison-item']], templateLock: 'inserter', @@ -61,17 +66,6 @@ const Edit = ({ attributes, setAttributes, clientId }) => { */ let shouldDisplayResize = false; - /** - * Overwrite the default size of the block with the theme's - * defined contentSize, if it exists. This should only be - * applied if no images have been added to the block. - */ - useEffect(() => { - if (!shouldDisplayResize) { - setAttributes({ containerWidth: contentWidth }); - } - }, [contentWidth]); - /** * Retrieve the inner blocks */ From 8c657d88c6ee30cc663709eb3558ab1023476715 Mon Sep 17 00:00:00 2001 From: Paul English Date: Mon, 7 Oct 2024 15:19:58 +0100 Subject: [PATCH 02/10] fix(image-comparison): move block props into own function This was needed to fix 'Arrow function has a complexity of 12. Maximum allowed is 10' JS lint error --- .../image-comparison/components/Edit.js | 70 +++++++++++-------- 1 file changed, 39 insertions(+), 31 deletions(-) diff --git a/src/blocks/image-comparison/components/Edit.js b/src/blocks/image-comparison/components/Edit.js index bc98eb6..fc4ecc2 100644 --- a/src/blocks/image-comparison/components/Edit.js +++ b/src/blocks/image-comparison/components/Edit.js @@ -95,37 +95,45 @@ const Edit = ({ attributes, setAttributes, clientId }) => { topRight: false, }; - const blockProps = useBlockProps({ - style: { - '--bigbite-image-comparison-overflow': overflow ? 'visible' : 'hidden', - '--bigbite-image-comparison-divider-initial-position': dividerInitialPosition, - '--bigbite-image-comparison-divider-thickness': dividerThickness, - '--bigbite-image-comparison-divider-box-width': dividerBoxWidth, - '--bigbite-image-comparison-divider-box-height': dividerBoxHeight, - '--bigbite-image-comparison-divider-box-border-radius': dividerBoxBorderRadius?.top, - '--bigbite-image-comparison-divider-icon-gap': dividerIconGap, - '--bigbite-image-comparison-divider-colour': dividerColour - ? `var( --wp--preset--color--${dividerColour}, ${customDividerColour} )` - : customDividerColour, - '--bigbite-image-comparison-divider-box-colour': dividerBoxColour - ? `var( --wp--preset--color--${dividerBoxColour}, ${customDividerBoxColour} )` - : customDividerBoxColour, - '--bigbite-image-comparison-divider-icon-colour': dividerIconColour - ? `var( --wp--preset--color--${dividerIconColour}, ${customDividerIconColour} )` - : customDividerIconColour, - '--bigbite-image-comparison-caption-text-colour': captionTextColour - ? `var( --wp--preset--color--${captionTextColour}, ${customCaptionTextColour} )` - : customCaptionTextColour, - '--bigbite-image-comparison-caption-background-colour': captionBackgroundColour - ? `var( --wp--preset--color--${captionBackgroundColour}, ${customCaptionBackgroundColour} )` - : customCaptionBackgroundColour, - '--bigbite-image-comparison-container-height': containerHeight, - '--bigbite-image-comparison-container-width': containerWidth, - }, - className: { - 'wp-block-bigbite-image-comparison--horizontal': dividerAxis === 'horizontal', - }, - }); + /** + * Generates the block props. + * + * @returns the block props. + */ + const getBlockProps = () => + useBlockProps({ + style: { + '--bigbite-image-comparison-overflow': overflow ? 'visible' : 'hidden', + '--bigbite-image-comparison-divider-initial-position': dividerInitialPosition, + '--bigbite-image-comparison-divider-thickness': dividerThickness, + '--bigbite-image-comparison-divider-box-width': dividerBoxWidth, + '--bigbite-image-comparison-divider-box-height': dividerBoxHeight, + '--bigbite-image-comparison-divider-box-border-radius': dividerBoxBorderRadius?.top, + '--bigbite-image-comparison-divider-icon-gap': dividerIconGap, + '--bigbite-image-comparison-divider-colour': dividerColour + ? `var( --wp--preset--color--${dividerColour}, ${customDividerColour} )` + : customDividerColour, + '--bigbite-image-comparison-divider-box-colour': dividerBoxColour + ? `var( --wp--preset--color--${dividerBoxColour}, ${customDividerBoxColour} )` + : customDividerBoxColour, + '--bigbite-image-comparison-divider-icon-colour': dividerIconColour + ? `var( --wp--preset--color--${dividerIconColour}, ${customDividerIconColour} )` + : customDividerIconColour, + '--bigbite-image-comparison-caption-text-colour': captionTextColour + ? `var( --wp--preset--color--${captionTextColour}, ${customCaptionTextColour} )` + : customCaptionTextColour, + '--bigbite-image-comparison-caption-background-colour': captionBackgroundColour + ? `var( --wp--preset--color--${captionBackgroundColour}, ${customCaptionBackgroundColour} )` + : customCaptionBackgroundColour, + '--bigbite-image-comparison-container-height': containerHeight, + '--bigbite-image-comparison-container-width': containerWidth, + }, + className: { + 'wp-block-bigbite-image-comparison--horizontal': dividerAxis === 'horizontal', + }, + }); + + const blockProps = getBlockProps(); const uniqueId = `fig-${clientId}`; From d7a2b22f657cef6fee5f267b1526f2bca194efa3 Mon Sep 17 00:00:00 2001 From: Paul English Date: Mon, 7 Oct 2024 17:08:36 +0100 Subject: [PATCH 03/10] Revert "fix(image-comparison): move block props into own function" This reverts commit 8c657d88c6ee30cc663709eb3558ab1023476715. --- .../image-comparison/components/Edit.js | 70 ++++++++----------- 1 file changed, 31 insertions(+), 39 deletions(-) diff --git a/src/blocks/image-comparison/components/Edit.js b/src/blocks/image-comparison/components/Edit.js index fc4ecc2..bc98eb6 100644 --- a/src/blocks/image-comparison/components/Edit.js +++ b/src/blocks/image-comparison/components/Edit.js @@ -95,45 +95,37 @@ const Edit = ({ attributes, setAttributes, clientId }) => { topRight: false, }; - /** - * Generates the block props. - * - * @returns the block props. - */ - const getBlockProps = () => - useBlockProps({ - style: { - '--bigbite-image-comparison-overflow': overflow ? 'visible' : 'hidden', - '--bigbite-image-comparison-divider-initial-position': dividerInitialPosition, - '--bigbite-image-comparison-divider-thickness': dividerThickness, - '--bigbite-image-comparison-divider-box-width': dividerBoxWidth, - '--bigbite-image-comparison-divider-box-height': dividerBoxHeight, - '--bigbite-image-comparison-divider-box-border-radius': dividerBoxBorderRadius?.top, - '--bigbite-image-comparison-divider-icon-gap': dividerIconGap, - '--bigbite-image-comparison-divider-colour': dividerColour - ? `var( --wp--preset--color--${dividerColour}, ${customDividerColour} )` - : customDividerColour, - '--bigbite-image-comparison-divider-box-colour': dividerBoxColour - ? `var( --wp--preset--color--${dividerBoxColour}, ${customDividerBoxColour} )` - : customDividerBoxColour, - '--bigbite-image-comparison-divider-icon-colour': dividerIconColour - ? `var( --wp--preset--color--${dividerIconColour}, ${customDividerIconColour} )` - : customDividerIconColour, - '--bigbite-image-comparison-caption-text-colour': captionTextColour - ? `var( --wp--preset--color--${captionTextColour}, ${customCaptionTextColour} )` - : customCaptionTextColour, - '--bigbite-image-comparison-caption-background-colour': captionBackgroundColour - ? `var( --wp--preset--color--${captionBackgroundColour}, ${customCaptionBackgroundColour} )` - : customCaptionBackgroundColour, - '--bigbite-image-comparison-container-height': containerHeight, - '--bigbite-image-comparison-container-width': containerWidth, - }, - className: { - 'wp-block-bigbite-image-comparison--horizontal': dividerAxis === 'horizontal', - }, - }); - - const blockProps = getBlockProps(); + const blockProps = useBlockProps({ + style: { + '--bigbite-image-comparison-overflow': overflow ? 'visible' : 'hidden', + '--bigbite-image-comparison-divider-initial-position': dividerInitialPosition, + '--bigbite-image-comparison-divider-thickness': dividerThickness, + '--bigbite-image-comparison-divider-box-width': dividerBoxWidth, + '--bigbite-image-comparison-divider-box-height': dividerBoxHeight, + '--bigbite-image-comparison-divider-box-border-radius': dividerBoxBorderRadius?.top, + '--bigbite-image-comparison-divider-icon-gap': dividerIconGap, + '--bigbite-image-comparison-divider-colour': dividerColour + ? `var( --wp--preset--color--${dividerColour}, ${customDividerColour} )` + : customDividerColour, + '--bigbite-image-comparison-divider-box-colour': dividerBoxColour + ? `var( --wp--preset--color--${dividerBoxColour}, ${customDividerBoxColour} )` + : customDividerBoxColour, + '--bigbite-image-comparison-divider-icon-colour': dividerIconColour + ? `var( --wp--preset--color--${dividerIconColour}, ${customDividerIconColour} )` + : customDividerIconColour, + '--bigbite-image-comparison-caption-text-colour': captionTextColour + ? `var( --wp--preset--color--${captionTextColour}, ${customCaptionTextColour} )` + : customCaptionTextColour, + '--bigbite-image-comparison-caption-background-colour': captionBackgroundColour + ? `var( --wp--preset--color--${captionBackgroundColour}, ${customCaptionBackgroundColour} )` + : customCaptionBackgroundColour, + '--bigbite-image-comparison-container-height': containerHeight, + '--bigbite-image-comparison-container-width': containerWidth, + }, + className: { + 'wp-block-bigbite-image-comparison--horizontal': dividerAxis === 'horizontal', + }, + }); const uniqueId = `fig-${clientId}`; From 97c4c27b235de2f0026c18168ad779df90e6ed50 Mon Sep 17 00:00:00 2001 From: Paul English Date: Tue, 8 Oct 2024 09:55:42 +0100 Subject: [PATCH 04/10] fix(image comparison): create function for getting container size This was needed to fix 'Arrow function has a complexity of 12. Maximum allowed is 10' JS lint error --- .../image-comparison/components/Edit.js | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/src/blocks/image-comparison/components/Edit.js b/src/blocks/image-comparison/components/Edit.js index bc98eb6..3e19d67 100644 --- a/src/blocks/image-comparison/components/Edit.js +++ b/src/blocks/image-comparison/components/Edit.js @@ -51,9 +51,32 @@ const Edit = ({ attributes, setAttributes, clientId }) => { * Overwrite the default size of the block with the theme's * defined contentSize, if it exists. This should only be * applied if these values have not been specifically set by a user. + * + * @returns { + * width: string|undefined The container's width. + * height: string|undefined The container's height. + * } The size containing the height and width of the block's container. */ - const containerHeight = attributes.containerHeight ?? '500px'; - const containerWidth = attributes.containerWidth ?? contentWidth ?? '500px'; + const getContainerSize = () => { + let containerHeight = '500px'; + if (attributes.containerHeight) { + containerHeight = attributes.containerHeight; + } + + let containerWidth = '500px'; + if (attributes.containerWidth) { + containerWidth = attributes.containerWidth; + } else if (contentWidth) { + containerWidth = contentWidth; + } + + return { + containerHeight, + containerWidth, + }; + }; + + const { containerHeight, containerWidth } = getContainerSize(); const innerBlockSettings = { template: [['bigbite/image-comparison-item'], ['bigbite/image-comparison-item']], From 6edfadc65dc5469d4921ce6e702b59f341b50030 Mon Sep 17 00:00:00 2001 From: Paul English Date: Tue, 8 Oct 2024 10:57:40 +0100 Subject: [PATCH 05/10] docs: fix invalid getContainerSize typehinting in docblock --- src/blocks/image-comparison/components/Edit.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/blocks/image-comparison/components/Edit.js b/src/blocks/image-comparison/components/Edit.js index 3e19d67..d6fb11e 100644 --- a/src/blocks/image-comparison/components/Edit.js +++ b/src/blocks/image-comparison/components/Edit.js @@ -53,8 +53,8 @@ const Edit = ({ attributes, setAttributes, clientId }) => { * applied if these values have not been specifically set by a user. * * @returns { - * width: string|undefined The container's width. - * height: string|undefined The container's height. + * width: string|undefined + * height: string|undefined * } The size containing the height and width of the block's container. */ const getContainerSize = () => { From 1b5d327579d23c88be962afdfe94b10a0ccea88d Mon Sep 17 00:00:00 2001 From: Paul English Date: Tue, 8 Oct 2024 12:33:00 +0100 Subject: [PATCH 06/10] fix(image-comparison): allows alignment settings to affect the block --- src/blocks/image-comparison/components/Edit.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/blocks/image-comparison/components/Edit.js b/src/blocks/image-comparison/components/Edit.js index d6fb11e..53a8b75 100644 --- a/src/blocks/image-comparison/components/Edit.js +++ b/src/blocks/image-comparison/components/Edit.js @@ -53,11 +53,18 @@ const Edit = ({ attributes, setAttributes, clientId }) => { * applied if these values have not been specifically set by a user. * * @returns { - * width: string|undefined - * height: string|undefined + * width: string + * height: string * } The size containing the height and width of the block's container. */ const getContainerSize = () => { + if (attributes.align) { + return { + containerWidth: 'auto', + containerHeight: 'auto', + }; + } + let containerHeight = '500px'; if (attributes.containerHeight) { containerHeight = attributes.containerHeight; From e304e01b73b1f31542ea8af0b23fccca7562a152 Mon Sep 17 00:00:00 2001 From: Paul English Date: Tue, 8 Oct 2024 12:35:02 +0100 Subject: [PATCH 07/10] docs: correct return param type in getContainerSize docblock --- src/blocks/image-comparison/components/Edit.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/blocks/image-comparison/components/Edit.js b/src/blocks/image-comparison/components/Edit.js index d6fb11e..dad333f 100644 --- a/src/blocks/image-comparison/components/Edit.js +++ b/src/blocks/image-comparison/components/Edit.js @@ -53,8 +53,8 @@ const Edit = ({ attributes, setAttributes, clientId }) => { * applied if these values have not been specifically set by a user. * * @returns { - * width: string|undefined - * height: string|undefined + * width: string + * height: string * } The size containing the height and width of the block's container. */ const getContainerSize = () => { From 812ffc0f04e98e2a8aa9bb2aa2e24deb73a8708a Mon Sep 17 00:00:00 2001 From: Paul English Date: Tue, 8 Oct 2024 14:17:52 +0100 Subject: [PATCH 08/10] fix: fix alignment functionality on front end --- inc/blocks/image-comparison/render.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/inc/blocks/image-comparison/render.php b/inc/blocks/image-comparison/render.php index 47e2715..b2e2a55 100644 --- a/inc/blocks/image-comparison/render.php +++ b/inc/blocks/image-comparison/render.php @@ -54,8 +54,8 @@ $extra_styles[] = sprintf( '--bigbite-image-comparison-divider-box-height: %s;', $attributes['dividerBoxHeight'] ); $extra_styles[] = sprintf( '--bigbite-image-comparison-divider-box-border-radius: %s;', $attributes['dividerBoxBorderRadius']['top'] ); $extra_styles[] = sprintf( '--bigbite-image-comparison-divider-icon-gap: %s;', $attributes['dividerIconGap'] ); -$extra_styles[] = sprintf( '--bigbite-image-comparison-container-height: %s;', $attributes['containerHeight'] ); -$extra_styles[] = sprintf( '--bigbite-image-comparison-container-width: %s;', $attributes['containerWidth'] ); +$extra_styles[] = sprintf( '--bigbite-image-comparison-container-height: %s;', $attributes['align'] ? 'auto' : $attributes['containerHeight'] ); +$extra_styles[] = sprintf( '--bigbite-image-comparison-container-width: %s;', $attributes['align'] ? 'auto' : $attributes['containerWidth'] ); foreach ( $colours as $colour ) { if ( ( empty( $attributes[ $colour[0] ] ) && empty( $attributes[ $colour[1] ] ) ) || ! $colour[3] ) { From 30fe54b7649d84415adb5fc5ae968a778049fe7b Mon Sep 17 00:00:00 2001 From: Paul English Date: Tue, 8 Oct 2024 14:33:36 +0100 Subject: [PATCH 09/10] fix: hide width/height settings when alignment is set --- .../image-comparison/components/Edit.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/blocks/image-comparison/components/Edit.js b/src/blocks/image-comparison/components/Edit.js index 53a8b75..d2ab23d 100644 --- a/src/blocks/image-comparison/components/Edit.js +++ b/src/blocks/image-comparison/components/Edit.js @@ -102,14 +102,19 @@ const Edit = ({ attributes, setAttributes, clientId }) => { 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 + * Don't display resize handles if the user has chosen one of the alignment settings. */ - innerBlocks.forEach((block) => { - if (block?.attributes?.id) { - shouldDisplayResize = true; - } - }); + if (!attributes.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 From 71f341a6677d2f76902297cbe5a7fbb9bb6c3579 Mon Sep 17 00:00:00 2001 From: Paul English Date: Tue, 8 Oct 2024 14:47:07 +0100 Subject: [PATCH 10/10] docs: improve getContainerSize docblock description --- src/blocks/image-comparison/components/Edit.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/blocks/image-comparison/components/Edit.js b/src/blocks/image-comparison/components/Edit.js index dad333f..e10ecc2 100644 --- a/src/blocks/image-comparison/components/Edit.js +++ b/src/blocks/image-comparison/components/Edit.js @@ -48,9 +48,9 @@ const Edit = ({ attributes, setAttributes, clientId }) => { } = attributes; /** - * Overwrite the default size of the block with the theme's - * defined contentSize, if it exists. This should only be - * applied if these values have not been specifically set by a user. + * Get the container's size. If this has not been set by + * the user then we overwrite the default size of the block + * with the theme's defined contentSize, if it exists. * * @returns { * width: string