Block audit: Pullquote

[sarahmonster]

Note: We'll be doing these audits in waves and editing this as we work through the blocks, so this text will be updated and fleshed out as we progress. See the full picture here.

Overview

Name: Pullquote
Description: Highlight a quote from your post or page by displaying it as a graphic element.
Category: Formatting blocks
CSS class: wp-block-pullquote in frontend or editor
Can be converted to: nothing

States

Empty:

Selected:

Unselected:

Placeholder:

Primary (toolbar) settings

Align: left, centre, right, bold, italic, strikethrough, link

Secondary (sidebar) settings

Advanced: Additional CSS Class

Frontend appearance

Gutenberg starter theme:

Atomic Blocks

twentyseventeen:

twentyten:

Bugs/errors

Individual issues will be opened for these soon

• Floating/alignment is buggy. (Left- or right-aligning block-level elements leads to unexpected behaviour #8293)

• Citation lacks sufficient contrast. (#8738)

*Note that toggling italics works as expected here, where it doesn't with the quote block (and a few other blocks that use captions by default.)

Suggestions

Individual issues will be opened for these soon

• My first instinct here is "why do we have two types of quotes, and how does a user decide which to use?" I know that a pull quote is designed to be a graphic element to highlight text from the articles, but I suspect most users don't. We should be careful how we present this block to avoid confusion. (See also Block audit: Quote #8236)

• Further to that, the citation should probably be removed entirely. Since the intention of a pullquote is to quote from the article itself, a citation doesn't make sense in this context. (Having two types of quote is confusing #11610)

• Use an <aside> rather than a <blockquote> makes more semantic sense here. Worth also considering the accessibility constraints here—ideally screen readers wouldn't read the content of a pull quote, since it's basically doubled-up content. (Aside for pullquotes rather than blockquote #5457)

• An alternative solution would be to add the pull quote styles to the main quote block, which is probably the easiest and best solution here. (Consider whether Pullquote should be a separate block, a style of quotes, or vice versa #5947)

• Italic all-caps feels like a pretty awkward style choice for the citation styling, and it's inconsistent with the rest of Gutenberg. Generally the styling feels out-of-place and discordant.

• If we decide to keep it, it should definitely be convertible to a regular quote.

• Probably shouldn't use the same icon as the quote block.

• Could be confusing that this uses image-style alignment icons and functionality, whereas the quote element uses the text-style alignment icons and functionality.

[ZebulanStanphill]

Further to that, the citation should probably be removed entirely. Since the intention of a pullquote is to quote from the article itself, a citation doesn't make sense in this context.

I agree.

Use an <aside> rather than a <blockquote> makes more semantic sense here.

I think both should be used here: a <blockquote> nested in an <aside>.

My first instinct here is "why do we have two types of quotes, and how does a user decide which to use?" I know that a pull quote is designed to be a graphic element to highlight text from the articles, but I suspect most users don't. We should be careful how we present this block to avoid confusion. (See also #8236)

An alternative solution would be to add the pull quote styles to the main quote block, which is probably the easiest and best solution here. (#5947)

Block styles currently can only add a class to a block. They cannot change the rest of the markup, so I do not think that having a pullquote be a style of the Quote block makes sense, unless the block styles API is changed to support markup changes, which I think may be a bad idea.

Could be confusing that this uses image-style alignment icons and functionality, whereas the quote element uses the text-style alignment icons and functionality.

Something I wonder about is what blocks should have float alignment options and why? I am not aware of any standard reasoning for whether or not a block should have the float alignment options, or even alignment options in general.

[ZebulanStanphill]

Thinking about it some more, I think the Pullquote block may not be necessary at all. If the proposed Container block was implemented with the ability to change the HTML element used from <div> to <aside>, you could make a semantically correct equivalent to the Pullquote block using a Quote block nested in a Container block saved as a Reusable block that would be used as a template. See also: #8403.

The only thing that would be missing is the style of the current Pullquote block, but that could just be added as another style variation of the Quote block.

This brings up another question: should core include some Reusable blocks on new installations to be used as templates, in cases where there is a common piece of content that can be constructed out of existing blocks?

[sarahmonster]

Thanks for the discussion and ideas here! I've filed some additional suggestions re: the quote/pullquote confusion over in #11610 for further discussion.

All other issues identified here have been filed as individual issues, so I'm going to go ahead and close out this tracking bug. Feel free to comment if I missed anything, or open new issues as needed! 💪