From bb80106efe3ed6845873d6dbc499c85875805ac8 Mon Sep 17 00:00:00 2001
From: Matheus Gimenez <matheus.gimenez@hacklab.com.br>
Date: Mon, 18 Jul 2022 17:58:55 -0300
Subject: [PATCH] =?UTF-8?q?refaz=20o=20bloco=20de=20post=20com=20imagem=20?=
 =?UTF-8?q?ao=20fundo=20para=20adicionar=20op=C3=A7=C3=A3o=20de=20tamanho?=
 =?UTF-8?q?=20de=20imagem=20&=20adicionar=20lazy=20load=20padr=C3=A3o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blocks/post-with-image/block.json          |  7 ++-
 blocks/post-with-image/edit.js             | 50 ++++++++++++++++++----
 blocks/post-with-image/post-with-image.php | 13 ++++--
 blocks/post-with-image/style.scss          | 27 +++++++++++-
 4 files changed, 82 insertions(+), 15 deletions(-)

diff --git a/blocks/post-with-image/block.json b/blocks/post-with-image/block.json
index a81f255..fc94dcb 100644
--- a/blocks/post-with-image/block.json
+++ b/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" ]
diff --git a/blocks/post-with-image/edit.js b/blocks/post-with-image/edit.js
index d8d67bb..6655e82 100644
--- a/blocks/post-with-image/edit.js
+++ b/blocks/post-with-image/edit.js
@@ -1,3 +1,13 @@
+ /**
+  * 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
diff --git a/blocks/post-with-image/post-with-image.php b/blocks/post-with-image/post-with-image.php
index 9843a05..2209db5 100644
--- a/blocks/post-with-image/post-with-image.php
+++ b/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>
     ";
 
diff --git a/blocks/post-with-image/style.scss b/blocks/post-with-image/style.scss
index 6405967..4677d06 100644
--- a/blocks/post-with-image/style.scss
+++ b/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
+}
-- 
GitLab