From ed92c50a704fd24864656685ada84eec5e539c50 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 14 Oct 2022 12:57:20 +1300 Subject: [PATCH 01/12] Add a mousover option to trigger spacing visualiser --- .../all-input-control.js | 2 ++ .../axial-input-controls.js | 2 ++ .../components/spacing-sizes-control/index.js | 3 ++ .../spacing-sizes-control/input-controls.js | 2 ++ .../spacing-input-control.js | 15 +++++++++ packages/block-editor/src/hooks/dimensions.js | 33 ++++++++++++++++--- packages/block-editor/src/hooks/margin.js | 10 +++--- packages/block-editor/src/hooks/padding.js | 10 +++--- 8 files changed, 64 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/components/spacing-sizes-control/all-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/all-input-control.js index 8f9509349c2a5a..3ee47e44ac4fb5 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/all-input-control.js +++ b/packages/block-editor/src/components/spacing-sizes-control/all-input-control.js @@ -16,6 +16,7 @@ export default function AllInputControl( { spacingSizes, type, minimumCustomValue, + setMouseOver, } ) { const allValue = getAllRawValue( values ); const hasValues = isValuesDefined( values ); @@ -35,6 +36,7 @@ export default function AllInputControl( { isMixed={ isMixed } type={ type } minimumCustomValue={ minimumCustomValue } + setMouseOver={ setMouseOver } /> ); } diff --git a/packages/block-editor/src/components/spacing-sizes-control/axial-input-controls.js b/packages/block-editor/src/components/spacing-sizes-control/axial-input-controls.js index 563b5950186962..dd54badd09ac46 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/axial-input-controls.js +++ b/packages/block-editor/src/components/spacing-sizes-control/axial-input-controls.js @@ -13,6 +13,7 @@ export default function AxialInputControls( { spacingSizes, type, minimumCustomValue, + setMouseOver, } ) { const createHandleOnChange = ( side ) => ( next ) => { if ( ! onChange ) { @@ -54,6 +55,7 @@ export default function AxialInputControls( { spacingSizes={ spacingSizes } type={ type } minimumCustomValue={ minimumCustomValue } + setMouseOver={ setMouseOver } /> ); } ) } diff --git a/packages/block-editor/src/components/spacing-sizes-control/index.js b/packages/block-editor/src/components/spacing-sizes-control/index.js index 7b016e7a08ee72..5fba6b413b900f 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/index.js +++ b/packages/block-editor/src/components/spacing-sizes-control/index.js @@ -20,6 +20,7 @@ import LinkedButton from './linked-button'; import { DEFAULT_VALUES, isValuesMixed, isValuesDefined } from './utils'; import useSetting from '../use-setting'; +const noop = () => {}; export default function SpacingSizesControl( { inputProps, onChange, @@ -29,6 +30,7 @@ export default function SpacingSizesControl( { splitOnAxis = false, useSelect, minimumCustomValue = 0, + setMouseOver = noop, } ) { const spacingSizes = [ { name: 0, slug: '0', size: 0 }, @@ -70,6 +72,7 @@ export default function SpacingSizesControl( { useSelect, type: label, minimumCustomValue, + setMouseOver, }; return ( diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls.js index b8b71c22310b59..96ba11c873eee2 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/input-controls.js +++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls.js @@ -11,6 +11,7 @@ export default function BoxInputControls( { spacingSizes, type, minimumCustomValue, + setMouseOver, } ) { // Filter sides if custom configuration provided, maintaining default order. const filteredSides = sides?.length @@ -38,6 +39,7 @@ export default function BoxInputControls( { spacingSizes={ spacingSizes } type={ type } minimumCustomValue={ minimumCustomValue } + setMouseOver={ setMouseOver } /> ); } ) } 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 a6262873af553e..0ab22cd88b5a35 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 @@ -51,10 +51,17 @@ export default function SpacingInputControl( { isMixed = false, type, minimumCustomValue, + setMouseOver, } ) { // Treat value as a preset value if the passed in value matches the value of one of the spacingSizes. value = getPresetValueFromCustomValue( value, spacingSizes ); + const handleMouseOver = () => { + setMouseOver( true ); + }; + const handleMouseOut = () => { + setMouseOver( false ); + }; let selectListSizes = spacingSizes; const showRangeControl = spacingSizes.length <= 8; @@ -218,6 +225,8 @@ export default function SpacingInputControl( { { showCustomValueControl && ( <> onChange( getNewCustomValue( newSize ) ) } @@ -234,6 +243,8 @@ export default function SpacingInputControl( { /> @@ -293,6 +306,8 @@ export default function SpacingInputControl( { hideLabelFromVision={ true } __nextUnconstrainedWidth={ true } size={ '__unstable-large' } + onMouseOver={ handleMouseOver } + onMouseOut={ handleMouseOut } /> ) } diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index 3eded40fc4a0ae..3dc6963e75b276 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components'; -import { Platform } from '@wordpress/element'; +import { Platform, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { getBlockSupport } from '@wordpress/blocks'; @@ -44,6 +44,11 @@ export const SPACING_SUPPORT_KEY = 'spacing'; export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ]; export const AXIAL_SIDES = [ 'vertical', 'horizontal' ]; +function useVisualiserMouseOver() { + const [ isMouseOver, setIsMouseOver ] = useState( false ); + return { isMouseOver, setIsMouseOver }; +} + /** * Inspector controls for dimensions support. * @@ -58,6 +63,8 @@ export function DimensionsPanel( props ) { const isDisabled = useIsDimensionsDisabled( props ); const isSupported = hasDimensionsSupport( props.name ); const spacingSizes = useSetting( 'spacing.spacingSizes' ); + const paddingMouseOver = useVisualiserMouseOver(); + const marginMouseOver = useVisualiserMouseOver(); if ( isDisabled || ! isSupported ) { return null; @@ -96,7 +103,10 @@ export function DimensionsPanel( props ) { isShownByDefault={ defaultSpacingControls?.padding } panelId={ props.clientId } > - + ) } { ! isMarginDisabled && ( @@ -109,7 +119,10 @@ export function DimensionsPanel( props ) { isShownByDefault={ defaultSpacingControls?.margin } panelId={ props.clientId } > - + ) } { ! isGapDisabled && ( @@ -126,8 +139,18 @@ export function DimensionsPanel( props ) { ) } - { ! isPaddingDisabled && } - { ! isMarginDisabled && } + { ! isPaddingDisabled && ( + + ) } + { ! isMarginDisabled && ( + + ) } ); } diff --git a/packages/block-editor/src/hooks/margin.js b/packages/block-editor/src/hooks/margin.js index 0e60717486d2bc..c8a9a576b6fbb1 100644 --- a/packages/block-editor/src/hooks/margin.js +++ b/packages/block-editor/src/hooks/margin.js @@ -101,6 +101,7 @@ export function MarginEdit( props ) { name: blockName, attributes: { style }, setAttributes, + setMouseOver, } = props; const spacingSizes = useSetting( 'spacing.spacingSizes' ); @@ -159,6 +160,7 @@ export function MarginEdit( props ) { units={ units } allowReset={ false } splitOnAxis={ false } + setMouseOver={ setMouseOver } /> ) } @@ -167,7 +169,7 @@ export function MarginEdit( props ) { } ); } -export function MarginVisualizer( { clientId, attributes } ) { +export function MarginVisualizer( { clientId, attributes, isMouseOver } ) { const margin = attributes?.style?.spacing?.margin; const spacingSizes = useSetting( 'spacing.spacingSizes' ); @@ -208,7 +210,7 @@ export function MarginVisualizer( { clientId, attributes } ) { }; useEffect( () => { - if ( ! isShallowEqual( margin, valueRef.current ) ) { + if ( ! isShallowEqual( margin, valueRef.current ) && ! isMouseOver ) { setIsActive( true ); valueRef.current = margin; @@ -220,9 +222,9 @@ export function MarginVisualizer( { clientId, attributes } ) { } return () => clearTimer(); - }, [ margin ] ); + }, [ margin, isMouseOver ] ); - if ( ! isActive ) { + if ( ! isActive && ! isMouseOver ) { return null; } diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js index 46015b1e164631..9eb3a8841193a7 100644 --- a/packages/block-editor/src/hooks/padding.js +++ b/packages/block-editor/src/hooks/padding.js @@ -103,6 +103,7 @@ export function PaddingEdit( props ) { name: blockName, attributes: { style }, setAttributes, + setMouseOver, } = props; const spacingSizes = useSetting( 'spacing.spacingSizes' ); @@ -161,6 +162,7 @@ export function PaddingEdit( props ) { units={ units } allowReset={ false } splitOnAxis={ splitOnAxis } + setMouseOver={ setMouseOver } /> ) } @@ -169,7 +171,7 @@ export function PaddingEdit( props ) { } ); } -export function PaddingVisualizer( { clientId, attributes } ) { +export function PaddingVisualizer( { clientId, attributes, isMouseOver } ) { const padding = attributes?.style?.spacing?.padding; const style = useMemo( () => { return { @@ -199,7 +201,7 @@ export function PaddingVisualizer( { clientId, attributes } ) { }; useEffect( () => { - if ( ! isShallowEqual( padding, valueRef.current ) ) { + if ( ! isShallowEqual( padding, valueRef.current ) && ! isMouseOver ) { setIsActive( true ); valueRef.current = padding; @@ -211,9 +213,9 @@ export function PaddingVisualizer( { clientId, attributes } ) { } return () => clearTimer(); - }, [ padding ] ); + }, [ padding, isMouseOver ] ); - if ( ! isActive ) { + if ( ! isActive && ! isMouseOver ) { return null; } From d28d564354f58d7b5a3baaae62066f664d86e810 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 14 Oct 2022 15:11:49 +1300 Subject: [PATCH 02/12] Remove the King'z english --- packages/block-editor/src/hooks/dimensions.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index 3dc6963e75b276..90a337e71616f3 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -44,7 +44,7 @@ export const SPACING_SUPPORT_KEY = 'spacing'; export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ]; export const AXIAL_SIDES = [ 'vertical', 'horizontal' ]; -function useVisualiserMouseOver() { +function useVisualizerMouseOver() { const [ isMouseOver, setIsMouseOver ] = useState( false ); return { isMouseOver, setIsMouseOver }; } @@ -63,8 +63,8 @@ export function DimensionsPanel( props ) { const isDisabled = useIsDimensionsDisabled( props ); const isSupported = hasDimensionsSupport( props.name ); const spacingSizes = useSetting( 'spacing.spacingSizes' ); - const paddingMouseOver = useVisualiserMouseOver(); - const marginMouseOver = useVisualiserMouseOver(); + const paddingMouseOver = useVisualizerMouseOver(); + const marginMouseOver = useVisualizerMouseOver(); if ( isDisabled || ! isSupported ) { return null; From ee5c653e56f6a0207a5f47f093d77a8b45e2fa28 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 17 Oct 2022 11:01:48 +1300 Subject: [PATCH 03/12] Pass the onMouseOver, onMouseOut callbacks through to the box control --- .../all-input-control.js | 6 ++-- .../axial-input-controls.js | 6 ++-- .../components/spacing-sizes-control/index.js | 6 ++-- .../spacing-sizes-control/input-controls.js | 6 ++-- .../spacing-input-control.js | 31 ++++++++++--------- packages/block-editor/src/hooks/dimensions.js | 10 ++++-- packages/block-editor/src/hooks/margin.js | 8 +++-- packages/block-editor/src/hooks/padding.js | 8 +++-- packages/components/src/box-control/index.js | 4 +++ 9 files changed, 55 insertions(+), 30 deletions(-) diff --git a/packages/block-editor/src/components/spacing-sizes-control/all-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/all-input-control.js index 3ee47e44ac4fb5..f7f9686daee33a 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/all-input-control.js +++ b/packages/block-editor/src/components/spacing-sizes-control/all-input-control.js @@ -16,7 +16,8 @@ export default function AllInputControl( { spacingSizes, type, minimumCustomValue, - setMouseOver, + onMouseOver, + onMouseOut, } ) { const allValue = getAllRawValue( values ); const hasValues = isValuesDefined( values ); @@ -36,7 +37,8 @@ export default function AllInputControl( { isMixed={ isMixed } type={ type } minimumCustomValue={ minimumCustomValue } - setMouseOver={ setMouseOver } + onMouseOver={ onMouseOver } + onMouseOut={ onMouseOut } /> ); } diff --git a/packages/block-editor/src/components/spacing-sizes-control/axial-input-controls.js b/packages/block-editor/src/components/spacing-sizes-control/axial-input-controls.js index dd54badd09ac46..3551e20ede7596 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/axial-input-controls.js +++ b/packages/block-editor/src/components/spacing-sizes-control/axial-input-controls.js @@ -13,7 +13,8 @@ export default function AxialInputControls( { spacingSizes, type, minimumCustomValue, - setMouseOver, + onMouseOver, + onMouseOut, } ) { const createHandleOnChange = ( side ) => ( next ) => { if ( ! onChange ) { @@ -55,7 +56,8 @@ export default function AxialInputControls( { spacingSizes={ spacingSizes } type={ type } minimumCustomValue={ minimumCustomValue } - setMouseOver={ setMouseOver } + onMouseOver={ onMouseOver } + onMouseOut={ onMouseOut } /> ); } ) } diff --git a/packages/block-editor/src/components/spacing-sizes-control/index.js b/packages/block-editor/src/components/spacing-sizes-control/index.js index 5fba6b413b900f..fbcfcdefe7b11b 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/index.js +++ b/packages/block-editor/src/components/spacing-sizes-control/index.js @@ -30,7 +30,8 @@ export default function SpacingSizesControl( { splitOnAxis = false, useSelect, minimumCustomValue = 0, - setMouseOver = noop, + onMouseOver = noop, + onMouseOut = noop, } ) { const spacingSizes = [ { name: 0, slug: '0', size: 0 }, @@ -72,7 +73,8 @@ export default function SpacingSizesControl( { useSelect, type: label, minimumCustomValue, - setMouseOver, + onMouseOver, + onMouseOut, }; return ( diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls.js index 96ba11c873eee2..412dbad2030c99 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/input-controls.js +++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls.js @@ -11,7 +11,8 @@ export default function BoxInputControls( { spacingSizes, type, minimumCustomValue, - setMouseOver, + onMouseOver, + onMouseOut, } ) { // Filter sides if custom configuration provided, maintaining default order. const filteredSides = sides?.length @@ -39,7 +40,8 @@ export default function BoxInputControls( { spacingSizes={ spacingSizes } type={ type } minimumCustomValue={ minimumCustomValue } - setMouseOver={ setMouseOver } + onMouseOver={ onMouseOver } + onMouseOut={ onMouseOut } /> ); } ) } 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 0ab22cd88b5a35..59ba808bdb1570 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 @@ -51,17 +51,18 @@ export default function SpacingInputControl( { isMixed = false, type, minimumCustomValue, - setMouseOver, + onMouseOver, + onMouseOut, } ) { // Treat value as a preset value if the passed in value matches the value of one of the spacingSizes. value = getPresetValueFromCustomValue( value, spacingSizes ); - const handleMouseOver = () => { - setMouseOver( true ); - }; - const handleMouseOut = () => { - setMouseOver( false ); - }; + // const handleMouseOver = () => { + // setMouseOver( true ); + // }; + // const handleMouseOut = () => { + // setMouseOver( false ); + // }; let selectListSizes = spacingSizes; const showRangeControl = spacingSizes.length <= 8; @@ -225,8 +226,8 @@ export default function SpacingInputControl( { { showCustomValueControl && ( <> onChange( getNewCustomValue( newSize ) ) } @@ -243,8 +244,8 @@ export default function SpacingInputControl( { /> @@ -306,8 +307,8 @@ export default function SpacingInputControl( { hideLabelFromVision={ true } __nextUnconstrainedWidth={ true } size={ '__unstable-large' } - onMouseOver={ handleMouseOver } - onMouseOut={ handleMouseOut } + onMouseOver={ onMouseOver } + onMouseOut={ onMouseOut } /> ) } diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index 90a337e71616f3..d916a60c126c4c 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -46,7 +46,9 @@ export const AXIAL_SIDES = [ 'vertical', 'horizontal' ]; function useVisualizerMouseOver() { const [ isMouseOver, setIsMouseOver ] = useState( false ); - return { isMouseOver, setIsMouseOver }; + const onMouseOver = () => setIsMouseOver( true ); + const onMouseOut = () => setIsMouseOver( false ); + return { isMouseOver, onMouseOver, onMouseOut }; } /** @@ -104,7 +106,8 @@ export function DimensionsPanel( props ) { panelId={ props.clientId } > @@ -120,7 +123,8 @@ export function DimensionsPanel( props ) { panelId={ props.clientId } > diff --git a/packages/block-editor/src/hooks/margin.js b/packages/block-editor/src/hooks/margin.js index c8a9a576b6fbb1..fd228128ca76ed 100644 --- a/packages/block-editor/src/hooks/margin.js +++ b/packages/block-editor/src/hooks/margin.js @@ -101,7 +101,8 @@ export function MarginEdit( props ) { name: blockName, attributes: { style }, setAttributes, - setMouseOver, + onMouseOver, + onMouseOut, } = props; const spacingSizes = useSetting( 'spacing.spacingSizes' ); @@ -149,6 +150,8 @@ export function MarginEdit( props ) { units={ units } allowReset={ false } splitOnAxis={ splitOnAxis } + onMouseOver={ onMouseOver } + onMouseOut={ onMouseOut } /> ) } { spacingSizes?.length > 0 && ( @@ -160,7 +163,8 @@ export function MarginEdit( props ) { units={ units } allowReset={ false } splitOnAxis={ false } - setMouseOver={ setMouseOver } + onMouseOver={ onMouseOver } + onMouseOut={ onMouseOut } /> ) } diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js index 9eb3a8841193a7..88fd43e18ec7b7 100644 --- a/packages/block-editor/src/hooks/padding.js +++ b/packages/block-editor/src/hooks/padding.js @@ -103,7 +103,8 @@ export function PaddingEdit( props ) { name: blockName, attributes: { style }, setAttributes, - setMouseOver, + onMouseOver, + onMouseOut, } = props; const spacingSizes = useSetting( 'spacing.spacingSizes' ); @@ -151,6 +152,8 @@ export function PaddingEdit( props ) { units={ units } allowReset={ false } splitOnAxis={ splitOnAxis } + onMouseOver={ onMouseOver } + onMouseOut={ onMouseOut } /> ) } { spacingSizes?.length > 0 && ( @@ -162,7 +165,8 @@ export function PaddingEdit( props ) { units={ units } allowReset={ false } splitOnAxis={ splitOnAxis } - setMouseOver={ setMouseOver } + onMouseOver={ onMouseOver } + onMouseOut={ onMouseOut } /> ) } diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js index f5e8e7428c8015..9ebeff34aa0d5f 100644 --- a/packages/components/src/box-control/index.js +++ b/packages/components/src/box-control/index.js @@ -52,6 +52,8 @@ export default function BoxControl( { splitOnAxis = false, allowReset = true, resetValues = DEFAULT_VALUES, + onMouseOver = noop, + onMouseOut = noop, } ) { const [ values, setValues ] = useControlledState( valuesProp, { fallback: DEFAULT_VALUES, @@ -114,6 +116,8 @@ export default function BoxControl( { setSelectedUnits, sides, values: inputValues, + onMouseOver, + onMouseOut, }; return ( From 5759410f3dc9e02b5a8da37766087d7eb725376d Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 17 Oct 2022 11:04:07 +1300 Subject: [PATCH 04/12] Remove commented code --- .../spacing-sizes-control/spacing-input-control.js | 6 ------ 1 file changed, 6 deletions(-) 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 59ba808bdb1570..54d07e61c6d2b4 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 @@ -57,12 +57,6 @@ export default function SpacingInputControl( { // Treat value as a preset value if the passed in value matches the value of one of the spacingSizes. value = getPresetValueFromCustomValue( value, spacingSizes ); - // const handleMouseOver = () => { - // setMouseOver( true ); - // }; - // const handleMouseOut = () => { - // setMouseOver( false ); - // }; let selectListSizes = spacingSizes; const showRangeControl = spacingSizes.length <= 8; From 4e4c195dc974cfe9bd19406ee276a6f2e74def3e Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 17 Oct 2022 14:55:06 +1300 Subject: [PATCH 05/12] Pass onMouseOver callbacks to the customselectcontrol --- packages/components/src/custom-select-control/index.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js index 73aebda5d257b2..45617b792825ee 100644 --- a/packages/components/src/custom-select-control/index.js +++ b/packages/components/src/custom-select-control/index.js @@ -61,6 +61,9 @@ const stateReducer = ( return changes; } }; + +const noop = () => {}; + export default function CustomSelectControl( { /** Start opting into the larger default height that will become the default size in a future version. */ __next36pxDefaultSize = false, @@ -75,6 +78,8 @@ export default function CustomSelectControl( { /** @type {import('../select-control/types').SelectControlProps.size} */ size = 'default', value: _selectedItem, + onMouseOver = noop, + onMouseOut = noop, } ) { const { getLabelProps, @@ -173,6 +178,8 @@ export default function CustomSelectControl( { suffix={ } > setIsFocused( true ) } onBlur={ () => setIsFocused( false ) } From 2bb630bfafea365bf301936c8eb1fde99289ed99 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 17 Oct 2022 16:30:12 +1300 Subject: [PATCH 06/12] Fix issue with margin and padding showing if values undefined or 0 --- packages/block-editor/src/hooks/margin.js | 36 +++++++++++++--------- packages/block-editor/src/hooks/padding.js | 21 ++++++------- 2 files changed, 31 insertions(+), 26 deletions(-) diff --git a/packages/block-editor/src/hooks/margin.js b/packages/block-editor/src/hooks/margin.js index fd228128ca76ed..2d2f4b16698a49 100644 --- a/packages/block-editor/src/hooks/margin.js +++ b/packages/block-editor/src/hooks/margin.js @@ -29,7 +29,7 @@ import { import { cleanEmptyObject } from './utils'; import BlockPopover from '../components/block-popover'; import SpacingSizesControl from '../components/spacing-sizes-control'; -import { getCustomValueFromPreset } from '../components/spacing-sizes-control/utils'; +import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils'; /** * Determines if there is margin support. @@ -175,31 +175,39 @@ export function MarginEdit( props ) { export function MarginVisualizer( { clientId, attributes, isMouseOver } ) { const margin = attributes?.style?.spacing?.margin; - const spacingSizes = useSetting( 'spacing.spacingSizes' ); const style = useMemo( () => { const marginTop = margin?.top - ? getCustomValueFromPreset( margin?.top, spacingSizes ) + ? getSpacingPresetCssVar( margin?.top ) : 0; const marginRight = margin?.right - ? getCustomValueFromPreset( margin?.right, spacingSizes ) + ? getSpacingPresetCssVar( margin?.right ) : 0; const marginBottom = margin?.bottom - ? getCustomValueFromPreset( margin?.bottom, spacingSizes ) + ? getSpacingPresetCssVar( margin?.bottom ) : 0; const marginLeft = margin?.left - ? getCustomValueFromPreset( margin?.left, spacingSizes ) + ? getSpacingPresetCssVar( margin?.left ) : 0; return { - borderTopWidth: marginTop, - borderRightWidth: marginRight, - borderBottomWidth: marginBottom, - borderLeftWidth: marginLeft, - top: marginTop !== 0 ? `calc(${ marginTop } * -1)` : 0, - right: marginRight !== 0 ? `calc(${ marginRight } * -1)` : 0, - bottom: marginBottom !== 0 ? `calc(${ marginBottom } * -1)` : 0, - left: marginLeft !== 0 ? `calc(${ marginLeft } * -1)` : 0, + borderTopWidth: marginTop ? marginTop : 0, + borderRightWidth: marginRight ? marginRight : 0, + borderBottomWidth: marginBottom ? marginBottom : 0, + borderLeftWidth: marginLeft ? marginLeft : 0, + top: marginTop && marginTop !== 0 ? `calc(${ marginTop } * -1)` : 0, + right: + marginRight && marginRight !== 0 + ? `calc(${ marginRight } * -1)` + : 0, + bottom: + marginBottom && marginBottom !== 0 + ? `calc(${ marginBottom } * -1)` + : 0, + left: + marginLeft && marginLeft !== 0 + ? `calc(${ marginLeft } * -1)` + : 0, }; }, [ margin ] ); diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js index 88fd43e18ec7b7..5abf5f7ae41ea4 100644 --- a/packages/block-editor/src/hooks/padding.js +++ b/packages/block-editor/src/hooks/padding.js @@ -29,10 +29,7 @@ import { import { cleanEmptyObject } from './utils'; import BlockPopover from '../components/block-popover'; import SpacingSizesControl from '../components/spacing-sizes-control'; -import { - getSpacingPresetCssVar, - isValueSpacingPreset, -} from '../components/spacing-sizes-control/utils'; +import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils'; /** * Determines if there is padding support. * @@ -179,18 +176,18 @@ export function PaddingVisualizer( { clientId, attributes, isMouseOver } ) { const padding = attributes?.style?.spacing?.padding; const style = useMemo( () => { return { - borderTopWidth: isValueSpacingPreset( padding?.top ) + borderTopWidth: padding?.top ? getSpacingPresetCssVar( padding?.top ) - : padding?.top, - borderRightWidth: isValueSpacingPreset( padding?.right ) + : 0, + borderRightWidth: padding?.right ? getSpacingPresetCssVar( padding?.right ) - : padding?.right, - borderBottomWidth: isValueSpacingPreset( padding?.bottom ) + : 0, + borderBottomWidth: padding?.bottom ? getSpacingPresetCssVar( padding?.bottom ) - : padding?.bottom, - borderLeftWidth: isValueSpacingPreset( padding?.left ) + : 0, + borderLeftWidth: padding?.left ? getSpacingPresetCssVar( padding?.left ) - : padding?.left, + : 0, }; }, [ padding ] ); From f9aa90e201e32d3c47d70083ce79048f4472b2a5 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 20 Oct 2022 09:48:39 +1300 Subject: [PATCH 07/12] Update component docs --- packages/components/CHANGELOG.md | 5 +++++ packages/components/src/box-control/README.md | 14 ++++++++++++++ .../components/src/custom-select-control/README.md | 14 ++++++++++++++ 3 files changed, 33 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 18a230c301d46d..41934d1f5e2adb 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### New Feature + +- `CustomSelectControl`: Add `onMouseOver` and `onMouseOut` callback props to allow handling of these events by parent coomponents ([#44955](https://github.com/WordPress/gutenberg/pull/44955)) +- `BoxControl`: Add `onMouseOver` and `onMouseOut` callback props to allow handling of these events by parent coomponents ([#44955](https://github.com/WordPress/gutenberg/pull/44955)) + ## 21.3.0 (2022-10-19) ### Bug Fix diff --git a/packages/components/src/box-control/README.md b/packages/components/src/box-control/README.md index 8a704482cacd14..edf3993679033f 100644 --- a/packages/components/src/box-control/README.md +++ b/packages/components/src/box-control/README.md @@ -95,3 +95,17 @@ The `top`, `right`, `bottom`, and `left` box dimension values. - Type: `Object` - Required: No + +### onMouseOver + +A handler for onMouseOver events. + +- Type: `Function` +- Required: No + +### onMouseOut + +A handler for onMouseOut events. + +- Type: `Function` +- Required: No diff --git a/packages/components/src/custom-select-control/README.md b/packages/components/src/custom-select-control/README.md index c54e5a5e934e00..8144a7cfa59609 100644 --- a/packages/components/src/custom-select-control/README.md +++ b/packages/components/src/custom-select-control/README.md @@ -131,6 +131,20 @@ Start opting into the unconstrained width style that will become the default in - Required: No - Default: `false` +#### onMouseOver + +A handler for onMouseOver events. + +- Type: `Function` +- Required: No + +#### onMouseOut + +A handler for onMouseOut events. + +- Type: `Function` +- Required: No + ## Related components - Like this component, but implemented using a native `