From 3daf7b4567691a08ea3d5a97a5d2f19341dc8ad3 Mon Sep 17 00:00:00 2001
From: Paul English <paulrenglish@yahoo.co.uk>
Date: Mon, 7 Oct 2024 14:55:25 +0100
Subject: [PATCH 01/13] 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 <paulrenglish@yahoo.co.uk>
Date: Mon, 7 Oct 2024 15:19:58 +0100
Subject: [PATCH 02/13] 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 <paulrenglish@yahoo.co.uk>
Date: Mon, 7 Oct 2024 17:08:36 +0100
Subject: [PATCH 03/13] 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 <paulrenglish@yahoo.co.uk>
Date: Tue, 8 Oct 2024 09:55:42 +0100
Subject: [PATCH 04/13] 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 <paulrenglish@yahoo.co.uk>
Date: Tue, 8 Oct 2024 10:57:40 +0100
Subject: [PATCH 05/13] 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 <paulrenglish@yahoo.co.uk>
Date: Tue, 8 Oct 2024 12:33:00 +0100
Subject: [PATCH 06/13] 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 <paulrenglish@yahoo.co.uk>
Date: Tue, 8 Oct 2024 12:35:02 +0100
Subject: [PATCH 07/13] 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 <paulrenglish@yahoo.co.uk>
Date: Tue, 8 Oct 2024 14:17:52 +0100
Subject: [PATCH 08/13] 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 <paulrenglish@yahoo.co.uk>
Date: Tue, 8 Oct 2024 14:33:36 +0100
Subject: [PATCH 09/13] 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 <paulrenglish@yahoo.co.uk>
Date: Tue, 8 Oct 2024 14:47:07 +0100
Subject: [PATCH 10/13] 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

From 829f9e0b8a764d2fec02a11ad1ae165a150e675c Mon Sep 17 00:00:00 2001
From: Paul English <75122975+PaulREnglish@users.noreply.github.com>
Date: Mon, 13 Jan 2025 17:07:21 +0000
Subject: [PATCH 11/13] refactor: set default width/height to auto

---
 inc/blocks/image-comparison/block.json        |  4 +-
 .../image-comparison/components/Edit.js       | 40 +------------------
 2 files changed, 4 insertions(+), 40 deletions(-)

diff --git a/inc/blocks/image-comparison/block.json b/inc/blocks/image-comparison/block.json
index d475e3a..579a09f 100644
--- a/inc/blocks/image-comparison/block.json
+++ b/inc/blocks/image-comparison/block.json
@@ -83,11 +83,11 @@
         },
         "containerHeight": {
             "type": "string",
-            "default": null
+            "default": "auto"
         },
         "containerWidth": {
             "type": "string",
-            "default": null
+            "default": "auto"
         }
     },
     "supports": {
diff --git a/src/blocks/image-comparison/components/Edit.js b/src/blocks/image-comparison/components/Edit.js
index 775a252..ecad62f 100644
--- a/src/blocks/image-comparison/components/Edit.js
+++ b/src/blocks/image-comparison/components/Edit.js
@@ -45,46 +45,10 @@ const Edit = ({ attributes, setAttributes, clientId }) => {
     customCaptionTextColour,
     captionBackgroundColour,
     customCaptionBackgroundColour,
+    containerHeight,
+    containerWidth,
   } = attributes;
 
-  /**
-   * 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
-   *  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;
-    }
-
-    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']],
     templateLock: 'inserter',

From 9c6cf2e4d3f2a0fc5c75215e5d7e75445afe582e Mon Sep 17 00:00:00 2001
From: Paul English <75122975+PaulREnglish@users.noreply.github.com>
Date: Mon, 13 Jan 2025 17:08:33 +0000
Subject: [PATCH 12/13] fix: set container height and width to auto if align is
 wide or full

---
 .../image-comparison/components/Edit.js       | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/blocks/image-comparison/components/Edit.js b/src/blocks/image-comparison/components/Edit.js
index ecad62f..33f5af1 100644
--- a/src/blocks/image-comparison/components/Edit.js
+++ b/src/blocks/image-comparison/components/Edit.js
@@ -3,6 +3,7 @@
  */
 import { ResizableBox } from '@wordpress/components';
 import { useInnerBlocksProps, useBlockProps, useSettings } from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -26,6 +27,7 @@ const Edit = ({ attributes, setAttributes, clientId }) => {
   const [contentWidth] = useSettings('layout.contentSize');
 
   const {
+    align,
     overflow,
     dividerInitialPosition,
     dividerAxis,
@@ -61,14 +63,31 @@ const Edit = ({ attributes, setAttributes, clientId }) => {
   let shouldDisplayResize = false;
 
   /**
-   * Retrieve the inner blocks
+   * 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.
    */
-  const [{ innerBlocks }] = wp.data.select('core/block-editor').getBlocksByClientId(clientId);
+  useEffect(() => {
+    if (!shouldDisplayResize) {
+      setAttributes({ containerWidth: contentWidth });
+    }
+  }, [contentWidth]);
+
+  useEffect(() => {
+    if (['wide', 'full'].includes(align)) {
+      setAttributes({
+        containerHeight: 'auto',
+        containerWidth: 'auto',
+      });
+    }
+  }, [align, setAttributes]);
 
   /**
-   * Don't display resize handles if the user has chosen one of the alignment settings.
+   * Retrieve the inner blocks
    */
-  if (!attributes.align) {
+  const [{ innerBlocks }] = wp.data.select('core/block-editor').getBlocksByClientId(clientId);
+
+  if (!['wide', 'full'].includes(align)) {
     /**
      * Determine whether to allow the resize handles to be
      * displayed based on if an image is assigned or not

From ab7af27a6688fa49504dc4f8a153dc48a101471d Mon Sep 17 00:00:00 2001
From: Paul English <75122975+PaulREnglish@users.noreply.github.com>
Date: Mon, 13 Jan 2025 17:17:41 +0000
Subject: [PATCH 13/13] refactor: remove align check on frontend for
 width/height

Setting the align attribute to full or wide in the editor will automatically change the containerWidth and containerHeight to auto.  Thus we no longer need to check the align attribute on the front end to force the width and height to be auto.
---
 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 b2e2a55..47e2715 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['align'] ? 'auto' : $attributes['containerHeight'] );
-$extra_styles[] = sprintf( '--bigbite-image-comparison-container-width: %s;', $attributes['align'] ? 'auto' : $attributes['containerWidth'] );
+$extra_styles[] = sprintf( '--bigbite-image-comparison-container-height: %s;', $attributes['containerHeight'] );
+$extra_styles[] = sprintf( '--bigbite-image-comparison-container-width: %s;', $attributes['containerWidth'] );
 
 foreach ( $colours as $colour ) {
 	if ( ( empty( $attributes[ $colour[0] ] ) && empty( $attributes[ $colour[1] ] ) ) || ! $colour[3] ) {