Skip to content

A pull quote is not a block quote

Vintage U.S. Navy Department safety poster reading "Use proper tools for the job — take care of them," with cartoon hands holding a hammer, wrench, and file and rules such as "Never use a wrench too large for nut."

Here is another WordPress bug that hides in plain sight — not in a character this time, but in a tag.

Drop a Pull Quote block into a post. It looks like a callout: a line of the article, blown up and set aside so the eye catches it on the way down the page. Useful, handsome, and — under the hood — wearing the wrong clothes.

This is what core saves and serves for a pull quote:

<figure class="wp-block-pullquote">
  <blockquote>
    <p>The web is the canvas.</p>
    <cite>Dirtbag</cite>
  </blockquote>
</figure>

A <blockquote> with a <cite>. That is the markup for a quotation — text taken from somewhere else and set into the flow of your own. The regular Quote block produces almost exactly the same thing, and that is the tell: WordPress treats a pull quote as if it were just a fancier block quote.

It isn’t. They are different animals that happen to look alike.

An article column with one line lifted into the right margin as a large italic pull quote reading "A pull quote is not a block quote," labelled as an aside, with a struck-through blockquote and cite below.

One quotes; the other repeats

A block quote belongs to the main text. It quotes an external source, so it sometimes carries a citation — that is exactly why <cite> lives inside <blockquote>, the way <figcaption> lives inside <figure>.

A pull quote is the opposite kind of thing. It is paratextual: it lifts, repeats, or paraphrases a line that is already in the article and pushes it out into the margin, like a gloss in an old manuscript. It quotes nothing external. It never has a citation. Its whole job is to repeat the main text in a way the eye can grab.

That repetition is the crux. Because a pull quote duplicates content that is already on the page, anything that consumes the page without the visual styling needs to be able to tell it apart and skip it. A screen reader shouldn’t read the sentence twice. A print stylesheet, an RSS-to-Markdown pass, a JSON export — none of them should trip over a paragraph that was only ever meant to be decorative.

HTML already has the right element for exactly this, and it is not <blockquote>. It is <aside>. The HTML5 specification all but 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

And browsers and assistive technology already act on it: an <aside> is a landmark (the same as role="complementary"), so screen-reader users can jump over it and keep reading the article. Mark a pull quote as an <aside> and the duplication problem solves itself.

What it should be

Same visible callout, honest markup:

<figure class="wp-block-pullquote">
  <aside>
    <p>The web is the canvas.</p>
    <p class="wp-block-pullquote__attribution">Dirtbag</p>
  </aside>
</figure>

No <blockquote>, because nothing is being quoted. No <cite>, because there is no source to cite — the line came from the article itself. The attribution, if there is one, is just a label, so it is a plain paragraph.

Why this belongs upstream

Dirtbag has tested a tiny plugin that rewrites the pull quote’s front-end output to the markup above — a render_block filter that swaps the <blockquote> for an <aside> and demotes the <cite>. It is the same move as the apostrophe fix: demonstrate the correct output without pretending a theme should be in charge of it.

Because the real fix belongs in core. The block editor still saves a <blockquote>, so a front-end filter only paints over the rendered page; it can’t change what is stored or what the editor shows. Fixing that means changing the Pullquote block’s saved markup — with a block deprecation so the millions of existing pull quotes keep validating — or giving the Quote block a choice of HTML element so authors can pick <aside> themselves.

There is an open discussion about exactly this: Gutenberg #11610, which proposed deprecating the Pull Quote block in favour of the Quote block. The proposal had the relationship backwards — the two blocks aren’t redundant, they’re semantically distinct, and collapsing them would lose the one thing the pull quote needs to say about itself. The element is the fix.

The Dirtbag lesson

Like the curled apostrophe and the floated headline, this is one small inherited default doing something that looks fine and reads wrong. The page renders. The callout looks great. But the markup tells every non-visual reader of the page that a line of your own article is a quotation from somewhere else — and hides nothing, skips nothing, repeats everything.

A pull quote is not a block quote. The browser can’t see the difference. The spec already did.

Respond from your own site

If your site supports Webmention, link to this page’s URL (it’s a permalink) and send it along. If not, a comment still counts. The old web still has many doors, pockets, and passageways.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *