Post Featured Image: Move width and height controls into the Dimensio…

…ns panel via SlotFill (#36540) * Move width and height controls into the Dimensions panel via SlotFill * Add min value & correctly reset scale * Show Scale as default when rendered * Only allow resetting scale when it is not the default value * Do not reset scale when height is reset
WordPress · Nov 24, 2021 · 3f11d58 · 3f11d58
1 parent 4746070
commit 3f11d58
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 62 deletions.
diff --git a/packages/block-editor/src/hooks/dimensions.scss b/packages/block-editor/src/hooks/dimensions.scss
@@ -0,0 +1,5 @@
+.dimensions-block-support-panel {
+	.single-column {
+		grid-column: span 1;
+	}
+}
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
@@ -56,6 +56,7 @@
 @import "./hooks/anchor.scss";
 @import "./hooks/layout.scss";
 @import "./hooks/border.scss";
+@import "./hooks/dimensions.scss";
 @import "./hooks/typography.scss";
 
 @import "./components/block-toolbar/style.scss";

diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js
@@ -1,22 +1,15 @@
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
 import {
-	PanelBody,
 	__experimentalUnitControl as UnitControl,
-	Flex,
-	FlexItem,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { useSetting } from '@wordpress/block-editor';
+import { InspectorControls, useSetting } from '@wordpress/block-editor';
 
 const SCALE_OPTIONS = (
 	<>
@@ -38,6 +31,8 @@ const SCALE_OPTIONS = (
 	</>
 );
 
+const DEFAULT_SCALE = 'cover';
+
 const scaleHelp = {
 	cover: __(
 		'Image is scaled and cropped to fill the entire space without being distorted.'
@@ -51,6 +46,7 @@ const scaleHelp = {
 };
 
 const DimensionControls = ( {
+	clientId,
 	attributes: { width, height, scale },
 	setAttributes,
 } ) => {
@@ -72,53 +68,82 @@ const DimensionControls = ( {
 	};
 	const scaleLabel = _x( 'Scale', 'Image scaling options' );
 	return (
-		<PanelBody title={ __( 'Dimensions' ) }>
-			<Flex
-				justify="space-between"
-				className={ classNames(
-					'block-library-post-featured-image-dimension-controls',
-					{ 'scale-control-is-visible': !! height }
-				) }
+		<InspectorControls __experimentalGroup="dimensions">
+			<ToolsPanelItem
+				className="single-column"
+				hasValue={ () => !! height }
+				label={ __( 'Height' ) }
+				onDeselect={ () => setAttributes( { height: undefined } ) }
+				resetAllFilter={ () => ( {
+					height: undefined,
+				} ) }
+				isShownByDefault={ true }
+				panelId={ clientId }
+			>
+				<UnitControl
+					label={ __( 'Height' ) }
+					labelPosition="top"
+					value={ height || '' }
+					min={ 0 }
+					onChange={ ( nextHeight ) =>
+						onDimensionChange( 'height', nextHeight )
+					}
+					units={ units }
+				/>
+			</ToolsPanelItem>
+			<ToolsPanelItem
+				className="single-column"
+				hasValue={ () => !! width }
+				label={ __( 'Width' ) }
+				onDeselect={ () => setAttributes( { width: undefined } ) }
+				resetAllFilter={ () => ( {
+					width: undefined,
+				} ) }
+				isShownByDefault={ true }
+				panelId={ clientId }
 			>
-				<FlexItem>
-					<UnitControl
-						label={ __( 'Height' ) }
-						labelPosition="top"
-						value={ height || '' }
-						onChange={ ( nextHeight ) => {
-							onDimensionChange( 'height', nextHeight );
-						} }
-						units={ units }
-					/>
-				</FlexItem>
-				<FlexItem>
-					<UnitControl
-						label={ __( 'Width' ) }
-						labelPosition="top"
-						value={ width || '' }
-						onChange={ ( nextWidth ) => {
-							onDimensionChange( 'width', nextWidth );
-						} }
-						units={ units }
-					/>
-				</FlexItem>
-			</Flex>
+				<UnitControl
+					label={ __( 'Width' ) }
+					labelPosition="top"
+					value={ width || '' }
+					min={ 0 }
+					onChange={ ( nextWidth ) =>
+						onDimensionChange( 'width', nextWidth )
+					}
+					units={ units }
+				/>
+			</ToolsPanelItem>
 			{ !! height && (
-				<ToggleGroupControl
+				<ToolsPanelItem
+					hasValue={ () => !! scale && scale !== DEFAULT_SCALE }
 					label={ scaleLabel }
-					value={ scale }
-					help={ scaleHelp[ scale ] }
-					onChange={ ( value ) => {
+					onDeselect={ () =>
 						setAttributes( {
-							scale: value,
-						} );
-					} }
-					isBlock
+							scale: DEFAULT_SCALE,
+						} )
+					}
+					resetAllFilter={ () => ( {
+						scale: DEFAULT_SCALE,
+					} ) }
+					isShownByDefault={ true }
+					panelId={ clientId }
 				>
-					{ SCALE_OPTIONS }
-				</ToggleGroupControl>
+					<ToggleGroupControl
+						label={ scaleLabel }
+						value={ scale }
+						help={ scaleHelp[ scale ] }
+						onChange={ ( value ) =>
+							setAttributes( {
+								scale: value,
+							} )
+						}
+						isBlock
+					>
+						{ SCALE_OPTIONS }
+					</ToggleGroupControl>
+				</ToolsPanelItem>
 			) }
-		</PanelBody>
+		</InspectorControls>
 	);
 };
 

diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
@@ -47,6 +47,7 @@ const placeholderChip = (
 );
 
 function PostFeaturedImageDisplay( {
+	clientId,
 	attributes,
 	setAttributes,
 	context: { postId, postType, queryId },
@@ -137,11 +138,12 @@ function PostFeaturedImageDisplay( {
 
 	return (
 		<>
+			<DimensionControls
+				clientId={ clientId }
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+			/>
 			<InspectorControls>
-				<DimensionControls
-					attributes={ attributes }
-					setAttributes={ setAttributes }
-				/>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
 						label={ sprintf(

diff --git a/packages/block-library/src/post-featured-image/editor.scss b/packages/block-library/src/post-featured-image/editor.scss
@@ -128,11 +128,3 @@ div[data-type="core/post-featured-image"] {
 		display: block;
 	}
 }
-
-.block-library-post-featured-image-dimension-controls {
-	margin-bottom: $grid-unit-10;
-
-	&.scale-control-is-visible {
-		margin-bottom: $grid-unit-20;
-	}
-}