WordPress · stacimc · Aug 19, 2021 · Aug 31, 2021 · Aug 31, 2021 · Aug 31, 2021
@@ -149,7 +149,7 @@ public function get_item_schema() {
 				'__experimentalStyles'                   => array(
 					'description' => __( 'Styles consolidated from core, theme, and user origins.', 'gutenberg' ),
 					'type'        => 'object',
-					'context'     => array( 'mobile' ),
+					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor', 'mobile' ),
 				),
 
 				'alignWide'                              => array(

@@ -111,7 +111,7 @@ function_exists( 'gutenberg_is_edit_site_page' ) &&
 	}
 	$consolidated = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( $settings, $origin );
 
-	if ( 'mobile' === $context ) {
+	if ( 'site-editor' !== $context ) {
 		$settings['__experimentalStyles'] = $consolidated->get_raw_data()['styles'];
 	}
 

@@ -1,19 +1,33 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
+import {
+	__experimentalParseUnit as parseUnit,
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { getAllValue, hasMixedValues, hasDefinedValues } from './utils';
 
-export default function AllInputControl( { onChange, values, ...props } ) {
+export default function AllInputControl( {
+	onChange,
+	values,
+	defaults,
+	...props
+} ) {
 	const allValue = getAllValue( values );
 	const hasValues = hasDefinedValues( values );
-	const isMixed = hasValues && hasMixedValues( values );
-	const allPlaceholder = isMixed ? __( 'Mixed' ) : null;
+	const isMixedValues = hasValues && hasMixedValues( values );
+
+	const [ allDefault ] = parseUnit( getAllValue( defaults ) );
+	const isMixedDefaults =
+		hasDefinedValues( defaults ) && hasMixedValues( defaults );
+
+	const isMixed = isMixedValues || ( ! hasValues && isMixedDefaults );
+	const allPlaceholder = isMixed ? __( 'Mixed' ) : allDefault;
 
 	return (
 		<UnitControl

@@ -42,12 +42,20 @@ const MAX_BORDER_RADIUS_VALUES = {
  * @param {Object}   props          Component props.
  * @param {Function} props.onChange Callback to handle onChange.
  * @param {Object}   props.values   Border radius values.
+ * @param {Object}   props.defaults Border radius default values.
  *
  * @return {WPElement}              Custom border radius control.
  */
-export default function BorderRadiusControl( { onChange, values } ) {
+export default function BorderRadiusControl( { onChange, values, defaults } ) {
+	const isMixedValues =
+		hasDefinedValues( values ) && hasMixedValues( values );
+	const isMixedDefaults =
+		hasDefinedValues( defaults ) && hasMixedValues( defaults );
 	const [ isLinked, setIsLinked ] = useState(
-		! hasDefinedValues( values ) || ! hasMixedValues( values )
+		! (
+			isMixedValues ||
+			( ! hasDefinedValues( values ) && isMixedDefaults )
+		)
 	);
 
 	const units = useCustomUnits( {
@@ -58,6 +66,7 @@ export default function BorderRadiusControl( { onChange, values } ) {
 	const step = unitConfig?.step || 1;
 
 	const [ allValue ] = parseUnit( getAllValue( values ) );
+	const [ allDefault ] = parseUnit( getAllValue( defaults ) );
 
 	const toggleLinked = () => setIsLinked( ! isLinked );
 
@@ -74,14 +83,15 @@ export default function BorderRadiusControl( { onChange, values } ) {
 						<AllInputControl
 							className="components-border-radius-control__unit-control"
 							values={ values }
+							defaults={ defaults }
 							min={ MIN_BORDER_RADIUS_VALUE }
 							onChange={ onChange }
 							unit={ unit }
 							units={ units }
 						/>
 						<RangeControl
 							className="components-border-radius-control__range-control"
-							value={ allValue }
+							value={ allValue || allDefault }
 							min={ MIN_BORDER_RADIUS_VALUE }
 							max={ MAX_BORDER_RADIUS_VALUES[ unit ] }
 							initialPosition={ 0 }
@@ -95,6 +105,7 @@ export default function BorderRadiusControl( { onChange, values } ) {
 						min={ MIN_BORDER_RADIUS_VALUE }
 						onChange={ onChange }
 						values={ values || DEFAULT_VALUES }
+						defaults={ defaults }
 						units={ units }
 					/>
 				) }

@@ -1,9 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
+import {
+	__experimentalParseUnit as parseUnit,
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { getValuesObject } from './utils';
+
 const CORNERS = {
 	topLeft: __( 'Top left' ),
 	topRight: __( 'Top right' ),
@@ -14,6 +22,7 @@ const CORNERS = {
 export default function BoxInputControls( {
 	onChange,
 	values: valuesProp,
+	defaults: defaultsProp,
 	...props
 } ) {
 	const createHandleOnChange = ( corner ) => ( next ) => {
@@ -27,16 +36,9 @@ export default function BoxInputControls( {
 		} );
 	};
 
-	// For shorthand style & backwards compatibility, handle flat string value.
-	const values =
-		typeof valuesProp !== 'string'
-			? valuesProp
-			: {
-					topLeft: valuesProp,
-					topRight: valuesProp,
-					bottomLeft: valuesProp,
-					bottomRight: valuesProp,
-			  };
+	// For shorthand style & backwards compatibility, handle flat string values.
+	const values = getValuesObject( valuesProp );
+	const defaults = getValuesObject( defaultsProp );
 
 	// Controls are wrapped in tooltips as visible labels aren't desired here.
 	return (
@@ -47,6 +49,7 @@ export default function BoxInputControls( {
 					key={ key }
 					aria-label={ label }
 					value={ values[ key ] }
+					placeholder={ parseUnit( defaults[ key ] )[ 0 ] }
 					onChange={ createHandleOnChange( key ) }
 				/>
 			) ) }

@@ -73,6 +73,24 @@ export function getAllValue( values = {} ) {
 	return allValue;
 }
 
+/**
+ * For shorthand style & backwards compatibility, takes the radius values
+ * and handles flat string value.
+ *
+ * @param {string} values Radius values.
+ * @return {Object}       Radius values in longhand object form.
+ */
+export function getValuesObject( values = {} ) {
+	return typeof values !== 'string'
+		? values
+		: {
+				topLeft: values,
+				topRight: values,
+				bottomLeft: values,
+				bottomRight: values,
+		  };
+}
+
 /**
  * Checks to determine if values are mixed.
  *

@@ -147,3 +147,4 @@ export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursi
 
 export { default as BlockEditorProvider } from './provider';
 export { default as useSetting } from './use-setting';
+export { default as __experimentalUseStyle } from './use-style';
@@ -15,7 +15,11 @@ import {
 	isLineHeightDefined,
 } from './utils';
 
-export default function LineHeightControl( { value: lineHeight, onChange } ) {
+export default function LineHeightControl( {
+	value: lineHeight,
+	onChange,
+	placeholder = BASE_DEFAULT_VALUE,
+} ) {
 	const isDefined = isLineHeightDefined( lineHeight );
 
 	const handleOnKeyDown = ( event ) => {
@@ -70,7 +74,7 @@ export default function LineHeightControl( { value: lineHeight, onChange } ) {
 				onKeyDown={ handleOnKeyDown }
 				onChange={ handleOnChange }
 				label={ __( 'Line height' ) }
-				placeholder={ BASE_DEFAULT_VALUE }
+				placeholder={ placeholder }
 				step={ STEP }
 				type="number"
 				value={ value }

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockEditContext } from '../block-edit';
+import { store as blockEditorStore } from '../../store';
+import { getValueFromVariable } from '../../utils/style-variable-resolution';
+
+/**
+ * Hook that retrieves the global styles of a block.
+ * It works with nested objects using by finding the value at path.
+ *
+ * @param {string|Array} path The path to the setting.
+ *
+ * @return {any} Returns the style value defined for the path.
+ *
+ * @example
+ * ```js
+ * const backgroundColor = useStyle( 'color.background' );
+ * ```
+ */
+export default function useStyle( path ) {
+	const { name: blockName } = useBlockEditContext();
+
+	const settings = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSettings();
+	}, [] );
+	const settingsForBlock = get( settings, [
+		'__experimentalStyles',
+		'blocks',
+		blockName,
+	] );
+	const value = get( settingsForBlock, path );
+	return useMemo( () => {
+		return getValueFromVariable(
+			settings.__experimentalFeatures,
+			blockName,
+			value
+		);
+	}, [ settings.__experimentalFeatures, blockName, value ] );
+}
@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import { addFilter } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 import { createHigherOrderComponent } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,6 +23,7 @@ import {
 import useSetting from '../components/use-setting';
 import { hasBorderSupport, shouldSkipSerialization } from './border';
 import { cleanEmptyObject } from './utils';
+import useStyle from '../components/use-style';
 
 // Defining empty array here instead of inline avoids unnecessary re-renders of
 // color control.
@@ -49,7 +51,21 @@ export function BorderColorEdit( props ) {
 	const disableCustomColors = ! useSetting( 'color.custom' );
 	const disableCustomGradients = ! useSetting( 'color.customGradient' );
 
+	const { style: borderStyle } = style?.border || {};
+	const defaultBorderStyle = useStyle( [ 'border', 'style' ] );
+	const defaultBorderColor = useStyle( [ 'border', 'color' ] );
+
+	const [ colorValue, setColorValue ] = useState(
+		getColorObjectByAttributeValues(
+			colors,
+			borderColor,
+			style?.border?.color
+		)?.color
+	);
+
 	const onChangeColor = ( value ) => {
+		setColorValue( value );
+
 		const colorObject = getColorObjectByColorValue( colors, value );
 		const newStyle = {
 			...style,
@@ -62,6 +78,15 @@ export function BorderColorEdit( props ) {
 		// If empty slug, ensure undefined to remove attribute.
 		const newNamedColor = colorObject?.slug ? colorObject.slug : undefined;
 
+		if ( value && borderStyle === undefined ) {
+			// If a border color is selected, make sure the style property is selected
+			// so that the user can get immediate visual feedback. Set style to the default
+			// style if it exists, or set it to solid.
+			newStyle.border.style = defaultBorderStyle
+				? defaultBorderStyle
+				: 'solid';
+		}
+
 		setAttributes( {
 			style: cleanEmptyObject( newStyle ),
 			borderColor: newNamedColor,
@@ -71,7 +96,7 @@ export function BorderColorEdit( props ) {
 	return (
 		<ColorGradientControl
 			label={ __( 'Color' ) }
-			value={ borderColor || style?.border?.color }
+			colorValue={ colorValue || defaultBorderColor }
 			colors={ colors }
 			gradients={ undefined }
 			disableCustomColors={ disableCustomColors }

@@ -3,6 +3,7 @@
  */
 import BorderRadiusControl from '../components/border-radius-control';
 import { cleanEmptyObject } from './utils';
+import useStyle from '../components/use-style';
 
 /**
  * Inspector control panel containing the border radius related configuration.
@@ -17,6 +18,8 @@ export function BorderRadiusEdit( props ) {
 		setAttributes,
 	} = props;
 
+	const defaultBorderRadius = useStyle( [ 'border', 'radius' ] );
+
 	const onChange = ( newRadius ) => {
 		let newStyle = {
 			...style,
@@ -36,6 +39,7 @@ export function BorderRadiusEdit( props ) {
 	return (
 		<BorderRadiusControl
 			values={ style?.border?.radius }
+			defaults={ defaultBorderRadius }
 			onChange={ onChange }
 		/>
 	);

@@ -3,6 +3,7 @@
  */
 import BorderStyleControl from '../components/border-style-control';
 import { cleanEmptyObject } from './utils';
+import useStyle from '../components/use-style';
 
 /**
  * Inspector control for configuring border style property.
@@ -17,6 +18,8 @@ export const BorderStyleEdit = ( props ) => {
 		setAttributes,
 	} = props;
 
+	const defaultBorderStyle = useStyle( [ 'border', 'style' ] );
+
 	const onChange = ( newBorderStyle ) => {
 		const newStyleAttributes = {
 			...style,
@@ -31,7 +34,7 @@ export const BorderStyleEdit = ( props ) => {
 
 	return (
 		<BorderStyleControl
-			value={ style?.border?.style }
+			value={ style?.border?.style || defaultBorderStyle }
 			onChange={ onChange }
 		/>
 	);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -147,3 +147,4 @@ export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursi

		export { default as BlockEditorProvider } from './provider';
		export { default as useSetting } from './use-setting';
		export { default as __experimentalUseStyle } from './use-style';