@wordpress/edit-site 5.24.1 → 5.25.1-next.79a6196f.0

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

@@ -25,7 +25,9 @@ $header-toolbar-min-width: 335px;
 		// is visible on toolbar buttons.
 		height: 100%;
 		// Allow focus ring to be fully visible on furthest right button.
-		padding-right: 2px;
+		@include break-medium() {
+			padding-right: 2px;
+		}
 	}
 
 	.edit-site-header-edit-mode__end {
@@ -38,7 +40,7 @@ $header-toolbar-min-width: 335px;
 		align-items: center;
 		height: 100%;
 		flex-grow: 1;
-		margin: 0 $grid-unit-10;
+		margin: 0 $grid-unit-20;
 		justify-content: center;
 		// Flex items will, by default, refuse to shrink below a minimum
 		// intrinsic width. In order to shrink this flexbox item, and
@@ -47,18 +49,16 @@ $header-toolbar-min-width: 335px;
 		min-width: 0;
 	}
 
-	.block-editor-block-contextual-toolbar.is-fixed {
-		border: none;
-	}
 }
 
 .edit-site-header-edit-mode__toolbar {
 	display: flex;
 	align-items: center;
-	padding-left: $grid-unit-10;
+	padding-left: $grid-unit-20;
+	gap: $grid-unit-10;
 
-	@include break-small() {
-		padding-left: $grid-unit-30;
+	@include break-medium() {
+		padding-left: $grid-unit-50 * 0.5;
 	}
 
 	@include break-wide() {
@@ -66,12 +66,6 @@ $header-toolbar-min-width: 335px;
 	}
 
 	.edit-site-header-edit-mode__inserter-toggle {
-		margin-right: $grid-unit-10;
-		min-width: $grid-unit-40;
-		width: $grid-unit-40;
-		height: $grid-unit-40;
-		padding: 0;
-
 		svg {
 			transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
 			@include reduce-motion("transition");
@@ -92,17 +86,8 @@ $header-toolbar-min-width: 335px;
 .edit-site-header-edit-mode__actions {
 	display: inline-flex;
 	align-items: center;
-	padding-right: $grid-unit-05;
-
-	@include break-small () {
-		padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5);
-	}
-
-	gap: $grid-unit-05;
-
-	@include break-small() {
-		gap: $grid-unit-10;
-	}
+	padding-right: $grid-unit-10;
+	gap: $grid-unit-10;
 }
 
 .edit-site-header-edit-mode__preview-options {
@@ -114,47 +99,6 @@ $header-toolbar-min-width: 335px;
 	}
 }
 
-.edit-site-header-edit-mode__document-tools {
-	display: flex;
-	border: none;
-
-	// The Toolbar component adds different styles to buttons, so we reset them
-	// here to the original button styles
-	.edit-site-header-edit-mode__toolbar > .components-button.has-icon,
-	.edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon {
-		height: $button-size;
-		min-width: $button-size;
-		padding: 6px;
-
-		&.is-pressed {
-			background: $gray-900;
-		}
-
-		&:focus:not(:disabled) {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
-			outline: 1px solid transparent;
-		}
-
-		&::before {
-			display: none;
-		}
-	}
-
-	.edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-icon {
-		margin-right: $grid-unit-10;
-		// Special dimensions for this button.
-		min-width: 32px;
-		width: 32px;
-		height: 32px;
-		padding: 0;
-	}
-
-	.edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-text.has-icon {
-		width: auto;
-		padding: 0 $grid-unit-10;
-	}
-}
-
 // Button text label styles
 
 .edit-site-header-edit-mode.show-icon-labels {
@@ -198,8 +142,17 @@ $header-toolbar-min-width: 335px;
 		padding: 0 $grid-unit-10;
 	}
 
-	.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > * + * {
-		margin-left: $grid-unit-10;
+	.block-editor-block-mover {
+		border-left: none;
+
+		&::before {
+			content: "";
+			width: $border-width;
+			margin-top: $grid-unit + $grid-unit-05;
+			margin-bottom: $grid-unit + $grid-unit-05;
+			background-color: $gray-300;
+			margin-left: $grid-unit;
+		}
 	}
 }
 
@@ -207,6 +160,31 @@ $header-toolbar-min-width: 335px;
 	.selected-block-tools-wrapper {
 		overflow-x: scroll;
 
+		.block-editor-block-contextual-toolbar {
+			border-bottom: 0;
+		}
+
+		// Modified group borders
+		.components-toolbar-group,
+		.components-toolbar {
+			border-right: none;
+
+			&::after {
+				content: "";
+				width: $border-width;
+				margin-top: $grid-unit + $grid-unit-05;
+				margin-bottom: $grid-unit + $grid-unit-05;
+				background-color: $gray-300;
+				margin-left: $grid-unit;
+			}
+
+			& .components-toolbar-group.components-toolbar-group {
+				&::after {
+					display: none;
+				}
+			}
+		}
+
 		&.is-collapsed {
 			display: none;
 		}

package/src/components/keyboard-shortcuts/edit-mode.js

@@ -3,7 +3,6 @@
  */
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as interfaceStore } from '@wordpress/interface';
 import { createBlock } from '@wordpress/blocks';
@@ -17,10 +16,6 @@ import { STORE_NAME } from '../../store/constants';
 
 function KeyboardShortcutsEditMode() {
 	const { getEditorMode } = useSelect( editSiteStore );
-	const isListViewOpen = useSelect(
-		( select ) => select( editSiteStore ).isListViewOpened(),
-		[]
-	);
 	const isBlockInspectorOpen = useSelect(
 		( select ) =>
 			select( interfaceStore ).getActiveComplementaryArea(
@@ -28,12 +23,10 @@ function KeyboardShortcutsEditMode() {
 			) === SIDEBAR_BLOCK,
 		[]
 	);
-	const { redo, undo } = useDispatch( coreStore );
-	const { setIsListViewOpened, switchEditorMode, toggleDistractionFree } =
+	const { switchEditorMode, toggleDistractionFree } =
 		useDispatch( editSiteStore );
 	const { enableComplementaryArea, disableComplementaryArea } =
 		useDispatch( interfaceStore );
-
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
 		useSelect( blockEditorStore );
@@ -66,24 +59,6 @@ function KeyboardShortcutsEditMode() {
 		);
 	};
 
-	useShortcut( 'core/edit-site/undo', ( event ) => {
-		undo();
-		event.preventDefault();
-	} );
-
-	useShortcut( 'core/edit-site/redo', ( event ) => {
-		redo();
-		event.preventDefault();
-	} );
-
-	// Only opens the list view. Other functionality for this shortcut happens in the rendered sidebar.
-	useShortcut( 'core/edit-site/toggle-list-view', () => {
-		if ( isListViewOpen ) {
-			return;
-		}
-		setIsListViewOpened( true );
-	} );
-
 	useShortcut( 'core/edit-site/toggle-block-settings-sidebar', ( event ) => {
 		// This shortcut has no known clashes, but use preventDefault to prevent any
 		// obscure shortcuts from triggering.

package/src/components/keyboard-shortcuts/register.js

@@ -3,7 +3,6 @@
  */
 import { useEffect } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { isAppleOS } from '@wordpress/keycodes';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -21,48 +20,6 @@ function KeyboardShortcutsRegister() {
 			},
 		} );
 
-		registerShortcut( {
-			name: 'core/edit-site/undo',
-			category: 'global',
-			description: __( 'Undo your last changes.' ),
-			keyCombination: {
-				modifier: 'primary',
-				character: 'z',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/redo',
-			category: 'global',
-			description: __( 'Redo your last undo.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: 'z',
-			},
-			// Disable on Apple OS because it conflicts with the browser's
-			// history shortcut. It's a fine alias for both Windows and Linux.
-			// Since there's no conflict for Ctrl+Shift+Z on both Windows and
-			// Linux, we keep it as the default for consistency.
-			aliases: isAppleOS()
-				? []
-				: [
-						{
-							modifier: 'primary',
-							character: 'y',
-						},
-				  ],
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/toggle-list-view',
-			category: 'global',
-			description: __( 'Open the block list view.' ),
-			keyCombination: {
-				modifier: 'access',
-				character: 'o',
-			},
-		} );
-
 		registerShortcut( {
 			name: 'core/edit-site/toggle-block-settings-sidebar',
 			category: 'global',

package/src/components/layout/index.js

@@ -98,11 +98,11 @@ export default function Layout() {
 				'core/edit-site/next-region'
 			),
 			hasFixedToolbar: select( preferencesStore ).get(
-				'core/edit-site',
+				'core',
 				'fixedToolbar'
 			),
 			isDistractionFree: select( preferencesStore ).get(
-				'core/edit-site',
+				'core',
 				'distractionFree'
 			),
 			hasBlockSelected:
@@ -126,12 +126,9 @@ export default function Layout() {
 		( isMobileViewport && isListPage ) || ( isEditorPage && isEditing );
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
 	const [ fullResizer ] = useResizeObserver();
-	const [ isResizing ] = useState( false );
 	const isEditorLoading = useIsSiteEditorLoading();
 	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
 		useState( false );
-	const [ listViewToggleElement, setListViewToggleElement ] =
-		useState( null );
 
 	// This determines which animation variant should apply to the header.
 	// There is also a `isDistractionFreeHovering` state that gets priority
@@ -259,11 +256,7 @@ export default function Layout() {
 									ease: 'easeOut',
 								} }
 							>
-								<Header
-									setListViewToggleElement={
-										setListViewToggleElement
-									}
-								/>
+								<Header />
 							</NavigableRegion>
 						) }
 					</AnimatePresence>
@@ -278,26 +271,27 @@ export default function Layout() {
 						ariaLabel={ __( 'Navigation' ) }
 						className="edit-site-layout__sidebar-region"
 					>
-						<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 : 'true' }
-							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"
-						>
-							<Sidebar />
-						</motion.div>
+						<AnimatePresence>
+							{ showSidebar && (
+								<motion.div
+									initial={ { opacity: 0 } }
+									animate={ { opacity: 1 } }
+									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"
+								>
+									<Sidebar />
+								</motion.div>
+							) }
+						</AnimatePresence>
 					</NavigableRegion>
 
 					<SavePanel />
@@ -306,14 +300,7 @@ export default function Layout() {
 						<>
 							{ isListPage && <PageMain /> }
 							{ isEditorPage && (
-								<div
-									className={ classnames(
-										'edit-site-layout__canvas-container',
-										{
-											'is-resizing': isResizing,
-										}
-									) }
-								>
+								<div className="edit-site-layout__canvas-container">
 									{ canvasResizer }
 									{ !! canvasSize.width && (
 										<motion.div
@@ -324,8 +311,7 @@ export default function Layout() {
 															scale: 1.005,
 															transition: {
 																duration:
-																	disableMotion ||
-																	isResizing
+																	disableMotion
 																		? 0
 																		: 0.5,
 																ease: 'easeOut',
@@ -344,10 +330,9 @@ export default function Layout() {
 											) }
 											transition={ {
 												type: 'tween',
-												duration:
-													disableMotion || isResizing
-														? 0
-														: ANIMATION_DURATION,
+												duration: disableMotion
+													? 0
+													: ANIMATION_DURATION,
 												ease: 'easeOut',
 											} }
 										>
@@ -376,9 +361,6 @@ export default function Layout() {
 													} }
 												>
 													<Editor
-														listViewToggleElement={
-															listViewToggleElement
-														}
 														isLoading={
 															isEditorLoading
 														}

package/src/components/layout/style.scss

@@ -20,7 +20,7 @@
 	}
 
 	@include break-medium {
-		width: calc(#{$nav-sidebar-width} - #{$canvas-padding});
+		width: calc(#{$nav-sidebar-width} - #{$grid-unit-30});
 	}
 
 	.edit-site-layout.is-full-canvas & {
@@ -156,14 +156,21 @@
 	}
 }
 
+.edit-site-template-pages-list-view,
+.edit-site-page-pages-list-view {
+	max-width: $nav-sidebar-width;
+}
+
 // This shouldn't be necessary (we should have a way to say that a skeletton is relative
 .edit-site-layout__canvas .interface-interface-skeleton,
-.edit-site-page-pages-preview .interface-interface-skeleton {
+.edit-site-page-pages-preview .interface-interface-skeleton,
+.edit-site-template-pages-preview .interface-interface-skeleton {
 	position: relative !important;
 	min-height: 100% !important;
 }
 
-.edit-site-page-pages-preview {
+.edit-site-page-pages-preview,
+.edit-site-template-pages-preview {
 	height: 100%;
 }
 

package/src/components/page/header.js

@@ -19,7 +19,8 @@ export default function Header( { title, subTitle, actions } ) {
 			<FlexBlock className="edit-site-page-header__page-title">
 				<Heading
 					as="h2"
-					level={ 4 }
+					level={ 3 }
+					weight={ 500 }
 					className="edit-site-page-header__title"
 				>
 					{ title }

package/src/components/page/style.scss

@@ -7,13 +7,13 @@
 	margin-top: $header-height;
 	@include break-medium() {
 		border-radius: 8px;
-		margin: $grid-unit-30 $grid-unit-30 $grid-unit-30 0;
+		margin: $canvas-padding $canvas-padding $canvas-padding 0;
 	}
 }
 
 .edit-site-page-header {
-	padding: 0 $grid-unit-40;
-	min-height: $header-height;
+	padding: $grid-unit-20 $grid-unit-40;
+	min-height: $grid-unit * 9;
 	border-bottom: 1px solid $gray-100;
 	background: $white;
 	position: sticky;

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

@@ -7,9 +7,9 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import PagePatterns from '../page-patterns';
+import DataviewsPatterns from '../page-patterns/dataviews-patterns';
 import PageTemplateParts from '../page-template-parts';
 import PageTemplates from '../page-templates';
-import DataviewsTemplates from '../page-templates/dataviews-templates';
 import PagePages from '../page-pages';
 import { unlock } from '../../lock-unlock';
 
@@ -21,16 +21,16 @@ export default function PageMain() {
 	} = useLocation();
 
 	if ( path === '/wp_template/all' ) {
-		return window?.__experimentalAdminViews ? (
-			<DataviewsTemplates />
-		) : (
-			<PageTemplates />
-		);
+		return <PageTemplates />;
 	} else if ( path === '/wp_template_part/all' ) {
 		return <PageTemplateParts />;
 	} else if ( path === '/patterns' ) {
-		return <PagePatterns />;
-	} else if ( window?.__experimentalAdminViews && path === '/pages' ) {
+		return window?.__experimentalAdminViews ? (
+			<DataviewsPatterns />
+		) : (
+			<PagePatterns />
+		);
+	} else if ( window?.__experimentalAdminViews && path === '/page' ) {
 		return <PagePages />;
 	}