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