@wordpress/edit-site 4.9.0 → 4.10.0

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

@@ -6,7 +6,6 @@ import {
 	forEach,
 	get,
 	isEmpty,
-	isString,
 	kebabCase,
 	pickBy,
 	reduce,
@@ -24,7 +23,10 @@ import {
 } from '@wordpress/blocks';
 import { useEffect, useState, useContext } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
-import { __unstablePresetDuotoneFilter as PresetDuotoneFilter } from '@wordpress/block-editor';
+import {
+	__unstablePresetDuotoneFilter as PresetDuotoneFilter,
+	__experimentalGetGapCSSValue as getGapCSSValue,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -185,7 +187,7 @@ function getStylesDeclarations( blockStyles = {} ) {
 
 			const styleValue = get( blockStyles, pathToValue );
 
-			if ( !! properties && ! isString( styleValue ) ) {
+			if ( !! properties && typeof styleValue !== 'string' ) {
 				Object.entries( properties ).forEach( ( entry ) => {
 					const [ name, prop ] = entry;
 
@@ -231,6 +233,135 @@ function getStylesDeclarations( blockStyles = {} ) {
 	return output;
 }
 
+/**
+ * Get generated CSS for layout styles by looking up layout definitions provided
+ * 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.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.
+ * @param {boolean} props.hasFallbackGapSupport Whether or not the theme allows fallback gap styles.
+ * @param {?string} props.fallbackGapValue      An optional fallback gap value if no real gap value is available.
+ * @return {string} Generated CSS rules for the layout styles.
+ */
+export function getLayoutStyles( {
+	tree,
+	style,
+	selector,
+	hasBlockGapSupport,
+	hasFallbackGapSupport,
+	fallbackGapValue,
+} ) {
+	let ruleset = '';
+	let gapValue = hasBlockGapSupport
+		? getGapCSSValue( style?.spacing?.blockGap )
+		: '';
+
+	// Ensure a fallback gap value for the root layout definitions,
+	// and use a fallback value if one is provided for the current block.
+	if ( hasFallbackGapSupport ) {
+		if ( selector === ROOT_BLOCK_SELECTOR ) {
+			gapValue = ! gapValue ? '0.5em' : gapValue;
+		} else if ( ! hasBlockGapSupport && fallbackGapValue ) {
+			gapValue = fallbackGapValue;
+		}
+	}
+
+	if ( gapValue && tree?.settings?.layout?.definitions ) {
+		Object.values( tree.settings.layout.definitions ).forEach(
+			( { className, name, spacingStyles } ) => {
+				// Allow skipping default layout for themes that opt-in to block styles, but opt-out of blockGap.
+				if ( ! hasBlockGapSupport && 'default' === name ) {
+					return;
+				}
+
+				if ( spacingStyles?.length ) {
+					spacingStyles.forEach( ( spacingStyle ) => {
+						const declarations = [];
+
+						if ( spacingStyle.rules ) {
+							Object.entries( spacingStyle.rules ).forEach(
+								( [ cssProperty, cssValue ] ) => {
+									declarations.push(
+										`${ cssProperty }: ${
+											cssValue ? cssValue : gapValue
+										}`
+									);
+								}
+							);
+						}
+
+						if ( declarations.length ) {
+							const combinedSelector =
+								selector === ROOT_BLOCK_SELECTOR
+									? `${ selector } .${ className }${
+											spacingStyle?.selector || ''
+									  }`
+									: `${ selector }.${ className }${
+											spacingStyle?.selector || ''
+									  }`;
+							ruleset += `${ combinedSelector } { ${ declarations.join(
+								'; '
+							) }; }`;
+						}
+					} );
+				}
+			}
+		);
+		// For backwards compatibility, ensure the legacy block gap CSS variable is still available.
+		if ( selector === ROOT_BLOCK_SELECTOR && hasBlockGapSupport ) {
+			ruleset += `${ selector } { --wp--style--block-gap: ${ gapValue }; }`;
+		}
+	}
+
+	// Output base styles
+	if (
+		selector === ROOT_BLOCK_SELECTOR &&
+		tree?.settings?.layout?.definitions
+	) {
+		const validDisplayModes = [ 'block', 'flex', 'grid' ];
+		Object.values( tree.settings.layout.definitions ).forEach(
+			( { className, displayMode, baseStyles } ) => {
+				if (
+					displayMode &&
+					validDisplayModes.includes( displayMode )
+				) {
+					ruleset += `${ selector } .${ className } { display:${ displayMode }; }`;
+				}
+
+				if ( baseStyles?.length ) {
+					baseStyles.forEach( ( baseStyle ) => {
+						const declarations = [];
+
+						if ( baseStyle.rules ) {
+							Object.entries( baseStyle.rules ).forEach(
+								( [ cssProperty, cssValue ] ) => {
+									declarations.push(
+										`${ cssProperty }: ${ cssValue }`
+									);
+								}
+							);
+						}
+
+						if ( declarations.length ) {
+							const combinedSelector = `${ selector } .${ className }${
+								baseStyle?.selector || ''
+							}`;
+							ruleset += `${ combinedSelector } { ${ declarations.join(
+								'; '
+							) }; }`;
+						}
+					} );
+				}
+			}
+		);
+	}
+
+	return ruleset;
+}
+
 export const getNodesWithStyles = ( tree, blockSelectors ) => {
 	const nodes = [];
 
@@ -267,9 +398,11 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 		const blockStyles = pickStyleKeys( node );
 		if ( !! blockStyles && !! blockSelectors?.[ blockName ]?.selector ) {
 			nodes.push( {
-				styles: blockStyles,
-				selector: blockSelectors[ blockName ].selector,
 				duotoneSelector: blockSelectors[ blockName ].duotoneSelector,
+				fallbackGapValue: blockSelectors[ blockName ].fallbackGapValue,
+				hasLayoutSupport: blockSelectors[ blockName ].hasLayoutSupport,
+				selector: blockSelectors[ blockName ].selector,
+				styles: blockStyles,
 			} );
 		}
 
@@ -364,7 +497,12 @@ export const toCustomProperties = ( tree, blockSelectors ) => {
 	return ruleset;
 };
 
-export const toStyles = ( tree, blockSelectors, hasBlockGapSupport ) => {
+export const toStyles = (
+	tree,
+	blockSelectors,
+	hasBlockGapSupport,
+	hasFallbackGapSupport
+) => {
 	const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
 	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
 
@@ -377,63 +515,90 @@ export const toStyles = ( tree, blockSelectors, hasBlockGapSupport ) => {
 	 * @link https://github.com/WordPress/gutenberg/issues/36147.
 	 */
 	let ruleset = 'body {margin: 0;}';
-	nodesWithStyles.forEach( ( { selector, duotoneSelector, styles } ) => {
-		const duotoneStyles = {};
-		if ( styles?.filter ) {
-			duotoneStyles.filter = styles.filter;
-			delete styles.filter;
-		}
+	nodesWithStyles.forEach(
+		( {
+			selector,
+			duotoneSelector,
+			styles,
+			fallbackGapValue,
+			hasLayoutSupport,
+		} ) => {
+			const duotoneStyles = {};
+			if ( styles?.filter ) {
+				duotoneStyles.filter = styles.filter;
+				delete styles.filter;
+			}
 
-		// Process duotone styles (they use color.__experimentalDuotone selector).
-		if ( duotoneSelector ) {
-			const duotoneDeclarations = getStylesDeclarations( duotoneStyles );
-			if ( duotoneDeclarations.length === 0 ) {
-				return;
+			// Process duotone styles (they use color.__experimentalDuotone selector).
+			if ( duotoneSelector ) {
+				const duotoneDeclarations =
+					getStylesDeclarations( duotoneStyles );
+				if ( duotoneDeclarations.length === 0 ) {
+					return;
+				}
+				ruleset =
+					ruleset +
+					`${ duotoneSelector }{${ duotoneDeclarations.join(
+						';'
+					) };}`;
 			}
-			ruleset =
-				ruleset +
-				`${ duotoneSelector }{${ duotoneDeclarations.join( ';' ) };}`;
-		}
 
-		// Process the remaning block styles (they use either normal block class or __experimentalSelector).
-		const declarations = getStylesDeclarations( styles );
-		if ( declarations?.length ) {
-			ruleset = ruleset + `${ selector }{${ declarations.join( ';' ) };}`;
-		}
+			// Process blockGap and layout styles.
+			if ( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport ) {
+				ruleset += getLayoutStyles( {
+					tree,
+					style: styles,
+					selector,
+					hasBlockGapSupport,
+					hasFallbackGapSupport,
+					fallbackGapValue,
+				} );
+			}
 
-		// Check for pseudo selector in `styles` and handle separately.
-		const psuedoSelectorStyles = Object.entries( styles ).filter(
-			( [ key ] ) => key.startsWith( ':' )
-		);
+			// Process the remaining block styles (they use either normal block class or __experimentalSelector).
+			const declarations = getStylesDeclarations( styles );
+			if ( declarations?.length ) {
+				ruleset =
+					ruleset + `${ selector }{${ declarations.join( ';' ) };}`;
+			}
 
-		if ( psuedoSelectorStyles?.length ) {
-			psuedoSelectorStyles.forEach( ( [ pseudoKey, pseudoRule ] ) => {
-				const pseudoDeclarations = getStylesDeclarations( pseudoRule );
+			// Check for pseudo selector in `styles` and handle separately.
+			const pseudoSelectorStyles = Object.entries( styles ).filter(
+				( [ key ] ) => key.startsWith( ':' )
+			);
 
-				if ( ! pseudoDeclarations?.length ) {
-					return;
-				}
+			if ( pseudoSelectorStyles?.length ) {
+				pseudoSelectorStyles.forEach(
+					( [ pseudoKey, pseudoStyle ] ) => {
+						const pseudoDeclarations =
+							getStylesDeclarations( pseudoStyle );
 
-				// `selector` maybe provided in a form
-				// where block level selectors have sub element
-				// selectors appended to them as a comma seperated
-				// string.
-				// e.g. `h1 a,h2 a,h3 a,h4 a,h5 a,h6 a`;
-				// Split and append pseudo selector to create
-				// the proper rules to target the elements.
-				const _selector = selector
-					.split( ',' )
-					.map( ( sel ) => sel + pseudoKey )
-					.join( ',' );
-
-				const psuedoRule = `${ _selector }{${ pseudoDeclarations.join(
-					';'
-				) };}`;
-
-				ruleset = ruleset + psuedoRule;
-			} );
+						if ( ! pseudoDeclarations?.length ) {
+							return;
+						}
+
+						// `selector` maybe provided in a form
+						// where block level selectors have sub element
+						// selectors appended to them as a comma seperated
+						// string.
+						// e.g. `h1 a,h2 a,h3 a,h4 a,h5 a,h6 a`;
+						// Split and append pseudo selector to create
+						// the proper rules to target the elements.
+						const _selector = selector
+							.split( ',' )
+							.map( ( sel ) => sel + pseudoKey )
+							.join( ',' );
+
+						const pseudoRule = `${ _selector }{${ pseudoDeclarations.join(
+							';'
+						) };}`;
+
+						ruleset = ruleset + pseudoRule;
+					}
+				);
+			}
 		}
-	} );
+	);
 
 	/* Add alignment / layout styles */
 	ruleset =
@@ -447,12 +612,15 @@ export const toStyles = ( tree, blockSelectors, hasBlockGapSupport ) => {
 		'.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
 
 	if ( hasBlockGapSupport ) {
+		// Use fallback of `0.5em` just in case, however if there is blockGap support, there should nearly always be a real value.
+		const gapValue =
+			getGapCSSValue( tree?.styles?.spacing?.blockGap ) || '0.5em';
 		ruleset =
 			ruleset +
 			'.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
 		ruleset =
 			ruleset +
-			'.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }';
+			`.wp-site-blocks > * + * { margin-block-start: ${ gapValue }; }`;
 	}
 
 	nodesWithSettings.forEach( ( { selector, presets } ) => {
@@ -486,10 +654,15 @@ const getBlockSelectors = ( blockTypes ) => {
 			'.wp-block-' + name.replace( 'core/', '' ).replace( '/', '-' );
 		const duotoneSelector =
 			blockType?.supports?.color?.__experimentalDuotone ?? null;
+		const hasLayoutSupport = !! blockType?.supports?.__experimentalLayout;
+		const fallbackGapValue =
+			blockType?.supports?.spacing?.blockGap?.__experimentalDefault;
 		result[ name ] = {
+			duotoneSelector,
+			fallbackGapValue,
+			hasLayoutSupport,
 			name,
 			selector,
-			duotoneSelector,
 		};
 	} );
 
@@ -503,6 +676,7 @@ export function useGlobalStylesOutput() {
 	const { merged: mergedConfig } = useContext( GlobalStylesContext );
 	const [ blockGap ] = useSetting( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGap !== null;
+	const hasFallbackGapSupport = ! hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support.
 
 	useEffect( () => {
 		if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
@@ -517,7 +691,8 @@ export function useGlobalStylesOutput() {
 		const globalStyles = toStyles(
 			mergedConfig,
 			blockSelectors,
-			hasBlockGapSupport
+			hasBlockGapSupport,
+			hasFallbackGapSupport
 		);
 		const filters = toSvgFilters( mergedConfig, blockSelectors );
 		setStylesheets( [
@@ -532,7 +707,7 @@ export function useGlobalStylesOutput() {
 		] );
 		setSettings( mergedConfig.settings );
 		setSvgFilters( filters );
-	}, [ mergedConfig ] );
+	}, [ hasBlockGapSupport, hasFallbackGapSupport, mergedConfig ] );
 
 	return [ stylesheets, settings, svgFilters, hasBlockGapSupport ];
 }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, find, isString } from 'lodash';
+import { get, find } from 'lodash';
 
 /* Supporting data. */
 export const ROOT_BLOCK_NAME = 'root';
@@ -213,7 +213,7 @@ function getValueFromCustomVariable( features, blockName, variable, path ) {
 }
 
 export function getValueFromVariable( features, blockName, variable ) {
-	if ( ! variable || ! isString( variable ) ) {
+	if ( ! variable || typeof variable !== 'string' ) {
 		return variable;
 	}
 	const USER_VALUE_PREFIX = 'var:';

package/src/components/keyboard-shortcut-help-modal/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isString } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -34,7 +33,7 @@ const ShortcutList = ( { shortcuts } ) => (
 				className="edit-site-keyboard-shortcut-help-modal__shortcut"
 				key={ index }
 			>
-				{ isString( shortcut ) ? (
+				{ typeof shortcut === 'string' ? (
 					<DynamicShortcut name={ shortcut } />
 				) : (
 					<Shortcut { ...shortcut } />

package/src/components/keyboard-shortcut-help-modal/style.scss

@@ -3,11 +3,6 @@
 		margin: 0 0 2rem 0;
 	}
 
-	&__main-shortcuts .edit-site-keyboard-shortcut-help-modal__shortcut-list {
-		// Push the shortcut to be flush with top modal header.
-		margin-top: -$grid-unit-30 -$border-width;
-	}
-
 	&__section-title {
 		font-size: 0.9rem;
 		font-weight: 600;

package/src/components/list/style.scss

@@ -131,14 +131,6 @@
 			width: $grid-unit * 40;
 		}
 	}
-
-	.components-modal__header {
-		border-bottom: none;
-	}
-
-	.components-modal__content::before {
-		margin-bottom: $grid-unit-05;
-	}
 }
 
 .edit-site-list__rename-modal-actions {

package/src/components/template-details/edit-template-title.js

@@ -4,8 +4,10 @@
 import { __ } from '@wordpress/i18n';
 import { TextControl } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
 
 export default function EditTemplateTitle( { template } ) {
+	const [ forceEmpty, setForceEmpty ] = useState( false );
 	const [ title, setTitle ] = useEntityProp(
 		'postType',
 		template.type,
@@ -16,13 +18,19 @@ export default function EditTemplateTitle( { template } ) {
 	return (
 		<TextControl
 			label={ __( 'Title' ) }
-			value={ title }
+			value={ forceEmpty ? '' : title }
 			help={ __(
 				'Give the template a title that indicates its purpose, e.g. "Full Width".'
 			) }
 			onChange={ ( newTitle ) => {
-				setTitle( newTitle || template.slug );
+				if ( ! newTitle && ! forceEmpty ) {
+					setForceEmpty( true );
+					return;
+				}
+				setForceEmpty( false );
+				setTitle( newTitle );
 			} }
+			onBlur={ () => setForceEmpty( false ) }
 		/>
 	);
 }

package/src/components/template-details/index.js

@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
-import { sprintf, __ } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	Button,
 	MenuGroup,
@@ -17,10 +16,6 @@ import { store as editorStore } from '@wordpress/editor';
  * Internal dependencies
  */
 import isTemplateRevertable from '../../utils/is-template-revertable';
-import {
-	MENU_TEMPLATES,
-	TEMPLATE_PARTS_SUB_MENUS,
-} from '../navigation-sidebar/navigation-panel/constants';
 import { store as editSiteStore } from '../../store';
 import TemplateAreas from './template-areas';
 import EditTemplateTitle from './edit-template-title';
@@ -34,16 +29,6 @@ export default function TemplateDetails( { template, onClose } ) {
 	);
 	const { revertTemplate } = useDispatch( editSiteStore );
 
-	const templateSubMenu = useMemo( () => {
-		if ( template?.type === 'wp_template' ) {
-			return { title: __( 'templates' ), menu: MENU_TEMPLATES };
-		}
-
-		return TEMPLATE_PARTS_SUB_MENUS.find(
-			( { area } ) => area === template?.area
-		);
-	}, [ template ] );
-
 	const browseAllLinkProps = useLink( {
 		// TODO: We should update this to filter by template part's areas as well.
 		postType: template.type,
@@ -106,11 +91,9 @@ export default function TemplateDetails( { template, onClose } ) {
 				className="edit-site-template-details__show-all-button"
 				{ ...browseAllLinkProps }
 			>
-				{ sprintf(
-					/* translators: the template part's area name ("Headers", "Sidebars") or "templates". */
-					__( 'Browse all %s' ),
-					templateSubMenu.title
-				) }
+				{ template?.type === 'wp_template'
+					? __( 'Browse all templates' )
+					: __( 'Browse all template parts' ) }
 			</Button>
 		</div>
 	);

package/src/components/test/error-boundary.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import * as wpHooks from '@wordpress/hooks';
+/**
+ * Internal dependencies
+ */
+import ErrorBoundary from '../error-boundary';
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+const theError = new Error( 'Kaboom' );
+
+const ChildComponent = () => {
+	throw theError;
+};
+
+describe( 'Error Boundary', () => {
+	describe( 'when error is thrown from a Child component', () => {
+		it( 'calls the `editor.ErrorBoundary.errorLogged` hook action with the error object', () => {
+			const doAction = jest.spyOn( wpHooks, 'doAction' );
+
+			render(
+				<ErrorBoundary>
+					<ChildComponent />
+				</ErrorBoundary>
+			);
+
+			expect( doAction ).toHaveBeenCalledWith(
+				'editor.ErrorBoundary.errorLogged',
+				theError
+			);
+			expect( console ).toHaveErrored();
+		} );
+	} );
+} );

package/src/store/selectors.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { map, keyBy } from 'lodash';
+import { map } from 'lodash';
 import createSelector from 'rememo';
 
 /**
@@ -341,10 +341,16 @@ export const getCurrentTemplateTemplateParts = createRegistrySelector(
 			'wp_template_part',
 			{ per_page: -1 }
 		);
-		const templatePartsById = keyBy(
-			templateParts,
-			( templatePart ) => templatePart.id
-		);
+		const templatePartsById = templateParts
+			? // Key template parts by their ID.
+			  templateParts.reduce(
+					( newTemplateParts, part ) => ( {
+						...newTemplateParts,
+						[ part.id ]: part,
+					} ),
+					{}
+			  )
+			: {};
 
 		return ( template.blocks ?? [] )
 			.filter( ( block ) => isTemplatePart( block ) )