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

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

Author: 3 people

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;