@wordpress/block-editor 12.2.0 → 12.3.1

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

@@ -20,17 +20,16 @@ import { getComputedFluidTypographyValue } from '../font-sizes/fluid-utils';
  * @property {?string|?number}               size  A default font size.
  * @property {string}                        name  A font size name, displayed in the UI.
  * @property {string}                        slug  A font size slug
- * @property {boolean|FluidPreset|undefined} fluid A font size slug
+ * @property {boolean|FluidPreset|undefined} fluid Specifies the minimum and maximum font size value of a fluid font size.
  */
 
 /**
  * @typedef {Object} TypographySettings
- * @property {?string|?number} size              A default font size.
- * @property {?string}         minViewPortWidth  Minimum viewport size from which type will have fluidity. Optional if size is specified.
- * @property {?string}         maxViewPortWidth  Maximum size up to which type will have fluidity. Optional if size is specified.
- * @property {?number}         scaleFactor       A scale factor to determine how fast a font scales within boundaries. Optional.
- * @property {?number}         minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
- * @property {?string}         minFontSize       The smallest a calculated font size may be. Optional.
+ * @property {?string} minViewPortWidth  Minimum viewport size from which type will have fluidity. Optional if size is specified.
+ * @property {?string} maxViewPortWidth  Maximum size up to which type will have fluidity. Optional if size is specified.
+ * @property {?number} scaleFactor       A scale factor to determine how fast a font scales within boundaries. Optional.
+ * @property {?number} minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
+ * @property {?string} minFontSize       The smallest a calculated font size may be. Optional.
  */
 
 /**
@@ -38,38 +37,29 @@ import { getComputedFluidTypographyValue } from '../font-sizes/fluid-utils';
  * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.
  *
  * @param {Preset}                     preset
- * @param {Object}                     typographySettings
- * @param {boolean|TypographySettings} typographySettings.fluid Whether fluid typography is enabled, and, optionally, fluid font size options.
+ * @param {Object}                     typographyOptions
+ * @param {boolean|TypographySettings} typographyOptions.fluid Whether fluid typography is enabled, and, optionally, fluid font size options.
  *
  * @return {string|*} A font-size value or the value of preset.size.
  */
-export function getTypographyFontSizeValue( preset, typographySettings ) {
+export function getTypographyFontSizeValue( preset, typographyOptions ) {
 	const { size: defaultSize } = preset;
 
-	/*
-	 * Catches falsy values and 0/'0'.
-	 * Fluid calculations cannot be performed on 0.
-	 */
-	if ( ! defaultSize || '0' === defaultSize ) {
-		return defaultSize;
-	}
-
-	if (
-		! typographySettings?.fluid ||
-		( typeof typographySettings?.fluid === 'object' &&
-			Object.keys( typographySettings.fluid ).length === 0 )
-	) {
+	if ( ! isFluidTypographyEnabled( typographyOptions ) ) {
 		return defaultSize;
 	}
-
-	// A font size has explicitly bypassed fluid calculations.
-	if ( false === preset?.fluid ) {
+	/*
+	 * Checks whether a font size has explicitly bypassed fluid calculations.
+	 * Also catches falsy values and 0/'0'.
+	 * Fluid calculations cannot be performed on `0`.
+	 */
+	if ( ! defaultSize || '0' === defaultSize || false === preset?.fluid ) {
 		return defaultSize;
 	}
 
 	const fluidTypographySettings =
-		typeof typographySettings?.fluid === 'object'
-			? typographySettings?.fluid
+		typeof typographyOptions?.fluid === 'object'
+			? typographyOptions?.fluid
 			: {};
 
 	const fluidFontSizeValue = getComputedFluidTypographyValue( {
@@ -77,6 +67,7 @@ export function getTypographyFontSizeValue( preset, typographySettings ) {
 		maximumFontSize: preset?.fluid?.max,
 		fontSize: defaultSize,
 		minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
+		maximumViewPortWidth: fluidTypographySettings?.maxViewPortWidth,
 	} );
 
 	if ( !! fluidFontSizeValue ) {
@@ -85,3 +76,37 @@ export function getTypographyFontSizeValue( preset, typographySettings ) {
 
 	return defaultSize;
 }
+
+function isFluidTypographyEnabled( typographySettings ) {
+	const fluidSettings = typographySettings?.fluid;
+	return (
+		true === fluidSettings ||
+		( fluidSettings &&
+			typeof fluidSettings === 'object' &&
+			Object.keys( fluidSettings ).length > 0 )
+	);
+}
+
+/**
+ * Returns fluid typography settings from theme.json setting object.
+ *
+ * @param {Object} settings            Theme.json settings
+ * @param {Object} settings.typography Theme.json typography settings
+ * @param {Object} settings.layout     Theme.json layout settings
+ * @return {TypographySettings} Fluid typography settings
+ */
+export function getFluidTypographyOptionsFromSettings( settings ) {
+	const typographySettings = settings?.typography;
+	const layoutSettings = settings?.layout;
+	return isFluidTypographyEnabled( typographySettings ) &&
+		layoutSettings?.wideSize
+		? {
+				fluid: {
+					maxViewPortWidth: layoutSettings.wideSize,
+					...typographySettings.fluid,
+				},
+		  }
+		: {
+				fluid: typographySettings?.fluid,
+		  };
+}

package/src/components/global-styles/use-global-styles-output.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, isEmpty, kebabCase, set } from 'lodash';
+import { get, set } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -22,12 +22,17 @@ import { getCSSRules } from '@wordpress/style-engine';
  */
 import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
 import { getBlockCSSSelector } from './get-block-css-selector';
-import { getTypographyFontSizeValue } from './typography-utils';
+import {
+	getTypographyFontSizeValue,
+	getFluidTypographyOptionsFromSettings,
+} from './typography-utils';
 import { GlobalStylesContext } from './context';
 import { useGlobalSetting } from './hooks';
 import { PresetDuotoneFilter } from '../duotone/components';
 import { getGapCSSValue } from '../../hooks/gap';
 import { store as blockEditorStore } from '../../store';
+import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
+import { kebabCase } from '../../utils/object';
 
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
@@ -398,7 +403,7 @@ export function getStylesDeclarations(
 			 */
 			ruleValue = getTypographyFontSizeValue(
 				{ size: ruleValue },
-				tree?.settings?.typography
+				getFluidTypographyOptionsFromSettings( tree?.settings )
 			);
 		}
 
@@ -413,7 +418,7 @@ export function getStylesDeclarations(
  * in theme.json, and outputting common layout styles, and specific blockGap values.
  *
  * @param {Object}  props
- * @param {Object}  props.tree                  A theme.json tree containing layout definitions.
+ * @param {Object}  props.layoutDefinitions     Layout definitions, keyed by layout type.
  * @param {Object}  props.style                 A style object containing spacing values.
  * @param {string}  props.selector              Selector used to group together layout styling rules.
  * @param {boolean} props.hasBlockGapSupport    Whether or not the theme opts-in to blockGap support.
@@ -422,7 +427,7 @@ export function getStylesDeclarations(
  * @return {string} Generated CSS rules for the layout styles.
  */
 export function getLayoutStyles( {
-	tree,
+	layoutDefinitions = LAYOUT_DEFINITIONS,
 	style,
 	selector,
 	hasBlockGapSupport,
@@ -444,11 +449,15 @@ export function getLayoutStyles( {
 		}
 	}
 
-	if ( gapValue && tree?.settings?.layout?.definitions ) {
-		Object.values( tree.settings.layout.definitions ).forEach(
+	if ( gapValue && layoutDefinitions ) {
+		Object.values( layoutDefinitions ).forEach(
 			( { className, name, spacingStyles } ) => {
 				// Allow outputting fallback gap styles for flex layout type when block gap support isn't available.
-				if ( ! hasBlockGapSupport && 'flex' !== name ) {
+				if (
+					! hasBlockGapSupport &&
+					'flex' !== name &&
+					'grid' !== name
+				) {
 					return;
 				}
 
@@ -506,12 +515,9 @@ export function getLayoutStyles( {
 	}
 
 	// Output base styles
-	if (
-		selector === ROOT_BLOCK_SELECTOR &&
-		tree?.settings?.layout?.definitions
-	) {
+	if ( selector === ROOT_BLOCK_SELECTOR && layoutDefinitions ) {
 		const validDisplayModes = [ 'block', 'flex', 'grid' ];
-		Object.values( tree.settings.layout.definitions ).forEach(
+		Object.values( layoutDefinitions ).forEach(
 			( { className, displayMode, baseStyles } ) => {
 				if (
 					displayMode &&
@@ -685,7 +691,7 @@ export const getNodesWithSettings = ( tree, blockSelectors ) => {
 	// Top-level.
 	const presets = pickPresets( tree.settings );
 	const custom = tree.settings?.custom;
-	if ( ! isEmpty( presets ) || custom ) {
+	if ( Object.keys( presets ).length > 0 || custom ) {
 		nodes.push( {
 			presets,
 			custom,
@@ -698,7 +704,7 @@ export const getNodesWithSettings = ( tree, blockSelectors ) => {
 		( [ blockName, node ] ) => {
 			const blockPresets = pickPresets( node );
 			const blockCustom = node.custom;
-			if ( ! isEmpty( blockPresets ) || blockCustom ) {
+			if ( Object.keys( blockPresets ).length > 0 || blockCustom ) {
 				nodes.push( {
 					presets: blockPresets,
 					custom: blockCustom,
@@ -873,7 +879,6 @@ export const toStyles = (
 				( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport )
 			) {
 				ruleset += getLayoutStyles( {
-					tree,
 					style: styles,
 					selector,
 					hasBlockGapSupport,
@@ -964,7 +969,7 @@ export const toStyles = (
 		}
 
 		const classes = getPresetsClasses( selector, presets );
-		if ( ! isEmpty( classes ) ) {
+		if ( classes.length > 0 ) {
 			ruleset += classes;
 		}
 	} );
@@ -980,7 +985,10 @@ export function toSvgFilters( tree, blockSelectors ) {
 }
 
 const getSelectorsConfig = ( blockType, rootSelector ) => {
-	if ( ! isEmpty( blockType?.selectors ) ) {
+	if (
+		blockType?.selectors &&
+		Object.keys( blockType.selectors ).length > 0
+	) {
 		return blockType.selectors;
 	}
 
@@ -1023,7 +1031,9 @@ export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
 				duotoneSupport && scopeSelector( rootSelector, duotoneSupport );
 		}
 
-		const hasLayoutSupport = !! blockType?.supports?.__experimentalLayout;
+		const hasLayoutSupport =
+			!! blockType?.supports?.layout ||
+			!! blockType?.supports?.__experimentalLayout;
 		const fallbackGapValue =
 			blockType?.supports?.spacing?.blockGap?.__experimentalDefault;
 

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

@@ -7,7 +7,10 @@ import fastDeepEqual from 'fast-deep-equal/es6';
 /**
  * Internal dependencies
  */
-import { getTypographyFontSizeValue } from './typography-utils';
+import {
+	getTypographyFontSizeValue,
+	getFluidTypographyOptionsFromSettings,
+} from './typography-utils';
 
 /* Supporting data. */
 export const ROOT_BLOCK_NAME = 'root';
@@ -73,8 +76,11 @@ export const PRESET_METADATA = [
 	},
 	{
 		path: [ 'typography', 'fontSizes' ],
-		valueFunc: ( preset, { typography: typographySettings } ) =>
-			getTypographyFontSizeValue( preset, typographySettings ),
+		valueFunc: ( preset, settings ) =>
+			getTypographyFontSizeValue(
+				preset,
+				getFluidTypographyOptionsFromSettings( settings )
+			),
 		valueKey: 'size',
 		cssVarInfix: 'font-size',
 		classes: [ { classSuffix: 'font-size', propertyName: 'font-size' } ],

package/src/components/iframe/index.js

@@ -12,7 +12,6 @@ import {
 	forwardRef,
 	useMemo,
 	useReducer,
-	renderToString,
 	useEffect,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -105,7 +104,6 @@ async function loadScript( head, { id, src } ) {
 function Iframe( {
 	contentRef,
 	children,
-	head,
 	tabIndex = 0,
 	scale = 1,
 	frameSize = 0,
@@ -122,12 +120,7 @@ function Iframe( {
 	const [ , forceRender ] = useReducer( () => ( {} ) );
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
-	const styles = useParsedAssets( assets?.styles );
-	const styleIds = styles.map( ( style ) => style.id );
 	const compatStyles = useCompatibilityStyles();
-	const neededCompatStyles = compatStyles.filter(
-		( style ) => ! styleIds.includes( style.id )
-	);
 	const scripts = useParsedAssets( assets?.scripts );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
@@ -139,15 +132,11 @@ function Iframe( {
 		function preventFileDropDefault( event ) {
 			event.preventDefault();
 		}
-		function setDocumentIfReady() {
+		function onLoad() {
 			const { contentDocument, ownerDocument } = node;
-			const { readyState, documentElement } = contentDocument;
+			const { documentElement } = contentDocument;
 			iFrameDocument = contentDocument;
 
-			if ( readyState !== 'interactive' && readyState !== 'complete' ) {
-				return false;
-			}
-
 			bubbleEvents( contentDocument );
 			setIframeDocument( contentDocument );
 			clearerRef( documentElement );
@@ -165,9 +154,24 @@ function Iframe( {
 			);
 
 			contentDocument.dir = ownerDocument.dir;
-			documentElement.removeChild( contentDocument.head );
 			documentElement.removeChild( contentDocument.body );
 
+			for ( const compatStyle of compatStyles ) {
+				if ( contentDocument.getElementById( compatStyle.id ) ) {
+					continue;
+				}
+
+				contentDocument.head.appendChild(
+					compatStyle.cloneNode( true )
+				);
+
+				// eslint-disable-next-line no-console
+				console.warn(
+					`${ compatStyle.id } was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe.`,
+					compatStyle
+				);
+			}
+
 			iFrameDocument.addEventListener(
 				'dragover',
 				preventFileDropDefault,
@@ -178,14 +182,12 @@ function Iframe( {
 				preventFileDropDefault,
 				false
 			);
-			return true;
 		}
 
-		// Document set with srcDoc is not immediately ready.
-		node.addEventListener( 'load', setDocumentIfReady );
+		node.addEventListener( 'load', onLoad );
 
 		return () => {
-			node.removeEventListener( 'load', setDocumentIfReady );
+			node.removeEventListener( 'load', onLoad );
 			iFrameDocument?.removeEventListener(
 				'dragover',
 				preventFileDropDefault
@@ -216,43 +218,25 @@ function Iframe( {
 		clearerRef,
 		writingFlowRef,
 		disabledRef,
+		headRef,
 	] );
 
-	const styleAssets = (
-		<>
-			<style>{ 'html{height:auto!important;}body{margin:0}' }</style>
-			{ [ ...styles, ...neededCompatStyles ].map(
-				( { tagName, href, id, rel, media, textContent } ) => {
-					const TagName = tagName.toLowerCase();
-
-					if ( TagName === 'style' ) {
-						return (
-							<TagName { ...{ id } } key={ id }>
-								{ textContent }
-							</TagName>
-						);
-					}
-
-					return (
-						<TagName { ...{ href, id, rel, media } } key={ id } />
-					);
-				}
-			) }
-		</>
-	);
-
 	// Correct doctype is required to enable rendering in standards
 	// mode. Also preload the styles to avoid a flash of unstyled
 	// content.
-	const src = useMemo( () => {
-		const html = '<!doctype html>' + renderToString( styleAssets );
-		const blob = new window.Blob( [ html ], { type: 'text/html' } );
-		return URL.createObjectURL( blob );
-	}, [] );
+	const html =
+		'<!doctype html>' +
+		'<style>html{height:auto!important;min-height:100%;}body{margin:0}</style>' +
+		( assets?.styles ?? '' );
+
+	const [ src, cleanup ] = useMemo( () => {
+		const _src = URL.createObjectURL(
+			new window.Blob( [ html ], { type: 'text/html' } )
+		);
+		return [ _src, () => URL.revokeObjectURL( _src ) ];
+	}, [ html ] );
 
-	useEffect( () => () => {
-		URL.revokeObjectURL( src );
-	} );
+	useEffect( () => cleanup, [ cleanup ] );
 
 	// We need to counter the margin created by scaling the iframe. If the scale
 	// is e.g. 0.45, then the top + bottom margin is 0.55 (1 - scale). Just the
@@ -291,25 +275,19 @@ function Iframe( {
 			>
 				{ iframeDocument &&
 					createPortal(
-						<>
-							<head ref={ headRef }>
-								{ styleAssets }
-								{ head }
-							</head>
-							<body
-								ref={ bodyRef }
-								className={ classnames(
-									'block-editor-iframe__body',
-									'editor-styles-wrapper',
-									...bodyClasses
-								) }
-							>
-								{ contentResizeListener }
-								<StyleProvider document={ iframeDocument }>
-									{ children }
-								</StyleProvider>
-							</body>
-						</>,
+						<body
+							ref={ bodyRef }
+							className={ classnames(
+								'block-editor-iframe__body',
+								'editor-styles-wrapper',
+								...bodyClasses
+							) }
+						>
+							{ contentResizeListener }
+							<StyleProvider document={ iframeDocument }>
+								{ children }
+							</StyleProvider>
+						</body>,
 						iframeDocument.documentElement
 					) }
 			</iframe>

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

@@ -38,12 +38,6 @@ export function useCompatibilityStyles() {
 					return accumulator;
 				}
 
-				// Generally, ignore inline styles. We add inline styles belonging to a
-				// stylesheet later, which may or may not match the selectors.
-				if ( ownerNode.tagName !== 'LINK' ) {
-					return accumulator;
-				}
-
 				// Don't try to add the reset styles, which were removed as a dependency
 				// from `edit-blocks` for the iframe since we don't need to reset admin
 				// styles.
@@ -76,20 +70,42 @@ export function useCompatibilityStyles() {
 				}
 
 				if ( matchFromRules( cssRules ) ) {
-					// Display warning once we have a way to add style dependencies to the editor.
-					// See: https://github.com/WordPress/gutenberg/pull/37466.
-					accumulator.push( ownerNode.cloneNode( true ) );
+					const isInline = ownerNode.tagName === 'STYLE';
 
-					// Add inline styles belonging to the stylesheet.
-					const inlineCssId = ownerNode.id.replace(
-						'-css',
-						'-inline-css'
-					);
-					const inlineCssElement =
-						document.getElementById( inlineCssId );
+					if ( isInline ) {
+						// If the current target is inline,
+						// it could be a dependency of an existing stylesheet.
+						// Look for that dependency and add it BEFORE the current target.
+						const mainStylesCssId = ownerNode.id.replace(
+							'-inline-css',
+							'-css'
+						);
+						const mainStylesElement =
+							document.getElementById( mainStylesCssId );
+						if ( mainStylesElement ) {
+							accumulator.push(
+								mainStylesElement.cloneNode( true )
+							);
+						}
+					}
+
+					accumulator.push( ownerNode.cloneNode( true ) );
 
-					if ( inlineCssElement ) {
-						accumulator.push( inlineCssElement.cloneNode( true ) );
+					if ( ! isInline ) {
+						// If the current target is not inline,
+						// we still look for inline styles that could be relevant for the current target.
+						// If they exist, add them AFTER the current target.
+						const inlineStylesCssId = ownerNode.id.replace(
+							'-css',
+							'-inline-css'
+						);
+						const inlineStylesElement =
+							document.getElementById( inlineStylesCssId );
+						if ( inlineStylesElement ) {
+							accumulator.push(
+								inlineStylesElement.cloneNode( true )
+							);
+						}
 					}
 				}
 

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

@@ -2,5 +2,4 @@ export const MIN_ZOOM = 100;
 export const MAX_ZOOM = 300;
 export const POPOVER_PROPS = {
 	placement: 'bottom-start',
-	variant: 'toolbar',
 };

package/src/components/index.js

@@ -26,6 +26,7 @@ export { default as BlockEdit, useBlockEditContext } from './block-edit';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
 export { default as BlockStyles } from './block-styles';
+export { default as HeadingLevelDropdown } from './block-heading-level-dropdown';
 export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
 export { default as __experimentalBlockPatternSetup } from './block-pattern-setup';
 export { default as __experimentalBlockVariationTransforms } from './block-variation-transforms';
@@ -110,7 +111,6 @@ export { default as __experimentalUseResizeCanvas } from './use-resize-canvas';
 export { default as BlockInspector } from './block-inspector';
 export { default as BlockList } from './block-list';
 export { useBlockProps } from './block-list/use-block-props';
-export { LayoutStyle as __experimentalLayoutStyle } from './block-list/layout';
 export { default as BlockMover } from './block-mover';
 export {
 	default as BlockPreview,

package/src/components/index.native.js

@@ -28,6 +28,7 @@ export {
 	JustifyContentControl,
 } from './justify-content-control';
 export { default as LineHeightControl } from './line-height-control';
+export { default as HeadingLevelDropdown } from './block-heading-level-dropdown';
 export { default as PlainText } from './plain-text';
 export {
 	default as RichText,

package/src/components/inner-blocks/index.js

@@ -88,7 +88,9 @@ function UncontrolledInnerBlocks( props ) {
 	);
 
 	const defaultLayoutBlockSupport =
-		getBlockSupport( name, '__experimentalLayout' ) || EMPTY_OBJECT;
+		getBlockSupport( name, 'layout' ) ||
+		getBlockSupport( name, '__experimentalLayout' ) ||
+		EMPTY_OBJECT;
 
 	const { allowSizingOnChildren = false } = defaultLayoutBlockSupport;
 
@@ -116,7 +118,7 @@ function UncontrolledInnerBlocks( props ) {
 				rootClientId={ clientId }
 				renderAppender={ renderAppender }
 				__experimentalAppenderTagName={ __experimentalAppenderTagName }
-				__experimentalLayout={ memoedLayout }
+				layout={ memoedLayout }
 				wrapperRef={ wrapperRef }
 				placeholder={ placeholder }
 			/>

package/src/components/inner-blocks/index.native.js

@@ -93,7 +93,7 @@ function UncontrolledInnerBlocks( props ) {
 		horizontalAlignment,
 		filterInnerBlocks,
 		blockWidth,
-		__experimentalLayout: layout = defaultLayout,
+		layout = defaultLayout,
 		gridProperties,
 	} = props;