refaz o bloco de post com imagem ao fundo para adicionar opção de tamanho de...

refaz o bloco de post com imagem ao fundo para adicionar opção de tamanho de imagem & adicionar lazy load padrão

blocks/post-with-image/block.json

@@ -5,7 +5,7 @@
 	"version"     : "1.0.0",
 	"title"       : "Post com imagem",
 	"category"    : "media",
-	"icon"        : "admin-customizer",
+	"icon"        : "format-image",
 	"description" : "",
 	"keywords"    : ["post","destaque","imagem"],
 	"textdomain"  : "hacklab-blocks",
@@ -13,13 +13,16 @@
 	"script"      : "file:../../build/js/post-with-image-script/post-with-image-script.js",
 	"editorStyle" : "file:../../build/css/post-with-image-index.css",
 	"style"       : "file:../../build/css/style-post-with-image-index.css",
-	"editorStyle" : "file:../../build/css/style-post-with-image-index.css",
 	"supports": {
 		"align": false
 	},
 	"attributes": {
 		"postId": {
 			"type": "string"
+		},
+		"imageSize": {
+			"type": "string",
+			"default": "thumbnail"
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ]

blocks/post-with-image/edit.js

+ /**
+  * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+  * All files containing `style` keyword are bundled together. The code used
+  * gets applied both to the front of your site and to the editor. All other files
+  * get applied to the editor only.
+  *
+  * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+  */
+  import './editor.scss';
+
 /**
  * WordPress components that create the necessary UI elements for the block
  *
@@ -16,7 +26,7 @@ import React, {useCallback , useSelect, useState, useEffect } from 'react';
  *
  * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
  */
-import { useBlockProps } from '@wordpress/block-editor';
+import { InspectorControls } from '@wordpress/block-editor';
 
 /**
  * The edit function describes the structure of your block in the context of the
@@ -31,20 +41,42 @@ import { useBlockProps } from '@wordpress/block-editor';
  * @return {WPElement} Element to render.
  */
 
+
 export default function Edit( props ) {
+
     const {
-        attributes: { postId },
+        attributes,
         setAttributes,
     } = props;
+    //console.log( wp.data.select( 'core/block-editor' ).getSettings() );
+    //console.log( data.select( 'core/block-editor' ).getSettings() );
+    
+
     return (
         <>
-            {console.log(props.context)}
-            <ServerSideRender
-                block="hacklab-blocks/post-with-image"
-                attributes={ {
-                    postId: props.context.postId
-                } }        
-            />
+                <InspectorControls key="thumbnailConfig">
+                
+                    <SelectControl
+			            label={__( 'Image Size', 'hacklab-blocks') }
+			            value={ attributes.imageSize }
+			            options={ wp.data.select( 'core/block-editor' ).getSettings().imageSizes.map( (EachImageSize) => {
+                            return {
+                                label: EachImageSize.name,
+                                value: EachImageSize.slug
+                            }
+                        } )}
+			            onChange={ ( newSize ) => setAttributes( { imageSize: newSize }) }
+                    />
+                            
+                </InspectorControls>
+
+                <ServerSideRender
+                    block="hacklab-blocks/post-with-image"
+                    attributes={ {
+                        postId: props.context.postId,
+                        imageSize: attributes.imageSize
+                    } }        
+                />
         </>
     );
 }
\ No newline at end of file

blocks/post-with-image/post-with-image.php

@@ -12,16 +12,23 @@ function post_with_image_callback( $attributes, $content, $block ) {
     if ( isset( $block->attributes['postId'] ) ) {
         $post_id = $block->attributes['postId'];
     }
-
-    $thumbnail = get_the_post_thumbnail_url( $post_id, 'large' );
+    $image_size = 'thumbnail';
+    if( isset( $block->attributes[ 'imageSize'] ) ) {
+        $image_size = $block->attributes[ 'imageSize'];
+    }
+    $thumbnail = get_the_post_thumbnail_url( $post_id, $image_size );
     $title = get_the_title( $post_id );
     $href = get_permalink( $post_id );
+    if( isset( $_REQUEST[ 'context'] ) && 'edit' === $_REQUEST[ 'context' ] ) {
+        $href = '#';
+    }
 
     $html = "
-        <a class='wp-block-hacklab-post-image' style='background-image:url({$thumbnail});' href='{$href}'>
+        <a class='wp-block-hacklab-post-image' href='{$href}'>
             <span>
                 <h2>{$title}</h2>
             </span>
+            <img loading='lazy' src='{$thumbnail}' />
         </a>
     ";
 

blocks/post-with-image/style.scss

@@ -3,12 +3,37 @@
     width:100%;
     background-size:cover;
     background-position: center bottom;
+    overflow: hidden;
+    position: relative;
+    &:before {
+        content: "";
+        padding-top: 56.25%;
+        float: left;
+    }
+    &:after {
+        clear: left;
+        content: " ";
+        display: table;
+    }
 
+    img {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+        -o-object-fit: cover;
+        object-fit: cover;
+    }
     span {
         width:100%;
         display: block;
         padding-top:180px;
         background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #111111 100%);
+        position: absolute;
+        z-index: 9;
+        bottom:0;
         h2 {
             color:white;
             padding-left:15px;
@@ -16,4 +41,4 @@
             padding-bottom:20px;
         }
     }
-}
\ No newline at end of file
+}