@wordpress/edit-site 5.2.0 → 5.3.1

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

@@ -1,379 +1,12 @@
-/**
- * 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: [ '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',
-	'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( ', ' );
-}
-
 /**
  *
- * @param {string} path The variation path in the Global Styles tree.
+ * @param {string} variation The variation name.
  *
  * @return {string} The variation class name.
  */
-export function getVariationClassNameFromPath( path ) {
-	if ( ! path ) {
+export function getVariationClassName( variation ) {
+	if ( ! variation ) {
 		return '';
 	}
-	return `is-style-${ path.split( '.' )[ 1 ] }`;
+	return `is-style-${ variation }`;
 }

package/src/components/global-styles-renderer/index.js

@@ -3,16 +3,15 @@
  */
 import { useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
+import { unlock } from '../../experiments';
 
-/**
- * Internal dependencies
- */
-import { useGlobalStylesOutput } from '../global-styles/use-global-styles-output';
+const { useGlobalStylesOutput } = unlock( blockEditorExperiments );
 
 function useGlobalStylesRenderer() {
 	const [ styles, settings, svgFilters ] = useGlobalStylesOutput();

package/src/components/header-edit-mode/document-actions/index.js

@@ -88,6 +88,7 @@ export default function DocumentActions() {
 			// Use the title wrapper as the popover anchor so that the dropdown is
 			// centered over the whole title area rather than just one part of it.
 			anchor: popoverAnchor,
+			placement: 'bottom',
 		} ),
 		[ popoverAnchor ]
 	);
@@ -146,7 +147,6 @@ export default function DocumentActions() {
 
 				<Dropdown
 					popoverProps={ popoverProps }
-					position="bottom center"
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<Button
 							className="edit-site-document-actions__get-info"

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

@@ -94,7 +94,6 @@ export default function KeyboardShortcutHelpModal( {
 		<Modal
 			className="edit-site-keyboard-shortcut-help-modal"
 			title={ __( 'Keyboard shortcuts' ) }
-			closeLabel={ __( 'Close' ) }
 			onRequestClose={ toggleModal }
 		>
 			<ShortcutSection

package/src/components/layout/index.js

@@ -38,6 +38,7 @@ import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-e
 import SiteHub from '../site-hub';
 import ResizeHandle from '../block-editor/resize-handle';
 import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
+import { unlock } from '../../experiments';
 
 const ANIMATION_DURATION = 0.5;
 const emptyResizeHandleStyles = {
@@ -52,7 +53,7 @@ const emptyResizeHandleStyles = {
 	left: undefined,
 };
 
-export default function Layout( { onError } ) {
+export default function Layout() {
 	// This ensures the edited entity id and type are initialized properly.
 	useInitEditedEntityFromURL();
 	useSyncCanvasModeWithURL();
@@ -66,9 +67,9 @@ export default function Layout( { onError } ) {
 			const { getAllShortcutKeyCombinations } = select(
 				keyboardShortcutsStore
 			);
-			const { __unstableGetCanvasMode } = select( editSiteStore );
+			const { getCanvasMode } = unlock( select( editSiteStore ) );
 			return {
-				canvasMode: __unstableGetCanvasMode(),
+				canvasMode: getCanvasMode(),
 				previousShortcut: getAllShortcutKeyCombinations(
 					'core/edit-site/previous-region'
 				),
@@ -236,6 +237,13 @@ export default function Layout( { onError } ) {
 										<ResizeHandle
 											direction="right"
 											variation="separator"
+											resizeWidthBy={ ( delta ) => {
+												setForcedWidth(
+													( forcedWidth ??
+														defaultSidebarWidth ) +
+														delta
+												);
+											} }
 										/>
 									),
 								} }
@@ -307,7 +315,7 @@ export default function Layout( { onError } ) {
 											ease: 'easeOut',
 										} }
 									>
-										<ErrorBoundary onError={ onError }>
+										<ErrorBoundary>
 											{ isEditorPage && <Editor /> }
 											{ isListPage && <ListPage /> }
 										</ErrorBoundary>

package/src/components/layout/style.scss

@@ -63,7 +63,6 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 .edit-site-layout__content {
 	flex-grow: 1;
 	display: flex;
-	gap: $canvas-padding;
 
 	// Hide scrollbars during the edit/view animation.
 	overflow: hidden;
@@ -85,15 +84,15 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 		top: 0;
 	}
 
-	.resizable-editor__drag-handle.is-right {
-		right: math.div(-$grid-unit-15, 2);
-	}
-
 	> div {
 		overflow-y: auto;
 		min-height: 100%;
 		@include custom-scrollbars-on-hover;
 	}
+
+	.resizable-editor__drag-handle {
+		right: 0;
+	}
 }
 
 .edit-site-layout__canvas-container {

package/src/components/list/actions/rename-menu-item.js

@@ -6,11 +6,11 @@ import { useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import {
 	Button,
-	Flex,
-	FlexItem,
 	MenuItem,
 	Modal,
 	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
@@ -75,30 +75,22 @@ export default function RenameMenuItem( { template, onClose } ) {
 			{ isModalOpen && (
 				<Modal
 					title={ __( 'Rename' ) }
-					closeLabel={ __( 'Close' ) }
 					onRequestClose={ () => {
 						setIsModalOpen( false );
 					} }
 					overlayClassName="edit-site-list__rename-modal"
 				>
 					<form onSubmit={ onTemplateRename }>
-						<Flex align="flex-start" gap={ 8 }>
-							<FlexItem>
-								<TextControl
-									label={ __( 'Name' ) }
-									value={ title }
-									onChange={ setTitle }
-									required
-								/>
-							</FlexItem>
-						</Flex>
+						<VStack spacing="5">
+							<TextControl
+								__nextHasNoMarginBottom
+								label={ __( 'Name' ) }
+								value={ title }
+								onChange={ setTitle }
+								required
+							/>
 
-						<Flex
-							className="edit-site-list__rename-modal-actions"
-							justify="flex-end"
-							expanded={ false }
-						>
-							<FlexItem>
+							<HStack justify="right">
 								<Button
 									variant="tertiary"
 									onClick={ () => {
@@ -107,13 +99,12 @@ export default function RenameMenuItem( { template, onClose } ) {
 								>
 									{ __( 'Cancel' ) }
 								</Button>
-							</FlexItem>
-							<FlexItem>
+
 								<Button variant="primary" type="submit">
 									{ __( 'Save' ) }
 								</Button>
-							</FlexItem>
-						</Flex>
+							</HStack>
+						</VStack>
 					</form>
 				</Modal>
 			) }

package/src/components/list/style.scss

@@ -132,10 +132,6 @@
 	}
 }
 
-.edit-site-list__rename-modal-actions {
-	margin-top: $grid-unit-15;
-}
-
 .edit-site-template__actions {
 	button:not(:last-child) {
 		margin-right: $grid-unit-10;

package/src/components/{sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js → navigation-inspector/index.js}

@@ -20,7 +20,7 @@ import NavigationMenu from './navigation-menu';
 
 const NAVIGATION_MENUS_QUERY = [ { per_page: -1, status: 'publish' } ];
 
-export default function NavigationInspector() {
+export default function NavigationInspector( { onSelect } ) {
 	const {
 		selectedNavigationBlockId,
 		clientIdToRef,
@@ -207,8 +207,8 @@ export default function NavigationInspector() {
 					onInput={ onInput }
 				>
 					<NavigationMenu
-						id={ navMenuListId }
 						innerBlocks={ publishedInnerBlocks }
+						onSelect={ onSelect }
 					/>
 				</BlockEditorProvider>
 			) }

package/src/components/{sidebar-edit-mode/navigation-menu-sidebar → navigation-inspector}/navigation-menu.js

@@ -2,13 +2,17 @@
  * WordPress dependencies
  */
 import {
-	__experimentalListView as ListView,
-	__experimentalOffCanvasEditor as OffCanvasEditor,
+	experiments as blockEditorExperiments,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../experiments';
+
 const ALLOWED_BLOCKS = {
 	'core/navigation': [
 		'core/navigation-link',
@@ -32,9 +36,11 @@ const ALLOWED_BLOCKS = {
 	],
 };
 
-export default function NavigationMenu( { innerBlocks, id } ) {
+export default function NavigationMenu( { innerBlocks, onSelect } ) {
 	const { updateBlockListSettings } = useDispatch( blockEditorStore );
 
+	const { OffCanvasEditor } = unlock( blockEditorExperiments );
+
 	//TODO: Block settings are normally updated as a side effect of rendering InnerBlocks in BlockList
 	//Think through a better way of doing this, possible with adding allowed blocks to block library metadata
 	useEffect( () => {
@@ -50,13 +56,5 @@ export default function NavigationMenu( { innerBlocks, id } ) {
 		} );
 	}, [ updateBlockListSettings, innerBlocks ] );
 
-	if ( window?.__experimentalEnableOffCanvasNavigationEditor ) {
-		return (
-			<OffCanvasEditor
-				blocks={ innerBlocks }
-				selectBlockInCanvas={ false }
-			/>
-		);
-	}
-	return <ListView id={ id } />;
+	return <OffCanvasEditor blocks={ innerBlocks } onSelect={ onSelect } />;
 }

package/src/components/{sidebar-edit-mode/navigation-menu-sidebar → navigation-inspector}/style.scss

@@ -44,20 +44,3 @@
 .edit-site-navigation-inspector__empty-msg {
 	padding: 0 $grid-unit-10;
 }
-
-.edit-site-navigation-menu-sidebar__panel {
-	padding: $grid-unit-20;
-}
-
-.edit-site-navigation-sidebar__beta {
-	display: inline-flex;
-	margin-left: $grid-unit-10;
-	padding: 0 $grid-unit-10;
-	height: $grid-unit-30;
-	border-radius: $radius-block-ui;
-	background-color: $gray-900;
-	color: $white;
-	align-items: center;
-	font-size: $helptext-font-size;
-	line-height: 1;
-}

package/src/components/sidebar/index.js

@@ -10,6 +10,7 @@ import { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
 import useSyncSidebarPathWithURL from '../sync-state-with-url/use-sync-sidebar-path-with-url';
+import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
 
 function SidebarScreens() {
 	useSyncSidebarPathWithURL();
@@ -17,6 +18,7 @@ function SidebarScreens() {
 	return (
 		<>
 			<SidebarNavigationScreenMain />
+			<SidebarNavigationScreenNavigationMenus />
 			<SidebarNavigationScreenTemplates postType="wp_template" />
 			<SidebarNavigationScreenTemplates postType="wp_template_part" />
 		</>