Update border global styles panel

WordPress · Jul 29, 2021 · 18b29d0 · 18b29d0
1 parent 641e06f
commit 18b29d0
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 77 deletions.
diff --git a/packages/block-editor/src/hooks/border.scss b/packages/block-editor/src/hooks/border.scss
@@ -1,13 +1,11 @@
-.block-editor-block-inspector {
-	.block-editor-hooks__border-controls {
-		.components-unit-control-wrapper,
-		.components-border-style-control {
-			grid-column: span 1;
-		}
+.block-editor-block-inspector .block-editor-hooks__border-controls,
+.edit-site .components-progressive-disclosure-panel {
+	.components-unit-control-wrapper,
+	.components-border-style-control {
+		grid-column: span 1;
+	}
 
-		.components-base-control__field {
-			margin-bottom: 0;
-		}
+	.components-base-control__field {
+		margin-bottom: 0;
 	}
 }
-
diff --git a/packages/edit-site/src/components/sidebar/border-panel.js b/packages/edit-site/src/components/sidebar/border-panel.js
@@ -7,7 +7,8 @@ import {
 	__experimentalColorGradientControl as ColorGradientControl,
 } from '@wordpress/block-editor';
 import {
-	PanelBody,
+	__experimentalProgressiveDisclosurePanel as ProgressiveDisclosurePanel,
+	__experimentalProgressiveDisclosurePanelItem as ProgressiveDisclosurePanelItem,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
@@ -73,74 +74,119 @@ export default function BorderPanel( {
 	} );
 
 	// Border width.
-	const hasBorderWidth = useHasBorderWidthControl( { supports, name } );
-	const borderWidthValue = getStyle( name, 'borderWidth' );
+	const showBorderWidth = useHasBorderWidthControl( { supports, name } );
+	const borderWidth = getStyle( name, 'borderWidth' );
+	const resetBorderWidth = () => setStyle( name, 'borderWidth', undefined );
+	const hasBorderWidth = () => !! borderWidth;
 
 	// Border style.
-	const hasBorderStyle = useHasBorderStyleControl( { supports, name } );
+	const showBorderStyle = useHasBorderStyleControl( { supports, name } );
 	const borderStyle = getStyle( name, 'borderStyle' );
+	const resetBorderStyle = () => setStyle( name, 'borderStyle', undefined );
+	const hasBorderStyle = () => !! borderStyle;
 
 	// Border color.
 	const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
 	const disableCustomColors = ! useSetting( 'color.custom' );
 	const disableCustomGradients = ! useSetting( 'color.customGradient' );
-	const hasBorderColor = useHasBorderColorControl( { supports, name } );
+	const showBorderColor = useHasBorderColorControl( { supports, name } );
 	const borderColor = getStyle( name, 'borderColor' );
+	const resetBorderColor = () => setStyle( name, 'borderColor', undefined );
+	const hasBorderColor = () => !! borderColor;
 
 	// Border radius.
-	const hasBorderRadius = useHasBorderRadiusControl( { supports, name } );
-	const borderRadiusValues = getStyle( name, 'borderRadius' );
+	const showBorderRadius = useHasBorderRadiusControl( { supports, name } );
+	const borderRadius = getStyle( name, 'borderRadius' );
+	const resetBorderRadius = () => setStyle( name, 'borderRadius', undefined );
+	const hasBorderRadius = () => {
+		if ( typeof borderRadius === 'object' ) {
+			return Object.entries( borderRadius ).some( Boolean );
+		}
+
+		return !! borderRadius;
+	};
+
+	const resetAll = () => {
+		resetBorderColor();
+		resetBorderRadius();
+		resetBorderStyle();
+		resetBorderWidth();
+	};
 
 	return (
-		<PanelBody title={ __( 'Border' ) } initialOpen={ true }>
-			{ ( hasBorderWidth || hasBorderStyle ) && (
-				<div className="edit-site-global-styles-sidebar__border-controls-row">
-					{ hasBorderWidth && (
-						<UnitControl
-							value={ borderWidthValue }
-							label={ __( 'Width' ) }
-							min={ MIN_BORDER_WIDTH }
-							onChange={ ( value ) => {
-								setStyle(
-									name,
-									'borderWidth',
-									value || undefined
-								);
-							} }
-							units={ units }
-						/>
-					) }
-					{ hasBorderStyle && (
-						<BorderStyleControl
-							value={ borderStyle }
-							onChange={ ( value ) =>
-								setStyle( name, 'borderStyle', value )
-							}
-						/>
-					) }
-				</div>
+		<ProgressiveDisclosurePanel
+			label={ __( 'Border options' ) }
+			title={ __( 'Border' ) }
+			resetAll={ resetAll }
+		>
+			{ showBorderWidth && (
+				<ProgressiveDisclosurePanelItem
+					hasValue={ hasBorderWidth }
+					label={ __( 'Width' ) }
+					onDeselect={ resetBorderWidth }
+					isShownByDefault={ true }
+				>
+					<UnitControl
+						value={ borderWidth }
+						label={ __( 'Width' ) }
+						min={ MIN_BORDER_WIDTH }
+						onChange={ ( value ) => {
+							setStyle( name, 'borderWidth', value || undefined );
+						} }
+						units={ units }
+					/>
+				</ProgressiveDisclosurePanelItem>
+			) }
+			{ showBorderStyle && (
+				<ProgressiveDisclosurePanelItem
+					hasValue={ hasBorderStyle }
+					label={ __( 'Style' ) }
+					onDeselect={ resetBorderStyle }
+					isShownByDefault={ true }
+				>
+					<BorderStyleControl
+						value={ borderStyle }
+						onChange={ ( value ) =>
+							setStyle( name, 'borderStyle', value )
+						}
+					/>
+				</ProgressiveDisclosurePanelItem>
 			) }
-			{ hasBorderColor && (
-				<ColorGradientControl
+			{ showBorderColor && (
+				<ProgressiveDisclosurePanelItem
+					hasValue={ hasBorderColor }
 					label={ __( 'Color' ) }
-					value={ borderColor }
-					colors={ colors }
-					gradients={ undefined }
-					disableCustomColors={ disableCustomColors }
-					disableCustomGradients={ disableCustomGradients }
-					onColorChange={ ( value ) =>
-						setStyle( name, 'borderColor', value )
-					}
-				/>
+					onDeselect={ resetBorderColor }
+					isShownByDefault={ true }
+				>
+					<ColorGradientControl
+						label={ __( 'Color' ) }
+						value={ borderColor }
+						colors={ colors }
+						gradients={ undefined }
+						disableCustomColors={ disableCustomColors }
+						disableCustomGradients={ disableCustomGradients }
+						onColorChange={ ( value ) =>
+							setStyle( name, 'borderColor', value )
+						}
+					/>
+				</ProgressiveDisclosurePanelItem>
 			) }
-			{ hasBorderRadius && (
-				<BorderRadiusControl
-					values={ borderRadiusValues }
-					onChange={ ( value ) =>
-						setStyle( name, 'borderRadius', value )
-					}
-				/>
+			{ showBorderRadius && (
+				<ProgressiveDisclosurePanelItem
+					hasValue={ hasBorderRadius }
+					label={ __( 'Radius' ) }
+					onDeselect={ resetBorderRadius }
+					isShownByDefault={ true }
+				>
+					<BorderRadiusControl
+						values={ borderRadius }
+						onChange={ ( value ) =>
+							setStyle( name, 'borderRadius', value )
+						}
+					/>
+				</ProgressiveDisclosurePanelItem>
 			) }
-		</PanelBody>
+		</ProgressiveDisclosurePanel>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
@@ -24,17 +24,3 @@
 .edit-site-global-styles-sidebar__reset-button.components-button {
 	margin-left: auto;
 }
-
-.edit-site-global-styles-sidebar__border-controls-row {
-	display: flex;
-	justify-content: space-between;
-	margin-bottom: $grid-unit-15;
-
-	> * {
-		width: calc(50% - #{ $grid-unit-10 });
-	}
-
-	.components-border-style-control__buttons {
-		margin-bottom: 0;
-	}
-}