fix: tweak inline gate styles for block theme

[laurelfulford]

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 makes some tweaks to the inline Content Gate so it respects block widths.

It needs to be tested with the Classic Theme with this PR: Automattic/newspack-theme#2625

And it needs to be tested with the Block theme with this PR: Automattic/newspack-block-theme#407

Closes NPPD-1180

How to test the changes in this Pull Request:

1. Apply this PR to the plugin, fix: make sure content gates can use wide/full width blocks newspack-theme#2625 to the classic theme, and fix: update single post template widths newspack-block-theme#407 to the block theme.
2. Set the site to use the Block Theme.
3. Reset any Single templates you've may have edited in the Site Editor.
4. Set up a Content Gate using either Memberships or the new Newspack approach; make it inline.
5. In the Gate content, use one of the Content Gate patterns with a wide block.
6. In an incognito window, view a post on the front end and confirm the gate uses the wide width):

9. Try editing your post and changing the template to "Single - Sidebar Layout"; Save.
10. View the front-end in an incognito window and confirm that the gate doesn't go outside of the content area:

11. Try rotating through a few other single post templates and make sure things look okay.
12. Try editing the gate and confirm that full-width and regular width blocks also display as expected.
13. Switch to the Classic theme.
14. Repeat the steps 6-12 with the Classic theme, switching between the Default, One Column and One Column Wide templates. Ensure the gate displays the expected block width.

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 adjusts the inline Content Gate's styling to properly respect block widths in the block theme, ensuring gates display correctly across different layout templates.

Changes:

• Added CSS styling to constrain inline gate maximum width
• Updated inline gate wrapper to include block layout class
• Added max-width constraint to fade overlay element

Reviewed changes

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

File	Description
src/content-gate/gate.scss	Adds max-width constraint to inline gate container
includes/content-gate/trait-content-gate-layout.php	Applies layout-constrained class and max-width to gate wrapper and fade overlay

---

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