@wordpress/edit-site 5.12.6 → 5.14.0

package/src/components/canvas-spinner/style.scss

@@ -4,4 +4,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
+
+	circle {
+		stroke: rgba($black, 0.3);
+	}
 }

package/src/components/create-pattern-modal/index.js

@@ -56,7 +56,7 @@ export default function CreatePatternModal( {
 					status: 'publish',
 					meta:
 						syncType === SYNC_TYPES.unsynced
-							? { sync_status: syncType }
+							? { wp_pattern_sync_status: syncType }
 							: undefined,
 				},
 				{ throwOnError: true }

package/src/components/editor/index.js

@@ -63,6 +63,18 @@ const typeLabels = {
 	wp_block: __( 'Pattern' ),
 };
 
+// Prevent accidental removal of certain blocks, asking the user for
+// confirmation.
+const blockRemovalRules = {
+	'core/query': __( 'Query Loop displays a list of posts or pages.' ),
+	'core/post-content': __(
+		'Post Content displays the content of a post or page.'
+	),
+	'core/footnotes': __(
+		'The Footnotes block displays all footnotes found in the content. Note that any footnotes in the content will persist after removing this block.'
+	),
+};
+
 export default function Editor( { isLoading } ) {
 	const {
 		record: editedPost,
@@ -197,7 +209,9 @@ export default function Editor( { isLoading } ) {
 									{ showVisualEditor && editedPost && (
 										<>
 											<BlockEditor />
-											<BlockRemovalWarningModal />
+											<BlockRemovalWarningModal
+												rules={ blockRemovalRules }
+											/>
 										</>
 									) }
 									{ editorMode === 'text' &&

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

@@ -91,15 +91,16 @@ function Palette( { name } ) {
 					</HStack>
 				</NavigationButtonAsItem>
 			</ItemGroup>
-			{ themeColors?.length > 0 && (
-				<Button
-					variant="secondary"
-					icon={ shuffle }
-					onClick={ randomizeThemeColors }
-				>
-					{ __( 'Randomize colors' ) }
-				</Button>
-			) }
+			{ window.__experimentalEnableColorRandomizer &&
+				themeColors?.length > 0 && (
+					<Button
+						variant="secondary"
+						icon={ shuffle }
+						onClick={ randomizeThemeColors }
+					>
+						{ __( 'Randomize colors' ) }
+					</Button>
+				) }
 		</VStack>
 	);
 }

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

@@ -367,6 +367,7 @@ const BASE_SETTINGS = {
 			textColumns: false,
 			textDecoration: true,
 			textTransform: true,
+			writingMode: false,
 			fluid: true,
 			fontFamilies: {
 				theme: [

package/src/components/header-edit-mode/document-actions/style.scss

@@ -16,6 +16,14 @@
 		color: currentColor;
 		background: $gray-200;
 	}
+
+	@include break-medium() {
+		width: 50%;
+	}
+
+	@include break-large() {
+		width: min(100%, 450px);
+	}
 }
 
 .edit-site-document-actions__command {

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

@@ -108,6 +108,9 @@ export default function HeaderEditMode() {
 		};
 	}, [] );
 
+	const { get: getPreference } = useSelect( preferencesStore );
+	const hasFixedToolbar = getPreference( editSiteStore.name, 'fixedToolbar' );
+
 	const {
 		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
 		setIsInserterOpened,
@@ -213,14 +216,18 @@ export default function HeaderEditMode() {
 						) }
 						{ isLargeViewport && (
 							<>
-								<ToolbarItem
-									as={ ToolSelector }
-									showTooltip={ ! showIconLabels }
-									variant={
-										showIconLabels ? 'tertiary' : undefined
-									}
-									disabled={ ! isVisualMode }
-								/>
+								{ ! hasFixedToolbar && (
+									<ToolbarItem
+										as={ ToolSelector }
+										showTooltip={ ! showIconLabels }
+										variant={
+											showIconLabels
+												? 'tertiary'
+												: undefined
+										}
+										disabled={ ! isVisualMode }
+									/>
+								) }
 								<ToolbarItem
 									as={ UndoButton }
 									showTooltip={ ! showIconLabels }
@@ -257,7 +264,8 @@ export default function HeaderEditMode() {
 									/>
 								) }
 								{ isZoomedOutViewExperimentEnabled &&
-									! isDistractionFree && (
+									! isDistractionFree &&
+									! hasFixedToolbar && (
 										<ToolbarItem
 											as={ Button }
 											className="edit-site-header-edit-mode__zoom-out-view-toggle"

package/src/components/layout/index.js

@@ -143,7 +143,7 @@ export default function Layout() {
 		headerAnimationState = canvasMode; // edit, view, init
 	}
 
-	// Sets the right context for the command center
+	// Sets the right context for the command palette
 	const commandContext =
 		canvasMode === 'edit' && isEditorPage
 			? 'site-editor-edit'
@@ -224,14 +224,25 @@ export default function Layout() {
 					<AnimatePresence initial={ false }>
 						{ isEditorPage && isEditing && (
 							<NavigableRegion
+								key="header"
 								className="edit-site-layout__header"
 								ariaLabel={ __( 'Editor top bar' ) }
 								as={ motion.div }
 								variants={ {
-									isDistractionFree: { opacity: 0 },
-									isDistractionFreeHovering: { opacity: 1 },
-									view: { opacity: 1 },
-									edit: { opacity: 1 },
+									isDistractionFree: { opacity: 0, y: 0 },
+									isDistractionFreeHovering: {
+										opacity: 1,
+										y: 0,
+									},
+									view: { opacity: 1, y: '-100%' },
+									edit: { opacity: 1, y: 0 },
+								} }
+								exit={ {
+									y: '-100%',
+								} }
+								initial={ {
+									opacity: isDistractionFree ? 1 : 0,
+									y: isDistractionFree ? 0 : '-100%',
 								} }
 								transition={ {
 									type: 'tween',
@@ -239,51 +250,35 @@ export default function Layout() {
 									ease: 'easeOut',
 								} }
 							>
-								{ isEditing && <Header /> }
+								<Header />
 							</NavigableRegion>
 						) }
 					</AnimatePresence>
 				</motion.div>
 
 				<div className="edit-site-layout__content">
-					<AnimatePresence initial={ false }>
-						{
-							<motion.div
-								initial={ {
-									opacity: 0,
-								} }
-								animate={
-									showSidebar
-										? { opacity: 1, display: 'block' }
-										: {
-												opacity: 0,
-												transitionEnd: {
-													display: 'none',
-												},
-										  }
-								}
-								exit={ {
-									opacity: 0,
-								} }
-								transition={ {
-									type: 'tween',
-									duration:
-										// Disable transition in mobile to emulate a full page transition.
-										disableMotion || isMobileViewport
-											? 0
-											: ANIMATION_DURATION,
-									ease: 'easeOut',
-								} }
-								className="edit-site-layout__sidebar"
-							>
-								<NavigableRegion
-									ariaLabel={ __( 'Navigation' ) }
-								>
-									<Sidebar />
-								</NavigableRegion>
-							</motion.div>
-						}
-					</AnimatePresence>
+					<motion.div
+						// The sidebar is needed for routing on mobile
+						// (https://github.com/WordPress/gutenberg/pull/51558/files#r1231763003),
+						// so we can't remove the element entirely. Using `inert` will make
+						// it inaccessible to screen readers and keyboard navigation.
+						inert={ showSidebar ? undefined : 'inert' }
+						animate={ { opacity: showSidebar ? 1 : 0 } }
+						transition={ {
+							type: 'tween',
+							duration:
+								// Disable transition in mobile to emulate a full page transition.
+								disableMotion || isMobileViewport
+									? 0
+									: ANIMATION_DURATION,
+							ease: 'easeOut',
+						} }
+						className="edit-site-layout__sidebar"
+					>
+						<NavigableRegion ariaLabel={ __( 'Navigation' ) }>
+							<Sidebar />
+						</NavigableRegion>
+					</motion.div>
 
 					<SavePanel />
 

package/src/components/layout/style.scss

@@ -4,17 +4,6 @@
 	color: $gray-400;
 	display: flex;
 	flex-direction: column;
-
-	// Expand the fixed block toolbar to cover the document title control.
-	.block-editor-block-contextual-toolbar {
-		@include break-medium() {
-			&.is-fixed {
-				// the combined with of the tools at the right of the header and the margin left
-				width: calc(100% - 240px - #{$grid-unit-80} - #{$grid-unit-70});
-			}
-		}
-	}
-
 }
 
 .edit-site-layout__hub {

package/src/components/page/header.js

@@ -18,7 +18,7 @@ export default function Header( { title, subTitle, actions } ) {
 		<HStack as="header" alignment="left" className="edit-site-page-header">
 			<FlexBlock className="edit-site-page-header__page-title">
 				<Heading
-					as="h1"
+					as="h2"
 					level={ 4 }
 					className="edit-site-page-header__title"
 				>

package/src/components/page-actions/delete-page-menu-item.js

@@ -63,6 +63,7 @@ export default function DeletePageMenuItem( { postId, onRemove } ) {
 				isOpen={ isModalOpen }
 				onConfirm={ removePage }
 				onCancel={ () => setIsModalOpen( false ) }
+				confirmButtonText={ __( 'Delete' ) }
 			>
 				{ __( 'Are you sure you want to delete this page?' ) }
 			</ConfirmDialog>

package/src/components/page-patterns/grid-item.js

@@ -12,7 +12,6 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
-	__experimentalHeading as Heading,
 	__experimentalHStack as HStack,
 	__unstableCompositeItem as CompositeItem,
 	Tooltip,
@@ -122,7 +121,12 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 					aria-label={ item.title }
 					aria-describedby={
 						ariaDescriptions.length
-							? ariaDescriptions.join( ' ' )
+							? ariaDescriptions
+									.map(
+										( _, index ) =>
+											`${ descriptionId }-${ index }`
+									)
+									.join( ' ' )
 							: undefined
 					}
 				>
@@ -155,12 +159,7 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 								icon={ itemIcon }
 							/>
 						) }
-						<Flex
-							as={ Heading }
-							level={ 5 }
-							gap={ 0 }
-							justify="left"
-						>
+						<Flex as="span" gap={ 0 } justify="left">
 							{ item.title }
 							{ item.type === PATTERNS && (
 								<Tooltip

package/src/components/page-patterns/patterns-list.js

@@ -76,7 +76,9 @@ export default function PatternsList( { categoryId, type } ) {
 			{ ! isResolving && !! syncedPatterns.length && (
 				<>
 					<VStack className="edit-site-patterns__section-header">
-						<Heading level={ 4 }>{ __( 'Synced' ) }</Heading>
+						<Heading as="h2" level={ 4 }>
+							{ __( 'Synced' ) }
+						</Heading>
 						<Text variant="muted" as="p">
 							{ __(
 								'Patterns that are kept in sync across your site'
@@ -86,7 +88,7 @@ export default function PatternsList( { categoryId, type } ) {
 					<Grid
 						icon={ symbol }
 						categoryId={ categoryId }
-						label={ __( 'Synced patterns' ) }
+						label={ __( 'Synced' ) }
 						items={ syncedPatterns }
 					/>
 				</>
@@ -94,7 +96,9 @@ export default function PatternsList( { categoryId, type } ) {
 			{ ! isResolving && !! unsyncedPatterns.length && (
 				<>
 					<VStack className="edit-site-patterns__section-header">
-						<Heading level={ 4 }>{ __( 'Standard' ) }</Heading>
+						<Heading as="h2" level={ 4 }>
+							{ __( 'Standard' ) }
+						</Heading>
 						<Text variant="muted" as="p">
 							{ __(
 								'Patterns that can be changed freely without affecting your site'

package/src/components/page-patterns/style.scss

@@ -91,7 +91,7 @@
 }
 
 .edit-site-patterns__pattern-title {
-	color: $gray-600;
+	color: $gray-200;
 
 	.edit-site-patterns__pattern-icon {
 		border-radius: $grid-unit-05;

package/src/components/page-patterns/use-patterns.js

@@ -154,7 +154,7 @@ const reusableBlockToPattern = ( reusableBlock ) => ( {
 	categories: reusableBlock.wp_pattern,
 	id: reusableBlock.id,
 	name: reusableBlock.slug,
-	syncStatus: reusableBlock.meta?.sync_status || SYNC_TYPES.full,
+	syncStatus: reusableBlock.wp_pattern_sync_status || SYNC_TYPES.full,
 	title: reusableBlock.title.raw,
 	type: reusableBlock.type,
 	reusableBlock,

package/src/components/page-template-parts/index.js

@@ -45,7 +45,7 @@ export default function PageTemplateParts() {
 			header: __( 'Template Part' ),
 			cell: ( templatePart ) => (
 				<VStack>
-					<Heading level={ 5 }>
+					<Heading as="h3" level={ 5 }>
 						<Link
 							params={ {
 								postId: templatePart.id,

package/src/components/page-templates/index.js

@@ -46,7 +46,7 @@ export default function PageTemplates() {
 			header: __( 'Template' ),
 			cell: ( template ) => (
 				<VStack>
-					<Heading level={ 5 }>
+					<Heading as="h3" level={ 5 }>
 						<Link
 							params={ {
 								postId: template.id,

package/src/components/sidebar-navigation-screen/style.scss

@@ -107,7 +107,11 @@
 .edit-site-sidebar-navigation-screen__input-control {
 	width: 100%;
 	.components-input-control__container {
-		background: transparent;
+		background: $gray-800;
+
+		.components-button {
+			color: $gray-200 !important;
+		}
 	}
 	.components-input-control__input {
 		color: $gray-200 !important;

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -37,17 +37,27 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { createNotice } = useDispatch( noticesStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
-	const { hasGlobalStyleVariations, isDistractionFree } = useSelect(
-		( select ) => ( {
-			hasGlobalStyleVariations:
-				!! select(
-					coreStore
-				).__experimentalGetCurrentThemeGlobalStylesVariations()?.length,
-			isDistractionFree: select( preferencesStore ).get(
-				editSiteStore.name,
-				'distractionFree'
-			),
-		} ),
+	const { get: getPrefference } = useSelect( preferencesStore );
+
+	const turnOffDistractionFreeMode = useCallback( () => {
+		const isDistractionFree = getPrefference(
+			editSiteStore.name,
+			'distractionFree'
+		);
+		if ( ! isDistractionFree ) {
+			return;
+		}
+		setPreference( editSiteStore.name, 'distractionFree', false );
+		createNotice( 'info', __( 'Distraction free mode turned off' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	}, [ createNotice, setPreference, getPrefference ] );
+	const hasGlobalStyleVariations = useSelect(
+		( select ) =>
+			!! select(
+				coreStore
+			).__experimentalGetCurrentThemeGlobalStylesVariations()?.length,
 		[]
 	);
 	if ( hasGlobalStyleVariations ) {
@@ -63,19 +73,7 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 		<SidebarNavigationItem
 			{ ...props }
 			onClick={ () => {
-				// Disable distraction free mode.
-				if ( isDistractionFree ) {
-					setPreference(
-						editSiteStore.name,
-						'distractionFree',
-						false
-					);
-					createNotice(
-						'info',
-						__( 'Distraction free mode turned off.' ),
-						{ type: 'snackbar' }
-					);
-				}
+				turnOffDistractionFreeMode();
 				// Switch to edit mode.
 				setCanvasMode( 'edit' );
 				// Open global styles sidebar.
@@ -170,22 +168,41 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	const { setCanvasMode, setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
+	const { createNotice } = useDispatch( noticesStore );
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const { get: getPrefference } = useSelect( preferencesStore );
+	const { isViewMode, isStyleBookOpened } = useSelect( ( select ) => {
+		const { getCanvasMode, getEditorCanvasContainerView } = unlock(
+			select( editSiteStore )
+		);
+		return {
+			isViewMode: 'view' === getCanvasMode(),
+			isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(),
+		};
+	}, [] );
 
-	const isStyleBookOpened = useSelect(
-		( select ) =>
-			'style-book' ===
-			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
-		[]
-	);
+	const turnOffDistractionFreeMode = useCallback( () => {
+		const isDistractionFree = getPrefference(
+			editSiteStore.name,
+			'distractionFree'
+		);
+		if ( ! isDistractionFree ) {
+			return;
+		}
+		setPreference( editSiteStore.name, 'distractionFree', false );
+		createNotice( 'info', __( 'Distraction free mode turned off' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	}, [ createNotice, setPreference, getPrefference ] );
 
-	const openGlobalStyles = useCallback(
-		async () =>
-			Promise.all( [
-				setCanvasMode( 'edit' ),
-				openGeneralSidebar( 'edit-site/global-styles' ),
-			] ),
-		[ setCanvasMode, openGeneralSidebar ]
-	);
+	const openGlobalStyles = useCallback( async () => {
+		turnOffDistractionFreeMode();
+		return Promise.all( [
+			setCanvasMode( 'edit' ),
+			openGeneralSidebar( 'edit-site/global-styles' ),
+		] );
+	}, [ setCanvasMode, openGeneralSidebar, turnOffDistractionFreeMode ] );
 
 	const openStyleBook = useCallback( async () => {
 		await openGlobalStyles();
@@ -246,7 +263,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
 					</>
 				}
 			/>
-			{ isStyleBookOpened && ! isMobileViewport && (
+			{ isStyleBookOpened && ! isMobileViewport && isViewMode && (
 				<StyleBook
 					enableResizing={ false }
 					isSelected={ () => false }

package/src/components/sidebar-navigation-screen-navigation-menu/delete-modal.js

@@ -1,45 +1,24 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	Button,
-	Modal,
-} from '@wordpress/components';
+import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 export default function RenameModal( { onClose, onConfirm } ) {
 	return (
-		<Modal title={ __( 'Delete' ) } onRequestClose={ onClose }>
-			<form>
-				<VStack spacing="3">
-					<p>
-						{ __(
-							'Are you sure you want to delete this Navigation menu?'
-						) }
-					</p>
-					<HStack justify="right">
-						<Button variant="tertiary" onClick={ onClose }>
-							{ __( 'Cancel' ) }
-						</Button>
+		<ConfirmDialog
+			isOpen={ true }
+			onConfirm={ ( e ) => {
+				e.preventDefault();
+				onConfirm();
 
-						<Button
-							variant="primary"
-							type="submit"
-							onClick={ ( e ) => {
-								e.preventDefault();
-								onConfirm();
-
-								// Immediate close avoids ability to hit delete multiple times.
-								onClose();
-							} }
-						>
-							{ __( 'Delete' ) }
-						</Button>
-					</HStack>
-				</VStack>
-			</form>
-		</Modal>
+				// Immediate close avoids ability to hit delete multiple times.
+				onClose();
+			} }
+			onCancel={ onClose }
+			confirmButtonText={ __( 'Delete' ) }
+		>
+			{ __( 'Are you sure you want to delete this Navigation menu?' ) }
+		</ConfirmDialog>
 	);
 }

package/src/components/sidebar-navigation-screen-navigation-menu/edit-button.js

@@ -2,23 +2,20 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
 import { pencil } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
-import { unlock } from '../../lock-unlock';
-
-export default function EditButton() {
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+import { useLink } from '../routes/link';
 
+export default function EditButton( { postId } ) {
+	const linkInfo = useLink( {
+		postId,
+		postType: 'wp_navigation',
+		canvas: 'edit',
+	} );
 	return (
-		<SidebarButton
-			onClick={ () => setCanvasMode( 'edit' ) }
-			label={ __( 'Edit' ) }
-			icon={ pencil }
-		/>
+		<SidebarButton { ...linkInfo } label={ __( 'Edit' ) } icon={ pencil } />
 	);
 }

package/src/components/sidebar-navigation-screen-navigation-menu/index.js

@@ -17,6 +17,7 @@ import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-nav
 import ScreenNavigationMoreMenu from './more-menu';
 import SingleNavigationMenu from './single-navigation-menu';
 import useNavigationMenuHandlers from './use-navigation-menu-handlers';
+import buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/build-navigation-label';
 
 export const postType = `wp_navigation`;
 
@@ -90,7 +91,11 @@ export default function SidebarNavigationScreenNavigationMenu() {
 						onDuplicate={ _handleDuplicate }
 					/>
 				}
-				title={ decodeEntities( menuTitle ) }
+				title={ buildNavigationLabel(
+					navigationMenu?.title,
+					navigationMenu?.id,
+					navigationMenu?.status
+				) }
 				description={ __( 'This Navigation Menu is empty.' ) }
 			/>
 		);