Skip to content

Dirtbag Rebuild

Typography

  • A pull quote is not a block quote

    A pull quote is not a block quote

    From 

    Roadside Archivist

    ’s dashboard

    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.

  • The apostrophe after the tag

    The apostrophe after the tag

    From 

    Roadside Archivist

    ’s dashboard

    There is a WordPress bug small enough to hide in a single character.

    Get this markup in the editor by writing out the HTML with the “Edit as HTML” inline block tool:

    <strong>He</strong>'s here.

    You can also type it in the visual editor with the keyboard shortcuts and inline block tools. It will look OK in the editor, with a purely vertical apostrophe that’s not curled one way or the other.

    But on the published post the world sees, the apostrophe curls the wrong way — away from the ‘e’ it belongs to and out toward the ‘s’.

    You wanted a contraction. The apostrophe belongs to the word ‘he’. Unpatched, WordPress renders it as an opening single quotation mark instead. Here is the before, exactly as a stock install curls it:

    He‘s here.

    That little curl points the wrong way. It should be &#8217;, the right single quotation mark — the character English uses as a typographic apostrophe in contractions and possessives. Here is the after, the way a corrected wptexturize() renders the very same markup:

    He’s here.
    Garage workbench with HTML markup and a curled metal apostrophe-shaped shaving beside an out-of-focus laptop.
    Generated editorial photo for “The apostrophe after the tag.”

    Both lines above are typed straight into the page by hand, so they hold still as a reference no matter what runs after them. The whole bug lives in the gap between them: one word, the same markup, a single character apart.

    This is not the block editor inventing punctuation. It is older than that. The culprit is wptexturize(), WordPress’s long-running output filter that turns straight quotes, dashes, ellipses, and a few other plain-text marks into nicer typography on the rendered page.1

    Most of the time, that is what people expect from WordPress. You type plain punctuation. WordPress dresses it up. The trouble starts when the word is split by HTML.

    Historical Aside: Texturize is WordPress co-founder Matt Mullenweg’s baby. Matt has blogged about how he was inspired by Dean Allen’s obsession with web typography at his Textism blog and in the Textpattern CMS. Matt built Texturize for WordPress so it could have Textpattern-like typographic polish out of the box.

    Back when pasting from Word into a web interface was a disaster, Dean created Textile in 2002 and built it into his Textpattern CMS the following year. Textile was a Markdown precursor. At the time, Markdown’s creator, John Gruber had written SmartyPants to cope with curly quotes, em/en-dashes, and ellipses by automatically transforming them into the proper HTML character entities. That’s closer to what Texturize does.

    SmartyPants began life as a Movable Type plugin; Alex King’s JS-Quicktags, meanwhile, became an important part of WordPress core. Together, JS-Quicktags and Texturize made it possible to write semantically correct code and typographically (mostly) correct text in a non-clunky way on the web — in WordPress.

    The word got cut in half

    wptexturize() does not look at rendered text the way a reader does. It works through the HTML string. To avoid changing things inside tags, it splits the string around markup.

    So this:

    <strong>He</strong>'s here.

    starts to look more like this internally:

    <strong> | He | </strong> | 's here.

    The final piece starts with 's. Since the filter can no longer see the e in He, it treats the straight quote as if it begins a quotation. The visible word says He's. The string pieces say: tag, text, tag, quote at the beginning of a new run.

    That is the whole bug: the word context fell through the tag boundary.

    Dan wrote about this years ago in Apostrophes and Quotation Marks after stumbling over it in Gutenberg. He opened an issue about it in the Gutenberg repo (Gutenberg #42345), not realizing the block editor is not the culprit.

    A closing inline tag followed immediately by a straight apostrophe confuses the old Texturize text filter in WordPress core. There has been an open Trac ticket about it since 2011.

    The whole family of failures

    It is not only contractions that fall apart. Any straight quote that lands right after a closing inline tag can take the wrong curl — single and double closing quotes, possessives, quoted names, and quotes that bump into a block tag, an ellipsis, or non-English punctuation.

    DescriptionSource ASCII and HTML TexturizedShould be
    Possessive after a tag<strong>He</strong>'sHe‘sHe’s
    Contraction split by a tagrock</strong>'n'rollrock‘n’rollrock’n’roll
    Closing single quote after a link'<a>quoted</a>'.‘quoted‘.‘quoted’.
    Closing double quote after a link"<a>quoted</a>".“quoted“.“quoted”.
    Possessive after a quoted name<em>"John"</em>'s“John”‘s“John”’s
    Closing quote before a block tag"<a>else</a>"</p>“else““else”
    Closing quote before an ellipsis"<a>link</a>"...“link“…“link”…
    Closing quote before CJK punctuation"<em>引用</em>"。“引用“。“引用”。

    Closing-tag elisions ride along with the same rule: <strong>l</strong>'homme and <strong>O</strong>'Neill now curl to a proper apostrophe — they are possessive-shaped, a closing tag then an apostrophe then a letter. The genuine cousins stay out of scope, because the apostrophe is not after a closing tag: an opening quote right after CJK text; an apostrophe that sits inside the tag, d<em>'</em>accord; and the mirror case where an opening tag splits a contraction, I<strong>'ve</strong>. Those are a different boundary problem (noted on another Trac ticket, #43810) but not fixed by the same rule.

    Why this belongs upstream

    Dirtbag could try to be clever here. We could disable wptexturize() entirely:

    add_filter( 'run_wptexturize', '__return_false' );

    That would be too much for a theme and even a plugin. It would change more than apostrophes: quotes, dashes, ellipses, primes, and old WordPress behaviour people may rely on. A theme should not make that decision for a site.

    Dirtbag could also patch the rendered content after the fact, flipping &#8216; to &#8217; after certain inline closing tags. That is less blunt, but still a theme pretending to be a typography engine.

    The right place is WordPress core. As I mentioned earlier, there is already an old ticket for the broader bug: Core Trac #18549, “wp_texturize incorrectly curls closing quotes after inline HTML end tags.” The ticket has a long history, patches, duplicate reports, and the correct diagnosis: wptexturize() loses quote context around inline HTML.

    So now we’ve finally caught up with that old issue, and the LLMs are good enough to sort out such a thorny logic puzzle. The fix is now proposed upstream as a pull request against wordpress-develop, adding the closing-tag context guard and the tests below.

    The useful test

    The smallest issue revival comment is not another essay-length comment. It is a test.

    /**
 * @ticket 18549
 */
public function test_apostrophe_after_inline_formatting_tag() {
    $this->assertSame(
        '<strong>He</strong>&#8217;s here.',
        wptexturize( "<strong>He</strong>'s here." )
    );
}

    Then add the neighboring cases:

    <em>It</em>'s fine.
<a href="#">Dan</a>'s truck
<strong>rock</strong>'n'roll

    And do not overcorrect these:

    <strong>Note:</strong> 'quoted text'
<strong>He said</strong> 'go'

    That distinction matters. When a closing inline tag is immediately followed by an apostrophe and a letter or number, and the visible text before the tag ended with a letter or number, it is probably a contraction or possessive. When there is a space after the tag, normal opening-quote behaviour should still be possible.

    The Dirtbag lesson

    This is the same kind of bug as our floated-title problem: one default, one tiny inherited behaviour, one layout or text result that looks supernatural until the small rule is visible.

    A theme like Dirtbag is supposed to stay close to WordPress. That is the bargain. Use core blocks. Use plain HTML. Avoid clever replacements. But staying close also means you get close enough to see the burrs.

    This apostrophe is one of them. Not dramatic. Not a crisis. Just a small wrong curl after a tag.

    Small wrong things are still wrong.

    1. The true culprits behind the persistent difficulty of getting human-typed writing into semantically valid and typographically correct, modern character encoding are the limitations and dominance of the English-language keyboard, and the historic priority given to compression and simplification from telegraph to teletype.

      Unless Linotype machines count — specifically built for typographic versatility — there have been no English keyboards with left and right angled single and double quotation marks, ellipses, em dashes. 5-bit USTTY and its precursors in the early 1900s (all based on Baudot–Murray), and 7-bit ASCII (1963) solidified typewriter typography for the digital age. ↩︎
  • The price of a pun

    The price of a pun

    From 

    Roadside Archivist

    ’s dashboard

    Every post on this site is signed the same way: From [author]’s dashboard. It is a small joke. A dashboard is where you keep your hands at ten and two, and it is also where WordPress keeps its knobs. The byline drives both meanings at once. Cheap pun, paid for once, runs forever.

    Except it didn’t run. On a narrow screen the byline kept throwing a rod.

    The apostrophe that wouldn’t stay in its lane

    Read it back: From Roadside Archivist’s dashboard. Three pieces — the word “From,” the author’s name, and the suffix “‘s dashboard.” On a wide screen they sit in a row like they should. Shrink the window and the last piece would snap off and drop to the next line, stranding an orphaned ‘s dashboard under a name it no longer belonged to.

    A possessive that loses its noun is not a typo. It is worse. It reads like the page forgot how grammar works.

    So either the joke had to go, or the apostrophe had to learn to stay glued to the name.

    How you glue an apostrophe to a name

    The byline is a flexbox — a little horizontal rack the three pieces ride in. Two settings hold it together.

    First, flex-wrap: nowrap: the three pieces are forbidden from breaking apart from each other. They travel as one unit or not at all.

    Second, a single line in theme.json: .byline { flex-shrink: 0 }. That tells the layout the byline will not be squeezed thinner to fit beside the date. When it doesn’t fit, the whole byline drops to its own line — intact — instead of shedding its tail to make room.

    There is a third thing, and it is a quirk, not a setting. Flexbox quietly eats the whitespace between its items. So the gap that would normally sit between the name and the “‘s” — the gap that let it break in the first place — simply isn’t rendered. The apostrophe ends up flush against the last letter of the name, like it was never two separate pieces of markup at all.

    Three small moves, and Archivist’s holds together down to the phone.

    What the joke costs

    Honesty time, because that is the house style.

    The byline is a split string. The translator gets “From” and “‘s dashboard” as two separate scraps wrapped around a name they never see. A language that builds possessives differently — or builds sentences in a different order — can’t just swap the words. It has to rephrase around a hole.

    It is also a CSS escape. Dirtbag keeps almost no hand-written CSS, and this spends two of the precious lines, both with !important on them — the layout equivalent of raising your voice.

    And it leans on that flexbox whitespace quirk, which is real and well-defined but is still a behavior, not a promise. Push the screen below about 340 pixels with a long enough name and the unbreakable byline will run off the edge rather than wrap. A short name never notices. A long one on a tiny phone does.

    None of it is free. All of it is for a pun.

    Is it defensible?

    Barely. And that is the honest answer, not a dodge.

    It earns the word defensible because it never leaves the property. No JavaScript. No functions.php. No plugin. Just a core block, a translatable pattern, and one small rule in the file where the theme already keeps its design. By Dirtbag’s own rules, it is in bounds.

    But it is the most indulgent thing in the whole theme. The cheaper build was sitting right there the entire time: By Roadside Archivist. Three words, no apostrophe, no split string, no flexbox sermon, translatable in any language without a fight. Every engineering instinct says ship that one.

    We didn’t. We kept the pun, wrote down exactly what it cost, and paid it on purpose.

    The thing under the thing

    Discipline is not never indulging. A site with no indulgences has no voice; it is a spec sheet with a domain name.

    Discipline is knowing the bill before you order. The trouble is the indulgence you take without pricing it — the framework you add because everyone does, the clever thing you can’t explain a month later, the dependency nobody remembers signing for. Those are the ones that total the truck.

    A possessive apostrophe held in place by a flexbox quirk is a flourish. But it is a measured one. We can tell you what it costs, where it breaks, and what the boring alternative would have been. That is the whole difference between a theme with character and a theme that just got away from somebody.

    Keep the joke. Keep the receipt.