Reorganize the site editor to introduce Browse Mode. (#44770)

Co-authored-by: James Koster <[email protected]>
Co-authored-by: Matías Ventura <[email protected]>

docs/reference-guides/data/data-core-edit-site.md

@@ -20,16 +20,7 @@ _Returns_
 
 ### getCurrentTemplateNavigationPanelSubMenu
 
-Returns the current template or template part's corresponding
-navigation panel's sub menu, to be used with `openNavigationPanelToMenu`.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
-
-_Returns_
-
--   `string`: The current template or template part's sub menu.
+> **Deprecated**
 
 ### getCurrentTemplateTemplateParts
 
@@ -93,15 +84,7 @@ _Returns_
 
 ### getNavigationPanelActiveMenu
 
-Returns the active menu in the navigation panel.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
-
-_Returns_
-
--   `string`: Active menu.
+> **Deprecated**
 
 ### getPage
 
@@ -179,15 +162,7 @@ _Returns_
 
 ### isNavigationOpened
 
-Returns the current opened/closed state of the navigation panel.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
-
-_Returns_
-
--   `boolean`: True if the navigation panel should be open; false if closed.
+> **Deprecated**
 
 ### isSaveViewOpened
 
@@ -233,11 +208,9 @@ _Parameters_
 
 ### openNavigationPanelToMenu
 
-Opens the navigation panel and sets its active menu at the same time.
-
-_Parameters_
+> **Deprecated**
 
--   _menu_ `string`: Identifies the menu to open.
+Opens the navigation panel and sets its active menu at the same time.
 
 ### removeTemplate
 
@@ -290,11 +263,9 @@ _Parameters_
 
 ### setIsNavigationPanelOpened
 
-Sets whether the navigation panel should be open.
-
-_Parameters_
+> **Deprecated**
 
--   _isOpen_ `boolean`: If true, opens the nav panel. If false, closes it. It does not toggle the state, but sets it directly.
+Sets whether the navigation panel should be open.
 
 ### setIsSaveViewOpened
 
@@ -306,11 +277,9 @@ _Parameters_
 
 ### setNavigationPanelActiveMenu
 
-Action that sets the active navigation panel menu.
-
-_Parameters_
+> **Deprecated**
 
--   _menu_ `string`: Menu prop of active menu.
+Action that sets the active navigation panel menu.
 
 _Returns_
 

lib/compat/wordpress-6.0/site-editor.php

@@ -73,23 +73,3 @@ function gutenberg_site_editor_maybe_redirect() {
 	}
 }
 add_action( 'load-site-editor.php', 'gutenberg_site_editor_maybe_redirect' );
-
-/**
- * Add home template settings for WP 5.9.
- *
- * @param array                   $settings Existing block editor settings.
- * @param WP_Block_Editor_Context $context The current block editor context.
- * @return array
- */
-function gutenberg_site_editor_homepage_setting( $settings, $context ) {
-	if ( isset( $context->post ) ) {
-		return $settings;
-	}
-
-	if ( ! isset( $settings['__unstableHomeTemplate'] ) ) {
-		$settings['__unstableHomeTemplate'] = gutenberg_resolve_home_template();
-	}
-
-	return $settings;
-}
-add_filter( 'block_editor_settings_all', 'gutenberg_site_editor_homepage_setting', 10, 2 );

lib/compat/wordpress-6.1/template-parts-screen.php

@@ -118,17 +118,8 @@ static function( $classes ) {
 		'defaultTemplatePartAreas'  => get_allowed_block_template_part_areas(),
 		'supportsLayout'            => wp_theme_has_theme_json(),
 		'supportsTemplatePartsMode' => ! wp_is_block_theme() && current_theme_supports( 'block-template-parts' ),
-		'__unstableHomeTemplate'    => gutenberg_resolve_home_template(),
 	);
 
-	/**
-	 * We don't need home template resolution when block template parts are supported.
-	 * Set the value to true to satisfy the editor initialization guard clause.
-	 */
-	if ( $custom_settings['supportsTemplatePartsMode'] ) {
-		$custom_settings['__unstableHomeTemplate'] = true;
-	}
-
 	// Add additional back-compat patterns registered by `current_screen` et al.
 	$custom_settings['__experimentalAdditionalBlockPatterns']          = WP_Block_Patterns_Registry::get_instance()->get_all_registered( true );
 	$custom_settings['__experimentalAdditionalBlockPatternCategories'] = WP_Block_Pattern_Categories_Registry::get_instance()->get_all_registered( true );

lib/compat/wordpress-6.2/site-editor.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * Updates the site-editor.php file
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Remove home template setting for WP 6.2.
+ *
+ * @param array                   $settings Existing block editor settings.
+ * @param WP_Block_Editor_Context $context The current block editor context.
+ * @return array
+ */
+function gutenberg_site_editor_unset_homepage_setting( $settings, $context ) {
+	if ( isset( $context->post ) ) {
+		return $settings;
+	}
+
+	unset( $settings['__unstableHomeTemplate'] );
+
+	return $settings;
+}
+add_filter( 'block_editor_settings_all', 'gutenberg_site_editor_unset_homepage_setting', 10, 2 );

lib/load.php

@@ -108,6 +108,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php';
 require __DIR__ . '/compat/wordpress-6.2/class-wp-theme-json-6-2.php';
 require __DIR__ . '/compat/wordpress-6.2/edit-form-blocks.php';
+require __DIR__ . '/compat/wordpress-6.2/site-editor.php';
 
 // Experimental features.
 remove_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' ); // Turns off WP 6.0's stopgap handler for Webfonts API.

packages/base-styles/_variables.scss

@@ -57,6 +57,7 @@ $admin-sidebar-width-big: 190px;
 $admin-sidebar-width-collapsed: 36px;
 $modal-min-width: 360px;
 $spinner-size: 16px;
+$canvas-padding: $grid-unit-30;
 
 
 /**

packages/base-styles/_z-index.scss

@@ -108,14 +108,6 @@ $z-layers: (
 	// Show interface skeleton footer above interface skeleton drawer
 	".interface-interface-skeleton__footer": 90,
 
-	// Show the navigation toggle above the skeleton header
-	".edit-site-navigation-toggle": 31,
-	// Show the navigation link above the skeleton header
-	".edit-site-navigation-link": 31,
-
-	// Show the FSE template previews above the editor and any open block toolbars
-	".edit-site-navigation-panel__preview": 32,
-
 	// Above the block list and the header.
 	".block-editor-block-popover": 31,
 

packages/block-editor/src/components/block-list/content.scss

@@ -434,18 +434,4 @@
 .block-editor-iframe__body {
 	transition: all 0.3s;
 	transform-origin: top center;
-
-	&.is-zoomed-out {
-		margin: 100px 0;
-		transform: scale(0.45);
-
-		// Add a bit more space between the top level blocks.
-		.wp-site-blocks > * + * {
-			margin-block-start: 2.5rem;
-		}
-
-		> .block-list-appender {
-			display: none;
-		}
-	}
 }

packages/block-editor/src/components/iframe/index.js

@@ -188,7 +188,17 @@ async function loadScript( head, { id, src } ) {
 }
 
 function Iframe(
-	{ contentRef, children, head, tabIndex = 0, assets, isZoomedOut, ...props },
+	{
+		contentRef,
+		children,
+		head,
+		tabIndex = 0,
+		assets,
+		scale = 1,
+		frameSize = 0,
+		readonly,
+		...props
+	},
 	ref
 ) {
 	const [ , forceRender ] = useReducer( () => ( {} ) );
@@ -322,7 +332,7 @@ function Iframe(
 								{ head }
 								<style>
 									{ `html { transition: background 5s; ${
-										isZoomedOut
+										frameSize
 											? 'background: #2f2f2f; transition: background 0s;'
 											: ''
 									} }` }
@@ -333,23 +343,20 @@ function Iframe(
 								className={ classnames(
 									'block-editor-iframe__body',
 									BODY_CLASS_NAME,
-									...bodyClasses,
-									{
-										'is-zoomed-out': isZoomedOut,
-									}
+									...bodyClasses
 								) }
-								style={
-									isZoomedOut
-										? {
-												// This is the remaining percentage from the scaling down
-												// of the iframe body(`scale(0.45)`). We also need to subtract
-												// the body's bottom margin.
-												marginBottom: `-${
-													contentHeight * 0.55 - 100
-												}px`,
-										  }
-										: {}
-								}
+								style={ {
+									// This is the remaining percentage from the scaling down
+									// of the iframe body(`scale(0.45)`). We also need to subtract
+									// the body's bottom margin.
+									marginBottom: `-${
+										contentHeight * ( 1 - scale ) -
+										frameSize
+									}px`,
+									marginTop: frameSize,
+									transform: `scale( ${ scale } )`,
+								} }
+								inert={ readonly ? 'true' : undefined }
 							>
 								{ contentResizeListener }
 								{ /*

packages/block-editor/src/components/list-view/style.scss

@@ -112,7 +112,6 @@
 		height: auto;
 		padding: ($grid-unit-15 * 0.5) $grid-unit-05 ($grid-unit-15 * 0.5) 0;
 		text-align: left;
-		color: $gray-900;
 		border-radius: $radius-block-ui;
 		position: relative;
 		white-space: nowrap;

packages/components/src/higher-order/navigate-regions/style.scss

@@ -56,29 +56,9 @@
 		outline: 4px solid $components-color-accent;
 		outline-offset: -4px;
 	}
-
-	// Edit site Navigation Drawer.
-	.interface-interface-skeleton__drawer {
-		z-index: z-index(".edit-site-navigation-toggle");
-
-		.interface-navigable-region__stacker,
-		.edit-site-navigation-toggle {
-			outline: inherit;
-			outline-offset: inherit;
-		}
-
-		.edit-site-navigation-toggle.is-open {
-			outline: none;
-		}
-
-		.edit-site-navigation-toggle__button {
-			z-index: -1;
-		}
-	}
 }
 
-// Fixes for edge cases.
-// Edit site Drawer.
-.interface-interface-skeleton__drawer .interface-navigable-region__stacker {
+.interface-navigable-region__stacker {
 	height: 100%;
+	width: 100%;
 }

packages/components/src/index.js

@@ -17,7 +17,7 @@ export {
 	default as Animate,
 	getAnimateClassName as __unstableGetAnimateClassName,
 } from './animate';
-export { __unstableMotion } from './animation';
+export { __unstableMotion, __unstableAnimatePresence } from './animation';
 export { default as AnglePickerControl } from './angle-picker-control';
 export {
 	default as Autocomplete,

packages/e2e-test-utils-playwright/src/index.ts

@@ -3,4 +3,5 @@ export { Admin } from './admin';
 export { Editor } from './editor';
 export { PageUtils } from './page-utils';
 export { RequestUtils } from './request-utils';
+export { SiteEditor } from './site-editor';
 export { test, expect } from './test';

packages/e2e-test-utils-playwright/src/site-editor/index.ts

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import type { Page } from '@playwright/test';
+
+/**
+ * Internal dependencies
+ */
+import { enterEditMode } from './toggle-canvas-mode';
+
+type AdminConstructorProps = {
+	page: Page;
+};
+
+export class SiteEditor {
+	page: Page;
+
+	constructor( { page }: AdminConstructorProps ) {
+		this.page = page;
+	}
+
+	enterEditMode = enterEditMode.bind( this );
+}

packages/e2e-test-utils-playwright/src/site-editor/toggle-canvas-mode.js

@@ -0,0 +1,8 @@
+/**
+ * Enters the site editor edit mode.
+ *
+ * @this {import('.').SiteEditor}
+ */
+export async function enterEditMode() {
+	await this.page.click( '.edit-site-layout__edit-button' );
+}

packages/e2e-test-utils-playwright/src/test.ts

@@ -8,7 +8,7 @@ import type { ConsoleMessage } from '@playwright/test';
 /**
  * Internal dependencies
  */
-import { Admin, Editor, PageUtils, RequestUtils } from './index';
+import { Admin, Editor, PageUtils, RequestUtils, SiteEditor } from './index';
 
 const STORAGE_STATE_PATH =
 	process.env.STORAGE_STATE_PATH ||
@@ -102,6 +102,7 @@ const test = base.extend<
 		editor: Editor;
 		pageUtils: PageUtils;
 		snapshotConfig: void;
+		siteEditor: SiteEditor;
 	},
 	{
 		requestUtils: RequestUtils;
@@ -113,6 +114,9 @@ const test = base.extend<
 	editor: async ( { page }, use ) => {
 		await use( new Editor( { page } ) );
 	},
+	siteEditor: async ( { page }, use ) => {
+		await use( new SiteEditor( { page } ) );
+	},
 	page: async ( { page }, use ) => {
 		page.on( 'console', observeConsoleLogging );