Post Featured Image: Use the 'ResolutionTool' component (WordPress#68294

)


Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: im3dabasia <[email protected]>

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>
+				/>
 			) }
 		</>
 	);