From c948dd8ea5ceb145ac8946069dec5cec88021fdc Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 18 Jan 2022 17:05:31 +0400 Subject: [PATCH 1/6] Post Featured Image: Add size selector --- docs/reference-guides/core-blocks.md | 2 +- .../src/post-featured-image/block.json | 3 ++ .../post-featured-image/dimension-controls.js | 28 ++++++++++++++++++- .../src/post-featured-image/edit.js | 28 +++++++++++++++++-- .../src/post-featured-image/index.php | 3 +- 5 files changed, 58 insertions(+), 6 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 7909e92891194..0c230ab7b2a86 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -528,7 +528,7 @@ Display a post's featured image. ([Source](https://github.com/WordPress/gutenber - **Name:** core/post-featured-image - **Category:** theme - **Supports:** align (center, full, left, right, wide), color (~~background~~, ~~text~~), spacing (margin, padding), ~~html~~ -- **Attributes:** height, isLink, scale, width +- **Attributes:** height, isLink, scale, sizeSlug, width ## Post Navigation Link diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json index 251185bd9851b..982ba9ac68e8b 100644 --- a/packages/block-library/src/post-featured-image/block.json +++ b/packages/block-library/src/post-featured-image/block.json @@ -20,6 +20,9 @@ "scale": { "type": "string", "default": "cover" + }, + "sizeSlug": { + "type": "string" } }, "usesContext": [ "postId", "postType", "queryId" ], diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js index 424001efb50db..5012bc9825dd8 100644 --- a/packages/block-library/src/post-featured-image/dimension-controls.js +++ b/packages/block-library/src/post-featured-image/dimension-controls.js @@ -3,6 +3,7 @@ */ import { __, _x } from '@wordpress/i18n'; import { + SelectControl, __experimentalUnitControl as UnitControl, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, @@ -32,6 +33,7 @@ const SCALE_OPTIONS = ( ); const DEFAULT_SCALE = 'cover'; +const DEFAULT_SIZE = 'full'; const scaleHelp = { cover: __( @@ -47,8 +49,9 @@ const scaleHelp = { const DimensionControls = ( { clientId, - attributes: { width, height, scale }, + attributes: { width, height, scale, sizeSlug }, setAttributes, + imageSizeOptions = [], } ) => { const defaultUnits = [ 'px', '%', 'vw', 'em', 'rem' ]; const units = useCustomUnits( { @@ -113,6 +116,29 @@ const DimensionControls = ( { units={ units } /> + { !! imageSizeOptions.length && ( + !! sizeSlug && sizeSlug !== DEFAULT_SIZE } + label={ __( 'Size' ) } + onDeselect={ () => + setAttributes( { sizeSlug: undefined } ) + } + resetAllFilter={ () => ( { + sizeSlug: undefined, + } ) } + isShownByDefault={ true } + panelId={ clientId } + > + + setAttributes( { sizeSlug: nextSizeSlug } ) + } + /> + + ) } { !! height && ( !! scale && scale !== DEFAULT_SCALE } diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js index ed84d7b95a180..bd8fc61d2a7c4 100644 --- a/packages/block-library/src/post-featured-image/edit.js +++ b/packages/block-library/src/post-featured-image/edit.js @@ -16,6 +16,7 @@ import { MediaPlaceholder, MediaReplaceFlow, useBlockProps, + store as blockEditorStore, } from '@wordpress/block-editor'; import { __, sprintf } from '@wordpress/i18n'; import { upload } from '@wordpress/icons'; @@ -46,6 +47,12 @@ const placeholderChip = ( ); +function getMediaSourceUrlBySizeSlug( media, slug ) { + return ( + media?.media_details?.sizes?.[ slug ]?.source_url || media?.source_url + ); +} + function PostFeaturedImageDisplay( { clientId, attributes, @@ -53,7 +60,7 @@ function PostFeaturedImageDisplay( { context: { postId, postType, queryId }, } ) { const isDescendentOfQueryLoop = Number.isFinite( queryId ); - const { isLink, height, width, scale } = attributes; + const { isLink, height, width, scale, sizeSlug } = attributes; const [ featuredImage, setFeaturedImage ] = useEntityProp( 'postType', postType, @@ -67,6 +74,20 @@ function PostFeaturedImageDisplay( { select( coreStore ).getMedia( featuredImage, { context: 'view' } ), [ featuredImage ] ); + const mediaUrl = getMediaSourceUrlBySizeSlug( media, sizeSlug ); + + const imageSizes = useSelect( + ( select ) => select( blockEditorStore ).getSettings().imageSizes, + [] + ); + const imageSizeOptions = imageSizes + .filter( ( { slug } ) => { + return media?.media_details?.sizes?.[ slug ]?.source_url; + } ) + .map( ( { name, slug } ) => ( { + value: slug, + label: name, + } ) ); const blockProps = useBlockProps( { style: { width, height }, @@ -98,6 +119,7 @@ function PostFeaturedImageDisplay( { clientId={ clientId } attributes={ attributes } setAttributes={ setAttributes } + imageSizeOptions={ imageSizeOptions } /> @@ -156,7 +178,7 @@ function PostFeaturedImageDisplay( { placeholderChip ) : ( { @@ -170,7 +192,7 @@ function PostFeaturedImageDisplay( { context['postId']; - $featured_image = get_the_post_thumbnail( $post_ID ); + $sizeSlug = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail'; + $featured_image = get_the_post_thumbnail( $post_ID, $sizeSlug ); if ( ! $featured_image ) { return ''; } From a60d8193fea5ce3c0a45e0f025d2e91ab09b67ba Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 18 Jan 2022 17:27:25 +0400 Subject: [PATCH 2/6] PHPCS --- packages/block-library/src/post-featured-image/index.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php index fc5ffb16b384e..13d538a363f64 100644 --- a/packages/block-library/src/post-featured-image/index.php +++ b/packages/block-library/src/post-featured-image/index.php @@ -19,8 +19,8 @@ function render_block_core_post_featured_image( $attributes, $content, $block ) } $post_ID = $block->context['postId']; - $sizeSlug = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail'; - $featured_image = get_the_post_thumbnail( $post_ID, $sizeSlug ); + $size_slug = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail'; + $featured_image = get_the_post_thumbnail( $post_ID, $size_slug ); if ( ! $featured_image ) { return ''; } From 9d81809eaafc90dade015da74884b20ed2f67b8c Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Wed, 19 Jan 2022 07:55:30 +0400 Subject: [PATCH 3/6] Make size panel non-default control and move it below scales --- .../post-featured-image/dimension-controls.js | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js index 5012bc9825dd8..a88cf114620bf 100644 --- a/packages/block-library/src/post-featured-image/dimension-controls.js +++ b/packages/block-library/src/post-featured-image/dimension-controls.js @@ -116,29 +116,6 @@ const DimensionControls = ( { units={ units } /> - { !! imageSizeOptions.length && ( - !! sizeSlug && sizeSlug !== DEFAULT_SIZE } - label={ __( 'Size' ) } - onDeselect={ () => - setAttributes( { sizeSlug: undefined } ) - } - resetAllFilter={ () => ( { - sizeSlug: undefined, - } ) } - isShownByDefault={ true } - panelId={ clientId } - > - - setAttributes( { sizeSlug: nextSizeSlug } ) - } - /> - - ) } { !! height && ( !! scale && scale !== DEFAULT_SCALE } @@ -169,6 +146,29 @@ const DimensionControls = ( { ) } + { !! imageSizeOptions.length && ( + !! sizeSlug && sizeSlug !== DEFAULT_SIZE } + label={ __( 'Size' ) } + onDeselect={ () => + setAttributes( { sizeSlug: undefined } ) + } + resetAllFilter={ () => ( { + sizeSlug: undefined, + } ) } + isShownByDefault={ false } + panelId={ clientId } + > + + setAttributes( { sizeSlug: nextSizeSlug } ) + } + /> + + ) } ); }; From abe4200f3dd30a75ee99e7ea357a3cd2ba4dd90c Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Wed, 19 Jan 2022 15:06:16 +0400 Subject: [PATCH 4/6] Add help text --- .../block-library/src/post-featured-image/dimension-controls.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js index a88cf114620bf..b6891abba82c6 100644 --- a/packages/block-library/src/post-featured-image/dimension-controls.js +++ b/packages/block-library/src/post-featured-image/dimension-controls.js @@ -166,6 +166,7 @@ const DimensionControls = ( { onChange={ ( nextSizeSlug ) => setAttributes( { sizeSlug: nextSizeSlug } ) } + help={ __( 'Select the image source to use.' ) } /> ) } From 33fb11f8b16ac78ffb620b6c02a2ca39ee82bca3 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Wed, 19 Jan 2022 19:39:53 +0400 Subject: [PATCH 5/6] Update help text --- .../block-library/src/post-featured-image/dimension-controls.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js index b6891abba82c6..ba7d39ff177ff 100644 --- a/packages/block-library/src/post-featured-image/dimension-controls.js +++ b/packages/block-library/src/post-featured-image/dimension-controls.js @@ -166,7 +166,7 @@ const DimensionControls = ( { onChange={ ( nextSizeSlug ) => setAttributes( { sizeSlug: nextSizeSlug } ) } - help={ __( 'Select the image source to use.' ) } + help={ __( 'Select the size of the source image.' ) } /> ) } From 56c10c2865a5eb313233bc9cab374056f3dca40f Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 20 Jan 2022 14:41:22 +0400 Subject: [PATCH 6/6] Update label and hasValue check --- .../src/post-featured-image/dimension-controls.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js index ba7d39ff177ff..9d0b11a6318d2 100644 --- a/packages/block-library/src/post-featured-image/dimension-controls.js +++ b/packages/block-library/src/post-featured-image/dimension-controls.js @@ -148,8 +148,8 @@ const DimensionControls = ( { ) } { !! imageSizeOptions.length && ( !! sizeSlug && sizeSlug !== DEFAULT_SIZE } - label={ __( 'Size' ) } + hasValue={ () => !! sizeSlug } + label={ __( 'Image size' ) } onDeselect={ () => setAttributes( { sizeSlug: undefined } ) } @@ -160,7 +160,7 @@ const DimensionControls = ( { panelId={ clientId } >