expose new image sizes to javascript and properly get specified image sizes in react

resources/css/global/framework/_normalise.scss

@@ -30,8 +30,15 @@ img {
   max-width: 100%;
   height: auto;
   transition: all 300ms ease;
-
-  &.lazy {
-    filter: blur(0.25em);
-  }
+}
+
+img.lazy,
+.lazy-bg,
+.lazy-loaded {
+  transition: all 300ms ease;
+}
+
+img.lazy,
+.lazy-bg {
+  filter: blur(0.25em);
 }

resources/js/blocks/components/BackgroundImage.jsx

@@ -9,7 +9,7 @@ import { select } from '@wordpress/data';
  * @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 {object} props.background_position x and y coordinates as decimals from 0 to 1.
  * @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
@@ -26,7 +26,7 @@ export default function BackgroundImage({
   if (background_url) {
     let styles = {
       backgroundImage: `url(${background_url})`,
-      backgroundPosition: background_position,
+      backgroundPosition: `${ background_position.x * 100}% ${ background_position.y * 100}%`,
       backgroundSize: 'cover',
       backgroundAttachment: background_fixed ? 'fixed' : 'scroll',
       opacity: Number(background_opacity) * 0.01,

resources/js/blocks/components/BlockSettings.jsx

@@ -22,6 +22,7 @@ import {
 	ToggleControl,
 	RangeControl,
 	ColorPalette,
+  FocalPointPicker,
 	Button,
 	Spinner,
 } from '@wordpress/components';
@@ -84,8 +85,9 @@ export default function BlockSettings({ attributes, setAttributes }) {
 		background_hex,
 		background_tint,
 		background_image,
+    background_url,
     background_lazy,
-    background_size,
+    background_position,
 		background_opacity,
 		background_contrast,
 		background_fixed,
@@ -189,6 +191,14 @@ export default function BlockSettings({ attributes, setAttributes }) {
                   onChange={(value) => setAttributes({ background_lazy: value }) }
                   __nextHasNoMarginBottom
                 />
+                <FocalPointPicker
+                  url={ background_url }
+                  value={ background_position }
+                  onDragStart={ (value) => setAttributes({ background_position: value }) }
+                  onDrag={ (value) => setAttributes({ background_position: value }) }
+                  onChange={ (value) => setAttributes({ background_position: value }) }
+                  __nextHasNoMarginBottom
+                />
                 <RangeControl
                   __next40pxDefaultSize
                   __nextHasNoMarginBottom
@@ -204,23 +214,11 @@ export default function BlockSettings({ attributes, setAttributes }) {
             <PanelRow>
               <MediaUploadCheck>
                 <MediaUpload
-                  onSelect={ (media) => {
-
-                    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 );
-                  }}
+                  onSelect={ (media) => setAttributes({
+                    background_image: media.id,
+                    background_url: media.sizes.hero.url,
+                    background_url_lazy: media.sizes.lazy.url,
+                  })}
                   allowedTypes={ ['image'] }
                   value={ background_image }
                   render={ ({ open }) => (

resources/json/block-attributes.json

@@ -47,8 +47,11 @@
       "default": 30
   },
   "background_position": {
-      "type": "string",
-      "default": "center center"
+      "type": "object",
+      "default": {
+        "x": 0.5,
+        "y": 0.5
+      }
   },
   "background_fixed": {
       "type": "boolean",