From 721cb342060a5f6ddf34f25e5379e6d8a4c806ae Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 5 Apr 2023 09:34:20 +1200 Subject: [PATCH] Add spacing presets to the spacer block (#44002) --- packages/block-editor/README.md | 24 ++++++++ packages/block-editor/src/components/index.js | 5 +- .../spacing-input-control.js | 10 ++++ .../spacing-sizes-control/style.scss | 14 ++--- packages/block-library/src/spacer/controls.js | 59 +++++++++++++------ packages/block-library/src/spacer/edit.js | 27 +++++++-- packages/block-library/src/spacer/editor.scss | 3 +- packages/block-library/src/spacer/save.js | 6 +- 8 files changed, 115 insertions(+), 33 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 980d70b4108736..e02f530754b2d4 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -517,6 +517,18 @@ _Returns_ - `string`: returns the cssUnit value in a simple px format. +### getSpacingPresetCssVar + +Converts a spacing preset into a custom value. + +_Parameters_ + +- _value_ `string`: Value to convert. + +_Returns_ + +- `string | undefined`: CSS var string for given spacing preset value. + ### getTypographyClassesAndStyles Provides the CSS class names and inline styles for a block's typography support @@ -570,6 +582,18 @@ _Related_ - +### isValueSpacingPreset + +Checks is given value is a spacing preset. + +_Parameters_ + +- _value_ `string`: Value to check + +_Returns_ + +- `boolean`: Return true if value is string in format var:preset|spacing|. + ### JustifyContentControl _Related_ diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index f5b2c17e87740d..66830c4e57aaff 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -92,7 +92,10 @@ export { default as URLPopover } from './url-popover'; export { __experimentalImageURLInputUI } from './url-popover/image-url-input-ui'; export { default as withColorContext } from './color-palette/with-color-context'; export { default as __experimentalSpacingSizesControl } from './spacing-sizes-control'; - +export { + getSpacingPresetCssVar, + isValueSpacingPreset, +} from './spacing-sizes-control/utils'; /* * Content Related Components */ diff --git a/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js index d110f8e820b197..66fca151e7189e 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js +++ b/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js @@ -20,6 +20,7 @@ import { } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { settings } from '@wordpress/icons'; +import { usePrevious } from '@wordpress/compose'; /** * Internal dependencies @@ -71,6 +72,15 @@ export default function SpacingInputControl( { ! isValueSpacingPreset( value ) ); + const previousValue = usePrevious( value ); + if ( + previousValue !== value && + ! isValueSpacingPreset( value ) && + showCustomValueControl !== true + ) { + setShowCustomValueControl( true ); + } + const units = useCustomUnits( { availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ], } ); diff --git a/packages/block-editor/src/components/spacing-sizes-control/style.scss b/packages/block-editor/src/components/spacing-sizes-control/style.scss index 2019b6d34d2754..54fc10426f0176 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/style.scss +++ b/packages/block-editor/src/components/spacing-sizes-control/style.scss @@ -2,7 +2,7 @@ display: grid; grid-template-columns: auto 1fr auto; align-items: center; - grid-template-rows: 16px auto; + grid-template-rows: $grid-unit-30 auto; } .component-spacing-sizes-control { @@ -19,7 +19,7 @@ } .components-base-control__label { - margin-bottom: 0; + margin-bottom: $grid-unit-10; height: $grid-unit-20; } @@ -55,6 +55,7 @@ grid-row: 1 / 1; align-self: center; margin-left: $grid-unit-05; + margin-bottom: $grid-unit-10; } .components-spacing-sizes-control__custom-toggle-all { @@ -85,20 +86,20 @@ .components-spacing-sizes-control__custom-value-range { grid-column: span 2; margin-left: $grid-unit-20; - margin-top: 8px; } - .components-spacing-sizes-control__custom-value-input { + .components-base-control.components-spacing-sizes-control__custom-value-input { width: 124px; - margin-top: 8px; grid-column: 1; + margin-bottom: 0; } - .components-range-control { + .components-base-control.components-range-control { height: 40px; /* Vertically center the RangeControl until it has true 40px height. */ display: flex; align-items: center; + margin-bottom: 0; > .components-base-control__field { /* Fixes RangeControl contents when the outer wrapper is flex */ @@ -108,7 +109,6 @@ .components-spacing-sizes-control__range-control { grid-column: span 3; - margin-top: 8px; } .components-range-control__mark { diff --git a/packages/block-library/src/spacer/controls.js b/packages/block-library/src/spacer/controls.js index 9571d07fab87f6..ee702c42667819 100644 --- a/packages/block-library/src/spacer/controls.js +++ b/packages/block-library/src/spacer/controls.js @@ -2,14 +2,21 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { InspectorControls, useSetting } from '@wordpress/block-editor'; import { + InspectorControls, + useSetting, + __experimentalSpacingSizesControl as SpacingSizesControl, + isValueSpacingPreset, +} from '@wordpress/block-editor'; +import { + BaseControl, PanelBody, __experimentalUseCustomUnits as useCustomUnits, __experimentalUnitControl as UnitControl, __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; +import { View } from '@wordpress/primitives'; /** * Internal dependencies @@ -18,7 +25,7 @@ import { MIN_SPACER_SIZE } from './constants'; function DimensionInput( { label, onChange, isResizing, value = '' } ) { const inputId = useInstanceId( UnitControl, 'block-spacer-height-input' ); - + const spacingSizes = useSetting( 'spacing.spacingSizes' ); // In most contexts the spacer size cannot meaningfully be set to a // percentage, since this is relative to the parent container. This // unit is disabled from the UI. @@ -38,28 +45,46 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) { } ); const handleOnChange = ( unprocessedValue ) => { - onChange( unprocessedValue ); + onChange( unprocessedValue.all ); }; // Force the unit to update to `px` when the Spacer is being resized. const [ parsedQuantity, parsedUnit ] = parseQuantityAndUnitFromRawValue( value ); - const computedValue = [ - parsedQuantity, - isResizing ? 'px' : parsedUnit, - ].join( '' ); + const computedValue = isValueSpacingPreset( value ) + ? value + : [ parsedQuantity, isResizing ? 'px' : parsedUnit ].join( '' ); return ( - + <> + { ( ! spacingSizes || spacingSizes?.length === 0 ) && ( + + + + ) } + + { spacingSizes?.length > 0 && ( + + + + ) } + ); } diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index 2e9876aa0f6d06..dd788ce8c2a4fe 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -6,10 +6,15 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useBlockProps } from '@wordpress/block-editor'; +import { + useBlockProps, + getSpacingPresetCssVar, + store as blockEditorStore, +} from '@wordpress/block-editor'; import { ResizableBox } from '@wordpress/components'; import { useState, useEffect } from '@wordpress/element'; import { View } from '@wordpress/primitives'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -79,7 +84,12 @@ const SpacerEdit = ( { toggleSelection, context, __unstableParentLayout: parentLayout, + className, } ) => { + const disableCustomSpacingSizes = useSelect( ( select ) => { + const editorSettings = select( blockEditorStore ).getSettings(); + return editorSettings?.disableCustomSpacingSizes; + } ); const { orientation } = context; const { orientation: parentOrientation, type } = parentLayout || {}; // If the spacer is inside a flex container, it should either inherit the orientation @@ -114,10 +124,12 @@ const SpacerEdit = ( { height: inheritedOrientation === 'horizontal' ? 24 - : temporaryHeight || height || undefined, + : temporaryHeight || + getSpacingPresetCssVar( height ) || + undefined, width: inheritedOrientation === 'horizontal' - ? temporaryWidth || width || undefined + ? temporaryWidth || getSpacingPresetCssVar( width ) || undefined : undefined, // In vertical flex containers, the spacer shrinks to nothing without a minimum width. minWidth: @@ -189,7 +201,14 @@ const SpacerEdit = ( { return ( <> - + { resizableBoxWithOrientation( inheritedOrientation ) }