@wordpress/block-editor 11.1.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/iframe/index.js

@@ -12,6 +12,7 @@ import {
 	forwardRef,
 	useMemo,
 	useReducer,
+	renderToString,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
@@ -20,6 +21,7 @@ import {
 	useRefEffect,
 } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -27,6 +29,7 @@ import { __experimentalStyleProvider as StyleProvider } from '@wordpress/compone
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useWritingFlow } from '../writing-flow';
 import { useCompatibilityStyles } from './use-compatibility-styles';
+import { store as blockEditorStore } from '../../store';
 
 /**
  * Bubbles some event types (keydown, keypress, and dragover) to parent document
@@ -97,20 +100,22 @@ async function loadScript( head, { id, src } ) {
 	} );
 }
 
-function Iframe(
-	{
-		contentRef,
-		children,
-		head,
-		tabIndex = 0,
-		assets,
-		scale = 1,
-		frameSize = 0,
-		readonly,
-		...props
-	},
-	ref
-) {
+function Iframe( {
+	contentRef,
+	children,
+	head,
+	tabIndex = 0,
+	scale = 1,
+	frameSize = 0,
+	readonly,
+	forwardedRef: ref,
+	...props
+} ) {
+	const assets = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().__unstableResolvedAssets,
+		[]
+	);
 	const [ , forceRender ] = useReducer( () => ( {} ) );
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
@@ -204,7 +209,7 @@ function Iframe(
 	}, [] );
 	const bodyRef = useMergeRefs( [ contentRef, clearerRef, writingFlowRef ] );
 
-	head = (
+	const styleAssets = (
 		<>
 			<style>{ 'html{height:auto!important;}body{margin:0}' }</style>
 			{ [ ...styles, ...neededCompatStyles ].map(
@@ -224,10 +229,16 @@ function Iframe(
 					);
 				}
 			) }
-			{ head }
 		</>
 	);
 
+	// Correct doctype is required to enable rendering in standards
+	// mode. Also preload the styles to avoid a flash of unstyled
+	// content.
+	const srcDoc = useMemo( () => {
+		return '<!doctype html>' + renderToString( styleAssets );
+	}, [] );
+
 	return (
 		<>
 			{ tabIndex >= 0 && before }
@@ -235,14 +246,17 @@ function Iframe(
 				{ ...props }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }
-				// Correct doctype is required to enable rendering in standards mode
-				srcDoc="<!doctype html>"
+				// Correct doctype is required to enable rendering in standards
+				// mode. Also preload the styles to avoid a flash of unstyled
+				// content.
+				srcDoc={ srcDoc }
 				title={ __( 'Editor canvas' ) }
 			>
 				{ iframeDocument &&
 					createPortal(
 						<>
 							<head ref={ headRef }>
+								{ styleAssets }
 								{ head }
 								<style>
 									{ `html { transition: background 5s; ${
@@ -286,4 +300,23 @@ function Iframe(
 	);
 }
 
-export default forwardRef( Iframe );
+function IframeIfReady( props, ref ) {
+	const isInitialised = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().__internalIsInitialized,
+		[]
+	);
+
+	// We shouldn't render the iframe until the editor settings are initialised.
+	// The initial settings are needed to get the styles for the srcDoc, which
+	// cannot be changed after the iframe is mounted. srcDoc is used to to set
+	// the initial iframe HTML, which is required to avoid a flash of unstyled
+	// content.
+	if ( ! isInitialised ) {
+		return null;
+	}
+
+	return <Iframe { ...props } forwardedRef={ ref } />;
+}
+
+export default forwardRef( IframeIfReady );

package/src/components/iframe/use-compatibility-styles.js

@@ -28,6 +28,12 @@ export function useCompatibilityStyles() {
 
 				const { ownerNode, cssRules } = styleSheet;
 
+				// Stylesheet is added by another stylesheet. See
+				// https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet/ownerNode#notes.
+				if ( ownerNode === null ) {
+					return accumulator;
+				}
+
 				if ( ! cssRules ) {
 					return accumulator;
 				}

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';