BackgroundImage component: support specific image sizes and lazy loading

resources/js/blocks/components/BackgroundImage.jsx

@@ -1,4 +1,4 @@
-import { useSelect } from '@wordpress/data';
+import { select } from '@wordpress/data';
 
 /**
  * BackgroundImage
@@ -6,28 +6,48 @@ import { useSelect } from '@wordpress/data';
  * This component is used to display a background image for a block based on its attributes.
  *
  * @param {object} props
- * @param {string} props.background_image The url of the background image.
+ * @param {string} props.background_url The desired full size url.
+ * @param {string} props.background_url_lazy Tiny lazy url.
+ * @param {boolean} props.background_lazy Whether or not to lazy load the background image.
  * @param {string} props.background_position The background-position property.
  * @param {boolean} props.background_fixed Toggle for background-attachment: fixed.
  * @param {number} props.background_opacity The opacity value applied to the image.
  * @returns {*} React JSX
  */
-export default function BackgroundImage({ background_url, background_position = 'center', background_fixed = false, background_opacity = 70 }) {
+export default function BackgroundImage({
+  background_url,
+  background_url_lazy,
+  background_lazy,
+  background_position = 'center',
+  background_fixed = false,
+  background_opacity = 70,
+}) {
+
+  if (background_url) {
+    let styles = {
+      backgroundImage: `url(${background_url})`,
+      backgroundPosition: background_position,
+      backgroundSize: 'cover',
+      backgroundAttachment: background_fixed ? 'fixed' : 'scroll',
+      opacity: Number(background_opacity) * 0.01,
+    }
+
+    let attributes = {
+      className: 'badegg-block-background',
+      style: styles,
+    };
+
+    if(background_lazy) {
+      attributes['data-bg'] = background_url;
+      attributes.style.backgroundImage = `url(${background_url_lazy})`;
+      attributes.className += ' lazy-bg';
+    }
+
+    return (
+      <div { ...attributes } />
+    )
+  } else {
+    return;
+  }
 
-	return (
-		<>
-			{background_url && (
-				<div
-          className="badegg-block-background"
-          style={{
-            backgroundImage: `url(${background_url})`,
-            backgroundPosition: background_position,
-            backgroundSize: 'cover',
-            backgroundAttachment: background_fixed ? 'fixed' : 'scroll',
-            opacity: Number(background_opacity) * 0.01,
-          }}
-        />
-			)}
-		</>
-	)
 }

resources/js/blocks/components/BlockSettings.jsx

@@ -1,5 +1,3 @@
-import { useSelect } from '@wordpress/data';
-
 /**
  * BlockSettings
  *
@@ -12,6 +10,7 @@ import { useSelect } from '@wordpress/data';
  */
 
 import { __ } from '@wordpress/i18n';
+import { select } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
 
@@ -85,7 +84,8 @@ export default function BlockSettings({ attributes, setAttributes }) {
 		background_hex,
 		background_tint,
 		background_image,
-    background_url,
+    background_lazy,
+    background_size,
 		background_opacity,
 		background_contrast,
 		background_fixed,
@@ -159,7 +159,7 @@ export default function BlockSettings({ attributes, setAttributes }) {
             { 'background_colour' in attributes && attributes.background_colour && ![0, '0', 'white', 'black'].includes(attributes.background_colour) ? (
               <>
                 <SelectControl
-                  label={ __("Background Tint", "badegg") }
+                  label={ __("Tint", "badegg") }
                   value={ background_tint }
                   options={ configOptions.tints }
                   onChange={ (value) => setAttributes({ background_tint: value }) }
@@ -183,6 +183,12 @@ export default function BlockSettings({ attributes, setAttributes }) {
                   onChange={(value) => setAttributes({ background_fixed: value }) }
                   __nextHasNoMarginBottom
                 />
+                <ToggleControl
+                  label={ __('Lazy Loaded', 'badegg') }
+                  checked={ background_lazy }
+                  onChange={(value) => setAttributes({ background_lazy: value }) }
+                  __nextHasNoMarginBottom
+                />
                 <RangeControl
                   __next40pxDefaultSize
                   __nextHasNoMarginBottom
@@ -199,10 +205,21 @@ export default function BlockSettings({ attributes, setAttributes }) {
               <MediaUploadCheck>
                 <MediaUpload
                   onSelect={ (media) => {
-                    setAttributes({
+
+                    let bgAttributes = {
                       background_image: media.id,
                       background_url: media.url,
-                    });
+                      background_url_lazy: '',
+                    };
+
+                    const image = select('core').getEntityRecord('postType', 'attachment', media.id);
+
+                    if(image && image.media_details) {
+                      bgAttributes.background_url_lazy = image.media_details.sizes.lazy.source_url;
+                      bgAttributes.background_url = image.media_details.sizes.hero.source_url;
+                    }
+
+                    setAttributes( bgAttributes );
                   }}
                   allowedTypes={ ['image'] }
                   value={ background_image }
@@ -219,7 +236,11 @@ export default function BlockSettings({ attributes, setAttributes }) {
 
               { background_image != 0 && (
                 <Button
-                  onClick={ () => setAttributes({ background_image: 0, background_url: '' }) }
+                  onClick={ () => setAttributes({
+                      background_image: 0,
+                      background_url: '',
+                      background_url_lazy: '',
+                  }) }
                   isDestructive
                   variant="secondary"
                 >