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

app/Utilities/RestAPI.php

@@ -7,9 +7,35 @@ class RestAPI
 {
     public function __construct()
     {
+        add_filter( 'wp_prepare_attachment_for_js', [$this, 'image_sizes'], 10, 3 );
         add_action( 'rest_api_init', [$this, 'blocks']);
     }
 
+    public function image_sizes( $response, $attachment, $meta )
+    {
+        if ( empty( $response['sizes'] ) || empty( $meta['sizes'] ) ) {
+            return $response;
+        }
+
+        $custom_sizes = [ 'hero', 'lazy' ];
+
+        foreach ( $custom_sizes as $size ) {
+            if ( ! empty( $meta['sizes'][ $size ] ) ) {
+                $response['sizes'][ $size ] = [
+                    'url'         => wp_get_attachment_image_url( $attachment->ID, $size ),
+                    'width'       => $meta['sizes'][ $size ]['width'],
+                    'height'      => $meta['sizes'][ $size ]['height'],
+                    'orientation' =>
+                        $meta['sizes'][ $size ]['height'] > $meta['sizes'][ $size ]['width']
+                            ? 'portrait'
+                            : 'landscape',
+                ];
+            }
+        }
+
+        return $response;
+    }
+
     public function blocks( )
     {
         $restBase = 'badegg/v1';
@@ -76,5 +102,4 @@ class RestAPI
             ['label' => __('Darkest',   'badegg'), 'value' => 'darkest' ],
         ];
     }
-
 }

app/setup.php

@@ -167,7 +167,10 @@ function cors() {
 
 }
 
-$image_srcset = new Utilities\ImageSrcset;
+add_action('after_setup_theme', function(){
-$image_srcset->add(['name' => 'hero', 'width' => 1920, 'height' => 1080]);
+  $image_srcset = new Utilities\ImageSrcset;
-add_image_size('lazy', 50, 50);
+  $image_srcset->add(['name' => 'hero', 'width' => 1920, 'height' => 1080]);
-add_image_size('hero', 1920, 1080, true);
+  add_image_size('lazy', 50, 50);
+  add_image_size('hero', 1920, 1080, true);
+});
+

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) => {
+                  onSelect={ (media) => setAttributes({
-
+                    background_image: media.id,
-                    let bgAttributes = {
+                    background_url: media.sizes.hero.url,
-                      background_image: media.id,
+                    background_url_lazy: media.sizes.lazy.url,
-                      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 }
                   render={ ({ open }) => (

resources/json/block-attributes.json

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