Skip to content

Commit

Permalink
Try setting a blockGap label using a context string, update fallback …
Browse files Browse the repository at this point in the history
…label to Block spacing
  • Loading branch information
andrewserong committed Sep 15, 2021
1 parent fed0fc1 commit 5c0fb4c
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 7 deletions.
7 changes: 5 additions & 2 deletions packages/block-editor/src/hooks/dimensions.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { getBlockSupport } from '@wordpress/blocks';
import InspectorControls from '../components/inspector-controls';
import {
GapEdit,
getGapLabel,
hasGapSupport,
hasGapValue,
resetGap,
Expand Down Expand Up @@ -59,6 +60,8 @@ export function DimensionsPanel( props ) {
'__experimentalDefaultControls',
] );

const blockGapLabel = getGapLabel( props );

const createResetAllFilter = ( attribute ) => ( newAttributes ) => ( {
...newAttributes,
style: {
Expand Down Expand Up @@ -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>
Expand Down
25 changes: 22 additions & 3 deletions packages/block-editor/src/hooks/gap.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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.
*
Expand All @@ -80,8 +98,9 @@ export function useIsGapDisabled( { name: blockName } = {} ) {
*/
export function GapEdit( props ) {
const {
clientId,
attributes: { style },
clientId,
label,
setAttributes,
} = props;

Expand Down Expand Up @@ -132,7 +151,7 @@ export function GapEdit( props ) {
web: (
<>
<UnitControl
label={ __( 'Block gap' ) }
label={ label || __( 'Block spacing' ) }
min={ 0 }
onChange={ onChange }
units={ units }
Expand Down
5 changes: 5 additions & 0 deletions packages/block-library/src/columns/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,11 @@ export const settings = {
},
],
},
__experimentalLabel( _, { context } ) {
if ( context === 'blockGap' ) {
return __( 'Column spacing' );
}
},
deprecated,
edit,
save,
Expand Down
22 changes: 20 additions & 2 deletions packages/edit-site/src/components/sidebar/dimensions-panel.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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 );
Expand Down Expand Up @@ -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 }
Expand Down

0 comments on commit 5c0fb4c

Please sign in to comment.