fix: make sure we get block-supports styles for the overlay gates in time

[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:

Edited I originally thought this was a block theme issue but I can recreate it on a fresh site running the Classic Theme, too. I've updated the details testing steps accordingly!

Right now, the overlay content gate is getting inserted at wp_footer.

When a block theme is used Certain block styles are generated as needed by WordPress, and they're not automatically available like they are with the classic theme. By the time the inline gate is injected, it's "too late" for its blocks to be included in those inline styles. This means certain styles -- like block alignments and spacing -- don't work in the gates.

This PR renders the gate's content early so it can get all the styles that are needed, and adds them in their own inline styles separate from the WordPress ones.

I'm not sure if this is the best approach. The other solution I tried was rendering the overlay earlier. That also seemed to work, but it seems more dependent on how the theme is structured, and it would involve a bit of a rewrite of the overlay styles so they'd still work. It seemed a little messier, and possibly more likely to introduce issues, so just sticking to this for now. Open to feedback on the approach though!

Closes NPPD-1181

How to test the changes in this Pull Request:

1. Set up a content gate (using Memberships or the new Newspack approach).
2. In the Content gate, insert the Registration Card (compact) pattern (the second one in the list of Content Gate block patterns.
3. Publish.
4. In an incognito window, trigger the gate on a post - note the layout is a little messed up (the button and text should be on opposite sides, and the spacing is wrong between the two lines of text):

5. Apply this PR and run npm run build.
6. Repeat step 4; confirm the gate looks better:

7. View source and find newspack-content-gate-block-supports (the styles injected for the overlay block) and core-block-supports-inline-css. Do a bit of spot checking (mostly making sure the former isn't huge) to confirm that the newspack-content-gate-block-supports styles aren't repeating a bunch of stuff from core-block-supports-inline-css.
8. Switch to the Block theme (or classic theme if you're already testing with the block theme).
9. Confirm that the overlay gate also looks good there.

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 pull request fixes a styling issue with overlay content gates when using block themes. The core problem is that block-specific styles (alignments, spacing, etc.) were not being generated for the gate content because it was injected too late in the page rendering process via wp_footer.

Changes:

• Extracted gate layout validation logic into a reusable private method get_overlay_gate_layout_id()
• Added prepare_overlay_gate_styles() method that pre-renders gate content during wp_enqueue_scripts to trigger block style generation
• Registered and enqueued gate-specific block support styles as inline CSS early in the page head

---

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

[laurelfulford]

I need to look at this again with fresh eyes (long day!) but I think I may be getting this issue with the Classic theme, too 😕

[laurelfulford]

I can also see the issue on a JN site running the classic theme, so I've removed the block theme check and updated the testing steps.