From 5c0fb4c88779057cbc7f08e6d7777233b16affb7 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 15 Sep 2021 16:55:38 +1000
Subject: [PATCH] Try setting a blockGap label using a context string, update
 fallback label to Block spacing

---
 packages/block-editor/src/hooks/dimensions.js |  7 ++++--
 packages/block-editor/src/hooks/gap.js        | 25 ++++++++++++++++---
 packages/block-library/src/columns/index.js   |  5 ++++
 .../components/sidebar/dimensions-panel.js    | 22 ++++++++++++++--
 4 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
index 9e38b6c6f0cab6..eb91311bf9faf4 100644
--- a/packages/block-editor/src/hooks/dimensions.js
+++ b/packages/block-editor/src/hooks/dimensions.js
@@ -12,6 +12,7 @@ import { getBlockSupport } from '@wordpress/blocks';
 import InspectorControls from '../components/inspector-controls';
 import {
 	GapEdit,
+	getGapLabel,
 	hasGapSupport,
 	hasGapValue,
 	resetGap,
@@ -59,6 +60,8 @@ export function DimensionsPanel( props ) {
 		'__experimentalDefaultControls',
 	] );
 
+	const blockGapLabel = getGapLabel( props );
+
 	const createResetAllFilter = ( attribute ) => ( newAttributes ) => ( {
 		...newAttributes,
 		style: {
@@ -100,13 +103,13 @@ export function DimensionsPanel( props ) {
 				<ToolsPanelItem
 					className="single-column"
 					hasValue={ () => hasGapValue( props ) }
-					label={ __( 'Block gap' ) }
+					label={ blockGapLabel }
 					onDeselect={ () => resetGap( props ) }
 					resetAllFilter={ createResetAllFilter( 'blockGap' ) }
 					isShownByDefault={ defaultSpacingControls?.blockGap }
 					panelId={ props.clientId }
 				>
-					<GapEdit { ...props } />
+					<GapEdit { ...props } label={ blockGapLabel } />
 				</ToolsPanelItem>
 			) }
 		</InspectorControls>
diff --git a/packages/block-editor/src/hooks/gap.js b/packages/block-editor/src/hooks/gap.js
index d29a63774fbb64..4ded3f0e2f4eb1 100644
--- a/packages/block-editor/src/hooks/gap.js
+++ b/packages/block-editor/src/hooks/gap.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Platform } from '@wordpress/element';
-import { getBlockSupport } from '@wordpress/blocks';
+import { getBlockSupport, getBlockType } from '@wordpress/blocks';
 import {
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
@@ -60,6 +60,24 @@ export function resetGap( { attributes = {}, setAttributes } ) {
 	} );
 }
 
+/**
+ * Get the label for the gap control, if handled by the block's
+ * `__experimentalLabel` function via the `blockGap` context string.
+ *
+ * Falls back to a default string.
+ *
+ * @param {Object} props            Block props.
+ * @param {Object} props.name       Block's name.
+ * @param {Object} props.attributes Block's attributes.
+ * @return {string} The label for the gap control.
+ */
+export function getGapLabel( { name, attributes } ) {
+	const { __experimentalLabel: getLabel } = getBlockType( name );
+	const label = getLabel && getLabel( attributes, { context: 'blockGap' } );
+
+	return label || __( 'Block spacing' );
+}
+
 /**
  * Custom hook that checks if gap settings have been disabled.
  *
@@ -80,8 +98,9 @@ export function useIsGapDisabled( { name: blockName } = {} ) {
  */
 export function GapEdit( props ) {
 	const {
-		clientId,
 		attributes: { style },
+		clientId,
+		label,
 		setAttributes,
 	} = props;
 
@@ -132,7 +151,7 @@ export function GapEdit( props ) {
 		web: (
 			<>
 				<UnitControl
-					label={ __( 'Block gap' ) }
+					label={ label || __( 'Block spacing' ) }
 					min={ 0 }
 					onChange={ onChange }
 					units={ units }
diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js
index 6ac7b2c82dbbb7..7a8d3f0d4c5d86 100644
--- a/packages/block-library/src/columns/index.js
+++ b/packages/block-library/src/columns/index.js
@@ -79,6 +79,11 @@ export const settings = {
 			},
 		],
 	},
+	__experimentalLabel( _, { context } ) {
+		if ( context === 'blockGap' ) {
+			return __( 'Column spacing' );
+		}
+	},
 	deprecated,
 	edit,
 	save,
diff --git a/packages/edit-site/src/components/sidebar/dimensions-panel.js b/packages/edit-site/src/components/sidebar/dimensions-panel.js
index 9f30114697e464..bd41c8c5c9cc05 100644
--- a/packages/edit-site/src/components/sidebar/dimensions-panel.js
+++ b/packages/edit-site/src/components/sidebar/dimensions-panel.js
@@ -10,6 +10,7 @@ import {
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block-editor';
+import { getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -44,6 +45,22 @@ function useHasGap( { name, supports } ) {
 	return settings && supports.includes( '--wp--style--block-gap' );
 }
 
+/**
+ * Get the label for the gap control, if handled by the block's
+ * `__experimentalLabel` function via the `blockGap` context string.
+ *
+ * Falls back to a default string.
+ *
+ * @param {string} name Block's name.
+ * @return {string} The label for the gap control.
+ */
+export function getGapLabel( name ) {
+	const { __experimentalLabel: getLabel } = getBlockType( name );
+	const label = getLabel && getLabel( {}, { context: 'blockGap' } );
+
+	return label || __( 'Block spacing' );
+}
+
 function filterValuesBySides( values, sides ) {
 	if ( ! sides ) {
 		// If no custom side configuration all sides are opted into by default.
@@ -126,6 +143,7 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {
 		!! marginValues && Object.keys( marginValues ).length;
 
 	const gapValue = getStyle( name, '--wp--style--block-gap' );
+	const gapLabel = getGapLabel( name );
 
 	const setGapValue = ( newGapValue ) => {
 		setStyle( name, '--wp--style--block-gap', newGapValue );
@@ -181,12 +199,12 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {
 				<ToolsPanelItem
 					className="single-column"
 					hasValue={ hasGapValue }
-					label={ __( 'Block gap' ) }
+					label={ gapLabel || __( 'Block spacing' ) }
 					onDeselect={ resetGapValue }
 					isShownByDefault={ true }
 				>
 					<UnitControl
-						label={ __( 'Block gap' ) }
+						label={ gapLabel || __( 'Block spacing' ) }
 						min={ 0 }
 						onChange={ setGapValue }
 						units={ units }