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
bigbite · Oct 7, 2024 · 8c657d8 · 8c657d8
1 parent 3daf7b4
commit 8c657d8
Showing 1 changed file with 39 additions and 31 deletions.
diff --git 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}`;