feat(block-theme): add a responsive container block for headers/footer

[laurelfulford]

All Submissions:

• Have you followed the Newspack Contributing guidelines?
• 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?

Our publishers often require pretty complex, multi-menu headers and footers. To make this work well on all screen sizes, we've been adding two version of each template part, one that shows on desktop and one that shows on mobile. This has worked well from an execution standpoint -- and essentially mimics what we do in the classic theme -- but it is SUPER messy and confusing in the Site Editor, especially if you're just trying to edit one of these template parts and have no idea what's going on under the hood.

We're currently using WordPress 7.0's block visibility with breakpoints, but that has some shortcomings:

• The blocks are hidden-hidden in the editor - it's not easy to tell where the hidden header/footer is, or how to select it.
• To view the different header/footer states, you actually have to resize the browser.
• Each hidden/visible block is separate - they're individual pieces that have no relationship to each other.

This PR adds a "responsive container" block to help simplify the UX of this header/footer approach. It's essentially one big toggle: you can either view the Desktop or Mobile version of the header, and easily switch between the two. There's a visible UI so it's easy to find both versions of the header, and you don't need to change the browser width to edit either.

I'll spin up a separate PR to add this block to the block theme once things look mostly finalized.

Closes NPPD-1382

How to test the changes in this Pull Request:

1. Starting with the block theme, navigate to Appearance > Editor, and edit the Header template part.
2. Delete everything in it, and insert the Responsive Container block. You should see a block that looks a little like a Group block with toggles, and two child 'Breakpoint' blocks, one for desktop and one for mobile:

3. Try toggling between the two views and confirm you can.
4. After saving changes, confirm that toggling between the two views does not
5. Try populating the two views by clicking on the placeholder, and adding block(s).
6. Click around between the views and into them to make edits, and make sure the UI responds appropriately:
   • As you click into the two breakpoints, you should see a desktop and mobile icon.
   • The toolbar for the two breakpoints should still include the Desktop and Mobile toggle buttons.
   • Toggling between the two breakpoints should shift the focus to the visible breakpoint, updating the icon:

7. Try saving your changes, and going back and toggling the views between Desktop and Mobile again - confirm this doesn't trigger a need to save the changes again. The toggled state should not be saved at all.
8. View on the front end and confirm your Desktop blocks are initially visible.
9. Try shrinking down the browser window, and confirm the mobile blocks become visible at the 781px breakpoint.
10. Go back to Site Editor and click on the Responsive Container block. Open the 'Position' panel in the right sidebar, enable the option, and confirm you can set the block to position 'Sticky'. Set it and click 'Save':

11. View on the front-end and scroll; confirm that the header actually sticks (note that this may depend on your template structure -- an HTML element with position: sticky won't stick if it has any parent elements with overflow styles).
12. Edit a post or page and try to add the Responsive Container block. It should be scoped to appear only in the Site Editor, as it's intended as more of a broad layout tool, so it shouldn't appear.

Theme -specific testing:

1. Add settings.custom.newspackResponsiveBreakpoint (e.g. 1024) to the active theme's theme.json, and reload the front-end. Try resizing the window, and confirm the header swaps at the new breakpoint.
2. Add a the filter add_filter( 'newspack_responsive_container_breakpoint', fn() => 600 ); ; confirm the headers change at 600px, and it wins even if theme.json also has a filter set.
3. Remove both and confirm the breakpoint's back to normal.

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 run tests with your changes locally?

[Copilot]

Pull request overview

Adds a new “Responsive Container” block pair (container + breakpoint child) to simplify building responsive headers/footers in the block theme, including an editor toggle to switch between Desktop and Mobile views without dirtying the post, plus front-end CSS that swaps visibility at a configurable breakpoint.

Changes:

• Introduces newspack/responsive-container and newspack/responsive-container-breakpoint blocks (JS registration, editor UI, and block.json metadata).
• Adds PHP registration plus a front-end inline stylesheet driven by a resolved breakpoint (default, theme.json custom setting, and filter override).
• Adds PHPUnit coverage for breakpoint resolution/CSS output and Jest coverage for the editor-only view-state store.

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
plugins/newspack-plugin/tests/unit-tests/class-test-responsive-container-block.php	Adds PHPUnit tests for breakpoint resolution precedence and generated visibility CSS.
plugins/newspack-plugin/src/blocks/responsive-container/view-toggle.js	Adds the shared BlockControls toolbar toggle (Desktop/Mobile) used by container + breakpoints.
plugins/newspack-plugin/src/blocks/responsive-container/view-state.test.js	Adds JS tests for the ephemeral editor-only view-state store behavior.
plugins/newspack-plugin/src/blocks/responsive-container/view-state.js	Implements the module-global, editor-only view-state store and hook.
plugins/newspack-plugin/src/blocks/responsive-container/style.scss	Adds editor-only helper styles for hiding the inactive breakpoint and keeping empties clickable.
plugins/newspack-plugin/src/blocks/responsive-container/index.js	Registers the Responsive Container block settings, keywords, and save markup.
plugins/newspack-plugin/src/blocks/responsive-container/edit.js	Implements the container edit UI with locked two-breakpoint template + toolbar toggle.
plugins/newspack-plugin/src/blocks/responsive-container/class-responsive-container-block.php	Registers the server-side block and enqueues global front-end breakpoint visibility CSS.
plugins/newspack-plugin/src/blocks/responsive-container/breakpoint/index.js	Registers the Breakpoint child block, including desktop/mobile variations and save markup.
plugins/newspack-plugin/src/blocks/responsive-container/breakpoint/edit.js	Implements breakpoint edit UI: hides inactive view, preserves content, and shifts selection on toggle.
plugins/newspack-plugin/src/blocks/responsive-container/breakpoint/class-responsive-container-breakpoint-block.php	Adds server-side registration so supports are recognized for the child block.
plugins/newspack-plugin/src/blocks/responsive-container/breakpoint/block.json	Defines breakpoint child block metadata, parent restriction, locking defaults, and styles.
plugins/newspack-plugin/src/blocks/responsive-container/block.json	Defines container block metadata and supports (anchor + sticky position).
plugins/newspack-plugin/src/blocks/index.js	Registers the new blocks and scopes them to block theme + Site Editor only.
plugins/newspack-plugin/includes/class-blocks.php	Bootstraps the new PHP block classes alongside existing block registrations.

[Copilot]

Pull request overview

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

[Copilot]

Pull request overview

Copilot reviewed 15 out of 15 changed files in this pull request and generated no new comments.