WP Manifestindependent plugin directory
manifest / editor / wp-pullquote-aside

Pull Quote as Aside

Render the WordPress core Pullquote block as a semantically correct <aside> instead of a <blockquote>. A pull quote is paratextual, not a quotation. See Gutenberg #11610.

by Dan Knauss · github.com/dknauss/wp-pullquote-aside

0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/dknauss/wp-pullquote-aside/archive/refs/heads/main.zip

Readme

Pull Quote as Aside

A tiny WordPress plugin that renders the core Pullquote block as a semantically correct <aside> instead of a <blockquote>, and demotes the misleading <cite> to a plain attribution.

Why a pull quote is not a block quote

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

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 into the margin, like a gloss. It quotes nothing external and never has a citation. Its whole job is to repeat the main text so the eye can grab it.

That repetition is the crux. Because a pull quote duplicates content already on the page, anything that consumes the page without the visual styling — a screen reader, a print stylesheet, an RSS-to-Markdown pass, a JSON export — needs to be able to tell it apart and skip it. HTML already has the element for this, and the HTML5 spec 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

An <aside> is a landmark (the same as role="complementary"), so assistive technology can jump over it. Mark a pull quote as an <aside> and the duplication problem solves itself.

What it does

A single render_block_core/pullquote filter rewrites the block's front-end output:

<figure class="wp-block-pullquote">       <figure class="wp-block-pullquote">
  <blockquote>                              <aside>
    <p>…</p>                       →           <p>…</p>
    <cite>…</cite>                             <p class="wp-block-pullquote__attribution">…</p>
  </blockquote>                             </aside>
</figure>                                 </figure>

Scope and caveats

This is a front-end demonstration of the correct markup. The block editor still saves and previews a <blockquote>; changing that requires a JavaScript block deprecation in core (so existing pull quotes keep validating). The real fix belongs upstream — see Gutenberg #11610. This plugin shows the correct output today.

Install

Drop wp-pullquote-aside.php into wp-content/plugins/ (or mu-plugins/) and activate. No configuration.

License

GPL-2.0-or-later.

Read the full README on GitHub →