From 796ee2ba786fd056844427a879fbd6f25f1b5216 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Fri, 20 Dec 2024 19:14:04 +0530
Subject: [PATCH] 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 = ( {
 					</ToggleGroupControl>
 				</ToolsPanelItem>
 			) }
-			{ !! imageSizeOptions.length && (
-				<ToolsPanelItem
-					hasValue={ () => !! sizeSlug }
-					label={ __( 'Resolution' ) }
-					onDeselect={ () =>
-						setAttributes( { sizeSlug: undefined } )
-					}
-					resetAllFilter={ () => ( {
-						sizeSlug: undefined,
-					} ) }
-					isShownByDefault={ false }
-					panelId={ clientId }
-				>
-					<SelectControl
-						__next40pxDefaultSize
-						__nextHasNoMarginBottom
-						label={ __( 'Resolution' ) }
-						value={ sizeSlug || DEFAULT_SIZE }
-						options={ imageSizeOptions }
-						onChange={ ( nextSizeSlug ) =>
-							setAttributes( { sizeSlug: nextSizeSlug } )
-						}
-						help={ __( 'Select the size of the source image.' ) }
-					/>
-				</ToolsPanelItem>
-			) }
 		</>
 	);
 };
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( {
 							/>
 						</ToolsPanelItem>
 					) }
+					{ !! imageSizeOptions?.length && (
+						<ResolutionTool
+							value={ sizeSlug }
+							options={ imageSizeOptions }
+							onChange={ ( nextSizeSlug ) =>
+								setAttributes( { sizeSlug: nextSizeSlug } )
+							}
+							defaultValue={ DEFAULT_MEDIA_SIZE_SLUG }
+						/>
+					) }
 				</ToolsPanel>
 			</InspectorControls>
 		</>