fix: tweak inline gate styles for block theme by laurelfulford · Pull Request #4445 · Automattic/newspack-plugin

laurelfulford · 2026-02-02T21:08:44Z

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:

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.
Set the site to use the Block Theme.
Reset any Single templates you've may have edited in the Site Editor.
Set up a Content Gate using either Memberships or the new Newspack approach; make it inline.
In the Gate content, use one of the Content Gate patterns with a wide block.
In an incognito window, view a post on the front end and confirm the gate uses the wide width):

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

Try rotating through a few other single post templates and make sure things look okay.
Try editing the gate and confirm that full-width and regular width blocks also display as expected.
Switch to the Classic theme.
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.

laurelfulford · 2026-02-18T17:34:27Z

Thanks @chickenn00dle!

github-actions · 2026-02-18T17:34:45Z

Hey @laurelfulford, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️

# [6.33.0-alpha.1](v6.32.0...v6.33.0-alpha.1) (2026-02-19) ### Bug Fixes * add bock theme check before switching templates to prevent warnings ([#4412](#4412)) ([dfb5b63](dfb5b63)) * add check for my account before switching error notice ([#4484](#4484)) ([0cb3ae8](0cb3ae8)) * add fallback selector for the content gate in block theme ([#4431](#4431)) ([dd0b2b1](dd0b2b1)) * **avatar:** show placeholder for text-only custom bylines in editor ([#4456](#4456)) ([56d3278](56d3278)) * **content-gate:** create gate layout with 'publish' status ([#4483](#4483)) ([108215a](108215a)) * **content-gate:** prevent metering from bypassing account verification requirement ([#4459](#4459)) ([90aed19](90aed19)) * **my-account:** hide payment method dropdown if only has one child and is disabled ([#4472](#4472)) ([6e3c3f5](6e3c3f5)) * **my-account:** missing padding on labels ([#4479](#4479)) ([6c6d183](6c6d183)) * tweak inline gate styles for block theme ([#4445](#4445)) ([d867a53](d867a53)) ### Features * **content-gating:** new UI for adding/editing content gates ([#4474](#4474)) ([a193ecc](a193ecc)) * **data-events:** handler retry and ActionScheduler support ([#4469](#4469)) ([c997f38](c997f38)) * integrations - rename classes and move can_sync ([#4451](#4451)) ([877ce4f](877ce4f)) * integrations barebones ([#4433](#4433)) ([79bf9a7](79bf9a7)) * **my-account:** block theme styles ([#4430](#4430)) ([1629465](1629465)) * **my-account:** improve navigation on small screens ([#4471](#4471)) ([3404a66](3404a66)) * **newspack-components:** add divider component ([#4462](#4462)) ([f080d72](f080d72))

github-actions · 2026-02-19T19:49:03Z

🎉 This PR is included in version 6.33.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [6.34.0-alpha.1](v6.33.0...v6.34.0-alpha.1) (2026-03-02) ### Bug Fixes * add bock theme check before switching templates to prevent warnings ([#4412](#4412)) ([dfb5b63](dfb5b63)) * add check for my account before switching error notice ([#4484](#4484)) ([0cb3ae8](0cb3ae8)) * add fallback selector for the content gate in block theme ([#4431](#4431)) ([dd0b2b1](dd0b2b1)) * **avatar:** show placeholder for text-only custom bylines in editor ([#4456](#4456)) ([56d3278](56d3278)) * **content-gate:** create gate layout with 'publish' status ([#4483](#4483)) ([108215a](108215a)) * **content-gate:** prevent metering from bypassing account verification requirement ([#4459](#4459)) ([90aed19](90aed19)) * **my-account:** hide payment method dropdown if only has one child and is disabled ([#4472](#4472)) ([6e3c3f5](6e3c3f5)) * **my-account:** missing padding on labels ([#4479](#4479)) ([6c6d183](6c6d183)) * tweak inline gate styles for block theme ([#4445](#4445)) ([d867a53](d867a53)) ### Features * **content-gating:** new UI for adding/editing content gates ([#4474](#4474)) ([a193ecc](a193ecc)) * **data-events:** handler retry and ActionScheduler support ([#4469](#4469)) ([c997f38](c997f38)) * integrations - rename classes and move can_sync ([#4451](#4451)) ([877ce4f](877ce4f)) * integrations barebones ([#4433](#4433)) ([79bf9a7](79bf9a7)) * **my-account:** block theme styles ([#4430](#4430)) ([1629465](1629465)) * **my-account:** improve navigation on small screens ([#4471](#4471)) ([3404a66](3404a66)) * **newspack-components:** add divider component ([#4462](#4462)) ([f080d72](f080d72))

github-actions · 2026-03-02T15:39:06Z

🎉 This PR is included in version 6.34.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [6.34.0](v6.33.0...v6.34.0) (2026-03-02) ### Bug Fixes * add bock theme check before switching templates to prevent warnings ([#4412](#4412)) ([dfb5b63](dfb5b63)) * add check for my account before switching error notice ([#4484](#4484)) ([0cb3ae8](0cb3ae8)) * add fallback selector for the content gate in block theme ([#4431](#4431)) ([dd0b2b1](dd0b2b1)) * **avatar:** show placeholder for text-only custom bylines in editor ([#4456](#4456)) ([56d3278](56d3278)) * **content-gate:** create gate layout with 'publish' status ([#4483](#4483)) ([108215a](108215a)) * **content-gate:** prevent metering from bypassing account verification requirement ([#4459](#4459)) ([90aed19](90aed19)) * **my-account:** hide payment method dropdown if only has one child and is disabled ([#4472](#4472)) ([6e3c3f5](6e3c3f5)) * **my-account:** missing padding on labels ([#4479](#4479)) ([6c6d183](6c6d183)) * tweak inline gate styles for block theme ([#4445](#4445)) ([d867a53](d867a53)) ### Features * **content-gating:** new UI for adding/editing content gates ([#4474](#4474)) ([a193ecc](a193ecc)) * **data-events:** handler retry and ActionScheduler support ([#4469](#4469)) ([c997f38](c997f38)) * integrations - rename classes and move can_sync ([#4451](#4451)) ([877ce4f](877ce4f)) * integrations barebones ([#4433](#4433)) ([79bf9a7](79bf9a7)) * **my-account:** block theme styles ([#4430](#4430)) ([1629465](1629465)) * **my-account:** improve navigation on small screens ([#4471](#4471)) ([3404a66](3404a66)) * **newspack-components:** add divider component ([#4462](#4462)) ([f080d72](f080d72))

github-actions · 2026-03-02T18:08:12Z

🎉 This PR is included in version 6.34.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

fix: tweak inline gate styles for block theme

dcf0381

laurelfulford requested a review from a team as a code owner February 2, 2026 21:08

laurelfulford added the [Status] Needs Review The issue or pull request needs to be reviewed label Feb 2, 2026

laurelfulford requested a review from Copilot February 2, 2026 23:36

Copilot AI reviewed Feb 2, 2026

View reviewed changes

Comment thread includes/content-gate/trait-content-gate-layout.php Outdated

laurelfulford added 2 commits February 3, 2026 09:11

Merge branch 'trunk' into fix/content-gate-width-blocktheme

e26a12d

fix: only apply is-layout-intrinsic CSS class to block themes

f822223

chickenn00dle approved these changes Feb 17, 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 Feb 17, 2026

laurelfulford merged commit d867a53 into trunk Feb 18, 2026
9 checks passed

laurelfulford deleted the fix/content-gate-width-blocktheme branch February 18, 2026 17:34

github-actions Bot added the needs-changelog label Feb 18, 2026

laurelfulford removed the needs-changelog label Feb 19, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: tweak inline gate styles for block theme#4445

fix: tweak inline gate styles for block theme#4445
laurelfulford merged 3 commits into
trunkfrom
fix/content-gate-width-blocktheme

laurelfulford commented Feb 2, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

laurelfulford commented Feb 18, 2026

Uh oh!

Uh oh!

github-actions Bot commented Feb 18, 2026

Uh oh!

github-actions Bot commented Feb 19, 2026

Uh oh!

github-actions Bot commented Mar 2, 2026

Uh oh!

github-actions Bot commented Mar 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

laurelfulford commented Feb 2, 2026

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 Feb 18, 2026

Uh oh!

Uh oh!

github-actions Bot commented Feb 18, 2026

Uh oh!

github-actions Bot commented Feb 19, 2026

Uh oh!

github-actions Bot commented Mar 2, 2026

Uh oh!

github-actions Bot commented Mar 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants