Quote and Pullquote are not valid HTML

[sanderteirlynck]

Describe the bug Quote and Pullquote use the HTML5 <cite> element to indicate who made the quote, as illustrated by the previews. The HTML Living Standard says this is not allowed.

To reproduce Steps to reproduce the behavior:

1. Create a post
2. Add a Quote or Pullquote block
3. Fill in the Quote or Pullquote fields
4. Publish the post
5. View the post
6. Inspect the Quote or Pullquote

Expected behavior Quote and Pullquote are valid HTML. This can be achieved by replacing the <cite> element with another HTML element, for instance the <footer> element as illustrated by the Mozilla Developer Network.

[mtias]

See previously https://github.com/WordPress/gutenberg/issues/2647

[paaljoachim]

Hey @sanderteirlynck and @mtias

Is this issue still valid?

[sanderteirlynck]

Hi @paaljoachim

Apologies for the late reply!

I'm assuming this issue is still valid since the Quote and Pullquote block both still use the cite element as of WordPress 5.7.2 and the HTML Living Standard still notes that "a person's name is not the title of a work". Something might have changed in the Gutenberg WordPress plugin but I'm assuming it hasn't, since this issue wasn't referenced anywhere.

[aristath]

I believe this is also part of the refactor in https://github.com/WordPress/gutenberg/pull/25892

[dashkevych]

I looks like the Quote block in the editor uses cite for citation; however the Pullquote block still uses div. It would be great to have consistency in these two blocks.

Quote block

Pullquote block

[skorasaurus]

Note, For the quote block, this was not resolved in https://github.com/WordPress/gutenberg/pull/25892 (The Quote Block refactor that was introduced in Gutenberg 13.8; the quote block still uses cite.

[michaelbourne]

Just bumping this for visibility. Still an issue in the latest RC (6.3-beta4).

This is the default output of the Quote block:

<blockquote class="wp-block-quote is-style-default">
  <p>Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, 
    have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)</p>
  <cite>The Speaker</cite>
</blockquote>

And this is the default output of the Pullquote block:

<figure class="wp-block-pullquote">
  <blockquote>
    <p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since.
       Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community. 
    </p>
   <cite>The Speaker</cite>
  </blockquote>
</figure>

Still invalid HTML, but also an accessibility concern (this now gets flagged on manual audits by various independent accessibility companies and experts).

Based on the same living standard link above, we should expect this as the output of both (perhaps with a class to distinguish visually, therefor eliminating the need for two blocks? #11610 ):

<figure>
  <blockquote>
    <p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. 
      Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community. 
    </p>
  </blockquote>
  <figcaption>The Speaker</figcaption>
</figure>

[amberhinds]

We shouldn't include figure tags on blockquotes or fig captions. It's unnecessarily verbose for screen reader users.

Adrian Roselli has a post about how screen readers announce various blockquotes that is worth referencing.

[michaelbourne]

Great article. Also brings into question whom we trust when it comes to HTML validity and the nuances of semantic tags.

@amberhinds based on his advice and the merge to MDN, it would suggest that the solution in WP would be to replace the <cite> tag with a <footer> tag and remove the <figure> tag from pull quotes (what was initially posted by @sanderteirlynck ).

Would you agree with that solution?

[amberhinds]

@michaelbourne, yes, I think that's what I would go with.