feat(block-theme): add search overlay block

includes/class-blocks.php

@@ -40,6 +40,7 @@ public static function init() {
 			require_once NEWSPACK_ABSPATH . 'src/blocks/overlay-menu/class-overlay-menu-block.php';
 			require_once NEWSPACK_ABSPATH . 'src/blocks/overlay-menu/trigger/class-overlay-menu-trigger-block.php';
 			require_once NEWSPACK_ABSPATH . 'src/blocks/overlay-menu/panel/class-overlay-menu-panel-block.php';
+			require_once NEWSPACK_ABSPATH . 'src/blocks/overlay-search/class-overlay-search-block.php';
 			Social_Icons::init();
 		}
 		if ( Collections::is_module_active() ) {

includes/class-newspack-ui-icons.php

@@ -194,6 +194,10 @@ public static function sanitize_svgs() {
 			'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false" class="newspack-ui__svg-icon--newspack">
 				<path d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18m1.773 13.09-4.228-4.226v4.227H7.91V7.909l8.182 8.182zm2.318-2.317-1.227-1.228h1.227zm0-2.318h-2.318l-1.228-1.228h3.546zm0-2.319h-4.636L10.227 7.91h5.864z" />
 			</svg>',
+		'search'           =>
+			'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false" class="newspack-ui__svg-icon--search">
+				<path d="M13 5c-3.3 0-6 2.7-6 6 0 1.4.5 2.7 1.3 3.7l-3.8 3.8 1.1 1.1 3.8-3.8c1 .8 2.3 1.3 3.7 1.3 3.3 0 6-2.7 6-6S16.3 5 13 5zm0 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z" />
+			</svg>',
 		'people'           =>
 			'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false" class="newspack-ui__svg-icon--people">
 				<path d="M15.5 9.5a1 1 0 100-2 1 1 0 000 2zm0 1.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5zm-2.25 6v-2a2.75 2.75 0 00-2.75-2.75h-4A2.75 2.75 0 003.75 15v2h1.5v-2c0-.69.56-1.25 1.25-1.25h4c.69 0 1.25.56 1.25 1.25v2h1.5zm7-2v2h-1.5v-2c0-.69-.56-1.25-1.25-1.25H15v-1.5h2.5A2.75 2.75 0 0120.25 15zM9.5 8.5a1 1 0 11-2 0 1 1 0 012 0zm1.5 0a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" fill-rule="evenodd" />

src/blocks/index.js

@@ -24,6 +24,7 @@ import * as copyrightDate from './copyright-date';
 import * as overlayMenu from './overlay-menu';
 import * as overlayMenuTrigger from './overlay-menu/trigger';
 import * as overlayMenuPanel from './overlay-menu/panel';
+import * as overlaySearch from './overlay-search';
 
 /**
  * Block Scripts
@@ -47,6 +48,7 @@ export const blocks = [
 	overlayMenu,
 	overlayMenuTrigger,
 	overlayMenuPanel,
+	overlaySearch,
 ];
 
 const readerActivationBlocks = [ 'newspack/reader-registration', 'newspack/my-account-button' ];
@@ -64,6 +66,7 @@ const blockThemeBlocks = [
 	'newspack/overlay-menu-trigger',
 	'newspack/overlay-menu-panel',
 	'newspack/my-account-button',
+	'newspack/overlay-search',
 ];
 
 /**

src/blocks/my-account-button/block.json

@@ -51,6 +51,11 @@
 		},
 		"shadow": true
 	},
+	"styles": [
+		{ "name": "default", "label": "Default", "isDefault": true },
+		{ "name": "icon-only", "label": "Icon only" },
+		{ "name": "text-only", "label": "Text only" }
+	],
 	"editorStyle": "file:../../../dist/blocks.css",
 	"style": "file:../../../dist/blocks.css"
 }

src/blocks/my-account-button/index.js

@@ -9,30 +9,12 @@ import './style.scss';
 /**
  * WordPress dependencies
  */
-import { registerBlockStyle } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
 import { button as icon } from '@wordpress/icons';
 
 const { name } = metadata;
 
 export { metadata, name };
 
-registerBlockStyle( name, {
-	name: 'default',
-	label: __( 'Default', 'newspack-plugin' ),
-	isDefault: true,
-} );
-
-registerBlockStyle( name, {
-	name: 'icon-only',
-	label: __( 'Icon only', 'newspack-plugin' ),
-} );
-
-registerBlockStyle( name, {
-	name: 'text-only',
-	label: __( 'Text only', 'newspack-plugin' ),
-} );
-
 export const settings = {
 	title: metadata.title,
 	icon: {

src/blocks/overlay-menu/class-overlay-menu-block.php

@@ -49,6 +49,10 @@ public static function register_block() {
 	 * @return string Block HTML.
 	 */
 	public static function render_block( array $attributes, string $content ) {
+		// The compiled view script depends on dist/commons.js (a webpack split chunk).
+		// Ensure commons is enqueued so the entry callback can execute on the frontend.
+		\Newspack\Newspack::load_common_assets();
+
 		$instance_id = esc_attr( $attributes['instanceId'] ?? '' );
 
 		// Only add data-overlay-id when instanceId is set to avoid empty selectors.

src/blocks/overlay-menu/edit.js

@@ -10,7 +10,11 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import PanelPreviewToggle from './panel-preview-toggle';
 import { panelToggles, subscribeToPanel } from './preview-refs';
 
-const BLOCKS_TEMPLATE = [ [ 'newspack/overlay-menu-trigger' ], [ 'newspack/overlay-menu-panel' ] ];
+const CHILD_LOCK = { move: true, remove: true };
+const BLOCKS_TEMPLATE = [
+	[ 'newspack/overlay-menu-trigger', { lock: CHILD_LOCK } ],
+	[ 'newspack/overlay-menu-panel', { lock: CHILD_LOCK } ],
+];
 
 /**
  * Edit component for the Overlay Menu block.

src/blocks/overlay-menu/panel/block.json

@@ -33,12 +33,13 @@
 		},
 		"panelBackgroundColor": {
 			"type": "string",
-			"default": ""
+			"default": "var(--wp--preset--color--base, #ffffff)"
 		},
 		"panelTextColor": {
 			"type": "string",
-			"default": ""
-		}
+			"default": "var(--wp--preset--color--contrast, #1E1E1E)"
+		},
+		"lock": { "type": "object", "default": { "move": true, "remove": true } }
 	},
 	"supports": {
 		"html": false,

src/blocks/overlay-menu/panel/class-overlay-menu-panel-block.php

@@ -14,9 +14,6 @@
  */
 final class Overlay_Menu_Panel_Block {
 
-	// Inline SVG for the close icon.
-	const ICON_CLOSE = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"/></svg>';
-
 	/**
 	 * Initializes the block.
 	 *
@@ -74,12 +71,20 @@ public static function render_block( array $attributes, string $content, \WP_Blo
 			$panel_class = 'overlay-menu__panel is-layout-constrained overlay-menu__panel--' . $direction . ' overlay-menu__panel--width--' . $panel_width;
 		}
 
+		// Run user-supplied color values through `safecss_filter_attr` so
+		// `;`-delimited declaration injection is stripped (esc_attr alone wouldn't).
 		$panel_styles = [];
 		if ( $panel_bg_color ) {
-			$panel_styles[] = 'background:' . esc_attr( $panel_bg_color );
+			$safe_bg = safecss_filter_attr( 'background: ' . $panel_bg_color );
+			if ( '' !== $safe_bg ) {
+				$panel_styles[] = $safe_bg;
+			}
 		}
 		if ( $panel_text_color ) {
-			$panel_styles[] = 'color:' . esc_attr( $panel_text_color );
+			$safe_color = safecss_filter_attr( 'color: ' . $panel_text_color );
+			if ( '' !== $safe_color ) {
+				$panel_styles[] = $safe_color;
+			}
 		}
 		$extra_attributes = [
 			'id'                 => 'newspack-overlay-panel-' . $instance_id,
@@ -105,7 +110,7 @@ public static function render_block( array $attributes, string $content, \WP_Blo
 					class="overlay-menu__close"
 				>
 					<span class="overlay-menu__icon" aria-hidden="true">
-						<?php echo self::ICON_CLOSE; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+						<?php \Newspack\Newspack_UI_Icons::print_svg( 'close' ); ?>
 					</span>
 					<span class="screen-reader-text">
 						<?php esc_html_e( 'Close', 'newspack-plugin' ); ?>

src/blocks/overlay-menu/style.scss

@@ -1,14 +1,7 @@
 @use "../../newspack-ui/scss/variables/breakpoints";
+@use "../../../packages/colors/colors.module" as colors;
 
 .wp-block-newspack-overlay-menu {
-	.overlay-menu__trigger {
-		align-items: center;
-		cursor: pointer;
-		display: inline-flex;
-		gap: var( --wp--preset--spacing--20 );
-		justify-content: center;
-	}
-
 	// ─── Block editor only ────────────────────────────────────────────────────
 
 	// Hidden panel state — keeps InnerBlocks in the DOM without being visible.
@@ -22,26 +15,11 @@
 // when the menu opens, removing it from the .wp-block-newspack-overlay-menu
 // ancestor. Styles nested inside the block wrapper would stop matching.
 
-// Icon used in trigger + close buttons.
-.overlay-menu__icon {
-	align-items: center;
-	display: inline-flex;
-	flex-shrink: 0;
-	height: 1.25em;
-	width: 1.25em;
-
-	svg {
-		fill: currentcolor;
-		height: 100%;
-		width: 100%;
-	}
-}
-
 // Close button wrapper — sits at the top of the panel, flush right.
 .overlay-menu__close-wrapper {
 	align-items: center;
 	display: flex;
-	height: var( --wp--custom--spacing--85, 3rem );
+	height: var( --wp--custom--spacing--85, 4rem );
 	justify-content: flex-end;
 	margin-right: calc( -1 * var( --wp--preset--spacing--30 ) );
 
@@ -55,13 +33,26 @@
 	align-items: center;
 	background: none;
 	border: none;
+	border-radius: var( --wp--custom--border--radius-small, 0.25rem );
 	color: inherit;
 	cursor: pointer;
 	display: inline-flex;
 	font-family: inherit;
 	font-size: inherit;
-	gap: var( --wp--preset--spacing--10, 0.25rem );
+	gap: var( --wp--custom--spacing--10, 0.25rem );
 	padding: var( --wp--preset--spacing--20 );
+
+	&:focus-visible {
+		outline: 2px solid;
+		outline-offset: 1px;
+	}
+
+	svg {
+		display: block;
+		width: var( --wp--preset--spacing--40, 1.5rem );
+		height: var( --wp--preset--spacing--40, 1.5rem );
+		fill: currentcolor;
+	}
 }
 
 // Panel content area.
@@ -74,37 +65,31 @@
 // no dependency on the theme's overlay-contents classes.
 
 .overlay-menu__panel {
-	background: var( --wp--preset--color--base, #fff );
+	// Slide duration scales with the panel width via per-modifier overrides below.
+	--overlay-menu-slide-duration: 250ms;
+
 	bottom: 0;
 	opacity: 0;
 	overflow-y: auto;
 	padding: var( --wp--preset--spacing--30, 1rem );
 	position: fixed;
-	top: 0;
+	top: var(--wp-admin--admin-bar--height, 0);
 	// Transition driven by CSS; JS only toggles the --open class.
 	transition:
 		opacity 125ms ease-in-out,
-		left 250ms ease-in-out,
-		right 250ms ease-in-out,
-		top 250ms ease-in-out,
-		bottom 250ms ease-in-out,
-		transform 250ms ease-in-out;
+		left var(--overlay-menu-slide-duration) ease-in-out,
+		right var(--overlay-menu-slide-duration) ease-in-out,
+		top var(--overlay-menu-slide-duration) ease-in-out,
+		bottom var(--overlay-menu-slide-duration) ease-in-out,
+		transform var(--overlay-menu-slide-duration) ease-in-out;
 	max-width: 90vw;
 	width: 100%;
-	z-index: 50;
+	z-index: 99998;
 
 	@media ( min-width: breakpoints.$tablet_width ) {
 		padding: var( --wp--preset--spacing--40, 1.5rem );
 	}
 
-	.admin-bar & {
-		top: 46px;
-
-		@media ( min-width: breakpoints.$tablet_width ) {
-			top: 32px;
-		}
-	}
-
 	// Side panels slide in from left or right.
 	&--left {
 		left: -100%;
@@ -121,7 +106,7 @@
 		left: 0;
 		max-width: 100%;
 		right: 0;
-		transition: opacity 125ms ease-in-out, visibility 0s 125ms;
+		transition: opacity 200ms ease-in-out, visibility 0s 200ms;
 		visibility: hidden;
 	}
 
@@ -139,7 +124,7 @@
 		}
 
 		&.overlay-menu__panel--full-screen {
-			transition: opacity 125ms ease-in-out, visibility 0s;
+			transition: opacity 200ms ease-in-out, visibility 0s;
 			visibility: visible;
 		}
 	}
@@ -156,26 +141,26 @@
 		}
 	}
 
-	&--width--x-small { @include panel-width( --wp--custom--width--x-small, 300px ); }
-	&--width--small   { @include panel-width( --wp--custom--width--small, 410px ); }
+	&--width--x-small { @include panel-width( --wp--custom--width--x-small, 300px ); --overlay-menu-slide-duration: 250ms; }
+	&--width--small   { @include panel-width( --wp--custom--width--small, 410px ); --overlay-menu-slide-duration: 275ms; }
 	// Medium intentionally maps to the theme's content size (from theme.json), not the --wp--custom--width-- family used by the other sizes.
-	&--width--medium  { @include panel-width( --wp--style--global--content-size, 632px ); }
-	&--width--large   { @include panel-width( --wp--custom--width--large, 964px ); }
-	&--width--x-large { @include panel-width( --wp--custom--width--x-large, 1296px ); }
+	&--width--medium  { @include panel-width( --wp--style--global--content-size, 632px ); --overlay-menu-slide-duration: 325ms; }
+	&--width--large   { @include panel-width( --wp--custom--width--large, 964px ); --overlay-menu-slide-duration: 400ms; }
+	&--width--x-large { @include panel-width( --wp--custom--width--x-large, 1296px ); --overlay-menu-slide-duration: 475ms; }
 }
 
 // ─── Scrim ────────────────────────────────────────────────────────────────────
 // Shared by both the frontend (created dynamically by view.js) and the block
 // editor preview (rendered as a React fragment sibling in edit.js).
 
 .overlay-menu__scrim {
-	background: rgba( 0, 0, 0, 0.5 );
+	background: var(--wp--custom--color--neutral-70, var(--newspack-ui-color-neutral-70, #{colors.$neutral-700}));
 	cursor: pointer;
 	inset: 0;
 	margin: 0 !important;
 	position: fixed;
 	transition: opacity 500ms ease-in-out;
-	z-index: 49;
+	z-index: 99997;
 }
 
 // Lock document scrolling while any overlay menu instance is open.

src/blocks/overlay-menu/trigger/block.json

@@ -9,7 +9,8 @@
 	"parent": [ "newspack/overlay-menu" ],
 	"usesContext": [ "newspack-overlay-menu/instanceId" ],
 	"attributes": {
-		"triggerText": { "type": "string", "default": "Menu" }
+		"triggerText": { "type": "string", "default": "Menu" },
+		"lock": { "type": "object", "default": { "move": true, "remove": true } }
 	},
 	"supports": {
 		"html": false,
@@ -34,6 +35,11 @@
 			}
 		}
 	},
+	"styles": [
+		{ "name": "default", "label": "Default", "isDefault": true },
+		{ "name": "icon-only", "label": "Icon only" },
+		{ "name": "text-only", "label": "Text only" }
+	],
 	"editorStyle": "file:../../../../dist/blocks.css",
 	"style": "file:../../../../dist/blocks.css"
 }