Revert "Global styles: remove block gap control" (#39845)

* Revert "Removing block gap control for global styles since: (#39601)"

This reverts commit dcad2b4.

* Do not show the gap control panel for block-level global styles as they do not work on the frontend.
We do this by checking for a block name and then returning false.

packages/edit-site/src/components/global-styles/dimensions-panel.js

@@ -6,6 +6,7 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalBoxControl as BoxControl,
+	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block-editor';
@@ -20,8 +21,9 @@ const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
 export function useHasDimensionsPanel( name ) {
 	const hasPadding = useHasPadding( name );
 	const hasMargin = useHasMargin( name );
+	const hasGap = useHasGap( name );
 
-	return hasPadding || hasMargin;
+	return hasPadding || hasMargin || hasGap;
 }
 
 function useHasPadding( name ) {
@@ -38,6 +40,18 @@ function useHasMargin( name ) {
 	return settings && supports.includes( 'margin' );
 }
 
+function useHasGap( name ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ settings ] = useSetting( 'spacing.blockGap', name );
+	// Do not show the gap control panel for block-level global styles
+	// as they do not work on the frontend.
+	// See: https://github.com/WordPress/gutenberg/pull/39845.
+	// We can revert this condition when they're working again.
+	return !! name
+		? false
+		: settings && supports.includes( '--wp--style--block-gap' );
+}
+
 function filterValuesBySides( values, sides ) {
 	if ( ! sides ) {
 		// If no custom side configuration all sides are opted into by default.
@@ -79,6 +93,7 @@ function splitStyleValue( value ) {
 export default function DimensionsPanel( { name } ) {
 	const showPaddingControl = useHasPadding( name );
 	const showMarginControl = useHasMargin( name );
+	const showGapControl = useHasGap( name );
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units', name )[ 0 ] || [
 			'%',
@@ -118,9 +133,15 @@ export default function DimensionsPanel( { name } ) {
 	const resetMarginValue = () => setMarginValues( {} );
 	const hasMarginValue = () =>
 		!! marginValues && Object.keys( marginValues ).length;
+
+	const [ gapValue, setGapValue ] = useStyle( 'spacing.blockGap', name );
+	const resetGapValue = () => setGapValue( undefined );
+	const hasGapValue = () => !! gapValue;
+
 	const resetAll = () => {
 		resetPaddingValue();
 		resetMarginValue();
+		resetGapValue();
 	};
 
 	return (
@@ -161,6 +182,23 @@ export default function DimensionsPanel( { name } ) {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ showGapControl && (
+				<ToolsPanelItem
+					hasValue={ hasGapValue }
+					label={ __( 'Block spacing' ) }
+					onDeselect={ resetGapValue }
+					isShownByDefault={ true }
+				>
+					<UnitControl
+						label={ __( 'Block spacing' ) }
+						__unstableInputWidth="80px"
+						min={ 0 }
+						onChange={ setGapValue }
+						units={ units }
+						value={ gapValue }
+					/>
+				</ToolsPanelItem>
+			) }
 		</ToolsPanel>
 	);
 }