Post Featured Image: Optimize store subscriptions (#60770)

* Post Featured Image: Optimize store subscriptions * Fix hook import Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
WordPress · Apr 16, 2024 · c5105e0 · c5105e0
1 parent 247e9b9
commit c5105e0
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 34 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
@@ -10,7 +10,11 @@ import {
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { InspectorControls, useSettings } from '@wordpress/block-editor';
+import {
+	useSettings,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 
 const SCALE_OPTIONS = (
 	<>
@@ -51,12 +55,25 @@ const DimensionControls = ( {
 	clientId,
 	attributes: { aspectRatio, width, height, scale, sizeSlug },
 	setAttributes,
-	imageSizeOptions = [],
+	media,
 } ) => {
 	const [ availableUnits ] = useSettings( 'spacing.units' );
 	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 );
 		/**
@@ -75,7 +92,7 @@ const DimensionControls = ( {
 		height || ( aspectRatio && aspectRatio !== 'auto' );
 
 	return (
-		<InspectorControls group="dimensions">
+		<>
 			<ToolsPanelItem
 				hasValue={ () => !! aspectRatio }
 				label={ __( 'Aspect ratio' ) }
@@ -230,7 +247,7 @@ const DimensionControls = ( {
 					/>
 				</ToolsPanelItem>
 			) }
-		</InspectorControls>
+		</>
 	);
 };
 

diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
@@ -24,7 +24,6 @@ import {
 	MediaPlaceholder,
 	MediaReplaceFlow,
 	useBlockProps,
-	store as blockEditorStore,
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	useBlockEditingMode,
@@ -132,19 +131,6 @@ export default function PostFeaturedImageEdit( {
 
 	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, aspectRatio },
 		className: classnames( {
@@ -200,17 +186,21 @@ export default function PostFeaturedImageEdit( {
 
 	const controls = blockEditingMode === 'default' && (
 		<>
-			<OverlayControls
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				clientId={ clientId }
-			/>
-			<DimensionControls
-				clientId={ clientId }
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				imageSizeOptions={ imageSizeOptions }
-			/>
+			<InspectorControls group="color">
+				<OverlayControls
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					clientId={ clientId }
+				/>
+			</InspectorControls>
+			<InspectorControls group="dimensions">
+				<DimensionControls
+					clientId={ clientId }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					media={ media }
+				/>
+			</InspectorControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl

diff --git a/packages/block-library/src/post-featured-image/overlay-controls.js b/packages/block-library/src/post-featured-image/overlay-controls.js
@@ -6,10 +6,9 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import {
-	InspectorControls,
 	withColors,
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
-	__experimentalUseGradient,
+	__experimentalUseGradient as useGradient,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
@@ -23,15 +22,15 @@ const Overlay = ( {
 	setOverlayColor,
 } ) => {
 	const { dimRatio } = attributes;
-	const { gradientValue, setGradient } = __experimentalUseGradient();
+	const { gradientValue, setGradient } = useGradient();
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
 
 	if ( ! colorGradientSettings.hasColorsOrGradients ) {
 		return null;
 	}
 
 	return (
-		<InspectorControls group="color">
+		<>
 			<ColorGradientSettingsDropdown
 				__experimentalIsRenderedInSidebar
 				settings={ [
@@ -79,7 +78,7 @@ const Overlay = ( {
 					__next40pxDefaultSize
 				/>
 			</ToolsPanelItem>
-		</InspectorControls>
+		</>
 	);
 };