Repository navigation
fix(theme): keep source block margins on paragraphs lowered from non-paragraph text - #2157
Merged
Merged
Conversation
…paragraph text A text-only div/span (or stray inline text) lowered to core/paragraph by the preserve-dom strategy carried its source classes onto the <p> but inherited the user-agent paragraph margin-block (1em), making lowered boxes taller than the source element whenever the author CSS is silent on that side (e.g. a footer copyright div with margin-top utilities rendered 14px taller). Mark synthesized paragraphs with an engine-owned is-lowered-text class and ship a zero-specificity (:where) support rule that pins their block margins to the source box's (0 unless authored): the rule beats UA defaults by origin while losing to every authored rule by specificity, so authored margin utilities still win. Real <p> sources are untouched — their UA margins are part of the source. The rule drains through the existing dedup CSS channel only when lowered paragraphs exist. Fixes #2156
… from margin-styled divs
Contributor
Author
|
The original commit here fixed the TypeScript
AI assistance: Claude (Anthropic) via OpenCode found the gap in the live import and wrote the PHP fix and test. Directed by @chubes4. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #2156
Root cause
preserveDomStrategy.emitChild(packages/blocks-engine/src/theme/preserve-dom/strategy.ts) lowers a text-only<div>/<span>tocore/paragraph, carrying the source classes onto the emitted<p>. Adivhas no block margins of its own, but the rendered<p>inherits the user-agentmargin-block: 1emwherever the author CSS is silent on that side. The carried source CSS (e.g. Tailwind utilities) sets only what the source authored — Tailwind's preflight reset is not part of the projected styles — so the lowered box rendered taller than the source (footer copyright:margin-bottom: 14pxfrom UA, footer 451px vs 437px).Fix
Paragraphs synthesized from non-paragraph source text (text-only
div/span, stray inline text) are marker-classed with an engine-ownedis-lowered-textclass.The strategy drains a zero-specificity support rule through the existing dedup CSS channel (only when lowered paragraphs exist):
Zero specificity is the load-bearing property: as author-origin CSS it beats UA defaults, while losing to every authored rule (class, tag, or inline) by specificity — so authored margins like
mt-12/mb-4still win the cascade, and the source box's margins (0 unless authored) are preserved.Real
<p>sources are untouched — their UA margins are part of the source.Render-level evidence
Same section, same minimal block theme (carried utilities + engine support rule only,
blockGap: nullso no theme styles mask the UA defaults), measured computed values in Chromium via Playwright against a disposable WordPress:<p class="mt-12 pt-6 border-t text-center text-sm">margin-bottom14px(UA 1em)0px.mt-12preserved)48px48px<p class="real-copy text-sm">margin-bottom (UA kept)14px14px(unchanged)Live-import reference (unfixed import) showed the same symptom: lowered copyright
<p>computedmargin-bottom: 14px,margin-top: 48px, footer height 451px.Tests
src/theme/preserve-dom/__tests__/strategy.test.ts: a text-onlydivlowers with source classes + marker and the support rule drains; a real<p>in the same section is untouched; stray inline text is marker-classed too.pnpm typecheckpasses. Package suite: 497 passed; the only failures are pre-existing on unchangedorigin/trunk(verified in a detached scratch worktree):wp-runtime-bundle.test.tsrequires a priorpnpm build, andfile-save-validity.test.tsfails arole="none"RichText assertion unrelated to this change.AI assistance: GLM-5.3 Flash via OpenCode implemented the fix and tests; Claude (Anthropic) via OpenCode localized the issue and orchestrated. Directed by @chubes4.