From 796ee2ba786fd056844427a879fbd6f25f1b5216 Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 20 Dec 2024 19:14:04 +0530 Subject: [PATCH 1/3] Removed custom dropdown and implemented resolution tool component --- .../src/post-featured-image/constants.js | 1 + .../post-featured-image/dimension-controls.js | 48 +------------------ .../src/post-featured-image/edit.js | 39 ++++++++++++--- 3 files changed, 35 insertions(+), 53 deletions(-) create mode 100644 packages/block-library/src/post-featured-image/constants.js diff --git a/packages/block-library/src/post-featured-image/constants.js b/packages/block-library/src/post-featured-image/constants.js new file mode 100644 index 00000000000000..984193dbfb376a --- /dev/null +++ b/packages/block-library/src/post-featured-image/constants.js @@ -0,0 +1 @@ +export const DEFAULT_MEDIA_SIZE_SLUG = 'full'; 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 5a3e40a126bf8d..4bc343635f2f93 100644 --- a/packages/block-library/src/post-featured-image/dimension-controls.js +++ b/packages/block-library/src/post-featured-image/dimension-controls.js @@ -10,11 +10,7 @@ import { __experimentalUseCustomUnits as useCustomUnits, __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; -import { - useSettings, - store as blockEditorStore, -} from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; +import { useSettings } from '@wordpress/block-editor'; const SCALE_OPTIONS = ( <> @@ -37,7 +33,6 @@ const SCALE_OPTIONS = ( ); const DEFAULT_SCALE = 'cover'; -const DEFAULT_SIZE = 'full'; const scaleHelp = { cover: __( @@ -53,9 +48,8 @@ const scaleHelp = { const DimensionControls = ( { clientId, - attributes: { aspectRatio, width, height, scale, sizeSlug }, + attributes: { aspectRatio, width, height, scale }, setAttributes, - media, } ) => { const [ availableUnits, defaultRatios, themeRatios, showDefaultRatios ] = useSettings( @@ -67,18 +61,6 @@ const DimensionControls = ( { const units = useCustomUnits( { availableUnits: availableUnits || [ 'px', '%', 'vw', 'em', 'rem' ], } ); - 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 onDimensionChange = ( dimension, nextValue ) => { const parsedValue = parseFloat( nextValue ); @@ -222,32 +204,6 @@ const DimensionControls = ( { ) } - { !! imageSizeOptions.length && ( - !! sizeSlug } - label={ __( 'Resolution' ) } - 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 05888c41fecf23..a4cc86f226f80a 100644 --- a/packages/block-library/src/post-featured-image/edit.js +++ b/packages/block-library/src/post-featured-image/edit.js @@ -27,6 +27,8 @@ import { __experimentalUseBorderProps as useBorderProps, __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles, useBlockEditingMode, + privateApis as blockEditorPrivateApis, + store as blockEditorStore, } from '@wordpress/block-editor'; import { useMemo, useEffect, useState } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; @@ -40,14 +42,11 @@ import DimensionControls from './dimension-controls'; import OverlayControls from './overlay-controls'; import Overlay from './overlay'; import { useToolsPanelDropdownMenuProps } from '../utils/hooks'; +import { unlock } from '../lock-unlock'; +import { DEFAULT_MEDIA_SIZE_SLUG } from './constants'; const ALLOWED_MEDIA_TYPES = [ 'image' ]; - -function getMediaSourceUrlBySizeSlug( media, slug ) { - return ( - media?.media_details?.sizes?.[ slug ]?.source_url || media?.source_url - ); -} +const { ResolutionTool } = unlock( blockEditorPrivateApis ); const disabledClickProps = { onClick: ( event ) => event.preventDefault(), @@ -130,7 +129,23 @@ export default function PostFeaturedImageEdit( { [ featuredImage, postTypeSlug, postId ] ); - 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 mediaUrl = + media?.media_details?.sizes?.[ sizeSlug ]?.source_url || + media?.source_url; const blockProps = useBlockProps( { style: { width, height, aspectRatio }, @@ -296,6 +311,16 @@ export default function PostFeaturedImageEdit( { /> ) } + { !! imageSizeOptions?.length && ( + + setAttributes( { sizeSlug: nextSizeSlug } ) + } + defaultValue={ DEFAULT_MEDIA_SIZE_SLUG } + /> + ) } From 7f7acf01c97024ed219f1883c239cef59be065dd Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 4 Feb 2025 16:06:46 +0530 Subject: [PATCH 2/3] Remove constant file and use inline constant --- packages/block-library/src/post-featured-image/constants.js | 1 - packages/block-library/src/post-featured-image/edit.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) delete mode 100644 packages/block-library/src/post-featured-image/constants.js diff --git a/packages/block-library/src/post-featured-image/constants.js b/packages/block-library/src/post-featured-image/constants.js deleted file mode 100644 index 984193dbfb376a..00000000000000 --- a/packages/block-library/src/post-featured-image/constants.js +++ /dev/null @@ -1 +0,0 @@ -export const DEFAULT_MEDIA_SIZE_SLUG = 'full'; diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js index 1d5de0404a0e43..02c874cee6814e 100644 --- a/packages/block-library/src/post-featured-image/edit.js +++ b/packages/block-library/src/post-featured-image/edit.js @@ -43,10 +43,10 @@ import OverlayControls from './overlay-controls'; import Overlay from './overlay'; import { useToolsPanelDropdownMenuProps } from '../utils/hooks'; import { unlock } from '../lock-unlock'; -import { DEFAULT_MEDIA_SIZE_SLUG } from './constants'; const ALLOWED_MEDIA_TYPES = [ 'image' ]; const { ResolutionTool } = unlock( blockEditorPrivateApis ); +const DEFAULT_MEDIA_SIZE_SLUG = 'full'; export default function PostFeaturedImageEdit( { clientId, From 1e20c264721e92ea0f2b7c491c124f545f940733 Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 4 Feb 2025 16:27:44 +0530 Subject: [PATCH 3/3] Extract resolution tool logic to separate component --- .../src/post-featured-image/edit.js | 59 +++++++++++-------- 1 file changed, 35 insertions(+), 24 deletions(-) diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js index 02c874cee6814e..9fd64b29908e42 100644 --- a/packages/block-library/src/post-featured-image/edit.js +++ b/packages/block-library/src/post-featured-image/edit.js @@ -48,6 +48,34 @@ const ALLOWED_MEDIA_TYPES = [ 'image' ]; const { ResolutionTool } = unlock( blockEditorPrivateApis ); const DEFAULT_MEDIA_SIZE_SLUG = 'full'; +function FeaturedImageResolutionTool( { image, value, onChange } ) { + const { imageSizes } = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + return { + imageSizes: getSettings().imageSizes, + }; + }, [] ); + + if ( ! imageSizes?.length ) { + return null; + } + + const imageSizeOptions = imageSizes + .filter( + ( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url + ) + .map( ( { name, slug } ) => ( { value: slug, label: name } ) ); + + return ( + + ); +} + export default function PostFeaturedImageEdit( { clientId, attributes, @@ -124,20 +152,6 @@ export default function PostFeaturedImageEdit( { [ featuredImage, postTypeSlug, postId ] ); - 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 mediaUrl = media?.media_details?.sizes?.[ sizeSlug ]?.source_url || media?.source_url; @@ -306,16 +320,13 @@ export default function PostFeaturedImageEdit( { /> ) } - { !! imageSizeOptions?.length && ( - - setAttributes( { sizeSlug: nextSizeSlug } ) - } - defaultValue={ DEFAULT_MEDIA_SIZE_SLUG } - /> - ) } + + setAttributes( { sizeSlug: nextSizeSlug } ) + } + />