feat(block-theme): add size options to the Overlay Menu by laurelfulford · Pull Request #4652 · Automattic/newspack-plugin

laurelfulford · 2026-04-10T01:16:30Z

All Submissions:

Have you followed the Newspack Contributing guideline?
Does your code follow the WordPress' coding standards and VIP Go coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR adds a couple options to the Overlay Menu block:

It adds a toggle to open the Menu Overlay panel as a full screen size. When this is enabled, the direction (and new size option) is hidden.
It adds an option to change the menu panel's width

Closes NPPD-1362

How to test the changes in this Pull Request:

Edit a post/page/template part, and add the Overlay Menu Block.
Open the panel, and select it. In the right sidebar, confirm you now have an option to switch the menu to 'full width', and to change its widths -- by default, the full-width option should be off, the panel should come from the left, and should use the 'S' size:

Try enabling 'Full screen'; confirm that the other two options go away. This is because the menu will fade in (a left-or-right entry would be a little jarring at that size), and doesn't need a size set.

Publish and test on front-end; ensure it works well.
Edit again, toggle off "Full screen", and test out the size options. Try them in the editor and on the front end; combine them with the different direction options, and test on different screen sizes. Confirm everything looks good.

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you successfully ran tests with your changes locally?

Copilot

Pull request overview

This PR enhances the Overlay Menu Panel block by adding layout controls that let editors switch the overlay panel between a full-screen presentation and a set of predefined panel widths.

Changes:

Added Full screen toggle to render the overlay panel without directional slide behavior.
Added Width toggle group (XS–XL) for non-full-screen mode, reflected in both editor preview and frontend render.
Updated panel SCSS to support full-screen and width modifier classes.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
`src/blocks/overlay-menu/style.scss`	Adds full-screen and width modifier styles for the overlay panel.
`src/blocks/overlay-menu/panel/edit.js`	Adds inspector controls for full-screen and width; updates preview class composition.
`src/blocks/overlay-menu/panel/class-overlay-menu-panel-block.php`	Validates new attributes and outputs corresponding modifier classes in rendered markup.
`src/blocks/overlay-menu/panel/block.json`	Defines new block attributes `isFullScreen` and `panelWidth` with defaults.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

laurelfulford · 2026-04-10T17:07:36Z

Hey @thomasguillot! This could probably use your eyes just to make sure the sizing feels okay 🙂 Thank you!

thomasguillot · 2026-04-14T15:22:49Z

@laurelfulford Added aria-labels to the Width ToggleGroupControlOptions so each size shows a tooltip on hover (XS → Extra small, S → Small, M → Medium, L → Large, XL → Extra large). Also refactored the options into a PANEL_WIDTH_OPTIONS array to cut down on repetition.

thomasguillot · 2026-04-14T15:29:18Z

@laurelfulford Refactored the panel width CSS: extracted a panel-width Sass mixin so the five size rules are one line each, and switched the min-width: 782px media queries to use the shared breakpoints.$tablet_width variable.

thomasguillot · 2026-04-14T15:34:51Z

@laurelfulford Added "supports": { "lock": false } to both the Overlay Button (trigger) and Menu Panel block.json files, so users can't toggle the lock UI on those children. The parent Overlay Menu block already uses templateLock="all" on its InnerBlocks, so combined with this change the trigger and panel can't be removed or moved.

adekbadek

Verified the new options end-to-end: defaults render as Full Screen off / direction Left / width S; the Full Screen toggle correctly hides direction + width; and the saved page on the frontend opens the panel from the configured side at the configured width. No PR-related PHP warnings showed up in the debug log.

Approving with a few small notes inline.

A couple of broader things that didn't fit on a line:

The PR description doesn't mention the lock: false additions on the panel and trigger blocks. The commit message documents the intent, but it would be worth a one-line mention in the description so reviewers don't have to dig through commits.
render_block now has enough branching (full-screen vs direction + width allowlist + invalid-value fallback) that a small PHPUnit test covering the class-string output for valid and invalid attribute combos would be a nice way to lock in the contract — especially the allowlist behavior, since that's the bit doing real defense.

adekbadek · 2026-04-27T11:48:50Z

-			'class'              => 'overlay-menu__panel is-layout-constrained ' . $position_class,
-			'data-direction'     => $direction,
+			'class'              => $panel_class,
+			'data-direction'     => $is_full_screen ? 'full-screen' : $direction,


data-direction is set to the literal "full-screen" here, but the attribute's enum is left|right and this value isn't consumed by view.js or any CSS selector. Either drop data-direction in the full-screen branch or treat the new value as intentional public API and document it. Right now it's a slightly dead string.

adekbadek · 2026-04-27T11:48:50Z

 			"default": "left"
 		},
+		"isFullScreen": {
+			"type": "boolean",


Consider adding "enum": ["x-small", "small", "medium", "large", "x-large"] to panelWidth (and ["left", "right"] to slideDirection). The PHP allowlist already prevents class-name injection, so this is purely defense-in-depth on the schema side, but it makes the contract explicit and gives editor-side validation for free.

adekbadek · 2026-04-27T11:48:50Z

@@ -1,3 +1,5 @@
+@use "../../newspack-ui/scss/variables/breakpoints";


Nit / out of scope: this is the only place in src/blocks/ that pulls in newspack-ui/scss/variables/breakpoints. The relative path couples this block's stylesheet to the newspack-ui directory layout. If this dependency starts spreading, a shared _breakpoints.scss in src/shared/scss/ (next to the existing _mixins.scss) would be a more durable home.

adekbadek · 2026-04-27T11:48:50Z

+	&--width--x-small { @include panel-width( --wp--custom--width--x-small, 300px ); }
+	&--width--small   { @include panel-width( --wp--custom--width--small, 410px ); }
+	&--width--medium  { @include panel-width( --wp--style--global--content-size, 632px ); }
+	&--width--large   { @include panel-width( --wp--custom--width--large, 964px ); }


Nit: the medium fallback maps to --wp--style--global--content-size, which is a different variable family than the others (--wp--custom--width--*). It's intentional (matches editor content width), but a one-line comment would prevent it reading like a typo.

laurelfulford added 2 commits April 9, 2026 18:05

feat: add size options to the Overlay Menu

185b88c

fix: switch max-widths to widths and set a more general max-widht

4f3027f

laurelfulford mentioned this pull request Apr 10, 2026

feat: add README.md for the Overlay Block #4651

Merged

6 tasks

laurelfulford requested a review from Copilot April 10, 2026 15:40

Copilot started reviewing on behalf of laurelfulford April 10, 2026 15:41 View session

Copilot AI reviewed Apr 10, 2026

View reviewed changes

Comment thread src/blocks/overlay-menu/style.scss

laurelfulford added 2 commits April 10, 2026 09:31

fix: add visibility: hidden to full-size overlay when closed

a7140e8

fix: tweak CSS formatting, comments

3f8168b

laurelfulford marked this pull request as ready for review April 10, 2026 16:49

laurelfulford requested a review from a team as a code owner April 10, 2026 16:49

laurelfulford added [Status] Needs Review The issue or pull request needs to be reviewed [Status] Needs Design Review labels Apr 10, 2026

fix: add aria-label tooltips to width ToggleGroupControl options

7923076

refactor: extract panel width mixin and use tablet breakpoint var

b1238ba

fix: disable lock UI on overlay menu trigger and panel blocks

6c14885

thomasguillot added [Status] Design Approved and removed [Status] Needs Design Review labels Apr 14, 2026

adekbadek approved these changes Apr 27, 2026

View reviewed changes

github-actions Bot added [Status] Approved The pull request has been reviewed and is ready to merge and removed [Status] Needs Review The issue or pull request needs to be reviewed labels Apr 27, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(block-theme): add size options to the Overlay Menu#4652

feat(block-theme): add size options to the Overlay Menu#4652
laurelfulford wants to merge 7 commits intotrunkfrom
feat/extend-overlay-menu-options

laurelfulford commented Apr 10, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

laurelfulford commented Apr 10, 2026

Uh oh!

thomasguillot commented Apr 14, 2026

Uh oh!

thomasguillot commented Apr 14, 2026

Uh oh!

thomasguillot commented Apr 14, 2026

Uh oh!

adekbadek left a comment

Uh oh!

adekbadek Apr 27, 2026

Uh oh!

adekbadek Apr 27, 2026

Uh oh!

adekbadek Apr 27, 2026

Uh oh!

adekbadek Apr 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		@@ -1,3 +1,5 @@
		@use "../../newspack-ui/scss/variables/breakpoints";

Conversation

laurelfulford commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

laurelfulford commented Apr 10, 2026

Uh oh!

thomasguillot commented Apr 14, 2026

Uh oh!

thomasguillot commented Apr 14, 2026

Uh oh!

thomasguillot commented Apr 14, 2026

Uh oh!

adekbadek left a comment

Choose a reason for hiding this comment

Uh oh!

adekbadek Apr 27, 2026

Choose a reason for hiding this comment

Uh oh!

adekbadek Apr 27, 2026

Choose a reason for hiding this comment

Uh oh!

adekbadek Apr 27, 2026

Choose a reason for hiding this comment

Uh oh!

adekbadek Apr 27, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

laurelfulford commented Apr 10, 2026 •

edited

Loading