From 3daf7b4567691a08ea3d5a97a5d2f19341dc8ad3 Mon Sep 17 00:00:00 2001 From: Paul English Date: Mon, 7 Oct 2024 14:55:25 +0100 Subject: [PATCH 1/7] 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 2/7] 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 3/7] 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 4/7] 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 5/7] 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 e304e01b73b1f31542ea8af0b23fccca7562a152 Mon Sep 17 00:00:00 2001 From: Paul English Date: Tue, 8 Oct 2024 12:35:02 +0100 Subject: [PATCH 6/7] 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 71f341a6677d2f76902297cbe5a7fbb9bb6c3579 Mon Sep 17 00:00:00 2001 From: Paul English Date: Tue, 8 Oct 2024 14:47:07 +0100 Subject: [PATCH 7/7] 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