From b7356af1916e9c10390b8df7876a5ab55e10fccc Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 26 Dec 2024 11:13:24 +0400
Subject: [PATCH] Post Featured Image: Use the 'ResolutionTool' component
 (#68294)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
---
 .../post-featured-image/dimension-controls.js | 39 +++++++++----------
 1 file changed, 18 insertions(+), 21 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 5a3e40a126bf8..9a71a96b2db84 100644
--- a/packages/block-library/src/post-featured-image/dimension-controls.js
+++ b/packages/block-library/src/post-featured-image/dimension-controls.js
@@ -12,10 +12,18 @@ import {
 } from '@wordpress/components';
 import {
 	useSettings,
+	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { ResolutionTool } = unlock( blockEditorPrivateApis );
+
 const SCALE_OPTIONS = (
 	<>
 		<ToggleGroupControlOption
@@ -223,30 +231,19 @@ const DimensionControls = ( {
 				</ToolsPanelItem>
 			) }
 			{ !! imageSizeOptions.length && (
-				<ToolsPanelItem
-					hasValue={ () => !! sizeSlug }
-					label={ __( 'Resolution' ) }
-					onDeselect={ () =>
-						setAttributes( { sizeSlug: undefined } )
+				<ResolutionTool
+					panelId={ clientId }
+					value={ sizeSlug }
+					defaultValue={ DEFAULT_SIZE }
+					options={ imageSizeOptions }
+					onChange={ ( nextSizeSlug ) =>
+						setAttributes( { sizeSlug: nextSizeSlug } )
 					}
+					isShownByDefault={ false }
 					resetAllFilter={ () => ( {
-						sizeSlug: undefined,
+						sizeSlug: DEFAULT_SIZE,
 					} ) }
-					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>
+				/>
 			) }
 		</>
 	);