@wordpress/edit-site 5.3.1 → 5.3.3

package/src/components/global-styles/screen-heading-color.js

@@ -8,7 +8,7 @@ import {
 } from '@wordpress/components';
 import {
 	__experimentalColorGradientControl as ColorGradientControl,
-	experiments as blockEditorExperiments,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 
@@ -21,9 +21,9 @@ import {
 	useColorsPerOrigin,
 	useGradientsPerOrigin,
 } from './hooks';
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 function ScreenHeadingColor( { name, variation = '' } ) {
 	const prefix = variation ? `variations.${ variation }.` : '';

package/src/components/global-styles/screen-link-color.js

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import {
 	__experimentalColorGradientControl as ColorGradientControl,
-	experiments as blockEditorExperiments,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { TabPanel } from '@wordpress/components';
 
@@ -13,9 +13,9 @@ import { TabPanel } from '@wordpress/components';
  */
 import ScreenHeader from './header';
 import { getSupportedGlobalStylesPanels, useColorsPerOrigin } from './hooks';
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 function ScreenLinkColor( { name, variation = '' } ) {
 	const prefix = variation ? `variations.${ variation }.` : '';

package/src/components/global-styles/screen-root.js

@@ -16,7 +16,7 @@ import { isRTL, __ } from '@wordpress/i18n';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -25,10 +25,10 @@ import { IconWithCurrentColor } from './icon-with-current-color';
 import { NavigationButtonAsItem } from './navigation-button';
 import ContextMenu from './context-menu';
 import StylesPreview from './preview';
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 
 function ScreenRoot() {
-	const { useGlobalStyle } = unlock( blockEditorExperiments );
+	const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 	const [ customCSS ] = useGlobalStyle( 'css' );
 
 	const { variations, canEditCSS } = useSelect( ( select ) => {

package/src/components/global-styles/screen-style-variations.js

@@ -25,7 +25,7 @@ import {
 import { __ } from '@wordpress/i18n';
 import {
 	store as blockEditorStore,
-	experiments as blockEditorExperiments,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 
 /**
@@ -34,9 +34,9 @@ import {
 import { mergeBaseAndUserConfigs } from './global-styles-provider';
 import StylesPreview from './preview';
 import ScreenHeader from './header';
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 
-const { GlobalStylesContext } = unlock( blockEditorExperiments );
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 
 function compareVariations( a, b ) {
 	return (

package/src/components/global-styles/screen-text-color.js

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import {
 	__experimentalColorGradientControl as ColorGradientControl,
-	experiments as blockEditorExperiments,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 
 /**
@@ -12,9 +12,9 @@ import {
  */
 import ScreenHeader from './header';
 import { getSupportedGlobalStylesPanels, useColorsPerOrigin } from './hooks';
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 function ScreenTextColor( { name, variation = '' } ) {
 	const prefix = variation ? `variations.${ variation }.` : '';

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

@@ -8,7 +8,7 @@ import {
 	__experimentalHStack as HStack,
 	FlexItem,
 } from '@wordpress/components';
-import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -19,9 +19,9 @@ import Subtitle from './subtitle';
 import TypographyPanel from './typography-panel';
 import BlockPreviewPanel from './block-preview-panel';
 import { getVariationClassName } from './utils';
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 
-const { useGlobalStyle } = unlock( blockEditorExperiments );
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 function Item( { name, parentMenu, element, label } ) {
 	const hasSupport = ! name;

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

@@ -22,16 +22,16 @@ import {
 import { __ } from '@wordpress/i18n';
 import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
 import { useCallback } from '@wordpress/element';
-import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { getSupportedGlobalStylesPanels } from './hooks';
 import { IconWithCurrentColor } from './icon-with-current-color';
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 export function useHasShadowControl( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
@@ -129,7 +129,7 @@ function ShadowPopoverContainer( { shadow, onShadowChange } ) {
 	return (
 		<div className="edit-site-global-styles__shadow-panel">
 			<VStack spacing={ 4 }>
-				<Heading level={ 5 }>{ __( 'Shadows' ) }</Heading>
+				<Heading level={ 5 }>{ __( 'Shadow' ) }</Heading>
 				<ShadowPresets
 					presets={ shadows }
 					activeShadow={ shadow }

package/src/components/global-styles/style.scss

@@ -1,6 +1,3 @@
-// Variables
-$block-preview-height: 150px;
-
 .edit-site-global-styles-preview {
 	display: flex;
 	align-items: center;
@@ -130,7 +127,6 @@ $block-preview-height: 150px;
 .edit-site-global-styles__block-preview-panel {
 	position: relative;
 	width: 100%;
-	height: $block-preview-height + 2 * $border-width;
 	overflow: auto;
 	border: $gray-200 $border-width solid;
 	border-radius: $radius-block-ui;
@@ -185,7 +181,8 @@ $block-preview-height: 150px;
 }
 
 .edit-site-global-styles-screen-css-help-link {
-	padding-left: $grid-unit-20;
+	display: block;
+	margin-top: $grid-unit-10;
 }
 .edit-site-global-styles-screen-variations {
 	margin-top: $grid-unit-20;

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

@@ -8,7 +8,7 @@ import {
 	__experimentalLetterSpacingControl as LetterSpacingControl,
 	__experimentalTextTransformControl as TextTransformControl,
 	__experimentalTextDecorationControl as TextDecorationControl,
-	experiments as blockEditorExperiments,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import {
 	FontSizePicker,
@@ -21,9 +21,9 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { getSupportedGlobalStylesPanels } from './hooks';
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 export function useHasTypographyPanel( name ) {
 	const hasFontFamily = useHasFontFamilyControl( name );

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

@@ -1,14 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 
-const { useGlobalStyle } = unlock( blockEditorExperiments );
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 export default function TypographyPreview( { name, element, headingLevel } ) {
 	let prefix = '';

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

@@ -10,7 +10,7 @@ import {
 } from '@wordpress/components';
 import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { moreVertical } from '@wordpress/icons';
@@ -37,7 +37,8 @@ import { ScreenVariation } from './screen-variations';
 import ScreenBorder from './screen-border';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
+import ScreenEffects from './screen-effects';
 
 const SLOT_FILL_NAME = 'GlobalStylesMenu';
 const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
@@ -59,7 +60,7 @@ function GlobalStylesActionMenu() {
 				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
 		};
 	}, [] );
-	const { useGlobalStylesReset } = unlock( blockEditorExperiments );
+	const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
 	const [ canReset, onReset ] = useGlobalStylesReset();
 	const { goTo } = useNavigator();
 	const loadCustomCSS = () => goTo( '/css' );
@@ -228,6 +229,10 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 				<ScreenBorder name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path={ parentMenu + '/effects' }>
+				<ScreenEffects name={ name } variation={ variation } />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
 				<ScreenLayout name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
@@ -262,11 +267,6 @@ function GlobalStylesStyleBook( { onClose } ) {
 				)
 			}
 			onSelect={ ( blockName ) => {
-				// Clear navigator history by going back to the root.
-				const depth = path.match( /\//g ).length;
-				for ( let i = 0; i < depth; i++ ) {
-					navigator.goBack();
-				}
 				// Now go to the selected block.
 				navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );
 			} }

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

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

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

@@ -100,10 +100,13 @@ export default function HeaderEditMode() {
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 
-	const openInserter = useCallback( () => {
+	const toggleInserter = useCallback( () => {
 		if ( isInserterOpen ) {
-			// Focusing the inserter button closes the inserter popover.
+			// Focusing the inserter button should close the inserter popover.
+			// However, there are some cases it won't close when the focus is lost.
+			// See https://github.com/WordPress/gutenberg/issues/43090 for more details.
 			inserterButton.current.focus();
+			setIsInserterOpened( false );
 		} else {
 			setIsInserterOpened( true );
 		}
@@ -148,7 +151,7 @@ export default function HeaderEditMode() {
 							variant="primary"
 							isPressed={ isInserterOpen }
 							onMouseDown={ preventDefault }
-							onClick={ openInserter }
+							onClick={ toggleInserter }
 							disabled={ ! isVisualMode }
 							icon={ plus }
 							label={ showIconLabels ? shortLabel : longLabel }

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

@@ -22,7 +22,7 @@ export const textFormattingShortcuts = [
 	},
 	{
 		keyCombination: { character: '[[' },
-		description: __( 'Insert a link to a post or page' ),
+		description: __( 'Insert a link to a post or page.' ),
 	},
 	{
 		keyCombination: { modifier: 'primary', character: 'u' },

package/src/components/layout/index.js

@@ -19,7 +19,7 @@ import {
 	useResizeObserver,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect, useRef } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import { NavigableRegion } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
@@ -38,7 +38,8 @@ 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';
+import { unlock } from '../../private-apis';
+import SavePanel from '../save-panel';
 
 const ANIMATION_DURATION = 0.5;
 const emptyResizeHandleStyles = {
@@ -86,21 +87,20 @@ export default function Layout() {
 	} );
 	const disableMotion = useReducedMotion();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const [ isMobileCanvasVisible, setIsMobileCanvasVisible ] =
-		useState( false );
 	const canvasPadding = isMobileViewport ? 0 : 24;
 	const showSidebar =
-		( isMobileViewport && ! isMobileCanvasVisible ) ||
+		( isMobileViewport && ! isListPage ) ||
 		( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) );
 	const showCanvas =
-		( isMobileViewport && isMobileCanvasVisible ) || ! isMobileViewport;
+		( isMobileViewport && isEditorPage && canvasMode === 'edit' ) ||
+		! isMobileViewport ||
+		! isEditorPage;
 	const showFrame =
-		! isEditorPage || ( canvasMode === 'view' && ! isMobileViewport );
-
+		( ! isEditorPage && ! isMobileViewport ) ||
+		( ! isMobileViewport && isEditorPage && canvasMode === 'view' );
 	const isFullCanvas =
-		( isEditorPage && canvasMode === 'edit' && ! isMobileViewport ) ||
-		isMobileCanvasVisible;
-	// Ideally this effect could be removed if we move the "isMobileCanvasVisible" into the store.
+		( isMobileViewport && isListPage ) ||
+		( isEditorPage && canvasMode === 'edit' );
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
 	const [ fullResizer, fullSize ] = useResizeObserver();
 	const [ forcedWidth, setForcedWidth ] = useState( null );
@@ -111,15 +111,6 @@ export default function Layout() {
 	if ( showFrame && ! isResizing ) {
 		canvasWidth = canvasSize.width - canvasPadding;
 	}
-	useEffect( () => {
-		if ( canvasMode === 'view' && isMobileViewport ) {
-			setIsMobileCanvasVisible( false );
-		}
-
-		if ( canvasMode === 'edit' && isMobileViewport ) {
-			setIsMobileCanvasVisible( true );
-		}
-	}, [ canvasMode, isMobileViewport ] );
 
 	// Synchronizing the URL with the store value of canvasMode happens in an effect
 	// This condition ensures the component is only rendered after the synchronization happens
@@ -152,37 +143,34 @@ export default function Layout() {
 								? forcedWidth - 48
 								: undefined,
 					} }
-					isMobileCanvasVisible={ isMobileCanvasVisible }
-					setIsMobileCanvasVisible={ setIsMobileCanvasVisible }
 				/>
 
 				<AnimatePresence initial={ false }>
-					{ isEditorPage &&
-						( canvasMode === 'edit' || isMobileCanvasVisible ) && (
-							<NavigableRegion
-								className="edit-site-layout__header"
-								ariaLabel={ __( 'Editor top bar' ) }
-								as={ motion.div }
-								animate={ {
-									y: 0,
-								} }
-								initial={ {
-									y: '-100%',
-								} }
-								exit={ {
-									y: '-100%',
-								} }
-								transition={ {
-									type: 'tween',
-									duration: disableMotion
-										? 0
-										: ANIMATION_DURATION,
-									ease: 'easeOut',
-								} }
-							>
-								{ canvasMode === 'edit' && <Header /> }
-							</NavigableRegion>
-						) }
+					{ isEditorPage && canvasMode === 'edit' && (
+						<NavigableRegion
+							className="edit-site-layout__header"
+							ariaLabel={ __( 'Editor top bar' ) }
+							as={ motion.div }
+							animate={ {
+								y: 0,
+							} }
+							initial={ {
+								y: '-100%',
+							} }
+							exit={ {
+								y: '-100%',
+							} }
+							transition={ {
+								type: 'tween',
+								duration: disableMotion
+									? 0
+									: ANIMATION_DURATION,
+								ease: 'easeOut',
+							} }
+						>
+							{ canvasMode === 'edit' && <Header /> }
+						</NavigableRegion>
+					) }
 				</AnimatePresence>
 
 				<div className="edit-site-layout__content">
@@ -267,6 +255,8 @@ export default function Layout() {
 						) }
 					</AnimatePresence>
 
+					<SavePanel />
+
 					{ showCanvas && (
 						<div
 							className={ classnames(

package/src/components/layout/style.scss

@@ -1,5 +1,3 @@
-$hub-height: $grid-unit-20 * 2 + $button-size;
-
 .edit-site-layout {
 	height: 100%;
 	background: $gray-900;
@@ -10,24 +8,23 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 
 .edit-site-layout__hub {
 	position: fixed;
-	top: $canvas-padding;
-	left: $canvas-padding;
+	top: 0;
+	left: 0;
 	width: calc(100vw - #{$canvas-padding * 2});
-	height: $hub-height;
+	height: $header-height;
 	z-index: z-index(".edit-site-layout__hub");
 
-	background: $black;
-	padding: $grid-unit-20;
-	padding-left: 0;
-	border-radius: $radius-block-ui * 4;
-	box-shadow: $shadow-modal;
+	.edit-site-layout.is-full-canvas.is-edit-mode & {
+		width: auto;
+		padding-right: 0;
+	}
+
+	@include break-medium {
+		width: calc(#{$nav-sidebar-width} - #{$canvas-padding * 2});
+	}
 
 	.edit-site-layout.is-full-canvas & {
-		top: 0;
-		left: 0;
-		padding: 0;
 		padding-right: $grid-unit-20;
-		height: $header-height;
 		border-radius: 0;
 		width: 100vw;
 		box-shadow: none;
@@ -37,15 +34,6 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 			padding-right: 0;
 		}
 	}
-
-	.edit-site-layout.is-full-canvas.is-edit-mode & {
-		width: auto;
-		padding-right: 0;
-	}
-
-	@include break-medium {
-		width: calc(#{$nav-sidebar-width} - #{$canvas-padding * 2});
-	}
 }
 
 .edit-site-layout__header {
@@ -85,9 +73,9 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 	}
 
 	> div {
-		overflow-y: auto;
-		min-height: 100%;
-		@include custom-scrollbars-on-hover;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
 	}
 
 	.resizable-editor__drag-handle {
@@ -205,3 +193,25 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 		border-radius: $radius-block-ui;
 	}
 }
+
+.edit-site-layout__actions {
+	z-index: z-index(".edit-site-layout__actions");
+	position: fixed !important; // Need to override the default relative positioning
+	top: -9999em;
+	bottom: auto;
+	left: auto;
+	right: 0;
+	width: $sidebar-width;
+	color: $gray-900;
+	background: $white;
+
+	&:focus,
+	&:focus-within {
+		top: 0;
+		bottom: 0;
+	}
+
+	@include break-medium {
+		border-left: $border-width solid $gray-300;
+	}
+}

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

@@ -24,7 +24,7 @@ export default function RenameMenuItem( { template, onClose } ) {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 
-	if ( ! template.is_custom ) {
+	if ( template.type === 'wp_template' && ! template.is_custom ) {
 		return null;
 	}
 

package/src/components/list/table.js

@@ -84,6 +84,10 @@ export default function Table( { templateType } ) {
 							<Heading level={ 4 }>
 								<Link
 									params={ {
+										path:
+											template.type === 'wp_template'
+												? '/templates/single'
+												: '/template-parts/single',
 										postId: template.id,
 										postType: template.type,
 									} }

package/src/components/navigation-inspector/navigation-menu.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import {
-	experiments as blockEditorExperiments,
+	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
@@ -11,7 +11,7 @@ import { useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 
 const ALLOWED_BLOCKS = {
 	'core/navigation': [
@@ -39,7 +39,7 @@ const ALLOWED_BLOCKS = {
 export default function NavigationMenu( { innerBlocks, onSelect } ) {
 	const { updateBlockListSettings } = useDispatch( blockEditorStore );
 
-	const { OffCanvasEditor } = unlock( blockEditorExperiments );
+	const { OffCanvasEditor } = unlock( blockEditorPrivateApis );
 
 	//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