Skip to content

Pullquote: render the block as an <aside>, not a <blockquote>#79494

Open
dknauss wants to merge 1 commit into
WordPress:trunkfrom
dknauss:update/pullquote-aside-element
Open

Pullquote: render the block as an <aside>, not a <blockquote>#79494
dknauss wants to merge 1 commit into
WordPress:trunkfrom
dknauss:update/pullquote-aside-element

Conversation

@dknauss

@dknauss dknauss commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

What?

Render the core Pullquote block as an <aside> instead of a <blockquote>, with a block deprecation so existing pull quotes keep validating.

Why?

A block quote belongs to the main text and quotes an external source — which is why <cite> lives inside <blockquote>. A pull quote is the opposite: it is paratextual. It lifts, repeats, or paraphrases a line that is already in the article and sets it apart visually, like a gloss in the margin. It quotes nothing external.

That repetition is the point. Because a pull quote duplicates on-page content, anything consuming the page without the visual styling — a screen reader, a print stylesheet, an RSS-to-Markdown pass — needs to tell it apart and skip it. HTML has the element for exactly this, and the spec names the case:

The element can be used for typographical effects like pull quotes or sidebars … and for other content that is considered separate from the main content of the page. — HTML, The aside element

An <aside> is a landmark (role="complementary") that assistive technology can skip. <blockquote> is not, and it asserts a quotation that a pull quote isn't making.

Refs #11610.

How?

  • save.js / edit.js: the inner element changes from <blockquote> to <aside> (the unused blockquote.js constant is removed).
  • Attributes are unchangedvalue/citation still source from <p>/<cite>, so this is purely an element change.
  • deprecated.js: a new v7 deprecation reproduces the previous <blockquote> markup. Existing pull quotes validate against it and migrate forward to <aside> on the next edit — no breakage, no data loss.

The <cite> is kept here. Pull quotes arguably shouldn't carry a citation at all, but removing the field would drop existing users' data; that's a separate, more opinionated change. This PR is the conservative, non-disruptive element fix.

Non-disruptive by design

Old content stored as <figure><blockquote><p/><cite/></blockquote></figure> still validates (via v7) and renders unchanged until it's re-edited, at which point it re-saves as <aside>. The full-content fixture suite passes 376/376, including a new core__pullquote__deprecated-7 fixture and every existing deprecated form migrating forward.

Testing Instructions

  1. npm run test:unit -- test/integration/full-content/ → 376 pass.
  2. Insert a Pull Quote, view the post; the markup is <figure class="wp-block-pullquote"><aside>…</aside></figure>.
  3. Paste an old pull quote (<figure class="wp-block-pullquote"><blockquote><p>…</p><cite>…</cite></blockquote></figure>) into a post — it loads without an "unexpected content" error and migrates to <aside> when edited.

AI disclosure

This pull request was prepared with the assistance of an AI agent (Anthropic's Claude, via Claude Code). A human chose the approach (an element change plus a non-disruptive deprecation), directed the work, and reviewed the result; the fixtures were regenerated and verified locally (376/376). The commit carries a Co-Authored-By trailer to the same effect.

@github-actions github-actions Bot added the [Package] Block library /packages/block-library label Jun 24, 2026
@dknauss dknauss force-pushed the update/pullquote-aside-element branch from 6aa4fd6 to 91d8011 Compare June 24, 2026 15:24
@dknauss dknauss marked this pull request as ready for review June 24, 2026 15:24
@github-actions

Copy link
Copy Markdown

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Required label: Any label starting with [Type].
  • Labels found: [Package] Block library.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

@github-actions

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: dknauss <dpknauss@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@dknauss dknauss force-pushed the update/pullquote-aside-element branch 2 times, most recently from 8628957 to 7052bff Compare June 24, 2026 16:12
@dknauss

dknauss commented Jun 24, 2026

Copy link
Copy Markdown
Contributor Author

Quick note for whoever reviews, so the red CI isn't misread:

  • The three failing All legs (Node 24 Linux/Windows, Node 20 Windows) are Type checking = cancelled, not failures — they got caught in a concurrency race between two quick force-pushes. The base All (Node 20 Linux) and lint both pass, and the full-content fixture suite is green (376/376), so the code itself is fine; a re-run of those legs should clear them.
  • This needs a [Type] label to satisfy type-related-labels — I don't have permission to add one, so I'll leave that to a maintainer.

Happy to rebase or adjust anything (e.g. revisit the <cite> question, which I deliberately left out of scope to keep this non-disruptive).

Posted via an AI agent (Claude Code) on the contributor's behalf, with human review.

@dknauss dknauss force-pushed the update/pullquote-aside-element branch from 7052bff to 43daaee Compare June 24, 2026 16:46
@dknauss

dknauss commented Jun 24, 2026

Copy link
Copy Markdown
Contributor Author

Correction to my note above: Playwright-2 did surface a real issue, not just the cancellations — the element change broke a selector in collaboration-block-gauntlet.spec.ts that looked for [data-type="core/pullquote"] blockquote p. Updated it to aside p in the latest push (the editor now renders the pull quote as an <aside>).

Note that this same test is independently tracked as a flaky test in #78855 (it intermittently fails on the realtime-sync step), so it may still flake there regardless of this change.

Posted via an AI agent (Claude Code) on the contributor's behalf, with human review.

A pull quote is paratextual — it repeats or paraphrases a line already in the
article and sets it apart visually. It is not a quotation of an external source,
so <blockquote> (and its <cite>) is the wrong element. The HTML spec names pull
quotes as an <aside> use case, and <aside> is a landmark assistive technology can
skip — which matters because a pull quote duplicates on-page content.

Change the saved and edited markup from <blockquote> to <aside>. Attributes are
unchanged (value/citation still source from <p>/<cite>), so this is purely an
element change. Add a deprecation (v7) that reproduces the previous <blockquote>
markup so existing pull quotes keep validating and migrate forward on the next
edit — no breakage, no data loss.

Refs WordPress#11610

This change was prepared with the assistance of an AI agent (Anthropic Claude,
via Claude Code) under human direction and review.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@dknauss dknauss force-pushed the update/pullquote-aside-element branch from 43daaee to 7b4d7f8 Compare June 24, 2026 16:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Block library /packages/block-library

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant