@wordpress/block-editor 12.21.0 → 12.22.0

package/src/components/block-toolbar/index.js

@@ -63,6 +63,7 @@ export function PrivateBlockToolbar( {
 		isDefaultEditingMode,
 		blockType,
 		blockName,
+		toolbarKey,
 		shouldShowVisualToolbar,
 		showParentSelector,
 		isUsingBindings,
@@ -103,6 +104,7 @@ export function PrivateBlockToolbar( {
 			blockType: selectedBlockClientId && getBlockType( _blockName ),
 			shouldShowVisualToolbar: isValid && isVisual,
 			rootClientId: blockRootClientId,
+			toolbarKey: `${ selectedBlockClientId }${ firstParentClientId }`,
 			showParentSelector:
 				parentBlockType &&
 				getBlockEditingMode( firstParentClientId ) === 'default' &&
@@ -159,7 +161,7 @@ export function PrivateBlockToolbar( {
 			__experimentalOnIndexChange={ __experimentalOnIndexChange }
 			// Resets the index whenever the active block changes so
 			// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
-			key={ blockClientId }
+			key={ toolbarKey }
 		>
 			<div ref={ toolbarWrapperRef } className={ innerClasses }>
 				{ ! isMultiToolbar &&

package/src/components/block-toolbar/shuffle.js

@@ -56,7 +56,7 @@ export default function Shuffle( { clientId, as = Container } ) {
 				// Check if the pattern has only one top level block,
 				// otherwise we may shuffle to pattern that will not allow to continue shuffling.
 				pattern.blocks.length === 1 &&
-				pattern.categories.some( ( category ) => {
+				pattern.categories?.some( ( category ) => {
 					return categories.includes( category );
 				} )
 			);

package/src/components/block-toolbar/test/index.native.js

@@ -15,13 +15,7 @@ describe( 'Block Toolbar', () => {
 	it( "doesn't render the block settings button if there aren't any settings for the current selected block", async () => {
 		// Arrange
 		const screen = await initializeEditor();
-		await addBlock( screen, 'Image' );
-
-		// Act
-		fireEvent(
-			screen.getByTestId( 'media-options-picker' ),
-			'backdropPress'
-		);
+		await addBlock( screen, 'Shortcode' );
 
 		// Assert
 		expect( screen.queryByLabelText( 'Open Settings' ) ).toBeNull();

package/src/components/child-layout-control/index.js

@@ -7,6 +7,10 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalInputControl as InputControl,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	Flex,
+	FlexItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
@@ -28,25 +32,62 @@ function helpText( selfStretch, parentLayout ) {
 /**
  * Form to edit the child layout value.
  *
- * @param {Object}   props              Props.
- * @param {Object}   props.value        The child layout value.
- * @param {Function} props.onChange     Function to update the child layout value.
- * @param {Object}   props.parentLayout The parent layout value.
+ * @param {Object}   props                  Props.
+ * @param {Object}   props.value            The child layout value.
+ * @param {Function} props.onChange         Function to update the child layout value.
+ * @param {Object}   props.parentLayout     The parent layout value.
  *
+ * @param {boolean}  props.isShownByDefault
+ * @param {string}   props.panelId
  * @return {Element} child layout edit element.
  */
 export default function ChildLayoutControl( {
 	value: childLayout = {},
 	onChange,
 	parentLayout,
+	isShownByDefault,
+	panelId,
 } ) {
-	const { selfStretch, flexSize, columnSpan, rowSpan } = childLayout;
+	const {
+		selfStretch,
+		flexSize,
+		columnStart,
+		rowStart,
+		columnSpan,
+		rowSpan,
+	} = childLayout;
 	const {
 		type: parentType,
 		default: { type: defaultParentType = 'default' } = {},
+		orientation = 'horizontal',
 	} = parentLayout ?? {};
 	const parentLayoutType = parentType || defaultParentType;
 
+	const hasFlexValue = () => !! selfStretch;
+	const flexResetLabel =
+		orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
+	const resetFlex = () => {
+		onChange( {
+			selfStretch: undefined,
+			flexSize: undefined,
+		} );
+	};
+
+	const hasStartValue = () => !! columnStart || !! rowStart;
+	const hasSpanValue = () => !! columnSpan || !! rowSpan;
+	const resetGridStarts = () => {
+		onChange( {
+			columnStart: undefined,
+			rowStart: undefined,
+		} );
+	};
+	const resetGridSpans = () => {
+		onChange( {
+			columnSpan: undefined,
+			rowSpan: undefined,
+		} );
+	};
+
 	useEffect( () => {
 		if ( selfStretch === 'fixed' && ! flexSize ) {
 			onChange( {
@@ -59,7 +100,15 @@ export default function ChildLayoutControl( {
 	return (
 		<>
 			{ parentLayoutType === 'flex' && (
-				<>
+				<VStack
+					as={ ToolsPanelItem }
+					spacing={ 2 }
+					hasValue={ hasFlexValue }
+					label={ flexResetLabel }
+					onDeselect={ resetFlex }
+					isShownByDefault={ isShownByDefault }
+					panelId={ panelId }
+				>
 					<ToggleGroupControl
 						__nextHasNoMarginBottom
 						size={ '__unstable-large' }
@@ -104,37 +153,100 @@ export default function ChildLayoutControl( {
 							value={ flexSize }
 						/>
 					) }
-				</>
+				</VStack>
 			) }
 			{ parentLayoutType === 'grid' && (
-				<HStack>
-					<InputControl
-						size={ '__unstable-large' }
-						label={ __( 'Column Span' ) }
-						type="number"
-						onChange={ ( value ) => {
-							onChange( {
-								rowSpan,
-								columnSpan: value,
-							} );
-						} }
-						value={ columnSpan }
-						min={ 1 }
-					/>
-					<InputControl
-						size={ '__unstable-large' }
-						label={ __( 'Row Span' ) }
-						type="number"
-						onChange={ ( value ) => {
-							onChange( {
-								columnSpan,
-								rowSpan: value,
-							} );
-						} }
-						value={ rowSpan }
-						min={ 1 }
-					/>
-				</HStack>
+				<>
+					<HStack
+						as={ ToolsPanelItem }
+						hasValue={ hasSpanValue }
+						label={ __( 'Grid span' ) }
+						onDeselect={ resetGridSpans }
+						isShownByDefault={ isShownByDefault }
+						panelId={ panelId }
+					>
+						<InputControl
+							size={ '__unstable-large' }
+							label={ __( 'Column span' ) }
+							type="number"
+							onChange={ ( value ) => {
+								onChange( {
+									columnStart,
+									rowStart,
+									rowSpan,
+									columnSpan: value,
+								} );
+							} }
+							value={ columnSpan }
+							min={ 1 }
+						/>
+						<InputControl
+							size={ '__unstable-large' }
+							label={ __( 'Row span' ) }
+							type="number"
+							onChange={ ( value ) => {
+								onChange( {
+									columnStart,
+									rowStart,
+									columnSpan,
+									rowSpan: value,
+								} );
+							} }
+							value={ rowSpan }
+							min={ 1 }
+						/>
+					</HStack>
+					{ window.__experimentalEnableGridInteractivity && (
+						// Use Flex with an explicit width on the FlexItem instead of HStack to
+						// work around an issue in webkit where inputs with a max attribute are
+						// sized incorrectly.
+						<Flex
+							as={ ToolsPanelItem }
+							hasValue={ hasStartValue }
+							label={ __( 'Grid placement' ) }
+							onDeselect={ resetGridStarts }
+							isShownByDefault={ false }
+							panelId={ panelId }
+						>
+							<FlexItem style={ { width: '50%' } }>
+								<InputControl
+									size={ '__unstable-large' }
+									label={ __( 'Column' ) }
+									type="number"
+									onChange={ ( value ) => {
+										onChange( {
+											columnStart: value,
+											rowStart,
+											columnSpan,
+											rowSpan,
+										} );
+									} }
+									value={ columnStart }
+									min={ 1 }
+									max={ parentLayout?.columnCount }
+								/>
+							</FlexItem>
+							<FlexItem style={ { width: '50%' } }>
+								<InputControl
+									size={ '__unstable-large' }
+									label={ __( 'Row' ) }
+									type="number"
+									onChange={ ( value ) => {
+										onChange( {
+											columnStart,
+											rowStart: value,
+											columnSpan,
+											rowSpan,
+										} );
+									} }
+									value={ rowStart }
+									min={ 1 }
+									max={ parentLayout?.columnCount }
+								/>
+							</FlexItem>
+						</Flex>
+					) }
+				</>
 			) }
 		</>
 	);

package/src/components/convert-to-group-buttons/toolbar.js

@@ -4,7 +4,7 @@
 import { useDispatch, useSelect } from '@wordpress/data';
 import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { group, row, stack } from '@wordpress/icons';
+import { group, row, stack, grid } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
 
 /**
@@ -17,6 +17,7 @@ const layouts = {
 	group: { type: 'constrained' },
 	row: { type: 'flex', flexWrap: 'nowrap' },
 	stack: { type: 'flex', orientation: 'vertical' },
+	grid: { type: 'grid' },
 };
 
 function BlockGroupToolbar() {
@@ -60,6 +61,7 @@ function BlockGroupToolbar() {
 
 	const onConvertToRow = () => onConvertToGroup( 'row' );
 	const onConvertToStack = () => onConvertToGroup( 'stack' );
+	const onConvertToGrid = () => onConvertToGroup( 'grid' );
 
 	// Don't render the button if the current selection cannot be grouped.
 	// A good example is selecting multiple button blocks within a Buttons block:
@@ -75,6 +77,9 @@ function BlockGroupToolbar() {
 	const canInsertStack = !! variations.find(
 		( { name } ) => name === 'group-stack'
 	);
+	const canInsertGrid = !! variations.find(
+		( { name } ) => name === 'group-grid'
+	);
 
 	return (
 		<ToolbarGroup>
@@ -97,6 +102,13 @@ function BlockGroupToolbar() {
 					onClick={ onConvertToStack }
 				/>
 			) }
+			{ canInsertGrid && (
+				<ToolbarButton
+					icon={ grid }
+					label={ _x( 'Grid', 'verb' ) }
+					onClick={ onConvertToGrid }
+				/>
+			) }
 		</ToolbarGroup>
 	);
 }

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

@@ -12,7 +12,6 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalBoxControl as BoxControl,
 	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalView as View,
@@ -396,16 +395,7 @@ export default function DimensionsPanel( {
 	// Child Layout
 	const showChildLayoutControl = useHasChildLayout( settings );
 	const childLayout = inheritedValue?.layout;
-	const { orientation = 'horizontal' } = settings?.parentLayout ?? {};
-	const {
-		type: parentType,
-		default: { type: defaultParentType = 'default' } = {},
-	} = settings?.parentLayout ?? {};
-	const parentLayoutType = parentType || defaultParentType;
-	const flexResetLabel =
-		orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
-	const childLayoutResetLabel =
-		parentLayoutType === 'flex' ? flexResetLabel : __( 'Grid spans' );
+
 	const setChildLayout = ( newChildLayout ) => {
 		onChange( {
 			...value,
@@ -414,15 +404,6 @@ export default function DimensionsPanel( {
 			},
 		} );
 	};
-	const resetChildLayoutValue = () => {
-		setChildLayout( {
-			selfStretch: undefined,
-			flexSize: undefined,
-			columnSpan: undefined,
-			rowSpan: undefined,
-		} );
-	};
-	const hasChildLayoutValue = () => !! value?.layout;
 
 	const resetAllFilter = useCallback( ( previousValue ) => {
 		return {
@@ -433,6 +414,8 @@ export default function DimensionsPanel( {
 				wideSize: undefined,
 				selfStretch: undefined,
 				flexSize: undefined,
+				columnStart: undefined,
+				rowStart: undefined,
 				columnSpan: undefined,
 				rowSpan: undefined,
 			} ),
@@ -650,24 +633,16 @@ export default function DimensionsPanel( {
 				</ToolsPanelItem>
 			) }
 			{ showChildLayoutControl && (
-				<VStack
-					as={ ToolsPanelItem }
-					spacing={ 2 }
-					hasValue={ hasChildLayoutValue }
-					label={ childLayoutResetLabel }
-					onDeselect={ resetChildLayoutValue }
+				<ChildLayoutControl
+					value={ childLayout }
+					onChange={ setChildLayout }
+					parentLayout={ settings?.parentLayout }
+					panelId={ panelId }
 					isShownByDefault={
 						defaultControls.childLayout ??
 						DEFAULT_CONTROLS.childLayout
 					}
-					panelId={ panelId }
-				>
-					<ChildLayoutControl
-						value={ childLayout }
-						onChange={ setChildLayout }
-						parentLayout={ settings?.parentLayout }
-					/>
-				</VStack>
+				/>
 			) }
 			{ showMinHeightControl && (
 				<ToolsPanelItem

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

@@ -968,6 +968,37 @@ describe( 'global styles renderer', () => {
 				'font-size: 15px',
 			] );
 		} );
+
+		it( 'should correctly resolve referenced values', () => {
+			const stylesWithRef = {
+				typography: {
+					fontSize: {
+						ref: 'styles.elements.h1.typography.fontSize',
+					},
+					letterSpacing: {
+						ref: 'styles.elements.h1.typography.letterSpacing',
+					},
+				},
+			};
+			const tree = {
+				styles: {
+					elements: {
+						h1: {
+							typography: {
+								fontSize: 'var:preset|font-size|xx-large',
+								letterSpacing: '2px',
+							},
+						},
+					},
+				},
+			};
+			expect(
+				getStylesDeclarations( stylesWithRef, '.wp-block', false, tree )
+			).toEqual( [
+				'font-size: var(--wp--preset--font-size--xx-large)',
+				'letter-spacing: 2px',
+			] );
+		} );
 	} );
 
 	describe( 'processCSSNesting', () => {

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

@@ -409,7 +409,9 @@ export function getStylesDeclarations(
 		let ruleValue = rule.value;
 		if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
 			const refPath = ruleValue.ref.split( '.' );
-			ruleValue = getValueFromObjectPath( tree, refPath );
+			ruleValue = compileStyleValue(
+				getValueFromObjectPath( tree, refPath )
+			);
 			// Presence of another ref indicates a reference to another dynamic value.
 			// Pointing to another dynamic value is not supported.
 			if ( ! ruleValue || ruleValue?.ref ) {

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

@@ -10,25 +10,7 @@ import { getTypographyFontSizeValue } from './typography-utils';
 import { getValueFromObjectPath } from '../../utils/object';
 
 /* Supporting data. */
-export const ROOT_BLOCK_NAME = 'root';
 export const ROOT_BLOCK_SELECTOR = 'body';
-export const ROOT_BLOCK_SUPPORTS = [
-	'background',
-	'backgroundColor',
-	'color',
-	'linkColor',
-	'captionColor',
-	'buttonColor',
-	'headingColor',
-	'fontFamily',
-	'fontSize',
-	'fontStyle',
-	'fontWeight',
-	'lineHeight',
-	'textDecoration',
-	'textTransform',
-	'padding',
-];
 
 export const PRESET_METADATA = [
 	{

package/src/components/iframe/index.js

@@ -30,7 +30,7 @@ import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useWritingFlow } from '../writing-flow';
 import { getCompatibilityStyles } from './get-compatibility-styles';
 import { store as blockEditorStore } from '../../store';
-import calculateScale from '../../utils/calculate-scale';
+
 function bubbleEvent( event, Constructor, frame ) {
 	const init = {};
 
@@ -104,25 +104,21 @@ function Iframe( {
 	contentRef,
 	children,
 	tabIndex = 0,
-	shouldZoom = false,
+	scale = 1,
+	frameSize = 0,
 	readonly,
 	forwardedRef: ref,
 	title = __( 'Editor canvas' ),
 	...props
 } ) {
-	const { resolvedAssets, isPreviewMode, isZoomOutMode } = useSelect(
-		( select ) => {
-			const { getSettings, __unstableGetEditorMode } =
-				select( blockEditorStore );
-			const settings = getSettings();
-			return {
-				resolvedAssets: settings.__unstableResolvedAssets,
-				isPreviewMode: settings.__unstableIsPreviewMode,
-				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
-			};
-		},
-		[]
-	);
+	const { resolvedAssets, isPreviewMode } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const settings = getSettings();
+		return {
+			resolvedAssets: settings.__unstableResolvedAssets,
+			isPreviewMode: settings.__unstableIsPreviewMode,
+		};
+	}, [] );
 	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
@@ -133,24 +129,6 @@ function Iframe( {
 		{ height: contentHeight, width: contentWidth },
 	] = useResizeObserver();
 
-	// When zoom-out mode is enabled, the iframe is scaled down to fit the
-	// content within the viewport.
-	// At 1000px wide, the iframe is scaled to 45%.
-	// At 400px wide, the iframe is scaled to 90%.
-	const scale =
-		isZoomOutMode && shouldZoom
-			? calculateScale(
-					{
-						maxWidth: 1000,
-						minWidth: 400,
-						maxScale: 0.45,
-						minScale: 0.9,
-					},
-					contentWidth
-			  )
-			: 1;
-	const frameSize = isZoomOutMode ? 100 : 0;
-
 	const setRef = useRefEffect( ( node ) => {
 		node._load = () => {
 			setIframeDocument( node.contentDocument );
@@ -229,6 +207,20 @@ function Iframe( {
 		};
 	}, [] );
 
+	const windowResizeRef = useRefEffect( ( node ) => {
+		const nodeWindow = node.ownerDocument.defaultView;
+
+		const onResize = () => {
+			setIframeWindowInnerHeight( nodeWindow.innerHeight );
+		};
+		nodeWindow.addEventListener( 'resize', onResize );
+		return () => {
+			nodeWindow.removeEventListener( 'resize', onResize );
+		};
+	}, [] );
+
+	const [ iframeWindowInnerHeight, setIframeWindowInnerHeight ] = useState();
+
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
 		useBubbleEvents( iframeDocument ),
@@ -236,6 +228,7 @@ function Iframe( {
 		clearerRef,
 		writingFlowRef,
 		disabledRef,
+		windowResizeRef,
 	] );
 
 	// Correct doctype is required to enable rendering in standards
@@ -276,25 +269,48 @@ function Iframe( {
 
 	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
-	// top or bottom margin is 0.55 / 2 ((1 - scale) / 2).
-	const marginFromScaling = ( contentHeight * ( 1 - scale ) ) / 2;
-
 	useEffect( () => {
-		if ( iframeDocument && scale !== 1 ) {
-			iframeDocument.documentElement.style.transform = `scale( ${ scale } )`;
+		if ( ! iframeDocument ) {
+			return;
+		}
+
+		const _scale =
+			typeof scale === 'function'
+				? scale( contentWidth, contentHeight )
+				: scale;
+
+		if ( _scale !== 1 ) {
+			// Hack to get proper margins when scaling the iframe document.
+			const bottomFrameSize = frameSize - contentHeight * ( 1 - _scale );
+
+			iframeDocument.body.classList.add( 'is-zoomed-out' );
+
+			iframeDocument.documentElement.style.transform = `scale( ${ _scale } )`;
 			iframeDocument.documentElement.style.marginTop = `${ frameSize }px`;
-			iframeDocument.documentElement.style.marginBottom = `${
-				-marginFromScaling * 2 + frameSize
-			}px`;
+			// TODO: `marginBottom` doesn't work in Firefox. We need another way to do this.
+			iframeDocument.documentElement.style.marginBottom = `${ bottomFrameSize }px`;
+			if ( iframeWindowInnerHeight > contentHeight * _scale ) {
+				iframeDocument.body.style.minHeight = `${ Math.floor(
+					( iframeWindowInnerHeight - 2 * frameSize ) / _scale
+				) }px`;
+			}
+
 			return () => {
+				iframeDocument.body.classList.remove( 'is-zoomed-out' );
 				iframeDocument.documentElement.style.transform = '';
 				iframeDocument.documentElement.style.marginTop = '';
 				iframeDocument.documentElement.style.marginBottom = '';
+				iframeDocument.body.style.minHeight = '';
 			};
 		}
-	}, [ scale, frameSize, marginFromScaling, iframeDocument ] );
+	}, [
+		scale,
+		frameSize,
+		iframeDocument,
+		contentHeight,
+		iframeWindowInnerHeight,
+		contentWidth,
+	] );
 
 	// Make sure to not render the before and after focusable div elements in view
 	// mode. They're only needed to capture focus in edit mode.

package/src/components/inserter/block-patterns-explorer/index.js

@@ -14,16 +14,11 @@ import { usePatternCategories } from '../block-patterns-tab/use-pattern-categori
 
 function PatternsExplorer( { initialCategory, rootClientId } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
-	const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );
-
 	const [ selectedCategory, setSelectedCategory ] = useState(
 		initialCategory?.name
 	);
 
-	const patternCategories = usePatternCategories(
-		rootClientId,
-		patternSourceFilter
-	);
+	const patternCategories = usePatternCategories( rootClientId );
 
 	return (
 		<div className="block-editor-block-patterns-explorer">
@@ -33,14 +28,12 @@ function PatternsExplorer( { initialCategory, rootClientId } ) {
 				onClickCategory={ setSelectedCategory }
 				searchValue={ searchValue }
 				setSearchValue={ setSearchValue }
-				patternSourceFilter={ patternSourceFilter }
-				setPatternSourceFilter={ setPatternSourceFilter }
 			/>
 			<PatternList
 				searchValue={ searchValue }
 				selectedCategory={ selectedCategory }
 				patternCategories={ patternCategories }
-				patternSourceFilter={ patternSourceFilter }
+				rootClientId={ rootClientId }
 			/>
 		</div>
 	);