Feat: Default Placeholders

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 (
 		<AdvancedControl { ...controlProps }>
 			<RangeControl

src/components/four-range-control/index.js

@@ -31,7 +31,7 @@ import classnames from 'classnames'
 import { i18n } from 'stackable'
 import { Button } from '~stackable/components'
 import {
-	useAttributeName, useBlockAttributes, useDeviceType,
+	useAttributeName, useBlockAttributes, useDeviceType, usePlaceholder,
 } from '~stackable/hooks'
 
 const FourRangeControl = props => {
@@ -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 (
 		<AdvancedControl { ...controlProps }>
 			{ isLocked && (
@@ -187,6 +199,7 @@ const FourRangeControl = props => {
 						value={ firstValue }
 						onChange={ onChangeAll }
 						allowReset={ false }
+						placeholder={ placeholderTop }
 					/>
 					<ResetButton
 						allowReset={ props.allowReset }
@@ -208,7 +221,7 @@ const FourRangeControl = props => {
 								value={ value.top }
 								onChange={ onChangeTop }
 								allowReset={ false }
-								placeholder={ typeof props.placeholderTop === 'undefined' ? propsToPass.placeholder : props.placeholderTop }
+								placeholder={ placeholderTop }
 							/>
 							<ResetButton
 								allowReset={ props.allowReset }
@@ -228,7 +241,7 @@ const FourRangeControl = props => {
 								value={ value.right }
 								onChange={ onChangeRight }
 								allowReset={ false }
-								placeholder={ typeof props.placeholderRight === 'undefined' ? propsToPass.placeholder : props.placeholderRight }
+								placeholder={ placeholderRight }
 							/>
 							<ResetButton
 								allowReset={ props.allowReset }
@@ -248,7 +261,7 @@ const FourRangeControl = props => {
 								value={ value.bottom }
 								onChange={ onChangeBottom }
 								allowReset={ false }
-								placeholder={ typeof props.placeholderBottom === 'undefined' ? propsToPass.placeholder : props.placeholderBottom }
+								placeholder={ placeholderBottom }
 							/>
 							<ResetButton
 								allowReset={ props.allowReset }
@@ -268,7 +281,7 @@ const FourRangeControl = props => {
 								value={ value.left }
 								onChange={ onChangeLeft }
 								allowReset={ false }
-								placeholder={ typeof props.placeholderLeft === 'undefined' ? propsToPass.placeholder : props.placeholderLeft }
+								placeholder={ placeholderLeft }
 							/>
 							<ResetButton
 								allowReset={ props.allowReset }

src/hooks/index.js

@@ -12,3 +12,4 @@ export * from './use-linking'
 export * from './use-block-hover-state'
 export * from './use-posts-query'
 export * from './use-variation-picker'
+export * from './use-placeholder'

src/hooks/use-placeholder.js

@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element'
+import {
+	applyFilters, addFilter, hasFilter,
+} from '@wordpress/hooks'
+
+/**
+ * Internal dependencies
+ */
+import { useDeviceType } from './use-device-type'
+
+export const usePlaceholder = ( attribute = '' ) => {
+	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,
+ * }
+ * ```
+ */
+if ( ! hasFilter( 'stackable.placeholders', 'default' ) ) {
+	addFilter( 'stackable.placeholders', 'default', placeholders => ( {
+		...placeholders,
+		containerPaddingTop: 32,
+		containerPaddingRight: 32,
+		containerPaddingBottom: 32,
+		containerPaddingLeft: 32,
+	} ) )
+}