@wordpress/block-editor 11.2.0 → 11.3.0

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

@@ -0,0 +1,373 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import { getTypographyFontSizeValue } from './typography-utils';
+
+/* Supporting data. */
+export const ROOT_BLOCK_NAME = 'root';
+export const ROOT_BLOCK_SELECTOR = 'body';
+export const ROOT_BLOCK_SUPPORTS = [
+	'background',
+	'backgroundColor',
+	'color',
+	'linkColor',
+	'buttonColor',
+	'fontFamily',
+	'fontSize',
+	'fontStyle',
+	'fontWeight',
+	'lineHeight',
+	'textDecoration',
+	'textTransform',
+	'padding',
+];
+
+export const PRESET_METADATA = [
+	{
+		path: [ 'color', 'palette' ],
+		valueKey: 'color',
+		cssVarInfix: 'color',
+		classes: [
+			{ classSuffix: 'color', propertyName: 'color' },
+			{
+				classSuffix: 'background-color',
+				propertyName: 'background-color',
+			},
+			{
+				classSuffix: 'border-color',
+				propertyName: 'border-color',
+			},
+		],
+	},
+	{
+		path: [ 'color', 'gradients' ],
+		valueKey: 'gradient',
+		cssVarInfix: 'gradient',
+		classes: [
+			{
+				classSuffix: 'gradient-background',
+				propertyName: 'background',
+			},
+		],
+	},
+	{
+		path: [ 'color', 'duotone' ],
+		cssVarInfix: 'duotone',
+		valueFunc: ( { slug } ) => `url( '#wp-duotone-${ slug }' )`,
+		classes: [],
+	},
+	{
+		path: [ 'shadow', 'presets' ],
+		valueKey: 'shadow',
+		cssVarInfix: 'shadow',
+		classes: [],
+	},
+	{
+		path: [ 'typography', 'fontSizes' ],
+		valueFunc: ( preset, { typography: typographySettings } ) =>
+			getTypographyFontSizeValue( preset, typographySettings ),
+		valueKey: 'size',
+		cssVarInfix: 'font-size',
+		classes: [ { classSuffix: 'font-size', propertyName: 'font-size' } ],
+	},
+	{
+		path: [ 'typography', 'fontFamilies' ],
+		valueKey: 'fontFamily',
+		cssVarInfix: 'font-family',
+		classes: [
+			{ classSuffix: 'font-family', propertyName: 'font-family' },
+		],
+	},
+	{
+		path: [ 'spacing', 'spacingSizes' ],
+		valueKey: 'size',
+		cssVarInfix: 'spacing',
+		valueFunc: ( { size } ) => size,
+		classes: [],
+	},
+];
+
+export const STYLE_PATH_TO_CSS_VAR_INFIX = {
+	'color.background': 'color',
+	'color.text': 'color',
+	'elements.link.color.text': 'color',
+	'elements.link.:hover.color.text': 'color',
+	'elements.link.typography.fontFamily': 'font-family',
+	'elements.link.typography.fontSize': 'font-size',
+	'elements.button.color.text': 'color',
+	'elements.button.color.background': 'color',
+	'elements.button.typography.fontFamily': 'font-family',
+	'elements.button.typography.fontSize': 'font-size',
+	'elements.heading.color': 'color',
+	'elements.heading.color.background': 'color',
+	'elements.heading.typography.fontFamily': 'font-family',
+	'elements.heading.gradient': 'gradient',
+	'elements.heading.color.gradient': 'gradient',
+	'elements.h1.color': 'color',
+	'elements.h1.color.background': 'color',
+	'elements.h1.typography.fontFamily': 'font-family',
+	'elements.h1.color.gradient': 'gradient',
+	'elements.h2.color': 'color',
+	'elements.h2.color.background': 'color',
+	'elements.h2.typography.fontFamily': 'font-family',
+	'elements.h2.color.gradient': 'gradient',
+	'elements.h3.color': 'color',
+	'elements.h3.color.background': 'color',
+	'elements.h3.typography.fontFamily': 'font-family',
+	'elements.h3.color.gradient': 'gradient',
+	'elements.h4.color': 'color',
+	'elements.h4.color.background': 'color',
+	'elements.h4.typography.fontFamily': 'font-family',
+	'elements.h4.color.gradient': 'gradient',
+	'elements.h5.color': 'color',
+	'elements.h5.color.background': 'color',
+	'elements.h5.typography.fontFamily': 'font-family',
+	'elements.h5.color.gradient': 'gradient',
+	'elements.h6.color': 'color',
+	'elements.h6.color.background': 'color',
+	'elements.h6.typography.fontFamily': 'font-family',
+	'elements.h6.color.gradient': 'gradient',
+	'color.gradient': 'gradient',
+	shadow: 'shadow',
+	'typography.fontSize': 'font-size',
+	'typography.fontFamily': 'font-family',
+};
+
+// A static list of block attributes that store global style preset slugs.
+export const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
+	'color.background': 'backgroundColor',
+	'color.text': 'textColor',
+	'color.gradient': 'gradient',
+	'typography.fontSize': 'fontSize',
+	'typography.fontFamily': 'fontFamily',
+};
+
+function findInPresetsBy(
+	features,
+	blockName,
+	presetPath,
+	presetProperty,
+	presetValueValue
+) {
+	// Block presets take priority above root level presets.
+	const orderedPresetsByOrigin = [
+		get( features, [ 'blocks', blockName, ...presetPath ] ),
+		get( features, presetPath ),
+	];
+
+	for ( const presetByOrigin of orderedPresetsByOrigin ) {
+		if ( presetByOrigin ) {
+			// Preset origins ordered by priority.
+			const origins = [ 'custom', 'theme', 'default' ];
+			for ( const origin of origins ) {
+				const presets = presetByOrigin[ origin ];
+				if ( presets ) {
+					const presetObject = presets.find(
+						( preset ) =>
+							preset[ presetProperty ] === presetValueValue
+					);
+					if ( presetObject ) {
+						if ( presetProperty === 'slug' ) {
+							return presetObject;
+						}
+						// If there is a highest priority preset with the same slug but different value the preset we found was overwritten and should be ignored.
+						const highestPresetObjectWithSameSlug = findInPresetsBy(
+							features,
+							blockName,
+							presetPath,
+							'slug',
+							presetObject.slug
+						);
+						if (
+							highestPresetObjectWithSameSlug[
+								presetProperty
+							] === presetObject[ presetProperty ]
+						) {
+							return presetObject;
+						}
+						return undefined;
+					}
+				}
+			}
+		}
+	}
+}
+
+export function getPresetVariableFromValue(
+	features,
+	blockName,
+	variableStylePath,
+	presetPropertyValue
+) {
+	if ( ! presetPropertyValue ) {
+		return presetPropertyValue;
+	}
+
+	const cssVarInfix = STYLE_PATH_TO_CSS_VAR_INFIX[ variableStylePath ];
+
+	const metadata = PRESET_METADATA.find(
+		( data ) => data.cssVarInfix === cssVarInfix
+	);
+
+	if ( ! metadata ) {
+		// The property doesn't have preset data
+		// so the value should be returned as it is.
+		return presetPropertyValue;
+	}
+	const { valueKey, path } = metadata;
+
+	const presetObject = findInPresetsBy(
+		features,
+		blockName,
+		path,
+		valueKey,
+		presetPropertyValue
+	);
+
+	if ( ! presetObject ) {
+		// Value wasn't found in the presets,
+		// so it must be a custom value.
+		return presetPropertyValue;
+	}
+
+	return `var:preset|${ cssVarInfix }|${ presetObject.slug }`;
+}
+
+function getValueFromPresetVariable(
+	features,
+	blockName,
+	variable,
+	[ presetType, slug ]
+) {
+	const metadata = PRESET_METADATA.find(
+		( data ) => data.cssVarInfix === presetType
+	);
+	if ( ! metadata ) {
+		return variable;
+	}
+
+	const presetObject = findInPresetsBy(
+		features.settings,
+		blockName,
+		metadata.path,
+		'slug',
+		slug
+	);
+
+	if ( presetObject ) {
+		const { valueKey } = metadata;
+		const result = presetObject[ valueKey ];
+		return getValueFromVariable( features, blockName, result );
+	}
+
+	return variable;
+}
+
+function getValueFromCustomVariable( features, blockName, variable, path ) {
+	const result =
+		get( features.settings, [ 'blocks', blockName, 'custom', ...path ] ) ??
+		get( features.settings, [ 'custom', ...path ] );
+	if ( ! result ) {
+		return variable;
+	}
+	// A variable may reference another variable so we need recursion until we find the value.
+	return getValueFromVariable( features, blockName, result );
+}
+
+/**
+ * Attempts to fetch the value of a theme.json CSS variable.
+ *
+ * @param {Object}   features  GlobalStylesContext config, e.g., user, base or merged. Represents the theme.json tree.
+ * @param {string}   blockName The name of a block as represented in the styles property. E.g., 'root' for root-level, and 'core/${blockName}' for blocks.
+ * @param {string|*} variable  An incoming style value. A CSS var value is expected, but it could be any value.
+ * @return {string|*|{ref}} The value of the CSS var, if found. If not found, the passed variable argument.
+ */
+export function getValueFromVariable( features, blockName, variable ) {
+	if ( ! variable || typeof variable !== 'string' ) {
+		if ( variable?.ref && typeof variable?.ref === 'string' ) {
+			const refPath = variable.ref.split( '.' );
+			variable = get( features, refPath );
+			// Presence of another ref indicates a reference to another dynamic value.
+			// Pointing to another dynamic value is not supported.
+			if ( ! variable || !! variable?.ref ) {
+				return variable;
+			}
+		} else {
+			return variable;
+		}
+	}
+	const USER_VALUE_PREFIX = 'var:';
+	const THEME_VALUE_PREFIX = 'var(--wp--';
+	const THEME_VALUE_SUFFIX = ')';
+
+	let parsedVar;
+
+	if ( variable.startsWith( USER_VALUE_PREFIX ) ) {
+		parsedVar = variable.slice( USER_VALUE_PREFIX.length ).split( '|' );
+	} else if (
+		variable.startsWith( THEME_VALUE_PREFIX ) &&
+		variable.endsWith( THEME_VALUE_SUFFIX )
+	) {
+		parsedVar = variable
+			.slice( THEME_VALUE_PREFIX.length, -THEME_VALUE_SUFFIX.length )
+			.split( '--' );
+	} else {
+		// We don't know how to parse the value: either is raw of uses complex CSS such as `calc(1px * var(--wp--variable) )`
+		return variable;
+	}
+
+	const [ type, ...path ] = parsedVar;
+	if ( type === 'preset' ) {
+		return getValueFromPresetVariable(
+			features,
+			blockName,
+			variable,
+			path
+		);
+	}
+	if ( type === 'custom' ) {
+		return getValueFromCustomVariable(
+			features,
+			blockName,
+			variable,
+			path
+		);
+	}
+	return variable;
+}
+
+/**
+ * Function that scopes a selector with another one. This works a bit like
+ * SCSS nesting except the `&` operator isn't supported.
+ *
+ * @example
+ * ```js
+ * const scope = '.a, .b .c';
+ * const selector = '> .x, .y';
+ * const merged = scopeSelector( scope, selector );
+ * // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
+ * ```
+ *
+ * @param {string} scope    Selector to scope to.
+ * @param {string} selector Original selector.
+ *
+ * @return {string} Scoped selector.
+ */
+export function scopeSelector( scope, selector ) {
+	const scopes = scope.split( ',' );
+	const selectors = selector.split( ',' );
+
+	const selectorsScoped = [];
+	scopes.forEach( ( outer ) => {
+		selectors.forEach( ( inner ) => {
+			selectorsScoped.push( `${ outer.trim() } ${ inner.trim() }` );
+		} );
+	} );
+
+	return selectorsScoped.join( ', ' );
+}

package/src/components/height-control/README.md

@@ -0,0 +1,55 @@
+# Height Control
+
+The `HeightControl` component adds a linked unit control and slider component for controlling the height of a block within the block editor. It supports passing a label, and is used for controlling the minimum height dimensions of Group blocks.
+
+_Note:_ It is worth noting that the minimum height option is an opt-in feature. Themes need to declare support for it before it'll be available, and a convenient way to do that is via opting in to the [appearanceTools](/docs/how-to-guides/themes/theme-json/#opt-in-into-ui-controls) UI controls.
+
+## Table of contents
+
+1. [Development guidelines](#development-guidelines)
+2. [Related components](#related-components)
+
+## Development guidelines
+
+### Usage
+
+Renders the markup for height control component, to be used in the block inspector.
+
+```jsx
+import { HeightControl } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+
+const MyLineHeightControl = () => (
+	const [ value, setValue ] = useState();
+	<HeightControl
+		label={ 'My Height Control' }
+		onChange={ setValue }
+		value={ value }
+	/>
+);
+```
+
+### Props
+
+#### `value`
+
+-   **Type:** `String` or `Number` or `Undefined`
+
+The value of the current height.
+
+#### `onChange`
+
+-   **Type:** `Function`
+
+A callback function that handles the application of the height value.
+
+#### `label`
+
+-   **Type:** `String`
+-   **Default:** `'Height'`
+
+A label for the height control. This is useful when using the height control for a feature that is controlled in the same way as height, but requires a different label. For example, "Min. height".
+
+## Related components
+
+Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.

package/src/components/height-control/index.js

@@ -28,9 +28,21 @@ const RANGE_CONTROL_CUSTOM_SETTINGS = {
 	rem: { max: 50, step: 0.1 },
 };
 
+/**
+ * HeightControl renders a linked unit control and range control for adjusting the height of a block.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/height-control/README.md
+ *
+ * @param {Object}                     props
+ * @param {?string}                    props.label    A label for the control.
+ * @param {( value: string ) => void } props.onChange Called when the height changes.
+ * @param {string}                     props.value    The current height value.
+ *
+ * @return {WPComponent} The component to be rendered.
+ */
 export default function HeightControl( {
-	onChange,
 	label = __( 'Height' ),
+	onChange,
 	value,
 } ) {
 	const customRangeValue = parseFloat( value );

package/src/components/image-editor/constants.js

@@ -1,6 +1,6 @@
 export const MIN_ZOOM = 100;
 export const MAX_ZOOM = 300;
 export const POPOVER_PROPS = {
-	position: 'bottom right',
+	placement: 'bottom-start',
 	variant: 'toolbar',
 };

package/src/components/image-editor/context.js

@@ -18,19 +18,15 @@ export default function ImageEditingProvider( {
 	url,
 	naturalWidth,
 	naturalHeight,
-	isEditing,
 	onFinishEditing,
 	onSaveImage,
 	children,
 } ) {
-	const transformImage = useTransformImage(
-		{
-			url,
-			naturalWidth,
-			naturalHeight,
-		},
-		isEditing
-	);
+	const transformImage = useTransformImage( {
+		url,
+		naturalWidth,
+		naturalHeight,
+	} );
 
 	const saveImage = useSaveImage( {
 		id,

package/src/components/image-editor/cropper.js

@@ -66,7 +66,9 @@ export default function ImageCropper( {
 				crop={ position }
 				zoom={ zoom / 100 }
 				aspect={ aspect }
-				onCropChange={ setPosition }
+				onCropChange={ ( pos ) => {
+					setPosition( pos );
+				} }
 				onCropComplete={ ( newCropPercent ) => {
 					setCrop( newCropPercent );
 				} }

package/src/components/image-editor/index.js

@@ -7,6 +7,7 @@ import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
  * Internal dependencies
  */
 import BlockControls from '../block-controls';
+import ImageEditingProvider from './context';
 import Cropper from './cropper';
 import ZoomDropdown from './zoom-dropdown';
 import AspectRatioDropdown from './aspect-ratio-dropdown';
@@ -14,16 +15,26 @@ import RotationButton from './rotation-button';
 import FormControls from './form-controls';
 
 export default function ImageEditor( {
+	id,
 	url,
 	width,
 	height,
 	clientWidth,
 	naturalHeight,
 	naturalWidth,
+	onSaveImage,
+	onFinishEditing,
 	borderProps,
 } ) {
 	return (
-		<>
+		<ImageEditingProvider
+			id={ id }
+			url={ url }
+			naturalWidth={ naturalWidth }
+			naturalHeight={ naturalHeight }
+			onSaveImage={ onSaveImage }
+			onFinishEditing={ onFinishEditing }
+		>
 			<Cropper
 				borderProps={ borderProps }
 				url={ url }
@@ -47,8 +58,6 @@ export default function ImageEditor( {
 					<FormControls />
 				</ToolbarGroup>
 			</BlockControls>
-		</>
+		</ImageEditingProvider>
 	);
 }
-
-export { default as ImageEditingProvider } from './context';

package/src/components/image-editor/use-transform-image.js

@@ -1,47 +1,35 @@
 /**
  * WordPress dependencies
  */
-import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
+import { useCallback, useMemo, useState } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 
-function useTransformState( { url, naturalWidth, naturalHeight } ) {
+export default function useTransformImage( {
+	url,
+	naturalWidth,
+	naturalHeight,
+} ) {
 	const [ editedUrl, setEditedUrl ] = useState();
 	const [ crop, setCrop ] = useState();
 	const [ position, setPosition ] = useState( { x: 0, y: 0 } );
-	const [ zoom, setZoom ] = useState();
-	const [ rotation, setRotation ] = useState();
-	const [ aspect, setAspect ] = useState();
-	const [ defaultAspect, setDefaultAspect ] = useState();
-
-	const initializeTransformValues = useCallback( () => {
-		setPosition( { x: 0, y: 0 } );
-		setZoom( 100 );
-		setRotation( 0 );
-		setAspect( naturalWidth / naturalHeight );
-		setDefaultAspect( naturalWidth / naturalHeight );
-	}, [
-		naturalWidth,
-		naturalHeight,
-		setPosition,
-		setZoom,
-		setRotation,
-		setAspect,
-		setDefaultAspect,
-	] );
+	const [ zoom, setZoom ] = useState( 100 );
+	const [ rotation, setRotation ] = useState( 0 );
+	const defaultAspect = naturalWidth / naturalHeight;
+	const [ aspect, setAspect ] = useState( defaultAspect );
 
 	const rotateClockwise = useCallback( () => {
 		const angle = ( rotation + 90 ) % 360;
 
-		let naturalAspectRatio = naturalWidth / naturalHeight;
+		let naturalAspectRatio = defaultAspect;
 
 		if ( rotation % 180 === 90 ) {
-			naturalAspectRatio = naturalHeight / naturalWidth;
+			naturalAspectRatio = 1 / defaultAspect;
 		}
 
 		if ( angle === 0 ) {
 			setEditedUrl();
 			setRotation( angle );
-			setAspect( naturalWidth / naturalHeight );
+			setAspect( defaultAspect );
 			setPosition( {
 				x: -( position.y * naturalAspectRatio ),
 				y: position.x * naturalAspectRatio,
@@ -100,15 +88,7 @@ function useTransformState( { url, naturalWidth, naturalHeight } ) {
 		if ( typeof imgCrossOrigin === 'string' ) {
 			el.crossOrigin = imgCrossOrigin;
 		}
-	}, [
-		rotation,
-		naturalWidth,
-		naturalHeight,
-		setEditedUrl,
-		setRotation,
-		setAspect,
-		setPosition,
-	] );
+	}, [ rotation, defaultAspect ] );
 
 	return useMemo(
 		() => ( {
@@ -126,37 +106,16 @@ function useTransformState( { url, naturalWidth, naturalHeight } ) {
 			aspect,
 			setAspect,
 			defaultAspect,
-			initializeTransformValues,
 		} ),
 		[
 			editedUrl,
-			setEditedUrl,
 			crop,
-			setCrop,
 			position,
-			setPosition,
 			zoom,
-			setZoom,
 			rotation,
-			setRotation,
 			rotateClockwise,
 			aspect,
-			setAspect,
 			defaultAspect,
-			initializeTransformValues,
 		]
 	);
 }
-
-export default function useTransformImage( imageProperties, isEditing ) {
-	const transformState = useTransformState( imageProperties );
-	const { initializeTransformValues } = transformState;
-
-	useEffect( () => {
-		if ( isEditing ) {
-			initializeTransformValues();
-		}
-	}, [ isEditing, initializeTransformValues ] );
-
-	return transformState;
-}

package/src/components/image-size-control/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -39,7 +34,7 @@ export default function ImageSizeControl( {
 
 	return (
 		<>
-			{ ! isEmpty( imageSizeOptions ) && (
+			{ imageSizeOptions && imageSizeOptions.length > 0 && (
 				<SelectControl
 					__nextHasNoMarginBottom
 					label={ __( 'Image size' ) }

package/src/components/index.js

@@ -53,11 +53,8 @@ export { default as __experimentalColorGradientControl } from './colors-gradient
 export { default as __experimentalColorGradientSettingsDropdown } from './colors-gradients/dropdown';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
 export { default as __experimentalUseMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';
-export { default as __experimentalHeightControl } from './height-control';
-export {
-	default as __experimentalImageEditor,
-	ImageEditingProvider as __experimentalImageEditingProvider,
-} from './image-editor';
+export { default as HeightControl } from './height-control';
+export { default as __experimentalImageEditor } from './image-editor';
 export { default as __experimentalImageSizeControl } from './image-size-control';
 export { default as InnerBlocks, useInnerBlocksProps } from './inner-blocks';
 export {
@@ -74,7 +71,6 @@ export { default as __experimentalLinkControlSearchResults } from './link-contro
 export { default as __experimentalLinkControlSearchItem } from './link-control/search-item';
 export { default as LineHeightControl } from './line-height-control';
 export { default as __experimentalListView } from './list-view';
-export { default as __experimentalOffCanvasEditor } from './off-canvas-editor';
 export { default as MediaReplaceFlow } from './media-replace-flow';
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as MediaUpload } from './media-upload';