[Prototype] Navigation overlay editor: Spotlight editing experience

lib/compat/wordpress-7.0/rest-api.php

@@ -65,3 +65,71 @@ function gutenberg_parse_pattern_blocks_in_block_templates( $query_result, $quer
 }
 
 add_filter( 'get_block_templates', 'gutenberg_parse_pattern_blocks_in_block_templates', 10, 3 );
+
+/**
+ * Registers the 'overlay' template part area when the experiment is enabled.
+ *
+ * @param array $areas Array of template part area definitions.
+ * @return array Modified array of template part area definitions.
+ */
+function gutenberg_register_overlay_template_part_area( $areas ) {
+	if ( ! gutenberg_is_experiment_enabled( 'gutenberg-customizable-navigation-overlays' ) ) {
+		return $areas;
+	}
+
+	$areas[] = array(
+		'area'        => 'overlay',
+		'label'       => __( 'Overlay', 'gutenberg' ),
+		'description' => __( 'Custom overlay area for navigation overlays.', 'gutenberg' ),
+		'icon'        => 'overlay',
+		'area_tag'    => 'div',
+	);
+
+	return $areas;
+}
+add_filter( 'default_wp_template_part_areas', 'gutenberg_register_overlay_template_part_area' );
+
+/**
+ * Registers the 'overlay' pattern category when the experiment is enabled.
+ */
+function gutenberg_register_overlay_pattern_category() {
+	if ( ! gutenberg_is_experiment_enabled( 'gutenberg-customizable-navigation-overlays' ) ) {
+		return;
+	}
+
+	register_block_pattern_category(
+		'overlay',
+		array( 'label' => __( 'Overlay', 'gutenberg' ) )
+	);
+}
+add_action( 'init', 'gutenberg_register_overlay_pattern_category' );
+
+/**
+ * Registers the default overlay pattern when the experiment is enabled.
+ */
+function gutenberg_register_overlay_pattern() {
+	if ( ! gutenberg_is_experiment_enabled( 'gutenberg-customizable-navigation-overlays' ) ) {
+		return;
+	}
+
+	register_block_pattern(
+		'gutenberg/overlay-default',
+		array(
+			'title'      => __( 'Overlay', 'gutenberg' ),
+			'categories' => array( 'overlay' ),
+			'blockTypes' => array( 'core/template-part/overlay' ),
+			'content'    => '<!-- wp:group {"metadata":{"name":"Overlay"},"style":{"dimensions":{"minHeight":"100%"},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group" style="min-height:100%;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:group {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
+<div class="wp-block-group" style="margin-bottom:var(--wp--preset--spacing--40)"><!-- wp:overlay-close {"className":"has-text-align-left","style":{"typography":{"textAlign":"left"}}} -->
+<div class="wp-block-overlay-close has-text-align-left"><button type="button" class="wp-block-overlay-close__button" aria-label="Close overlay"><span class="wp-block-overlay-close__icon">×</span></button></div>
+<!-- /wp:overlay-close --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"metadata":{"name":"Overlay Content"},"style":{"spacing":{"blockGap":"var:preset|spacing|40"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
+<div class="wp-block-group"><!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical","justifyContent":"left"}} /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->',
+		)
+	);
+}
+add_action( 'init', 'gutenberg_register_overlay_pattern' );

packages/block-library/src/index.js

@@ -82,6 +82,7 @@ import * as navigation from './navigation';
 import * as navigationLink from './navigation-link';
 import * as navigationSubmenu from './navigation-submenu';
 import * as nextpage from './nextpage';
+import * as overlayClose from './overlay-close';
 import * as pattern from './pattern';
 import * as pageList from './page-list';
 import * as pageListItem from './page-list-item';
@@ -187,6 +188,7 @@ const getAllBlocks = () => {
 		missing,
 		more,
 		nextpage,
+		overlayClose,
 		pageList,
 		pageListItem,
 		pattern,

packages/block-library/src/navigation/block.json

@@ -84,6 +84,9 @@
 		"templateLock": {
 			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", "contentOnly", false ]
+		},
+		"overlayTemplatePartId": {
+			"type": "string"
 		}
 	},
 	"providesContext": {