@wordpress/edit-site 5.4.0 → 5.6.0

package/src/components/add-new-template/add-custom-template-modal.js

@@ -11,6 +11,7 @@ import {
 	SearchControl,
 	TextHighlight,
 	__experimentalText as Text,
+	__experimentalVStack as VStack,
 	__unstableComposite as Composite,
 	__unstableUseCompositeState as useCompositeState,
 	__unstableCompositeItem as CompositeItem,
@@ -158,9 +159,12 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 				</Composite>
 			) }
 			{ debouncedSearch && ! suggestions?.length && (
-				<p className="edit-site-custom-template-modal__no-results">
+				<Text
+					as="p"
+					className="edit-site-custom-template-modal__no-results"
+				>
 					{ labels.not_found }
-				</p>
+				</Text>
 			) }
 		</>
 	);
@@ -188,12 +192,12 @@ function AddCustomTemplateModal( {
 		>
 			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
 			{ ! showSearchEntities && (
-				<>
-					<p>
+				<VStack spacing={ 4 }>
+					<Text as="p">
 						{ __(
 							'Select whether to create a single template for all items or a specific one.'
 						) }
-					</p>
+					</Text>
 					<Flex
 						className={ `${ baseCssClass }__contents` }
 						gap="4"
@@ -245,20 +249,20 @@ function AddCustomTemplateModal( {
 							</Text>
 						</FlexItem>
 					</Flex>
-				</>
+				</VStack>
 			) }
 			{ showSearchEntities && (
-				<>
-					<p>
+				<VStack spacing={ 4 }>
+					<Text as="p">
 						{ __(
 							'This template will be used only for the specific item chosen.'
 						) }
-					</p>
+					</Text>
 					<SuggestionList
 						entityForSuggestions={ entityForSuggestions }
 						onSelect={ onSelect }
 					/>
-				</>
+				</VStack>
 			) }
 		</Modal>
 	);

package/src/components/add-new-template/new-template-part.js

@@ -67,12 +67,9 @@ export default function NewTemplatePart( {
 			setCanvasMode( 'edit' );
 
 			// Navigate to the created template part editor.
-			window.queueMicrotask( () => {
-				history.push( {
-					postId: templatePart.id,
-					postType: 'wp_template_part',
-					path: '/template-parts/single',
-				} );
+			history.push( {
+				postId: templatePart.id,
+				postType: 'wp_template_part',
 			} );
 
 			// TODO: Add a success notice?
@@ -89,11 +86,12 @@ export default function NewTemplatePart( {
 			setIsModalOpen( false );
 		}
 	}
+	const { as: Toggle = Button, ...restToggleProps } = toggleProps ?? {};
 
 	return (
 		<>
-			<Button
-				{ ...toggleProps }
+			<Toggle
+				{ ...restToggleProps }
 				onClick={ () => {
 					setIsModalOpen( true );
 				} }
@@ -101,7 +99,7 @@ export default function NewTemplatePart( {
 				label={ postType.labels.add_new }
 			>
 				{ showIcon ? null : postType.labels.add_new }
-			</Button>
+			</Toggle>
 			{ isModalOpen && (
 				<CreateTemplatePartModal
 					closeModal={ () => setIsModalOpen( false ) }

package/src/components/add-new-template/new-template.js

@@ -5,7 +5,8 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
-	NavigableMenu,
+	Tooltip,
+	VisuallyHidden,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
@@ -128,12 +129,9 @@ export default function NewTemplate( {
 			setCanvasMode( 'edit' );
 
 			// Navigate to the created template editor.
-			window.queueMicrotask( () => {
-				history.push( {
-					postId: newTemplate.id,
-					postType: newTemplate.type,
-					path: '/templates/single',
-				} );
+			history.push( {
+				postId: newTemplate.id,
+				postType: newTemplate.type,
 			} );
 
 			createSuccessNotice(
@@ -167,6 +165,11 @@ export default function NewTemplate( {
 	if ( ! missingTemplates.length ) {
 		return null;
 	}
+
+	const customTemplateDescription = __(
+		'A custom template can be manually applied to any post or page.'
+	);
+
 	return (
 		<>
 			<DropdownMenu
@@ -184,7 +187,7 @@ export default function NewTemplate( {
 						{ isCreatingTemplate && (
 							<TemplateActionsLoadingScreen />
 						) }
-						<NavigableMenu className="edit-site-new-template-dropdown__popover">
+						<div className="edit-site-new-template-dropdown__menu-groups">
 							<MenuGroup label={ postType.labels.add_new_item }>
 								{ missingTemplates.map( ( template ) => {
 									const {
@@ -195,44 +198,63 @@ export default function NewTemplate( {
 										icon,
 									} = template;
 									return (
-										<MenuItem
-											icon={
-												icon ||
-												TEMPLATE_ICONS[ slug ] ||
-												post
-											}
-											iconPosition="left"
-											info={ description }
+										<Tooltip
 											key={ slug }
-											onClick={ () =>
-												onClick
-													? onClick( template )
-													: createTemplate( template )
-											}
+											position="top right"
+											text={ description }
+											className="edit-site-new-template-dropdown__menu-item-tooltip"
 										>
-											{ title }
-										</MenuItem>
+											<MenuItem
+												icon={
+													icon ||
+													TEMPLATE_ICONS[ slug ] ||
+													post
+												}
+												iconPosition="left"
+												onClick={ () =>
+													onClick
+														? onClick( template )
+														: createTemplate(
+																template
+														  )
+												}
+											>
+												{ title }
+												{ /* TODO: This probably won't be needed if the <Tooltip> component is accessible.
+												 * @see https://github.com/WordPress/gutenberg/issues/48222 */ }
+												<VisuallyHidden>
+													{ description }
+												</VisuallyHidden>
+											</MenuItem>
+										</Tooltip>
 									);
 								} ) }
 							</MenuGroup>
 							<MenuGroup>
-								<MenuItem
-									icon={ customGenericTemplateIcon }
-									iconPosition="left"
-									info={ __(
-										'Custom templates can be applied to any post or page.'
-									) }
-									key="custom-template"
-									onClick={ () =>
-										setShowCustomGenericTemplateModal(
-											true
-										)
-									}
+								<Tooltip
+									position="top right"
+									text={ customTemplateDescription }
+									className="edit-site-new-template-dropdown__menu-item-tooltip"
 								>
-									{ __( 'Custom template' ) }
-								</MenuItem>
+									<MenuItem
+										icon={ customGenericTemplateIcon }
+										iconPosition="left"
+										onClick={ () =>
+											setShowCustomGenericTemplateModal(
+												true
+											)
+										}
+									>
+										{ __( 'Custom template' ) }
+										{ /* TODO: This probably won't be needed if the <Tooltip> component is accessible.
+										 * @see https://github.com/WordPress/gutenberg/issues/48222 */ }
+										<VisuallyHidden>
+											{ customTemplateDescription }
+										</VisuallyHidden>
+									</MenuItem>
+								</Tooltip>
 							</MenuGroup>
-						</NavigableMenu>
+						</div>
 					</>
 				) }
 			</DropdownMenu>

package/src/components/add-new-template/style.scss

@@ -1,9 +1,20 @@
 .edit-site-new-template-dropdown {
-	.edit-site-new-template-dropdown__popover {
+	.edit-site-new-template-dropdown__menu-groups {
 		@include break-small() {
 			min-width: 300px;
 		}
 	}
+
+	// The specificity is needed to override the default tooltip styles.
+	&__menu-item-tooltip.components-tooltip .components-popover__content {
+		max-width: 320px;
+		padding: $grid-unit-10 $grid-unit-15;
+		border-radius: 2px;
+		white-space: pre-wrap;
+		min-width: 0;
+		width: auto;
+		text-align: left;
+	}
 }
 
 .edit-site-custom-template-modal {
@@ -69,8 +80,6 @@
 }
 
 .edit-site-custom-template-modal__suggestions_list {
-	margin-top: $grid-unit-20;
-
 	@include break-small() {
 		height: 232px;
 		overflow: scroll;
@@ -130,11 +139,8 @@
 	border: 1px solid $gray-400;
 	border-radius: $radius-block-ui;
 	padding: $grid-unit-20;
-	margin-bottom: 0;
-	margin-top: $grid-unit-20;
 }
 
-
 .edit-site-custom-generic-template__modal {
 	.components-base-control {
 		@include break-medium() {

package/src/components/app/index.js

@@ -14,6 +14,7 @@ import { PluginArea } from '@wordpress/plugins';
  */
 import { Routes } from '../routes';
 import Layout from '../layout';
+import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
 
 export default function App() {
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -33,12 +34,14 @@ export default function App() {
 	return (
 		<ShortcutProvider style={ { height: '100%' } }>
 			<SlotFillProvider>
-				<Popover.Slot />
-				<UnsavedChangesWarning />
-				<Routes>
-					<Layout />
-					<PluginArea onError={ onPluginAreaError } />
-				</Routes>
+				<GlobalStylesProvider>
+					<Popover.Slot />
+					<UnsavedChangesWarning />
+					<Routes>
+						<Layout />
+						<PluginArea onError={ onPluginAreaError } />
+					</Routes>
+				</GlobalStylesProvider>
 			</SlotFillProvider>
 		</ShortcutProvider>
 	);

package/src/components/block-editor/editor-canvas.js

@@ -44,7 +44,8 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 						// Forming a "block formatting context" to prevent margin collapsing.
 						// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
 						`.is-root-container { display: flow-root; }
-							body { position: relative; }`
+							body { position: relative;
+							${ canvasMode === 'view' ? 'cursor: pointer;' : '' }}}`
 					}</style>
 					{ enableResizing && (
 						<style>

package/src/components/block-editor/style.scss

@@ -17,7 +17,7 @@
 	height: 100%;
 	display: block;
 	overflow: hidden;
-	background-color: $gray-800;
+	background-color: $gray-900;
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
 

package/src/components/editor/index.js

@@ -25,14 +25,14 @@ import { __, sprintf } from '@wordpress/i18n';
 import { SidebarComplementaryAreaFills } from '../sidebar-edit-mode';
 import BlockEditor from '../block-editor';
 import CodeEditor from '../code-editor';
-import KeyboardShortcuts from '../keyboard-shortcuts';
+import KeyboardShortcutsEditMode from '../keyboard-shortcuts/edit-mode';
 import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
 import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
 import WelcomeGuide from '../welcome-guide';
 import StartTemplateOptions from '../start-template-options';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
-import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
+
 import useTitle from '../routes/use-title';
 import CanvasSpinner from '../canvas-spinner';
 import { unlock } from '../../private-apis';
@@ -151,75 +151,72 @@ export default function Editor() {
 	return (
 		<>
 			{ isEditMode && <WelcomeGuide /> }
-			<KeyboardShortcuts.Register />
 			<EntityProvider kind="root" type="site">
 				<EntityProvider
 					kind="postType"
 					type={ editedPostType }
 					id={ editedPostId }
 				>
-					<GlobalStylesProvider>
-						<BlockContextProvider value={ blockContext }>
-							<SidebarComplementaryAreaFills />
-							{ isEditMode && <StartTemplateOptions /> }
-							<InterfaceSkeleton
-								enableRegionNavigation={ false }
-								className={
-									showIconLabels && 'show-icon-labels'
-								}
-								notices={ isEditMode && <EditorSnackbars /> }
-								content={
-									<>
-										<GlobalStylesRenderer />
-										{ isEditMode && <EditorNotices /> }
-										{ showVisualEditor && editedPost && (
-											<BlockEditor />
-										) }
-										{ editorMode === 'text' &&
-											editedPost &&
-											isEditMode && <CodeEditor /> }
-										{ hasLoadedPost && ! editedPost && (
-											<Notice
-												status="warning"
-												isDismissible={ false }
-											>
-												{ __(
-													"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
-												) }
-											</Notice>
-										) }
-										{ isEditMode && <KeyboardShortcuts /> }
-									</>
-								}
-								secondarySidebar={
-									isEditMode &&
-									( ( shouldShowInserter && (
-										<InserterSidebar />
-									) ) ||
-										( shouldShowListView && (
-											<ListViewSidebar />
-										) ) )
-								}
-								sidebar={
-									isEditMode &&
-									isRightSidebarOpen && (
-										<ComplementaryArea.Slot scope="core/edit-site" />
-									)
-								}
-								footer={
-									showBlockBreakcrumb && (
-										<BlockBreadcrumb
-											rootLabelText={ __( 'Template' ) }
-										/>
-									)
-								}
-								labels={ {
-									...interfaceLabels,
-									secondarySidebar: secondarySidebarLabel,
-								} }
-							/>
-						</BlockContextProvider>
-					</GlobalStylesProvider>
+					<BlockContextProvider value={ blockContext }>
+						<SidebarComplementaryAreaFills />
+						{ isEditMode && <StartTemplateOptions /> }
+						<InterfaceSkeleton
+							enableRegionNavigation={ false }
+							className={ showIconLabels && 'show-icon-labels' }
+							notices={ isEditMode && <EditorSnackbars /> }
+							content={
+								<>
+									<GlobalStylesRenderer />
+									{ isEditMode && <EditorNotices /> }
+									{ showVisualEditor && editedPost && (
+										<BlockEditor />
+									) }
+									{ editorMode === 'text' &&
+										editedPost &&
+										isEditMode && <CodeEditor /> }
+									{ hasLoadedPost && ! editedPost && (
+										<Notice
+											status="warning"
+											isDismissible={ false }
+										>
+											{ __(
+												"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
+											) }
+										</Notice>
+									) }
+									{ isEditMode && (
+										<KeyboardShortcutsEditMode />
+									) }
+								</>
+							}
+							secondarySidebar={
+								isEditMode &&
+								( ( shouldShowInserter && (
+									<InserterSidebar />
+								) ) ||
+									( shouldShowListView && (
+										<ListViewSidebar />
+									) ) )
+							}
+							sidebar={
+								isEditMode &&
+								isRightSidebarOpen && (
+									<ComplementaryArea.Slot scope="core/edit-site" />
+								)
+							}
+							footer={
+								showBlockBreakcrumb && (
+									<BlockBreadcrumb
+										rootLabelText={ __( 'Template' ) }
+									/>
+								)
+							}
+							labels={ {
+								...interfaceLabels,
+								secondarySidebar: secondarySidebarLabel,
+							} }
+						/>
+					</BlockContextProvider>
 				</EntityProvider>
 			</EntityProvider>
 		</>

package/src/components/editor/style.scss

@@ -6,12 +6,6 @@
 	padding: $grid-unit-30;
 	display: flex;
 	justify-content: center;
-
-	.edit-site-layout__actions:focus &,
-	.edit-site-layout__actions:focus-within & {
-		top: auto;
-		bottom: 0;
-	}
 }
 
 // Adjust the position of the notices