From 303b7d13c53f780993510b4c45cf0b9975b7f690 Mon Sep 17 00:00:00 2001
From: Laurel Fulford <laurel.fulford@automattic.com>
Date: Tue, 7 Apr 2026 14:42:52 -0700
Subject: [PATCH 1/2] feat: swap in Overlay Menu block to replace templtae
 parts

---
 AGENTS.md                                  |  1 -
 parts/drawer-contents.html                 | 17 --------------
 parts/mobile-contents.html                 | 19 ---------------
 parts/mobile-menu.html                     |  7 ------
 patterns/drawer-menu.php                   | 27 ----------------------
 patterns/header/header-desktop-style-2.php |  7 +++++-
 patterns/header/header-desktop-style-3.php |  7 +++++-
 patterns/header/header-desktop-style-4.php |  7 +++++-
 patterns/header/header-mobile-style-1.php  |  7 +++++-
 patterns/header/header-mobile-style-2.php  |  7 +++++-
 patterns/header/header-mobile-style-3.php  |  7 +++++-
 patterns/header/header-mobile-style-4.php  |  7 +++++-
 patterns/header/header-mobile-style-5.php  |  7 +++++-
 patterns/header/header-mobile-style-6.php  |  7 +++++-
 src/js/front-end/main.js                   |  2 --
 src/js/front-end/menus/drawer.js           | 14 -----------
 src/js/front-end/menus/mobile.js           | 14 -----------
 src/scss/overlays/_drawer.scss             | 26 ---------------------
 src/scss/style.scss                        |  1 -
 19 files changed, 54 insertions(+), 137 deletions(-)
 delete mode 100644 parts/drawer-contents.html
 delete mode 100644 parts/mobile-contents.html
 delete mode 100644 parts/mobile-menu.html
 delete mode 100644 patterns/drawer-menu.php
 delete mode 100644 src/js/front-end/menus/drawer.js
 delete mode 100644 src/js/front-end/menus/mobile.js
 delete mode 100644 src/scss/overlays/_drawer.scss

diff --git a/AGENTS.md b/AGENTS.md
index a77a307a..11b21c26 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -19,5 +19,4 @@ Do not add new blocks to this repo. New blocks should be added to `newspack-plug
 - **External patterns are intentionally blocked.** The theme prevents Jetpack, WooCommerce, and Automattic remote patterns from loading. This is by design — do not remove these filters.
 - **After adding a new PHP class file, run `composer dump-autoload`.** The `includes/` directory uses classmap autoloading, not PSR-4.
 - **The Article Subtitle block has two completely different implementations.** In the post editor it is not a block at all — it injects a `contenteditable` div directly into the DOM and updates post meta via `editPost()`. In the site editor it registers normally via `registerBlockType()`. Modifying it requires understanding which context you are in.
-- **There are two separate menu systems with different selectors.** Mobile headers use `.header-mobile` (container), `.mobile-menu__toggle` / `.mobile-menu__contents` (handled by `menus/mobile.js`). Drawer menus used in some desktop header patterns use `.drawer-menu` (container), `.drawer-menu__toggle` / `.drawer-menu__contents` (handled by `menus/drawer.js`). Mixing up the selectors or JS handlers will silently break menu initialization.
 - **Style variations require a unique `className` in their JSON.** The theme reads `wp_get_global_settings()['custom']['className']` and adds it as a `theme-variation-{className}` body class used for CSS scoping. A new style variation in `styles/` must define this value or scoped styles will not apply.
diff --git a/parts/drawer-contents.html b/parts/drawer-contents.html
deleted file mode 100644
index 4bb6ff52..00000000
--- a/parts/drawer-contents.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!-- wp:buttons {"lock":{"move":true,"remove":true},"metadata":{"name":"Close Button"},"layout":{"type":"flex","justifyContent":"right"}} -->
-<div class="wp-block-buttons"><!-- wp:button {"textColor":"contrast","lock":{"move":true,"remove":true},"style":{"spacing":{"padding":{"left":"0","right":"0","top":"0","bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"className":"drawer-menu__toggle newspack-icon-close"} -->
-<div class="wp-block-button drawer-menu__toggle newspack-icon-close"><a class="wp-block-button__link has-contrast-color has-text-color has-link-color wp-element-button" href="#" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><span>Close Menu</span></a></div>
-<!-- /wp:button --></div>
-<!-- /wp:buttons -->
-
-<!-- wp:group {"metadata":{"name":"Content"},"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group" style="margin-top:0;margin-bottom:0"><!-- wp:navigation {"className":"is-style-flatten","layout":{"type":"flex","setCascadingProperties":true,"orientation":"vertical"}} /-->
-
-<!-- wp:social-links {"iconColor":"contrast","iconColorValue":"#1E1E1E","iconBackgroundColor":"base-2","iconBackgroundColorValue":"#F0F0F0"} -->
-<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"#","service":"facebook"} /-->
-
-<!-- wp:social-link {"url":"#","service":"instagram"} /-->
-
-<!-- wp:social-link {"url":"#","service":"x"} /--></ul>
-<!-- /wp:social-links --></div>
-<!-- /wp:group -->
diff --git a/parts/mobile-contents.html b/parts/mobile-contents.html
deleted file mode 100644
index 4e023d47..00000000
--- a/parts/mobile-contents.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!-- wp:buttons {"lock":{"move":true,"remove":true},"metadata":{"name":"Close Button"},"layout":{"type":"flex","justifyContent":"right"}} -->
-<div class="wp-block-buttons"><!-- wp:button {"textColor":"contrast","lock":{"move":true,"remove":true},"style":{"spacing":{"padding":{"left":"0","right":"0","top":"0","bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"className":"mobile-menu__toggle newspack-icon-close"} -->
-<div class="wp-block-button mobile-menu__toggle newspack-icon-close"><a class="wp-block-button__link has-contrast-color has-text-color has-link-color wp-element-button" href="#" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><span>Close Menu</span></a></div>
-<!-- /wp:button --></div>
-<!-- /wp:buttons -->
-
-<!-- wp:group {"metadata":{"name":"Content"},"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group" style="margin-top:0;margin-bottom:0"><!-- wp:search {"buttonText":"Search","fontSize":"small"} /-->
-
-<!-- wp:navigation {"className":"is-style-flatten","layout":{"type":"flex","setCascadingProperties":true,"orientation":"vertical"}} /-->
-
-<!-- wp:social-links {"iconColor":"contrast","iconColorValue":"#1E1E1E","iconBackgroundColor":"base-2","iconBackgroundColorValue":"#F0F0F0"} -->
-<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"#","service":"facebook"} /-->
-
-<!-- wp:social-link {"url":"#","service":"instagram"} /-->
-
-<!-- wp:social-link {"url":"#","service":"x"} /--></ul>
-<!-- /wp:social-links --></div>
-<!-- /wp:group -->
diff --git a/parts/mobile-menu.html b/parts/mobile-menu.html
deleted file mode 100644
index b7fcdf28..00000000
--- a/parts/mobile-menu.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<!-- wp:buttons {"lock":{"move":false,"remove":false}} -->
-<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"base","textColor":"contrast","style":{"spacing":{"padding":{"left":"0","right":"0","top":"0","bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"className":"mobile-menu__toggle newspack-icon-menu"} -->
-<div class="wp-block-button mobile-menu__toggle newspack-icon-menu"><a class="wp-block-button__link has-contrast-color has-base-background-color has-text-color has-background has-link-color wp-element-button" href="#" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><span>Open Menu</span></a></div>
-<!-- /wp:button --></div>
-<!-- /wp:buttons -->
-
-<!-- wp:template-part {"slug":"mobile-contents","theme":"newspack-block-theme","tagName":"div","className":"mobile-menu__contents overlay-contents overlay-contents--position--left"} /-->
diff --git a/patterns/drawer-menu.php b/patterns/drawer-menu.php
deleted file mode 100644
index 4d043589..00000000
--- a/patterns/drawer-menu.php
+++ /dev/null
@@ -1,27 +0,0 @@
-<?php
-/**
- * Title: Drawer Menu
- * Slug: newspack-block-theme/drawer-menu
- * Categories: newspack-block-theme
- * Viewport Width: 632
- * Block Types: core/navigation, core/social-links
- *
- * @package Newspack_Block_Theme
- */
-
-?>
-<!-- wp:group {"metadata":{"name":"<?php esc_html_e( 'Drawer Menu', 'newspack-block-theme' ); ?>"},"className":"drawer-menu","layout":{"type":"flex","flexWrap":"nowrap"}} -->
-<div class="wp-block-group drawer-menu">
-	<!-- wp:buttons {"lock":{"move":false,"remove":false},"className":"has-x-small-size","fontSize":"small"} -->
-	<div class="wp-block-buttons has-custom-font-size has-x-small-size has-small-font-size">
-		<!-- wp:button {"backgroundColor":"base","textColor":"contrast","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"typography":{"textTransform":"uppercase"}},"className":"drawer-menu__toggle"} -->
-		<div class="wp-block-button drawer-menu__toggle" style="text-transform:uppercase">
-			<a class="wp-block-button__link has-contrast-color has-base-background-color has-text-color has-background has-link-color wp-element-button" href="#"><?php esc_html_e( 'Menu', 'newspack-block-theme' ); ?></a>
-		</div>
-		<!-- /wp:button -->
-	</div>
-	<!-- /wp:buttons -->
-
-	<!-- wp:template-part {"slug":"drawer-contents","theme":"newspack-block-theme","tagName":"div","className":"drawer-menu__contents overlay-contents overlay-contents--position--left"} /-->
-</div>
-<!-- /wp:group -->
diff --git a/patterns/header/header-desktop-style-2.php b/patterns/header/header-desktop-style-2.php
index f41b1691..18529fc8 100644
--- a/patterns/header/header-desktop-style-2.php
+++ b/patterns/header/header-desktop-style-2.php
@@ -41,7 +41,12 @@
 
 	<!-- wp:group {"lock":{"move":false,"remove":true},"metadata":{"name":"<?php esc_html_e( 'Menu', 'newspack-block-theme' ); ?>"},"align":"wide","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
 	<div class="wp-block-group alignwide">
-		<!-- wp:pattern {"slug":"newspack-block-theme/drawer-menu"} /-->
+		<!-- wp:newspack/overlay-menu {"instanceId":"fedb5a226df2"} -->
+			<div class="wp-block-newspack-overlay-menu"><!-- wp:newspack/overlay-menu-trigger {"triggerText":"<?php esc_html_e( 'MENU', 'newspack-block-theme' ); ?>","style":{"color":{"background":"#ffffff00"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20","right":"var:preset|spacing|20"}}},"textColor":"contrast"} /-->
+			<!-- wp:newspack/overlay-menu-panel -->
+			<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} /--></div>
+			<!-- /wp:newspack/overlay-menu-panel --></div>
+		<!-- /wp:newspack/overlay-menu -->
 
 		<!-- wp:navigation {"className":"primary-navigation","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"center","orientation":"horizontal","flexWrap":"wrap"},"style":{"typography":{"textTransform":"uppercase"}}} /-->
 
diff --git a/patterns/header/header-desktop-style-3.php b/patterns/header/header-desktop-style-3.php
index c378a778..4a90feea 100644
--- a/patterns/header/header-desktop-style-3.php
+++ b/patterns/header/header-desktop-style-3.php
@@ -22,7 +22,12 @@
 
 		<!-- wp:column {"verticalAlignment":"center","width":"25%"} -->
 		<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:25%">
-			<!-- wp:pattern {"slug":"newspack-block-theme/drawer-menu"} /-->
+			<!-- wp:newspack/overlay-menu {"instanceId":"fedb5a226df2"} -->
+				<div class="wp-block-newspack-overlay-menu"><!-- wp:newspack/overlay-menu-trigger {"triggerText":"<?php esc_html_e( 'MENU', 'newspack-block-theme' ); ?>","style":{"color":{"background":"#ffffff00"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20","right":"var:preset|spacing|20"}}},"textColor":"contrast"} /-->
+				<!-- wp:newspack/overlay-menu-panel -->
+				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} /--></div>
+				<!-- /wp:newspack/overlay-menu-panel --></div>
+			<!-- /wp:newspack/overlay-menu -->
 		</div>
 		<!-- /wp:column -->
 
diff --git a/patterns/header/header-desktop-style-4.php b/patterns/header/header-desktop-style-4.php
index 8ad91afd..74770007 100644
--- a/patterns/header/header-desktop-style-4.php
+++ b/patterns/header/header-desktop-style-4.php
@@ -16,7 +16,12 @@
 	<div class="wp-block-group">
 		<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
 		<div class="wp-block-group">
-			<!-- wp:pattern {"slug":"newspack-block-theme/drawer-menu"} /-->
+			<!-- wp:newspack/overlay-menu {"instanceId":"fedb5a226df2"} -->
+				<div class="wp-block-newspack-overlay-menu"><!-- wp:newspack/overlay-menu-trigger {"triggerText":"<?php esc_html_e( 'MENU', 'newspack-block-theme' ); ?>","style":{"color":{"background":"#ffffff00"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20","right":"var:preset|spacing|20"}}},"textColor":"contrast"} /-->
+				<!-- wp:newspack/overlay-menu-panel -->
+				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} /--></div>
+				<!-- /wp:newspack/overlay-menu-panel --></div>
+			<!-- /wp:newspack/overlay-menu -->
 
 			<!-- wp:site-logo {"width":256,"lock":{"move":true,"remove":true}} /-->
 
diff --git a/patterns/header/header-mobile-style-1.php b/patterns/header/header-mobile-style-1.php
index ee9a8389..f0a6ea72 100644
--- a/patterns/header/header-mobile-style-1.php
+++ b/patterns/header/header-mobile-style-1.php
@@ -18,7 +18,12 @@
 
 		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
 		<div class="wp-block-group">
-			<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu"} /-->
+			<!-- wp:newspack/overlay-menu {"instanceId":"1a382fccbd5d"} -->
+				<div class="wp-block-newspack-overlay-menu"><!-- wp:newspack/overlay-menu-trigger {"className":"is-style-icon-only","style":{"color":{"background":"#ffffff00"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"right":"0","left":"0"}}},"textColor":"contrast"} /-->
+				<!-- wp:newspack/overlay-menu-panel -->
+				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} /--></div>
+				<!-- /wp:newspack/overlay-menu-panel --></div>
+			<!-- /wp:newspack/overlay-menu -->
 
 			<!-- wp:site-logo {"width":256,"lock":{"move":false,"remove":true}} /-->
 		</div>
diff --git a/patterns/header/header-mobile-style-2.php b/patterns/header/header-mobile-style-2.php
index c72989ff..31394ff2 100644
--- a/patterns/header/header-mobile-style-2.php
+++ b/patterns/header/header-mobile-style-2.php
@@ -18,7 +18,12 @@
 
 		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
 		<div class="wp-block-group">
-			<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu"} /-->
+			<!-- wp:newspack/overlay-menu {"instanceId":"1a382fccbd5d"} -->
+			<div class="wp-block-newspack-overlay-menu"><!-- wp:newspack/overlay-menu-trigger {"className":"is-style-icon-only","style":{"color":{"background":"#ffffff00"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"right":"0","left":"0"}}},"textColor":"contrast"} /-->
+				<!-- wp:newspack/overlay-menu-panel -->
+				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} /--></div>
+				<!-- /wp:newspack/overlay-menu-panel --></div>
+			<!-- /wp:newspack/overlay-menu -->
 
 			<!-- wp:site-logo {"width":256,"lock":{"move":false,"remove":true}} /-->
 		</div>
diff --git a/patterns/header/header-mobile-style-3.php b/patterns/header/header-mobile-style-3.php
index 01138674..f9aa7556 100644
--- a/patterns/header/header-mobile-style-3.php
+++ b/patterns/header/header-mobile-style-3.php
@@ -18,7 +18,12 @@
 
 		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"},"layout":{"columnSpan":2}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
 		<div class="wp-block-group">
-			<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu"} /-->
+			<!-- wp:newspack/overlay-menu {"instanceId":"1a382fccbd5d"} -->
+			<div class="wp-block-newspack-overlay-menu"><!-- wp:newspack/overlay-menu-trigger {"className":"is-style-icon-only","style":{"color":{"background":"#ffffff00"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"right":"0","left":"0"}}},"textColor":"contrast"} /-->
+				<!-- wp:newspack/overlay-menu-panel -->
+				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} /--></div>
+				<!-- /wp:newspack/overlay-menu-panel --></div>
+			<!-- /wp:newspack/overlay-menu -->
 
 			<?php if ( class_exists( 'Newspack\Reader_Activation' ) && \Newspack\Reader_Activation::is_enabled() ) : ?>
 				<!-- wp:newspack/my-account-button {"lock":{"move":false,"remove":true},"className":"is-style-icon-only has-x-small-size","style":{"spacing":{"padding":{"top":"0.375rem","bottom":"0.375rem","left":"0.375rem","right":"0.375rem"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"backgroundColor":"base","textColor":"contrast","fontSize":"x-small"} /-->
diff --git a/patterns/header/header-mobile-style-4.php b/patterns/header/header-mobile-style-4.php
index f1d6f620..7680a45f 100644
--- a/patterns/header/header-mobile-style-4.php
+++ b/patterns/header/header-mobile-style-4.php
@@ -18,7 +18,12 @@
 
 		<!-- wp:group {"style":{"layout":{"columnSpan":2}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
 		<div class="wp-block-group">
-			<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu"} /-->
+			<!-- wp:newspack/overlay-menu {"instanceId":"1a382fccbd5d"} -->
+			<div class="wp-block-newspack-overlay-menu"><!-- wp:newspack/overlay-menu-trigger {"className":"is-style-icon-only","style":{"color":{"background":"#ffffff00"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"right":"0","left":"0"}}},"textColor":"contrast"} /-->
+				<!-- wp:newspack/overlay-menu-panel -->
+				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} /--></div>
+				<!-- /wp:newspack/overlay-menu-panel --></div>
+			<!-- /wp:newspack/overlay-menu -->
 		</div>
 		<!-- /wp:group -->
 
diff --git a/patterns/header/header-mobile-style-5.php b/patterns/header/header-mobile-style-5.php
index 96908baf..bae8be7d 100644
--- a/patterns/header/header-mobile-style-5.php
+++ b/patterns/header/header-mobile-style-5.php
@@ -36,7 +36,12 @@
 				<!-- wp:newspack/my-account-button {"lock":{"move":false,"remove":true},"className":"is-style-icon-only has-x-small-size","style":{"spacing":{"padding":{"top":"0.375rem","bottom":"0.375rem","left":"0.375rem","right":"0.375rem"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"backgroundColor":"base","textColor":"contrast","fontSize":"x-small"} /-->
 			<?php endif; ?>
 
-			<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu overlay-contents--position--right--force"} /-->
+			<!-- wp:newspack/overlay-menu {"instanceId":"1a382fccbd5d"} -->
+			<div class="wp-block-newspack-overlay-menu"><!-- wp:newspack/overlay-menu-trigger {"className":"is-style-icon-only","style":{"color":{"background":"#ffffff00"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"right":"0","left":"0"}}},"textColor":"contrast"} /-->
+				<!-- wp:newspack/overlay-menu-panel {"slideDirection":"right"} -->
+				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} /--></div>
+				<!-- /wp:newspack/overlay-menu-panel --></div>
+			<!-- /wp:newspack/overlay-menu -->
 		</div>
 		<!-- /wp:group -->
 
diff --git a/patterns/header/header-mobile-style-6.php b/patterns/header/header-mobile-style-6.php
index 7d5b7982..93a0ed7f 100644
--- a/patterns/header/header-mobile-style-6.php
+++ b/patterns/header/header-mobile-style-6.php
@@ -30,7 +30,12 @@
 
 			<!-- wp:template-part {"slug":"search-menu","theme":"newspack-block-theme","tagName":"div","className":"search-menu"} /-->
 
-			<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu overlay-contents--position--right--force"} /-->
+			<!-- wp:newspack/overlay-menu {"instanceId":"1a382fccbd5d"} -->
+				<div class="wp-block-newspack-overlay-menu"><!-- wp:newspack/overlay-menu-trigger {"className":"is-style-icon-only","style":{"color":{"background":"#ffffff00"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"right":"0","left":"0"}}},"textColor":"contrast"} /-->
+				<!-- wp:newspack/overlay-menu-panel {"slideDirection":"right"} -->
+				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} /--></div>
+				<!-- /wp:newspack/overlay-menu-panel --></div>
+			<!-- /wp:newspack/overlay-menu -->
 		</div>
 		<!-- /wp:group -->
 
diff --git a/src/js/front-end/main.js b/src/js/front-end/main.js
index ce294d14..ea1ccefe 100644
--- a/src/js/front-end/main.js
+++ b/src/js/front-end/main.js
@@ -1,4 +1,2 @@
 import './menus/comments';
-import './menus/drawer';
-import './menus/mobile';
 import './menus/search';
diff --git a/src/js/front-end/menus/drawer.js b/src/js/front-end/menus/drawer.js
deleted file mode 100644
index 3ce5b463..00000000
--- a/src/js/front-end/menus/drawer.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Internal dependencies.
- */
-import { domReady } from '../utils';
-import { createMenu } from './index';
-
-domReady( function () {
-	createMenu( {
-		menuType: 'drawer-menu',
-		containerSelector: '.drawer-menu',
-		toggleSelector: '.drawer-menu__toggle',
-		contentsSelector: '.drawer-menu__contents',
-	} ).init();
-} );
diff --git a/src/js/front-end/menus/mobile.js b/src/js/front-end/menus/mobile.js
deleted file mode 100644
index 8b418eb2..00000000
--- a/src/js/front-end/menus/mobile.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Internal dependencies.
- */
-import { domReady } from '../utils';
-import { createMenu } from './index';
-
-domReady( function () {
-	createMenu( {
-		menuType: 'mobile-menu',
-		containerSelector: '.header-mobile',
-		toggleSelector: '.mobile-menu__toggle',
-		contentsSelector: '.mobile-menu__contents',
-	} ).init();
-} );
diff --git a/src/scss/overlays/_drawer.scss b/src/scss/overlays/_drawer.scss
deleted file mode 100644
index 477267d0..00000000
--- a/src/scss/overlays/_drawer.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-
-@use "../mixins";
-
-.drawer-menu {
-	&__toggle {
-		&:not(.newspack-icon-close) {
-			align-items: center;
-			display: flex;
-
-			.wp-block-button__link {
-				align-items: center;
-				display: inline-flex;
-				gap: var(--wp--preset--spacing--20);
-				justify-content: center;
-
-				&::before {
-					background: currentcolor;
-					content: "";
-					height: var(--wp--preset--spacing--40);
-					mask: url("../../assets/images/icon-menu.svg") 0 0 no-repeat;
-					width: var(--wp--preset--spacing--40);
-				}
-			}
-		}
-	}
-}
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 4750dd75..84609ec1 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -8,5 +8,4 @@
 @use "header.scss";
 @use "overlays/base.scss" as overlays;
 @use "overlays/comments.scss";
-@use "overlays/drawer.scss";
 @use "overlays/search.scss";

From e5547c02bf615198d66c754e2e64d1f24a85204f Mon Sep 17 00:00:00 2001
From: Laurel Fulford <laurel.fulford@automattic.com>
Date: Tue, 7 Apr 2026 15:45:27 -0700
Subject: [PATCH 2/2] fix: add is style flatten to all the navigation blocks in
 the overlay block

---
 patterns/header/header-desktop-style-2.php | 2 +-
 patterns/header/header-desktop-style-3.php | 2 +-
 patterns/header/header-desktop-style-4.php | 2 +-
 patterns/header/header-mobile-style-1.php  | 2 +-
 patterns/header/header-mobile-style-2.php  | 2 +-
 patterns/header/header-mobile-style-3.php  | 2 +-
 patterns/header/header-mobile-style-4.php  | 2 +-
 patterns/header/header-mobile-style-5.php  | 2 +-
 patterns/header/header-mobile-style-6.php  | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/patterns/header/header-desktop-style-2.php b/patterns/header/header-desktop-style-2.php
index 18529fc8..9ad05812 100644
--- a/patterns/header/header-desktop-style-2.php
+++ b/patterns/header/header-desktop-style-2.php
@@ -44,7 +44,7 @@
 		<!-- wp:newspack/overlay-menu {"instanceId":"fedb5a226df2"} -->
 			<div class="wp-block-newspack-overlay-menu"><!-- wp:newspack/overlay-menu-trigger {"triggerText":"<?php esc_html_e( 'MENU', 'newspack-block-theme' ); ?>","style":{"color":{"background":"#ffffff00"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20","right":"var:preset|spacing|20"}}},"textColor":"contrast"} /-->
 			<!-- wp:newspack/overlay-menu-panel -->
-			<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} /--></div>
+			<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"className":"is-style-flatten","layout":{"type":"flex","setCascadingProperties":true,"orientation":"vertical"}} /--></div>
 			<!-- /wp:newspack/overlay-menu-panel --></div>
 		<!-- /wp:newspack/overlay-menu -->
 
diff --git a/patterns/header/header-desktop-style-3.php b/patterns/header/header-desktop-style-3.php
index 4a90feea..78a92fa3 100644
--- a/patterns/header/header-desktop-style-3.php
+++ b/patterns/header/header-desktop-style-3.php
@@ -25,7 +25,7 @@
 			<!-- wp:newspack/overlay-menu {"instanceId":"fedb5a226df2"} -->
 				<div class="wp-block-newspack-overlay-menu"><!-- wp:newspack/overlay-menu-trigger {"triggerText":"<?php esc_html_e( 'MENU', 'newspack-block-theme' ); ?>","style":{"color":{"background":"#ffffff00"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20","right":"var:preset|spacing|20"}}},"textColor":"contrast"} /-->
 				<!-- wp:newspack/overlay-menu-panel -->
-				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} /--></div>
+				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"className":"is-style-flatten","layout":{"type":"flex","setCascadingProperties":true,"orientation":"vertical"}} /--></div>
 				<!-- /wp:newspack/overlay-menu-panel --></div>
 			<!-- /wp:newspack/overlay-menu -->
 		</div>
diff --git a/patterns/header/header-desktop-style-4.php b/patterns/header/header-desktop-style-4.php
index 74770007..f7e41e2c 100644
--- a/patterns/header/header-desktop-style-4.php
+++ b/patterns/header/header-desktop-style-4.php
@@ -19,7 +19,7 @@
 			<!-- wp:newspack/overlay-menu {"instanceId":"fedb5a226df2"} -->
 				<div class="wp-block-newspack-overlay-menu"><!-- wp:newspack/overlay-menu-trigger {"triggerText":"<?php esc_html_e( 'MENU', 'newspack-block-theme' ); ?>","style":{"color":{"background":"#ffffff00"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20","right":"var:preset|spacing|20"}}},"textColor":"contrast"} /-->
 				<!-- wp:newspack/overlay-menu-panel -->
-				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} /--></div>
+				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"className":"is-style-flatten","layout":{"type":"flex","setCascadingProperties":true,"orientation":"vertical"}} /--></div>
 				<!-- /wp:newspack/overlay-menu-panel --></div>
 			<!-- /wp:newspack/overlay-menu -->
 
diff --git a/patterns/header/header-mobile-style-1.php b/patterns/header/header-mobile-style-1.php
index f0a6ea72..f8cfd023 100644
--- a/patterns/header/header-mobile-style-1.php
+++ b/patterns/header/header-mobile-style-1.php
@@ -21,7 +21,7 @@
 			<!-- wp:newspack/overlay-menu {"instanceId":"1a382fccbd5d"} -->
 				<div class="wp-block-newspack-overlay-menu"><!-- wp:newspack/overlay-menu-trigger {"className":"is-style-icon-only","style":{"color":{"background":"#ffffff00"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"right":"0","left":"0"}}},"textColor":"contrast"} /-->
 				<!-- wp:newspack/overlay-menu-panel -->
-				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} /--></div>
+				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"className":"is-style-flatten","layout":{"type":"flex","setCascadingProperties":true,"orientation":"vertical"}} /--></div>
 				<!-- /wp:newspack/overlay-menu-panel --></div>
 			<!-- /wp:newspack/overlay-menu -->
 
diff --git a/patterns/header/header-mobile-style-2.php b/patterns/header/header-mobile-style-2.php
index 31394ff2..10611112 100644
--- a/patterns/header/header-mobile-style-2.php
+++ b/patterns/header/header-mobile-style-2.php
@@ -21,7 +21,7 @@
 			<!-- wp:newspack/overlay-menu {"instanceId":"1a382fccbd5d"} -->
 			<div class="wp-block-newspack-overlay-menu"><!-- wp:newspack/overlay-menu-trigger {"className":"is-style-icon-only","style":{"color":{"background":"#ffffff00"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"right":"0","left":"0"}}},"textColor":"contrast"} /-->
 				<!-- wp:newspack/overlay-menu-panel -->
-				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} /--></div>
+				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"className":"is-style-flatten","layout":{"type":"flex","setCascadingProperties":true,"orientation":"vertical"}} /--></div>
 				<!-- /wp:newspack/overlay-menu-panel --></div>
 			<!-- /wp:newspack/overlay-menu -->
 
diff --git a/patterns/header/header-mobile-style-3.php b/patterns/header/header-mobile-style-3.php
index f9aa7556..e858c3e6 100644
--- a/patterns/header/header-mobile-style-3.php
+++ b/patterns/header/header-mobile-style-3.php
@@ -21,7 +21,7 @@
 			<!-- wp:newspack/overlay-menu {"instanceId":"1a382fccbd5d"} -->
 			<div class="wp-block-newspack-overlay-menu"><!-- wp:newspack/overlay-menu-trigger {"className":"is-style-icon-only","style":{"color":{"background":"#ffffff00"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"right":"0","left":"0"}}},"textColor":"contrast"} /-->
 				<!-- wp:newspack/overlay-menu-panel -->
-				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} /--></div>
+				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"className":"is-style-flatten","layout":{"type":"flex","setCascadingProperties":true,"orientation":"vertical"}} /--></div>
 				<!-- /wp:newspack/overlay-menu-panel --></div>
 			<!-- /wp:newspack/overlay-menu -->
 
diff --git a/patterns/header/header-mobile-style-4.php b/patterns/header/header-mobile-style-4.php
index 7680a45f..bf62c018 100644
--- a/patterns/header/header-mobile-style-4.php
+++ b/patterns/header/header-mobile-style-4.php
@@ -21,7 +21,7 @@
 			<!-- wp:newspack/overlay-menu {"instanceId":"1a382fccbd5d"} -->
 			<div class="wp-block-newspack-overlay-menu"><!-- wp:newspack/overlay-menu-trigger {"className":"is-style-icon-only","style":{"color":{"background":"#ffffff00"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"right":"0","left":"0"}}},"textColor":"contrast"} /-->
 				<!-- wp:newspack/overlay-menu-panel -->
-				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} /--></div>
+				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"className":"is-style-flatten","layout":{"type":"flex","setCascadingProperties":true,"orientation":"vertical"}} /--></div>
 				<!-- /wp:newspack/overlay-menu-panel --></div>
 			<!-- /wp:newspack/overlay-menu -->
 		</div>
diff --git a/patterns/header/header-mobile-style-5.php b/patterns/header/header-mobile-style-5.php
index bae8be7d..b9c10209 100644
--- a/patterns/header/header-mobile-style-5.php
+++ b/patterns/header/header-mobile-style-5.php
@@ -39,7 +39,7 @@
 			<!-- wp:newspack/overlay-menu {"instanceId":"1a382fccbd5d"} -->
 			<div class="wp-block-newspack-overlay-menu"><!-- wp:newspack/overlay-menu-trigger {"className":"is-style-icon-only","style":{"color":{"background":"#ffffff00"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"right":"0","left":"0"}}},"textColor":"contrast"} /-->
 				<!-- wp:newspack/overlay-menu-panel {"slideDirection":"right"} -->
-				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} /--></div>
+				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"className":"is-style-flatten","layout":{"type":"flex","setCascadingProperties":true,"orientation":"vertical"}} /--></div>
 				<!-- /wp:newspack/overlay-menu-panel --></div>
 			<!-- /wp:newspack/overlay-menu -->
 		</div>
diff --git a/patterns/header/header-mobile-style-6.php b/patterns/header/header-mobile-style-6.php
index 93a0ed7f..4d8a959a 100644
--- a/patterns/header/header-mobile-style-6.php
+++ b/patterns/header/header-mobile-style-6.php
@@ -33,7 +33,7 @@
 			<!-- wp:newspack/overlay-menu {"instanceId":"1a382fccbd5d"} -->
 				<div class="wp-block-newspack-overlay-menu"><!-- wp:newspack/overlay-menu-trigger {"className":"is-style-icon-only","style":{"color":{"background":"#ffffff00"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"right":"0","left":"0"}}},"textColor":"contrast"} /-->
 				<!-- wp:newspack/overlay-menu-panel {"slideDirection":"right"} -->
-				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} /--></div>
+				<div class="wp-block-newspack-overlay-menu-panel"><!-- wp:navigation {"className":"is-style-flatten","layout":{"type":"flex","setCascadingProperties":true,"orientation":"vertical"}} /--></div>
 				<!-- /wp:newspack/overlay-menu-panel --></div>
 			<!-- /wp:newspack/overlay-menu -->
 		</div>