Quote block: Wrap cite with footer

[ZebulanStanphill]

Description

Replaces #10465.

This PR changes the Quote block to use a <footer> to wrap the <cite> used for its citation. This fixes the issues described in #11652 and allows styling to be applied to the citation of the Quote block without affecting <cite>s in the <p> elements. This is useful, as <cite> elements can be used for things like book or game titles referenced in text, and not just as quote citations.

How has this been tested?

I have tested to make sure that old Quote blocks are automatically converted properly and existing Quote blocks still look the way they should on the front-end both before and after their markup is updated.

Types of changes

• Quote attribute citation selector property value changed from 'cite' to 'footer cite'.
• The RichText for the citation in the editor markup now uses a <footer> element.
• The front-end markup now wraps the citation <cite> in a <footer>. (The <cite> element is not used in the editor markup due to issues with RichText and inline elements.)
• Updated deprecated array to ensure that existing Quote blocks are preserved.
• Updated tests to match new Quote block markup.

Additional info

• https://www.w3.org/TR/html52/grouping-content.html#the-blockquote-element (Specifically example 15.)
• https://www.w3.org/TR/html52/textlevel-semantics.html#the-cite-element

[ZebulanStanphill]

Just for reference, the text-align property has no net effect on the citation on the front-end in master, and it still has no effect in this branch, since text-align has no apparent effect on inline elements. This back-compat selector is mainly just for the font-size, though that is relatively minor.

Since the font size could be considered unimportant, I would be happy to remove this back-compat selector if desired.

[gziolo]

@jasmussen and @iseulde - can you help to review this PR? It looks like this might be a breaking change now WordPress 5.0 is out and 5.1 is about to be released.

This PR is also out of date now and needs to be refreshed if we decide to continue working on it.

[ZebulanStanphill]

I tried refreshing the PR, but I got stuck due to some failing tests that I am unable to get working with my changes. I think I need to update the Quote block transforms somehow, but I'm not sure how or what to change. If it is decided to move forward with this PR, then I would appreciate any help to fix the issue.

[ZebulanStanphill]

Notably, it may make more sense to tackle the unnested cite to cite in footer conversion at the same time as updating the Quote block to use nested blocks, in order to reduce the number of deprecations that have to be made.

[jasmussen]

Thanks for the PR.

On a meta level, if we believe this change is worth it, we should make it, even if it needs some deprecations. Hopefully by keeping the cite, just wrapping it in a footer, at least WordPress themes shouldn't have to worry about the change, as presumably both will look the same.

I also agree that if we do this, it might make sense to do it along with moving the Quote block to use nested blocks.

Whether it's worth it, I don't know. I'm not deep enough on the semantics of HTML to decide that this is actually better markup. In my experience, less is more. But because of my lacking knowledge here, I will defer to others. For example, @kjellr, any thoughts?

[kjellr]

Whether it's worth it, I don't know. I'm not deep enough on the semantics of HTML to decide that this is actually better markup. In my experience, less is more. But because of my lacking knowledge here, I will defer to others. For example, @kjellr, any thoughts?

Well... technically, the cite tag just refers to "the title of a work", which means it could definitely be used multiple times within a blockquote. Whether or not that's common (and/or a good idea) is a different question. Presumably, if you're using the cite tag inline as the title of a work (not as an attribution line at the end), you wouldn't want a major style change for that text.

That's not the case in the default themes right now though. For example, in the editor, Twenty Seventeen doesn't style the cite tag at all if it's inside a p tag here. It appears inline and differs greatly from the rest of the blockquote text around it:

That's not idea. And then to make matters worse, when you view it on the front end, each cite tag appears as a block element with an added em dash:

As it stands today, all of the default themes have some sort of style quirk associated with this usage.

Because this adds more code, seems like a bit of an edge case (it requires editing HTML to encounter this situation in the first place), and will still appear broken in our default themes, my tendency is to just leave things as is.

That said, if others feel strongly otherwise, I suppose we could do this? It doesn't break anything with the original citation at the bottom.

[jasmussen]

In light of that comment, and the fact that this is a breaking change, I'm also leaning towards us not changing this. And also, like Kjell, I can be convinced otherwise if a good argument comes around.

[jasmussen]

Argh apologies for closing the PR — THE BUTTONS ARE SO CLOSE TOGETHER, it's like putting poison needles next to acupuncture needles at the health shop, sorry!

[gziolo]

Because this adds more code, seems like a bit of an edge case (it requires editing HTML to encounter this situation in the first place), and will still appear broken in our default themes, my tendency is to just leave things as is.

Let's close this one as I don't feel like we are getting enough benefits from the proposal given all the backward compatibility consideration. This PR also got stale and would need a very serious refresh which makes it even harder to validate. In addition, the parent issue #11652 is also closed now. @ZebulanStanphill thanks for working on this.