Updated alignment styles

[girishpanchal30]

Summary

Ensured that full-width and wide-aligned blocks (.alignfull, .alignwide) display correctly within various container and layout contexts, especially when sidebars or constrained layouts are present. The main changes improve consistency and responsiveness of block alignment across different layouts.

Check before Pull Request is ready:

• I have written a test and included it in this PR
• I have run all tests and they pass
• The code passes when running the PHP CodeSniffer
• Code meets WordPress Coding Standards for PHP, HTML, CSS and JS
• Security and Sanitization requirements have been followed
• I have assigned a reviewer or two to review this PR

Closes #4427

[Copilot]

Pull request overview

Adjusts the SCSS rules that constrain .alignfull / .alignwide Gutenberg blocks so they render correctly when nested inside columns and constrained layouts (Section block + Heading template scenario from issue #4427). Adds explicit width: 100% and applies the constraint to a broader set of container selectors in both the legacy (assets/scss/main/_gutenberg.scss) and the components (assets/scss/components/main/_gutenberg.scss) stylesheets.

Changes:

• Add width: 100% to the sidebar-scoped .alignfull/.alignwide reset and reformat the selector list.
• Add a new top-level rule covering .wp-block-column, .is-layout-constrained, and any [class*="wp-block-"] element with a wp-block child (via :has()) that resets nested full/wide alignments.
• Mirror the new rule in the components stylesheet by extending the existing sidebar selector list.

Reviewed changes

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

File	Description
assets/scss/main/_gutenberg.scss	Adds width: 100% to sidebar-scoped reset and introduces a new top-level rule for columns/constrained/:has() wrappers, using margin: 0.
assets/scss/components/main/_gutenberg.scss	Extends the existing sidebar selector list with the same column/constrained/:has() selectors and adds width: 100%, but uses margin: auto.

Comments suppressed due to low confidence (2)

assets/scss/main/_gutenberg.scss:31

• The selector [class*="wp-block-"]:has(> [class*="wp-block-"]):not(.alignfull):not(.alignwide) is extremely broad — it matches any element whose class string contains the substring wp-block- and that has any direct child whose class string contains wp-block-. This will include blocks well beyond the targeted "Section/Group" case from issue #4427, e.g. .wp-block-cover, .wp-block-media-text, .wp-block-group, .wp-block-columns, .wp-block-quote, etc. (and also third‑party blocks such as Otter blocks like wp-block-themeisle-blocks-…). For all of those, nested .alignfull/.alignwide children will be forced to width: 100%; max-width: 100%, which is a much wider behavioural change than the PR description suggests and may regress existing layouts where full‑width breakout inside e.g. a Cover or Group block was previously working.

Consider narrowing the selector to the specific containers you actually need to fix (for example, .wp-block-column, and any specific block wrappers reported in the issue) rather than relying on a wildcard attribute selector combined with :has().

[class*="wp-block-"]:has(> [class*="wp-block-"]):not(.alignfull):not(.alignwide) {

assets/scss/components/main/_gutenberg.scss:52

• Same concern as in assets/scss/main/_gutenberg.scss: the [class*="wp-block-"]:has(> [class*="wp-block-"]):not(.alignfull):not(.alignwide) selector is too broad and will affect many block types beyond columns/section blocks (e.g. .wp-block-cover, .wp-block-group, .wp-block-media-text, third-party blocks with wp-block- class prefixes). Consider scoping this to the specific containers from the bug report.

[class*="wp-block-"]:has(> [class*="wp-block-"]):not(.alignfull):not(.alignwide) {

---

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

[pirate-bot]

Plugin build for 5f84139 is ready 🛎️!

• Download build