From 8d73d549d34aff53b04d84246c9c1d17133e0e65 Mon Sep 17 00:00:00 2001 From: Nico Mendoza Date: Thu, 14 Oct 2021 18:19:56 +0800 Subject: [PATCH 1/2] Feat: Default placeholders --- .../advanced-range-control/index.js | 6 ++ src/components/four-range-control/index.js | 23 +++++-- src/hooks/index.js | 1 + src/hooks/use-placeholder.js | 63 +++++++++++++++++++ 4 files changed, 88 insertions(+), 5 deletions(-) create mode 100644 src/hooks/use-placeholder.js diff --git a/src/components/advanced-range-control/index.js b/src/components/advanced-range-control/index.js index 94ea76b97a..7877a8dd21 100644 --- a/src/components/advanced-range-control/index.js +++ b/src/components/advanced-range-control/index.js @@ -10,6 +10,7 @@ import { useBlockAttributes, useBlockHoverState, useDeviceType, + usePlaceholder, } from '~stackable/hooks' /** @@ -29,6 +30,7 @@ const AdvancedRangeControl = props => { const { clientId } = useBlockEditContext() const attributes = useBlockAttributes( clientId ) + const placeholder = usePlaceholder( props.attribute ) const unit = typeof props.unit === 'string' ? ( props.unit || props.units?.[ 0 ] || 'px' ) @@ -74,6 +76,10 @@ const AdvancedRangeControl = props => { placeholderRender = null } + if ( ( propsToPass.placeholder === '' || propsToPass.placeholder === null || propsToPass.placeholder === undefined ) && placeholder !== null ) { + propsToPass.placeholder = placeholder + } + return ( { @@ -42,6 +42,13 @@ const FourRangeControl = props => { top: props.defaultTop, right: props.defaultRight, bottom: props.defaultBottom, left: props.defaultLeft, } + const placeholders = usePlaceholder( [ + `${ props.attribute }Top`, + `${ props.attribute }Right`, + `${ props.attribute }Bottom`, + `${ props.attribute }Left`, + ] ) + // You can specify the values in this way. This is how this is done in v2 const hasOldValues = typeof props.top !== 'undefined' || typeof props.right !== 'undefined' || typeof props.bottom !== 'undefined' || typeof props.left !== 'undefined' if ( hasOldValues ) { @@ -178,6 +185,11 @@ const FourRangeControl = props => { } ) } ) + const placeholderTop = typeof props.placeholderTop === 'undefined' ? propsToPass.placeholder : placeholders[ `${ props.attribute }Top` ] + const placeholderRight = typeof props.placeholderRight === 'undefined' ? propsToPass.placeholder : placeholders[ `${ props.attribute }Right` ] + const placeholderBottom = typeof props.placeholderBottom === 'undefined' ? propsToPass.placeholder : placeholders[ `${ props.attribute }Bottom` ] + const placeholderLeft = typeof props.placeholderLeft === 'undefined' ? propsToPass.placeholder : placeholders[ `${ props.attribute }Left` ] + return ( { isLocked && ( @@ -187,6 +199,7 @@ const FourRangeControl = props => { value={ firstValue } onChange={ onChangeAll } allowReset={ false } + placeholder={ placeholderTop } /> { value={ value.top } onChange={ onChangeTop } allowReset={ false } - placeholder={ typeof props.placeholderTop === 'undefined' ? propsToPass.placeholder : props.placeholderTop } + placeholder={ placeholderTop } /> { value={ value.right } onChange={ onChangeRight } allowReset={ false } - placeholder={ typeof props.placeholderRight === 'undefined' ? propsToPass.placeholder : props.placeholderRight } + placeholder={ placeholderRight } /> { value={ value.bottom } onChange={ onChangeBottom } allowReset={ false } - placeholder={ typeof props.placeholderBottom === 'undefined' ? propsToPass.placeholder : props.placeholderBottom } + placeholder={ placeholderBottom } /> { value={ value.left } onChange={ onChangeLeft } allowReset={ false } - placeholder={ typeof props.placeholderLeft === 'undefined' ? propsToPass.placeholder : props.placeholderLeft } + placeholder={ placeholderLeft } /> { + const placeholders = useMemo( () => applyFilters( 'stackable.placeholders', {} ), [] ) + + const deviceType = useDeviceType() + const appendDeviceAttr = deviceType === 'Desktop' ? '' : deviceType + + const placeholder = useMemo( () => { + let key + + if ( typeof attribute === 'string' ) { + key = Object.keys( placeholders ).findIndex( key => key === attribute + appendDeviceAttr ) + if ( key !== -1 ) { + return placeholders[ attribute + appendDeviceAttr ] + } + } else if ( Array.isArray( attribute ) ) { + key = [] + attribute.forEach( k => { + if ( Object.keys( placeholders ).includes( k + appendDeviceAttr ) ) { + key.push( k ) + } + } ) + + return key.reduce( ( acc, curr ) => { + return { ...acc, [ curr ]: placeholders[ curr + appendDeviceAttr ] } + }, {} ) + } + + return null + }, [ placeholders, attribute, appendDeviceAttr ] ) + + return placeholder +} + +/** + * Default block placeholders + * + * @example + * ``` + * { + * containerPaddingTop: 32, // handled by four range control. attribute = 'containerPadding' + * buttonBorderRadiusTablet: 32, + * buttonBorderRadiusMobile: 8, + * } + * ``` + */ +addFilter( 'stackable.placeholders', 'default', placeholders => ( { + ...placeholders, + containerPaddingTop: 32, + containerPaddingRight: 32, + containerPaddingBottom: 32, + containerPaddingLeft: 32, +} ) ) From 5d7a82ce318398cf13897788623a7744be7315ec Mon Sep 17 00:00:00 2001 From: Nico Mendoza Date: Thu, 14 Oct 2021 18:21:58 +0800 Subject: [PATCH 2/2] refactor --- src/hooks/use-placeholder.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/hooks/use-placeholder.js b/src/hooks/use-placeholder.js index f26b4d74dd..cbc007d7a9 100644 --- a/src/hooks/use-placeholder.js +++ b/src/hooks/use-placeholder.js @@ -2,7 +2,9 @@ * WordPress dependencies */ import { useMemo } from '@wordpress/element' -import { applyFilters, addFilter } from '@wordpress/hooks' +import { + applyFilters, addFilter, hasFilter, +} from '@wordpress/hooks' /** * Internal dependencies @@ -43,7 +45,7 @@ export const usePlaceholder = ( attribute = '' ) => { } /** - * Default block placeholders + * Default block placeholders. * * @example * ``` @@ -54,10 +56,12 @@ export const usePlaceholder = ( attribute = '' ) => { * } * ``` */ -addFilter( 'stackable.placeholders', 'default', placeholders => ( { - ...placeholders, - containerPaddingTop: 32, - containerPaddingRight: 32, - containerPaddingBottom: 32, - containerPaddingLeft: 32, -} ) ) +if ( ! hasFilter( 'stackable.placeholders', 'default' ) ) { + addFilter( 'stackable.placeholders', 'default', placeholders => ( { + ...placeholders, + containerPaddingTop: 32, + containerPaddingRight: 32, + containerPaddingBottom: 32, + containerPaddingLeft: 32, + } ) ) +}