From e2187038dcc42e45b85b8f37c61cab7ccaed882c Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 20 Jan 2022 11:26:03 +0000 Subject: [PATCH] Post Featured Image: Add size selector (#38044) * Post Featured Image: Add size selector * PHPCS * Make size panel non-default control and move it below scales * Add help text * Update help text * Update label and hasValue check --- docs/reference-guides/core-blocks.md | 2 +- .../src/post-featured-image/block.json | 3 ++ .../post-featured-image/dimension-controls.js | 29 ++++++++++++++++++- .../src/post-featured-image/edit.js | 28 ++++++++++++++++-- .../src/post-featured-image/index.php | 3 +- 5 files changed, 59 insertions(+), 6 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 1fb83ef0652ed..aaa6a35e46970 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..9d0b11a6318d2 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( { @@ -143,6 +146,30 @@ const DimensionControls = ( { ) } + { !! imageSizeOptions.length && ( + !! sizeSlug } + label={ __( 'Image size' ) } + onDeselect={ () => + setAttributes( { sizeSlug: undefined } ) + } + resetAllFilter={ () => ( { + sizeSlug: undefined, + } ) } + isShownByDefault={ false } + panelId={ clientId } + > + + setAttributes( { sizeSlug: nextSizeSlug } ) + } + help={ __( 'Select the size of the source image.' ) } + /> + + ) } ); }; 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 ); + $size_slug = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail'; + $featured_image = get_the_post_thumbnail( $post_ID, $size_slug ); if ( ! $featured_image ) { return ''; }