Skip to content

Use core has-global-padding for page padding - #159

Merged
jasperf merged 4 commits into
mainfrom
fix/global-padding
Oct 7, 2026
Merged

jasperf merged 4 commits into
mainfrom
fix/global-padding

Conversation

@jasperf

@jasperf jasperf commented Oct 7, 2026 •

Copy link
Copy Markdown
Contributor

Why

Core blocks set to alignwide (columns, images, tables, <details>) had no side padding on mobile, so card borders, images and captions touched the screen edge. The defect showed up on /themes/marin/, /themes/aviendha/ and the themes hub (Oct 6–7, 2026), and each page was fixed by hand by stripping alignwide from the content.

Root cause: theme.json sets root padding with useRootPaddingAwareAlignments, but core applies that padding only to elements with the has-global-padding class. Block themes get the class on the content wrapper automatically. Nynaeve's Blade wrappers are written by hand and never had it. The app.css rule :where(.is-layout-constrained) > :not(.alignfull):not(.alignwide) made up for this, but it:

  • skipped alignwide/alignfull, so core wide blocks got nothing, and
  • padded the children of every nested constrained group, while core already pads those groups. That doubled the padding inside wide groups.

What this does

Page padding now works the same way as in Twenty Twenty-Five, Ollie, Elayne and Aviendha: core does it, with no theme rule.

  • content-page, content-front-page and content-single wrappers: add has-global-padding.
  • app.css: remove the padding rule and its about/pricing !important override.
  • theme.json: contentSize 55rem → 52rem, which was already the visible text width (55rem minus 2 × 1.5rem). Desktop text width is unchanged.
  • cta-block-blue 1.2.0: supports.layout constrained, so core pads its content. Core adds the classes at render, so saved markup is unchanged and no block becomes invalid. blockGap: 0 in theme.json keeps vertical spacing the same.
  • Removed width: 100% from alignfull block roots (it defeated core's negative margins and the block ended 48px short): cta-block-blue, two-column-card, page-heading-blue, review-profiles, feature-list-grid.
  • feature-list-grid, icon-grid, service-blocks: inner side padding applies only under .alignfull, using --wp--style--root--padding-*.
  • page-heading-blue: box-sizing: content-box keeps its text column at content width.
  • Block versions bumped on every changed block. CLAUDE.md "Block Padding" rewritten for the core model. CHANGELOG.md has an Unreleased entry.

Verification

A Playwright script recorded the left/right edges of every content element on 39 local pages and posts at 390px and 1440px, before and after, plus section heights.

  • 0 new elements within 8px of the screen edge at 390px. 3 existing edge defects fixed (WP Engine comparison table, two paragraphs on /services/wordpress-seo/).
  • 0 pages with horizontal overflow.
  • Double padding removed: text in wide groups goes from 48px to 24px from the edge on mobile and lines up with the rest of the page (checked visually on /contact/ and the service-page CTAs).
  • CTA heights shrink (wider text wraps less) instead of growing, which confirms blockGap: 0.

Follow-ups (not in this PR)

  • Remove the Oct 6 1.5rem padding-group workaround from the themes hub, Marin and Aviendha content. It doubles the padding now.
  • Editor check (CTA, page heading) not done yet. Saved markup does not change.
  • theme.json lacks defaultSpacingSizes: false, so core's spacing presets override Nynaeve's (spacing|50 = 1.5rem, not the theme's clamp). This is separate and site-wide, so it is not touched here.

Version: 4.2.0 (minor, bumped in style.css, readme.txt and CHANGELOG.md). Rendering changes on every page, and the CTA block gets new layout support.

@jasperf
jasperf merged commit 4d5131f into main Oct 7, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant