@wordpress/block-editor 12.4.0 → 12.6.0

package/src/components/dimensions-tool/width-height-tool.js

@@ -0,0 +1,113 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const SingleColumnToolsPanelItem = styled( ToolsPanelItem )`
+	grid-column: span 1;
+`;
+
+/**
+ * @typedef {import('@wordpress/components/build-types/unit-control/types').WPUnitControlUnit} WPUnitControlUnit
+ */
+
+/**
+ * @typedef {Object} WidthHeightToolValue
+ * @property {string} [width]  Width CSS value.
+ * @property {string} [height] Height CSS value.
+ */
+
+/**
+ * @callback WidthHeightToolOnChange
+ * @param {WidthHeightToolValue} nextValue Next dimensions value.
+ * @return {void}
+ */
+
+/**
+ * @typedef {Object} WidthHeightToolProps
+ * @property {string}                  [panelId]          ID of the panel that contains the controls.
+ * @property {WidthHeightToolValue}    [value]            Current dimensions values.
+ * @property {WidthHeightToolOnChange} [onChange]         Callback to update the dimensions values.
+ * @property {WPUnitControlUnit[]}     [units]            Units options.
+ * @property {boolean}                 [isShownByDefault] Whether the panel is shown by default.
+ */
+
+/**
+ * Component that renders controls to edit the dimensions of an image or container.
+ *
+ * @param {WidthHeightToolProps} props The component props.
+ *
+ * @return {import('@wordpress/element').WPElement} The width and height tool.
+ */
+export default function WidthHeightTool( {
+	panelId,
+	value = {},
+	onChange = () => {},
+	units,
+	isShownByDefault = true,
+} ) {
+	// null, undefined, and 'auto' all represent the default value.
+	const width = value.width === 'auto' ? '' : value.width ?? '';
+	const height = value.height === 'auto' ? '' : value.height ?? '';
+
+	const onDimensionChange = ( dimension ) => ( nextDimension ) => {
+		const nextValue = { ...value };
+		// Empty strings or undefined may be passed and both represent removing the value.
+		if ( ! nextDimension ) {
+			delete nextValue[ dimension ];
+		} else {
+			nextValue[ dimension ] = nextDimension;
+		}
+		onChange( nextValue );
+	};
+
+	return (
+		<>
+			<SingleColumnToolsPanelItem
+				label={ __( 'Width' ) }
+				isShownByDefault={ isShownByDefault }
+				hasValue={ () => width !== '' }
+				onDeselect={ onDimensionChange( 'width' ) }
+				panelId={ panelId }
+			>
+				<UnitControl
+					label={ __( 'Width' ) }
+					placeholder={ __( 'Auto' ) }
+					labelPosition="top"
+					units={ units }
+					min={ 0 }
+					value={ width }
+					onChange={ onDimensionChange( 'width' ) }
+					size={ '__unstable-large' }
+				/>
+			</SingleColumnToolsPanelItem>
+			<SingleColumnToolsPanelItem
+				label={ __( 'Height' ) }
+				isShownByDefault={ isShownByDefault }
+				hasValue={ () => height !== '' }
+				onDeselect={ onDimensionChange( 'height' ) }
+				panelId={ panelId }
+			>
+				<UnitControl
+					label={ __( 'Height' ) }
+					placeholder={ __( 'Auto' ) }
+					labelPosition="top"
+					units={ units }
+					min={ 0 }
+					value={ height }
+					onChange={ onDimensionChange( 'height' ) }
+					size={ '__unstable-large' }
+				/>
+			</SingleColumnToolsPanelItem>
+		</>
+	);
+}

package/src/components/font-family/README.md

@@ -0,0 +1,71 @@
+# FontFamilyControl
+
+FontFamilyControl is a React component that renders a UI that allows users to select a font family.
+The component renders a user interface that allows the user to select from a set of predefined font families as defined by the `typography.fontFamilies` presets.
+Optionally, you can provide a `fontFamilies` prop that overrides the predefined font families.
+
+![FontFamilyControl component preview](https://i.imgur.com/blS5iA3.png)
+
+## Usage
+
+```jsx
+import { FontFamilyControl } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+// ...
+
+const MyFontFamilyControl = () => {
+	const [ fontFamily, setFontFamily ] = useState( '' );
+
+	return (
+		<FontFamilyControl
+			value={ fontFamily }
+			onChange={ ( newFontFamily ) => {
+				setFontFamily( newFontFamily );
+			} }
+		/>
+	);
+};
+
+/// ...
+
+<MyFontFamilyControl />
+```
+
+## Props
+
+The component accepts the following props:
+
+### onChange
+
+A function that receives the new font family value.
+If onChange is called without any parameter, it should reset the value, attending to what reset means in that context, e.g., set the font family to undefined or set the font family a starting value.
+
+- Type: `function`
+- Required: Yes
+
+### fontFamilies
+
+A user-provided set of font families.
+Optional, used in case we want to override the predefined ones coming from presets.
+
+- Type: `Array`
+- Required: No
+
+The font families are provided as an array of objects with the following schema:
+
+| Property   | Description                               | Type   |
+| ---------- | ----------------------------------------- | ------ |
+| fontFamily | Font family, as used in CSS.              | string |
+| name       | Optional display name of the font family. | string |
+
+### value
+
+The current font family value.
+
+- Type: `String`
+- Required: No
+- Default: ''
+
+The rest of the props are passed down to the underlying `<SelectControl />` instance.

package/src/components/global-styles/color-panel.js

@@ -35,7 +35,7 @@ export function useHasColorPanel( settings ) {
 	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 	const hasLinkPanel = useHasLinkPanel( settings );
 	const hasHeadingPanel = useHasHeadingPanel( settings );
-	const hasButtonPanel = useHasHeadingPanel( settings );
+	const hasButtonPanel = useHasButtonPanel( settings );
 	const hasCaptionPanel = useHasCaptionPanel( settings );
 
 	return (
@@ -328,22 +328,6 @@ export default function ColorPanel( {
 			: gradientValue;
 	};
 
-	// Text Color
-	const showTextPanel = useHasTextPanel( settings );
-	const textColor = decodeValue( inheritedValue?.color?.text );
-	const userTextColor = decodeValue( value?.color?.text );
-	const hasTextColor = () => !! userTextColor;
-	const setTextColor = ( newColor ) => {
-		onChange(
-			setImmutably(
-				value,
-				[ 'color', 'text' ],
-				encodeColorValue( newColor )
-			)
-		);
-	};
-	const resetTextColor = () => setTextColor( undefined );
-
 	// BackgroundColor
 	const showBackgroundPanel = useHasBackgroundPanel( settings );
 	const backgroundColor = decodeValue( inheritedValue?.color?.background );
@@ -424,6 +408,29 @@ export default function ColorPanel( {
 		onChange( newValue );
 	};
 
+	// Text Color
+	const showTextPanel = useHasTextPanel( settings );
+	const textColor = decodeValue( inheritedValue?.color?.text );
+	const userTextColor = decodeValue( value?.color?.text );
+	const hasTextColor = () => !! userTextColor;
+	const setTextColor = ( newColor ) => {
+		let changedObject = setImmutably(
+			value,
+			[ 'color', 'text' ],
+			encodeColorValue( newColor )
+		);
+		if ( textColor === linkColor ) {
+			changedObject = setImmutably(
+				changedObject,
+				[ 'elements', 'link', 'color', 'text' ],
+				encodeColorValue( newColor )
+			);
+		}
+
+		onChange( changedObject );
+	};
+	const resetTextColor = () => setTextColor( undefined );
+
 	// Elements
 	const elements = [
 		{

package/src/components/global-styles/dimensions-panel.js

@@ -207,18 +207,24 @@ export default function DimensionsPanel( {
 	// in global styles but not in block inspector.
 	includeLayoutControls = false,
 } ) {
+	const { dimensions, spacing } = settings;
+
 	const decodeValue = ( rawValue ) => {
 		if ( rawValue && typeof rawValue === 'object' ) {
 			return Object.keys( rawValue ).reduce( ( acc, key ) => {
 				acc[ key ] = getValueFromVariable(
-					{ settings },
+					{ settings: { dimensions, spacing } },
 					'',
 					rawValue[ key ]
 				);
 				return acc;
 			}, {} );
 		}
-		return getValueFromVariable( { settings }, '', rawValue );
+		return getValueFromVariable(
+			{ settings: { dimensions, spacing } },
+			'',
+			rawValue
+		);
 	};
 
 	const showSpacingPresetsControl = useHasSpacingPresets( settings );

package/src/components/global-styles/filters-panel.js

@@ -22,7 +22,7 @@ import {
 	Flex,
 	FlexItem,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
 
 /**
@@ -77,7 +77,7 @@ function FiltersToolsPanel( {
 
 	return (
 		<ToolsPanel
-			label={ __( 'Filters' ) }
+			label={ _x( 'Filters', 'Name for applying graphical effects' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
 		>

package/src/components/global-styles/get-block-css-selector.js

@@ -1,12 +1,8 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * Internal dependencies
  */
 import { scopeSelector } from './utils';
+import { getValueFromObjectPath } from '../../utils/object';
 
 /**
  * Determine the CSS selector for the block type and target provided, returning
@@ -69,15 +65,15 @@ export function getBlockCSSSelector(
 		if ( hasSelectors ) {
 			// Get selector from either `feature.root` or shorthand path.
 			const featureSelector =
-				get( selectors, `${ path }.root`, null ) ||
-				get( selectors, path, null );
+				getValueFromObjectPath( selectors, `${ path }.root`, null ) ||
+				getValueFromObjectPath( selectors, path, null );
 
 			// Return feature selector if found or any available fallback.
 			return featureSelector || fallbackSelector;
 		}
 
 		// Try getting old experimental supports selector value.
-		const featureSelector = get(
+		const featureSelector = getValueFromObjectPath(
 			supports,
 			`${ path }.__experimentalSelector`,
 			null
@@ -98,7 +94,7 @@ export function getBlockCSSSelector(
 
 	// Use selectors API if available.
 	if ( hasSelectors ) {
-		subfeatureSelector = get( selectors, path, null );
+		subfeatureSelector = getValueFromObjectPath( selectors, path, null );
 	}
 
 	// Only return if we have a subfeature selector.

package/src/components/global-styles/hooks.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import fastDeepEqual from 'fast-deep-equal/es6';
-import { get, set } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,6 +15,7 @@ import { _x } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { getValueFromVariable, getPresetVariableFromValue } from './utils';
+import { getValueFromObjectPath, setImmutably } from '../../utils/object';
 import { GlobalStylesContext } from './context';
 import { unlock } from '../../lock-unlock';
 
@@ -71,6 +71,7 @@ const VALID_SETTINGS = [
 	'typography.textColumns',
 	'typography.textDecoration',
 	'typography.textTransform',
+	'typography.writingMode',
 ];
 
 export const useGlobalStylesReset = () => {
@@ -102,20 +103,21 @@ export function useGlobalSetting( propertyPath, blockName, source = 'all' ) {
 
 		if ( propertyPath ) {
 			return (
-				get( configToUse, contextualPath ) ??
-				get( configToUse, globalPath )
+				getValueFromObjectPath( configToUse, contextualPath ) ??
+				getValueFromObjectPath( configToUse, globalPath )
 			);
 		}
 
-		const result = {};
+		let result = {};
 		VALID_SETTINGS.forEach( ( setting ) => {
 			const value =
-				get(
+				getValueFromObjectPath(
 					configToUse,
 					`settings${ appendedBlockPath }.${ setting }`
-				) ?? get( configToUse, `settings.${ setting }` );
+				) ??
+				getValueFromObjectPath( configToUse, `settings.${ setting }` );
 			if ( value ) {
-				set( result, setting, value );
+				result = setImmutably( result, setting.split( '.' ), value );
 			}
 		} );
 		return result;
@@ -129,13 +131,9 @@ export function useGlobalSetting( propertyPath, blockName, source = 'all' ) {
 	] );
 
 	const setSetting = ( newValue ) => {
-		setUserConfig( ( currentConfig ) => {
-			// Deep clone `currentConfig` to avoid mutating it later.
-			const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
-			set( newUserConfig, contextualPath, newValue );
-
-			return newUserConfig;
-		} );
+		setUserConfig( ( currentConfig ) =>
+			setImmutably( currentConfig, contextualPath.split( '.' ), newValue )
+		);
 	};
 
 	return [ settingValue, setSetting ];
@@ -159,12 +157,10 @@ export function useGlobalStyle(
 		: `styles.blocks.${ blockName }${ appendedPath }`;
 
 	const setStyle = ( newValue ) => {
-		setUserConfig( ( currentConfig ) => {
-			// Deep clone `currentConfig` to avoid mutating it later.
-			const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
-			set(
-				newUserConfig,
-				finalPath,
+		setUserConfig( ( currentConfig ) =>
+			setImmutably(
+				currentConfig,
+				finalPath.split( '.' ),
 				shouldDecodeEncode
 					? getPresetVariableFromValue(
 							mergedConfig.settings,
@@ -173,27 +169,26 @@ export function useGlobalStyle(
 							newValue
 					  )
 					: newValue
-			);
-			return newUserConfig;
-		} );
+			)
+		);
 	};
 
 	let rawResult, result;
 	switch ( source ) {
 		case 'all':
-			rawResult = get( mergedConfig, finalPath );
+			rawResult = getValueFromObjectPath( mergedConfig, finalPath );
 			result = shouldDecodeEncode
 				? getValueFromVariable( mergedConfig, blockName, rawResult )
 				: rawResult;
 			break;
 		case 'user':
-			rawResult = get( userConfig, finalPath );
+			rawResult = getValueFromObjectPath( userConfig, finalPath );
 			result = shouldDecodeEncode
 				? getValueFromVariable( mergedConfig, blockName, rawResult )
 				: rawResult;
 			break;
 		case 'base':
-			rawResult = get( baseConfig, finalPath );
+			rawResult = getValueFromObjectPath( baseConfig, finalPath );
 			result = shouldDecodeEncode
 				? getValueFromVariable( baseConfig, blockName, rawResult )
 				: rawResult;
@@ -292,6 +287,7 @@ export function useSettingsForBlockElement(
 			'letterSpacing',
 			'textTransform',
 			'textDecoration',
+			'writingMode',
 		].forEach( ( key ) => {
 			if ( ! supportedStyles.includes( key ) ) {
 				updatedSettings.typography = {

package/src/components/global-styles/typography-panel.js

@@ -19,6 +19,7 @@ import LineHeightControl from '../line-height-control';
 import LetterSpacingControl from '../letter-spacing-control';
 import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
+import WritingModeControl from '../writing-mode-control';
 import { getValueFromVariable } from './utils';
 import { setImmutably } from '../../utils/object';
 
@@ -32,6 +33,7 @@ export function useHasTypographyPanel( settings ) {
 	const hasLetterSpacing = useHasLetterSpacingControl( settings );
 	const hasTextTransform = useHasTextTransformControl( settings );
 	const hasTextDecoration = useHasTextDecorationControl( settings );
+	const hasWritingMode = useHasWritingModeControl( settings );
 	const hasTextColumns = useHasTextColumnsControl( settings );
 	const hasFontSize = useHasFontSizeControl( settings );
 
@@ -43,6 +45,7 @@ export function useHasTypographyPanel( settings ) {
 		hasTextTransform ||
 		hasFontSize ||
 		hasTextDecoration ||
+		hasWritingMode ||
 		hasTextColumns
 	);
 }
@@ -103,10 +106,29 @@ function useHasTextDecorationControl( settings ) {
 	return settings?.typography?.textDecoration;
 }
 
+function useHasWritingModeControl( settings ) {
+	return settings?.typography?.writingMode;
+}
+
 function useHasTextColumnsControl( settings ) {
 	return settings?.typography?.textColumns;
 }
 
+function getUniqueFontSizesBySlug( settings ) {
+	const fontSizesPerOrigin = settings?.typography?.fontSizes ?? {};
+	const fontSizes = []
+		.concat( fontSizesPerOrigin?.custom ?? [] )
+		.concat( fontSizesPerOrigin?.theme ?? [] )
+		.concat( fontSizesPerOrigin.default ?? [] );
+
+	return fontSizes.reduce( ( acc, currentSize ) => {
+		if ( ! acc.some( ( { slug } ) => slug === currentSize.slug ) ) {
+			acc.push( currentSize );
+		}
+		return acc;
+	}, [] );
+}
+
 function TypographyToolsPanel( {
 	resetAllFilter,
 	onChange,
@@ -138,6 +160,7 @@ const DEFAULT_CONTROLS = {
 	letterSpacing: true,
 	textTransform: true,
 	textDecoration: true,
+	writingMode: true,
 	textColumns: true,
 };
 
@@ -181,11 +204,8 @@ export default function TypographyPanel( {
 	// Font Size
 	const hasFontSizeEnabled = useHasFontSizeControl( settings );
 	const disableCustomFontSizes = ! settings?.typography?.customFontSize;
-	const fontSizesPerOrigin = settings?.typography?.fontSizes ?? {};
-	const fontSizes = []
-		.concat( fontSizesPerOrigin?.custom ?? [] )
-		.concat( fontSizesPerOrigin?.theme ?? [] )
-		.concat( fontSizesPerOrigin.default ?? [] );
+	const fontSizes = getUniqueFontSizesBySlug( settings );
+
 	const fontSize = decodeValue( inheritedValue?.typography?.fontSize );
 	const setFontSize = ( newValue, metadata ) => {
 		const actualValue = !! metadata?.slug
@@ -310,6 +330,21 @@ export default function TypographyPanel( {
 	const hasTextDecoration = () => !! value?.typography?.textDecoration;
 	const resetTextDecoration = () => setTextDecoration( undefined );
 
+	// Text Orientation
+	const hasWritingModeControl = useHasWritingModeControl( settings );
+	const writingMode = decodeValue( inheritedValue?.typography?.writingMode );
+	const setWritingMode = ( newValue ) => {
+		onChange(
+			setImmutably(
+				value,
+				[ 'typography', 'writingMode' ],
+				newValue || undefined
+			)
+		);
+	};
+	const hasWritingMode = () => !! value?.typography?.writingMode;
+	const resetWritingMode = () => setWritingMode( undefined );
+
 	const resetAllFilter = useCallback( ( previousValue ) => {
 		return {
 			...previousValue,
@@ -456,6 +491,23 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ hasWritingModeControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Text orientation' ) }
+					hasValue={ hasWritingMode }
+					onDeselect={ resetWritingMode }
+					isShownByDefault={ defaultControls.writingMode }
+					panelId={ panelId }
+				>
+					<WritingModeControl
+						value={ writingMode }
+						onChange={ setWritingMode }
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					/>
+				</ToolsPanelItem>
+			) }
 			{ hasTextTransformControl && (
 				<ToolsPanelItem
 					label={ __( 'Letter case' ) }