fix: add is-layout-constrained and is-layout-flow CSS classes for block themes

[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 adds a couple standard block layout classes to the Campaign containers:

• For inline campaigns, it adds the is-layout-constrained class, which will fixes an issue with vertical spacing within the block - it means the inner blocks will pick up the right vertical spacing, and remove the top margin for the first element, and bottom element from the last element.
• For overlay campaigns, it adds the is-layout-flow class - this also fixes the vertical spacing, but doesn't include styles that constrain the width of the inner blocks (so the blocks will fill the inner space). Otherwise with is-layout-constrained, the inner blocks don't get wider than 632px

Note: this doesn't address how inline campaigns always display at the narrower content width, even in wider templates. We need some way to set them wide; I'm not sure what that is yet (maybe a block theme-specific control?)

Closes NPPD-1192
Closes NPPD-1193

How to test the changes in this Pull Request:

1. Using the block theme, set up an inline campaign with a few blocks in it (preferably leading with a paragraph or heading), and view it on the front end. Note the extra space at the top, and lack of space between some blocks (non-paragraph and non-heading).

2. Switch it to an overlay campaign, and make it Large or Full width (just to make sure the block widths don't change in trunk vs. this branch); view on the front-end and note the same spacing issues:

3. Apply the PR and repeat testing the campaign as inline and overlay - the vertical spacing should be fixed:

4. Try switching the campaign to the inline above-header placement - the block inside the campaign should be 632px.
5. Try making at least one block in the campaign 'wide' or 'full'; view on the front-end and confirm it respects the width.

(Note: there will be a lack of padding in this layout, but that's also present in the classic theme. Flex blocks like row also seem to be missing styles for alignment. I'll dig into those in a separate PR 😅 ).

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 adds block theme-specific CSS layout classes to campaign containers to fix vertical spacing issues in block themes. The changes ensure proper spacing between inner blocks and remove extra margins from first and last elements.

Changes:

• Adds a new is_block_theme() helper method to check if the active theme is a block theme
• Adds is-layout-constrained class to inline campaigns when using block themes
• Adds is-layout-flow class to overlay campaign content when using block themes

---

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

[laurelfulford]

Hey @thomasguillot! I would appreciate your eyes on this one just to make sure the vertical spacing and how the blocks act in the overlay prompts make sense. Both follow the classic theme, but if we don't want that for some reason, now's the time to tweak it 🙂

[thomasguillot]

Inline seems to work fine.

I wonder if we could introduce a new panel if it's the block theme and an inline prompt

[thomasguillot]

Frankly we need to revisit this whole sidebar. It's a bit of a mess now that we have so many different settings. We should have Settings/Styles tabs for example.

[thomasguillot]

Everything tested well 👍

[thomasguillot]

Frankly we need to revisit this whole sidebar. It's a bit of a mess now that we have so many different settings. We should have Settings/Styles tabs for example.

I think we really need to revisit this with the block theme in mind.

If block theme active:

• Remove the styles
• Add support for padding
• Add support for margin (if inline)
• Add support for block spacing
• Add support for typogrpahy
• Add support for border (colour, width, radius) (if inline)
• Add support for shadows (if inline)
• Revisit the background colour setting so it's more inline with Core's (and add support for text colour)

Basically, we should more or less treat the Prompt as a Group block. (but only for block theme –– I don't want to break the classic theme)

[thomasguillot]

Started to move things around here: #1522

[laurelfulford]

Thanks @chickenn00dle! 🥳

[github-actions]

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! ❤️

[github-actions]

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

The release is available on GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 3.10.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀