@wordpress/edit-site 5.34.0 → 5.35.0

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

@@ -1,201 +1,3 @@
-.edit-site-header-edit-mode {
-	height: $header-height;
-	align-items: center;
-	background-color: $white;
-	color: $gray-900;
-	display: flex;
-	box-sizing: border-box;
-	width: 100%;
-	justify-content: space-between;
-	border-bottom: $border-width solid $gray-200;
+.editor-header {
 	padding-left: $header-height;
-
-	// When top toolbar is engaged and should expand fully.
-	&.show-block-toolbar {
-
-		.edit-site-header-edit-mode__start,
-		.edit-site-header-edit-mode__end {
-			flex-basis: auto;
-		}
-
-		.edit-site-header-edit-mode__center {
-			display: none;
-		}
-	}
-
-	.edit-site-header-edit-mode__start {
-		display: flex;
-		border: none;
-		align-items: center;
-		flex-grow: 1;
-		flex-shrink: 2;
-		// Take up the full height of the header so the border focus
-		// is visible on toolbar buttons.
-		height: 100%;
-		// Allow focus ring to be fully visible on furthest right button.
-		@include break-medium() {
-			padding-right: var(--wp-admin-border-width-focus);
-			// Account for the site hub, which is 60x60px.
-			flex-basis: calc(37.5% - 60px);
-			// We need this to be overflow hidden so the block toolbar can
-			// overflow scroll. If the overflow is visible, flexbox allows
-			// the toolbar to grow outside of the allowed container space.
-			overflow: hidden;
-		}
-	}
-
-	.edit-site-header-edit-mode__end {
-		display: flex;
-		justify-content: flex-end;
-		height: 100%;
-		flex-grow: 1;
-		flex-shrink: 1;
-
-		@include break-medium() {
-			flex-basis: 37.5%;
-		}
-	}
-
-	.edit-site-header-edit-mode__center {
-		align-items: center;
-		display: flex;
-		flex-basis: 100%;
-		flex-grow: 1;
-		flex-shrink: 2;
-		height: 100%;
-		justify-content: center;
-
-		// Flex items will, by default, refuse to shrink below a minimum
-		// intrinsic width. In order to shrink this flexbox item, and
-		// subsequently truncate child text, we set an explicit min-width.
-		// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
-		min-width: 0;
-
-		@include break-medium() {
-			flex-basis: 25%;
-		}
-	}
-
-}
-
-.edit-site-header-edit-mode__toolbar {
-	align-items: center;
-	display: flex;
-	gap: $grid-unit-10;
-	padding-left: $grid-unit-20;
-
-	@include break-medium() {
-		padding-left: $grid-unit-50 * 0.5;
-	}
-
-	@include break-wide() {
-		padding-right: $grid-unit-10;
-	}
-
-	.edit-site-header-edit-mode__inserter-toggle {
-		svg {
-			transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
-			@include reduce-motion("transition");
-		}
-
-		&.is-pressed {
-			svg {
-				transform: rotate(45deg);
-			}
-		}
-	}
-}
-
-/**
- * Buttons on the right side
- */
-
-.edit-site-header-edit-mode__actions {
-	display: inline-flex;
-	align-items: center;
-	flex-wrap: nowrap;
-	// Ensure actions do not press against .edit-site-header-edit-mode__center.
-	padding-left: $grid-unit-10;
-	padding-right: $grid-unit-10;
-	gap: $grid-unit-10;
-}
-
-.edit-site-header-edit-mode__preview-options {
-	opacity: 1;
-	transition: opacity 0.3s;
-
-	&.is-zoomed-out {
-		opacity: 0;
-	}
-}
-
-// Button text label styles
-
-.edit-site-header-edit-mode.show-icon-labels {
-	.components-button.has-icon {
-		width: auto;
-
-		// Hide the button icons when labels are set to display...
-		svg {
-			display: none;
-		}
-		// ... and display labels.
-		&::after {
-			content: attr(aria-label);
-		}
-		&[aria-disabled="true"] {
-			background-color: transparent;
-		}
-	}
-	.is-tertiary {
-		&:active {
-			box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
-			background-color: transparent;
-		}
-	}
-	// Some margins and padding have to be adjusted so the buttons can still fit on smaller screens.
-	.edit-site-save-button__button {
-		padding-left: 6px;
-		padding-right: 6px;
-	}
-
-	// The template details toggle has a custom label, different from its aria-label, so we don't want to display both.
-	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
-		&::after {
-			content: none;
-		}
-	}
-
-	.edit-site-header-edit-mode__inserter-toggle.edit-site-header-edit-mode__inserter-toggle,
-	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
-		height: 36px;
-		padding: 0 $grid-unit-10;
-	}
-
-	.block-editor-block-mover {
-		// Modified group borders.
-		border-left: none;
-
-		&::before {
-			content: "";
-			width: $border-width;
-			height: $grid-unit-30;
-			background-color: $gray-300;
-			margin-top: $grid-unit-05;
-			margin-left: $grid-unit;
-		}
-
-		// Modified block movers horizontal separator.
-		.block-editor-block-mover__move-button-container {
-			&::before {
-				width: calc(100% - #{$grid-unit-30});
-				background: $gray-300;
-				left: calc(50% + 1px);
-			}
-		}
-	}
-}
-
-.components-popover.more-menu-dropdown__content {
-	z-index: z-index(".components-popover.more-menu__content");
 }

package/src/components/layout/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -72,7 +72,6 @@ export default function Layout() {
 
 	const {
 		isDistractionFree,
-		isZoomOutMode,
 		hasFixedToolbar,
 		hasBlockSelected,
 		canvasMode,
@@ -104,9 +103,6 @@ export default function Layout() {
 				'core',
 				'showBlockBreadcrumbs'
 			),
-			isZoomOutMode:
-				select( blockEditorStore ).__unstableGetEditorMode() ===
-				'zoom-out',
 			hasBlockSelected:
 				select( blockEditorStore ).getBlockSelectionStart(),
 		};
@@ -177,7 +173,7 @@ export default function Layout() {
 			<div
 				{ ...navigateRegionsProps }
 				ref={ navigateRegionsProps.ref }
-				className={ classnames(
+				className={ clsx(
 					'edit-site-layout',
 					navigateRegionsProps.className,
 					{
@@ -186,7 +182,6 @@ export default function Layout() {
 						'is-full-canvas': canvasMode === 'edit',
 						'has-fixed-toolbar': hasFixedToolbar,
 						'is-block-toolbar-visible': hasBlockSelected,
-						'is-zoom-out': isZoomOutMode,
 						'has-block-breadcrumbs':
 							hasBlockBreadcrumbs &&
 							! isDistractionFree &&
@@ -291,7 +286,7 @@ export default function Layout() {
 							{ canvasResizer }
 							{ !! canvasSize.width && (
 								<div
-									className={ classnames(
+									className={ clsx(
 										'edit-site-layout__canvas',
 										{
 											'is-right-aligned':

package/src/components/layout/router.js

@@ -3,7 +3,7 @@
  */
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { __ } from '@wordpress/i18n';
-
+import { useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -31,7 +31,15 @@ export default function useLayoutAreas() {
 	const isSiteEditorLoading = useIsSiteEditorLoading();
 	const history = useHistory();
 	const { params } = useLocation();
-	const { postType, postId, path, layout, isCustom, canvas } = params ?? {};
+	const { postType, postId, path, layout, isCustom, canvas } = params;
+
+	useEffect( () => {
+		// `/wp_template_part/all` path is no longer used and redirects to
+		// Patterns page for backward compatibility.
+		if ( path === '/wp_template_part/all' ) {
+			history.replace( { path: '/patterns' } );
+		}
+	}, [ history, path ] );
 
 	// Note: Since "sidebar" is not yet supported here,
 	// returning undefined from "mobile" means show the sidebar.
@@ -45,6 +53,7 @@ export default function useLayoutAreas() {
 				sidebar: (
 					<SidebarNavigationScreen
 						title={ __( 'Manage pages' ) }
+						backPath={ {} }
 						content={ <DataViewsSidebarContent /> }
 					/>
 				),
@@ -78,13 +87,33 @@ export default function useLayoutAreas() {
 	if ( postType && postId ) {
 		let sidebar;
 		if ( postType === 'wp_template_part' || postType === 'wp_block' ) {
-			sidebar = <SidebarNavigationScreenPattern />;
+			sidebar = (
+				<SidebarNavigationScreenPattern
+					backPath={ {
+						path: '/patterns',
+						categoryId: params.categoryId,
+						categoryType: params.categoryType,
+					} }
+				/>
+			);
 		} else if ( postType === 'wp_template' ) {
-			sidebar = <SidebarNavigationScreenTemplate />;
+			sidebar = (
+				<SidebarNavigationScreenTemplate
+					backPath={ { path: '/wp_template' } }
+				/>
+			);
 		} else if ( postType === 'page' ) {
-			sidebar = <SidebarNavigationScreenPage />;
+			sidebar = (
+				<SidebarNavigationScreenPage
+					backPath={ { path: '/page', postId } }
+				/>
+			);
 		} else {
-			sidebar = <SidebarNavigationScreenNavigationMenu />;
+			sidebar = (
+				<SidebarNavigationScreenNavigationMenu
+					backPath={ { path: '/navigation' } }
+				/>
+			);
 		}
 		return {
 			key: 'page',
@@ -104,7 +133,9 @@ export default function useLayoutAreas() {
 		return {
 			key: 'templates-list',
 			areas: {
-				sidebar: <SidebarNavigationScreenTemplatesBrowse />,
+				sidebar: (
+					<SidebarNavigationScreenTemplatesBrowse backPath={ {} } />
+				),
 				content: <PageTemplates />,
 				preview: isListLayout && (
 					<Editor isLoading={ isSiteEditorLoading } />
@@ -117,15 +148,14 @@ export default function useLayoutAreas() {
 		};
 	}
 
-	/* Patterns and Template Parts
-	 * `/wp_template_part/all` path is no longer used, but uses Patterns page screens for
-	 * backwards compatibility.
-	 */
+	// Patterns
+	// `/wp_template_part/all` path is no longer used and redirects to
+	// Patterns page for backward compatibility.
 	if ( path === '/patterns' || path === '/wp_template_part/all' ) {
 		return {
 			key: 'patterns',
 			areas: {
-				sidebar: <SidebarNavigationScreenPatterns />,
+				sidebar: <SidebarNavigationScreenPatterns backPath={ {} } />,
 				content: <PagePatterns />,
 				mobile: <PagePatterns />,
 			},
@@ -137,7 +167,9 @@ export default function useLayoutAreas() {
 		return {
 			key: 'styles',
 			areas: {
-				sidebar: <SidebarNavigationScreenGlobalStyles />,
+				sidebar: (
+					<SidebarNavigationScreenGlobalStyles backPath={ {} } />
+				),
 				preview: <Editor isLoading={ isSiteEditorLoading } />,
 				mobile: canvas === 'edit' && (
 					<Editor isLoading={ isSiteEditorLoading } />
@@ -148,10 +180,28 @@ export default function useLayoutAreas() {
 
 	// Navigation
 	if ( path === '/navigation' ) {
+		if ( postId ) {
+			return {
+				key: 'navigation',
+				areas: {
+					sidebar: (
+						<SidebarNavigationScreenNavigationMenu
+							backPath={ { path: '/navigation' } }
+						/>
+					),
+					preview: <Editor isLoading={ isSiteEditorLoading } />,
+					mobile: canvas === 'edit' && (
+						<Editor isLoading={ isSiteEditorLoading } />
+					),
+				},
+			};
+		}
 		return {
-			key: 'styles',
+			key: 'navigation',
 			areas: {
-				sidebar: <SidebarNavigationScreenNavigationMenus />,
+				sidebar: (
+					<SidebarNavigationScreenNavigationMenus backPath={ {} } />
+				),
 				preview: <Editor isLoading={ isSiteEditorLoading } />,
 				mobile: canvas === 'edit' && (
 					<Editor isLoading={ isSiteEditorLoading } />

package/src/components/layout/style.scss

@@ -165,8 +165,9 @@
 	position: relative;
 	color: $white;
 	border-radius: 0;
-	height: $header-height;
+	height: $header-height +  $border-width;
 	width: $header-height;
+	margin-bottom: -  $border-width;
 	overflow: hidden;
 	padding: 0;
 	display: flex;

package/src/components/page/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -27,7 +27,7 @@ export default function Page( {
 	className,
 	hideTitleFromUI = false,
 } ) {
-	const classes = classnames( 'edit-site-page', className );
+	const classes = clsx( 'edit-site-page', className );
 
 	return (
 		<NavigableRegion className={ classes } ariaLabel={ title }>

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

@@ -32,11 +32,10 @@ import {
 import AddNewPageModal from '../add-new-page';
 import Media from '../media';
 import { unlock } from '../../lock-unlock';
+import { useEditPostAction } from '../dataviews-actions';
 
 const { usePostActions } = unlock( editorPrivateApis );
-
 const { useLocation, useHistory } = unlock( routerPrivateApis );
-
 const EMPTY_ARRAY = [];
 
 function useView( postType ) {
@@ -188,29 +187,6 @@ function FeaturedImage( { item, viewType } ) {
 	);
 }
 
-let PAGE_ACTIONS = [
-	'edit-post',
-	'view-post',
-	'restore',
-	'permanently-delete',
-	'view-post-revisions',
-	'rename-post',
-	'move-to-trash',
-];
-
-if ( process.env.IS_GUTENBERG_PLUGIN ) {
-	PAGE_ACTIONS = [
-		'edit-post',
-		'view-post',
-		'restore',
-		'permanently-delete',
-		'view-post-revisions',
-		'duplicate-post',
-		'rename-post',
-		'move-to-trash',
-	];
-}
-
 export default function PagePages() {
 	const postType = 'page';
 	const [ view, setView ] = useView( postType );
@@ -360,20 +336,14 @@ export default function PagePages() {
 		],
 		[ authors, view.type ]
 	);
-	const onActionPerformed = useCallback(
-		( actionId, items ) => {
-			if ( actionId === 'edit-post' ) {
-				const post = items[ 0 ];
-				history.push( {
-					postId: post.id,
-					postType: post.type,
-					canvas: 'edit',
-				} );
-			}
-		},
-		[ history ]
+
+	const postTypeActions = usePostActions( 'page' );
+	const editAction = useEditPostAction();
+	const actions = useMemo(
+		() => [ editAction, ...postTypeActions ],
+		[ postTypeActions, editAction ]
 	);
-	const actions = usePostActions( onActionPerformed, PAGE_ACTIONS );
+
 	const onChangeView = useCallback(
 		( newView ) => {
 			if ( newView.type !== view.type ) {

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

@@ -50,15 +50,4 @@
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;
 	}
-
-	// Make the button targetable for clicks
-	&::after {
-		content: "";
-		height: 100%;
-		left: 0;
-		position: absolute;
-		top: 0;
-		width: 100%;
-		z-index: 1;
-	}
 }

package/src/components/page-patterns/dataviews-pattern-actions.js

@@ -11,14 +11,11 @@ import { downloadBlob } from '@wordpress/blob';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import {
 	Button,
-	TextControl,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalText as Text,
 } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
 import { useDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { decodeEntities } from '@wordpress/html-entities';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
@@ -91,92 +88,6 @@ export const exportJSONaction = {
 	},
 };
 
-export const renameAction = {
-	id: 'rename-pattern',
-	label: __( 'Rename' ),
-	isEligible: ( item ) => {
-		const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-		const isUserPattern = item.type === PATTERN_TYPES.user;
-		const isCustomPattern =
-			isUserPattern || ( isTemplatePart && item.isCustom );
-		const hasThemeFile = isTemplatePart && item.templatePart.has_theme_file;
-		return isCustomPattern && ! hasThemeFile;
-	},
-	RenderModal: ( { items, closeModal } ) => {
-		const [ item ] = items;
-		const [ title, setTitle ] = useState( () => item.title );
-		const { editEntityRecord, saveEditedEntityRecord } =
-			useDispatch( coreStore );
-		const { createSuccessNotice, createErrorNotice } =
-			useDispatch( noticesStore );
-		async function onRename( event ) {
-			event.preventDefault();
-			try {
-				await editEntityRecord( 'postType', item.type, item.id, {
-					title,
-				} );
-				// Update state before saving rerenders the list.
-				setTitle( '' );
-				closeModal();
-				// Persist edited entity.
-				await saveEditedEntityRecord( 'postType', item.type, item.id, {
-					throwOnError: true,
-				} );
-				createSuccessNotice(
-					item.type === TEMPLATE_PART_POST_TYPE
-						? __( 'Template part renamed.' )
-						: __( 'Pattern renamed.' ),
-					{ type: 'snackbar' }
-				);
-			} catch ( error ) {
-				const fallbackErrorMessage =
-					item.type === TEMPLATE_PART_POST_TYPE
-						? __(
-								'An error occurred while renaming the template part.'
-						  )
-						: __( 'An error occurred while renaming the pattern.' );
-				const errorMessage =
-					error.message && error.code !== 'unknown_error'
-						? error.message
-						: fallbackErrorMessage;
-				createErrorNotice( errorMessage, { type: 'snackbar' } );
-			}
-		}
-		return (
-			<form onSubmit={ onRename }>
-				<VStack spacing="5">
-					<TextControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						label={ __( 'Name' ) }
-						value={ title }
-						onChange={ setTitle }
-						required
-					/>
-					<HStack justify="right">
-						<Button
-							__next40pxDefaultSize
-							variant="tertiary"
-							onClick={ () => {
-								closeModal();
-							} }
-						>
-							{ __( 'Cancel' ) }
-						</Button>
-						<Button
-							__next40pxDefaultSize
-							variant="primary"
-							type="submit"
-						>
-							{ __( 'Save' ) }
-						</Button>
-					</HStack>
-				</VStack>
-			</form>
-		);
-	},
-};
-
 const canDeleteOrReset = ( item ) => {
 	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
 	const isUserPattern = item.type === PATTERN_TYPES.user;
@@ -193,7 +104,7 @@ export const deleteAction = {
 	},
 	hideModalHeader: true,
 	supportsBulk: true,
-	RenderModal: ( { items, closeModal, onPerform } ) => {
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
 		const { __experimentalDeleteReusableBlock } =
 			useDispatch( reusableBlocksStore );
 		const { createErrorNotice, createSuccessNotice } =
@@ -280,8 +191,8 @@ export const deleteAction = {
 			} else {
 				deletePattern();
 			}
-			if ( onPerform ) {
-				onPerform();
+			if ( onActionPerformed ) {
+				onActionPerformed();
 			}
 			closeModal();
 		};