Merge pull request #26 from bigbite/refactor/image-urls

Replace image URI attribute with state
bigbite · Aug 30, 2024 · d4f023b · d4f023b
2 parents 5ece2a8 + 706e15c
commit d4f023b
Show file tree

Hide file tree

Showing 8 changed files with 615 additions and 426 deletions.
diff --git a/inc/blocks/image-comparison-item/block.json b/inc/blocks/image-comparison-item/block.json
@@ -10,9 +10,6 @@
         "id": {
             "type": "integer"
         },
-        "url": {
-            "type": "string"
-        },
         "alternativeText": {
             "type": "string"
         },
@@ -24,4 +21,4 @@
     "parent": [ "bigbite/image-comparison" ],
     "textdomain": "bigbite-image-comparison",
     "render": "file:./render.php"
-}
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,9 +13,9 @@
         "@wordpress/block-editor": "^13.0.0",
         "@wordpress/blocks": "^13.0.0",
         "@wordpress/components": "^28.0.0",
-        "@wordpress/core-data": "^7.3.0",
-        "@wordpress/data": "^10.3.0",
-        "@wordpress/element": "^6.0.0",
+        "@wordpress/core-data": "^7.5.0",
+        "@wordpress/data": "^10.5.0",
+        "@wordpress/element": "^6.5.0",
         "@wordpress/i18n": "^5.0.0"
     },
     "devDependencies": {

diff --git a/src/blocks/image-comparison-item/components/Edit.js b/src/blocks/image-comparison-item/components/Edit.js
@@ -16,20 +16,14 @@ import Settings from './Settings';
  * @param {object}   props.attributes    Block attributes
  * @param {function} props.setAttributes Update block attributes
  */
-const Edit = ({ attributes, setAttributes }) => {
-  const blockProps = useBlockProps();
-
-  return (
-    <>
-      <Settings attributes={attributes} setAttributes={setAttributes} />
-      <Image
-        id={attributes?.id}
-        url={attributes?.url}
-        blockProps={blockProps}
-        setAttributes={setAttributes}
-      />
-    </>
-  );
-};
+const Edit = ({ attributes, setAttributes }) => (
+  <>
+    <Settings attributes={attributes} setAttributes={setAttributes} />
+    {/* eslint-disable-next-line react/jsx-props-no-spreading -- this is the recommended approach */}
+    <div {...useBlockProps()}>
+      <Image id={attributes.id} sizeSlug={attributes.sizeSlug} setAttributes={setAttributes} />
+    </div>
+  </>
+);
 
 export default Edit;
diff --git a/src/blocks/image-comparison-item/components/Image.js b/src/blocks/image-comparison-item/components/Image.js
@@ -2,49 +2,99 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button, Flex, FlexItem } from '@wordpress/components';
 import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
+import { Button, Flex, FlexItem } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Checks if WP generated the specified image size.
+ *
+ * @param {Object} image the image to pick from
+ * @param {string} size  the size to locate
+ *
+ * @return {boolean} Whether or not it has default image size.
+ */
+function hasSize(image, size) {
+  return (
+    'url' in (image?.sizes?.[size] ?? {}) ||
+    'source_url' in (image?.media_details?.sizes?.[size] ?? {})
+  );
+}
+
+/**
+ * Retrieve the URI for an image.
+ *
+ * @param {Object} image the image to pick from
+ * @param {String} size  the size to locate
+ *
+ * @return {String} the located image size URI.
+ */
+function imageUrl(image, size) {
+  return (
+    image?.sizes?.[size]?.url ||
+    image?.media_details?.sizes?.[size]?.source_url ||
+    image?.url ||
+    image?.source_url
+  );
+}
 
 /**
  * Renders image in various states
  *
  * @param {object}   props                 Component props
- * @param {object}   props.blockProps      Block generated props
- * @param {number}   props.id              Selected image id
- * @param {string}   props.url             Selected image url
+ * @param {number}   props.id              The image ID
+ * @param {string}   props.sizeSlug        The requested image size
  * @param {string}   props.alternativeText Alternative image text
  * @param {function} props.setAttributes   Update block attributes
  */
-const Image = ({ blockProps, id, url, alternativeText, setAttributes }) => {
-  if (id && url) {
-    // eslint-disable-next-line react/jsx-props-no-spreading -- recommended usage of blockProps
-    return <img {...blockProps} src={url} alt={alternativeText} />;
+const Image = ({ alternativeText, id, sizeSlug, setAttributes }) => {
+  const media = useSelect(
+    (select) => id && select(coreStore).getMedia(id, { context: 'view' }),
+    [id],
+  );
+
+  const src = useMemo(() => {
+    if (!media) {
+      return null;
+    }
+
+    // Try to use the previous selected image size if its available
+    // otherwise fallback to "full"
+    let size = 'full';
+    if (sizeSlug && hasSize(media, sizeSlug)) {
+      size = sizeSlug;
+    }
+
+    return imageUrl(media, size);
+  }, [media, sizeSlug]);
+
+  if (media?.id && src) {
+    return <img src={src} alt={alternativeText} />;
   }
 
   return (
-    // eslint-disable-next-line react/jsx-props-no-spreading -- recommended usage of blockProps
-    <div {...blockProps}>
-      <MediaUploadCheck>
-        <MediaUpload
-          value={id}
-          allowedTypes={['image']}
-          onSelect={(media) => setAttributes({ id: media?.id, url: media?.url })}
-          render={({ open }) => (
-            <Flex
-              className="wp-block-bigbite-image-comparison-item__uploader"
-              direction="column"
-              justify="center"
-            >
-              <FlexItem>
-                <Button variant="primary" onClick={open}>
-                  {__('Select Image', 'bigbite-image-comparison')}
-                </Button>
-              </FlexItem>
-            </Flex>
-          )}
-        />
-      </MediaUploadCheck>
-    </div>
+    <MediaUploadCheck>
+      <MediaUpload
+        value={{ id: media?.id, src }}
+        allowedTypes={['image']}
+        onSelect={(item) => setAttributes({ id: item.id })}
+        render={({ open }) => (
+          <Flex
+            className="wp-block-bigbite-image-comparison-item__uploader"
+            direction="column"
+            justify="center"
+          >
+            <FlexItem>
+              <Button variant="primary" onClick={open}>
+                {__('Select Image', 'bigbite-image-comparison')}
+              </Button>
+            </FlexItem>
+          </Flex>
+        )}
+      />
+    </MediaUploadCheck>
   );
 };
 

diff --git a/src/blocks/image-comparison-item/components/ResolutionTool.js b/src/blocks/image-comparison-item/components/ResolutionTool.js
@@ -4,7 +4,6 @@
 import { SelectControl } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 
 const DEFAULT_SIZE_OPTIONS = [
@@ -76,13 +75,6 @@ export default function ResolutionTool({
     }));
   };
 
-  // reset image resolution when image changes
-  useEffect(() => {
-    setAttributes({
-      sizeSlug: 'full',
-    });
-  }, [id]);
-
   /**
    * Updates the image URL and size slug attributes based on the selected image size.
    *
@@ -96,10 +88,7 @@ export default function ResolutionTool({
       return null;
     }
 
-    return setAttributes({
-      url: newUrl,
-      sizeSlug: newSizeSlug,
-    });
+    return setAttributes({ sizeSlug: newSizeSlug });
   };
 
   const displayValue = value ?? defaultValue;

diff --git a/src/blocks/image-comparison-item/components/Settings.js b/src/blocks/image-comparison-item/components/Settings.js
@@ -29,7 +29,7 @@ const Settings = ({ attributes, setAttributes }) => (
         <PanelRow>
           <Image
             id={attributes?.id}
-            url={attributes?.url}
+            sizeSlug={attributes?.sizeSlug}
             setAttributes={setAttributes}
             alternativeText={attributes?.alternativeText}
           />
@@ -55,10 +55,9 @@ const Settings = ({ attributes, setAttributes }) => (
         accept="image/*"
         mediaId={attributes?.id}
         allowedTypes={['image']}
-        mediaURL={attributes?.url}
-        onSelect={(media) => setAttributes({ id: media?.id, url: media?.url })}
+        onSelect={(media) => setAttributes({ id: media?.id })}
         name={
-          attributes?.id && attributes?.url
+          attributes?.id
             ? __('Replace', 'bigbite-image-comparison')
             : __('Select Image', 'bigbite-image-comparison')
         }

diff --git a/src/blocks/image-comparison-item/styles/editor.scss b/src/blocks/image-comparison-item/styles/editor.scss
@@ -2,6 +2,13 @@
   pointer-events: auto;
 }
 
+.wp-block-bigbite-image-comparison-item img {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  object-fit: cover;
+}
+
 .wp-block-bigbite-image-comparison-item .wp-block-bigbite-image-comparison-item__uploader {
   width: 100%;
   height: 100%;