Quote block: use block element to prevent "cite" from disappearing

[ellatrix]

Description

Should fix #9180. The quote blocks currently use cite tags as a container for RichText, but cite tags are inline tags, so this seems to have some buggy side effects. This branch is just for testing to see if everything works as expected. Maybe additionally we should switch back to use footer instead of cite.

How has this been tested?

See #9180.

Screenshots

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[collinanderson]

I tested this and it fixes #9180 for me.

[ellatrix]

@mtias What should we do here? I'm not sure why we switched from footer to cite, cite should be seen as formatting in a RichText area and can be used outside quotes as well (even if less so). See https://www.w3.org/TR/2011/WD-html5-author-20110705/the-cite-element.html.

The important bit here is that cite should be used for the title of a work, not the author. So in the footer of a quote one might do something like <cite>The Lord of the Rings</cite> by J. R. R. Tolkien or use no cite element at all if it's just someone's name.

[chrisvanpatten]

It looks like that documentation may be out of date soon; <cite> can be used in a blockquote to mark up the author as well per this example in the HTML 5.3 draft spec. Notably, the whole citation isn't wrapped in <cite>, just the actual source bits.

<figure>
  <blockquote>
    "That monster custom, who all sense doth eat Of habit’s devil," <abbr title="et cetera">&c.</abbr> not in Folio

    "What a falling off was there! From me, whose love was of that dignity That it went hand in hand even with the vow I made to her in marriage, and to decline Upon a wretch."
  </blockquote>
  <footer>
    — <cite class="title">Shakespeare manual</cite> by <cite class="author">Frederick Gard Fleay</cite>, p19 (in Google Books)
  </footer>
</figure>

EDIT: More about that in this blog post which I actually think means that this change has been in the HTML5 spec for a while, not just the 5.3 draft.

[ZebulanStanphill]

@chrisvanpatten Yep, both the HTML 5.1 and HTML 5.2 specifications have that example as well:
https://www.w3.org/TR/html51/grouping-content.html#the-blockquote-element
https://www.w3.org/TR/html52/grouping-content.html#the-blockquote-element

[mtias]

@iseulde cite seems to be the most semantic one going forwards.

[ZebulanStanphill]

It looks like the most semantic option is using both: a <cite> nested in a <footer>, considering that <cite>s could be used elsewhere in the <blockquote> to refer to the title of a book (yes, that is a valid use of the element) or a quote in a <q> nested in the <blockquote>. The use of <footer> makes it semantically clear that the <cite> in there is for the entire <blockquote>.

[ellatrix]

@mtias Okay, but we can't use it as a wrapper tag with RichText. Could we use footer here and provide cite as a formatting option?

[nfmohit]

I believe we were working on this same issue in #8785 😕

[youknowriad]

This needs a decision I think, so I'm moving to 3.8 unless we get a decision before.

[collinanderson]

Would it be possible to use <footer> in the editor, but still use <cite> in the front end? It seems to me we don't really need to change the front end, we just need to make the editor not break.

Otherwise, i think <footer> is fine everywhere if we want the editor to match front-end. I'm guessing <footer><cite></cite></footer> is going to have the same problem as we're having now with <cite> disappearing.

I any case, <footer> is the only option that's going to work in the editor, right?

Update: as @nfmohit-wpmudev mentioned, this really is a dup of #8773, which is proposing using <div class="wp-block-pullquote__citation">

[ZebulanStanphill]

@collinanderson The answer is yes, and there should be a <footer> wrapping a <cite> on the front-end, and just a <footer> in the editor. I have implemented that in #9804, which I guess makes this PR obsolete.

[aduth]

I think this is redundant given #8785 (#8773) ?

It's the edit representation, for which semantics of the markup — as far as I can tell — matter less.