Block audit: Quote

[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: Quote
Description: Maybe someone else said it better -- add some quoted text.
Category: Common blocks
CSS class: wp-block-quote in frontend, wp-block-quote in editor, is-style-large for large style
Can be converted to: list, paragraph, heading

States

Empty:

Selected:

Unselected:

Placeholder:

Primary (toolbar) settings

Align left | right | centre, 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

• Citation alignment should change with quote alignment changes in large block style.

• Italicisation works in the frontend, but doesn't have any visual indicator in the editor.

• Can't delete empty line from start of quote.

• Citation placeholder lacks sufficient contrast. (Citation placeholder lacks sufficient contrast #8738)

Suggestions

Individual issues will be opened for these soon

• Converting to a list seems an odd choice. It feels like there may be some more appropriate choices here. (Verse? Preformatted?)

• I was extremely surprised to see the "block styles" option in the transforming menu, especially when it then added settings (CSS class) over in the block settings menu. I would expect to see these instead in the block settings menu. Is this a third place for block settings? Do other blocks put settings here?

• Consider adding colour and/or size options. (Consider adding color and text size customizations to all text-based blocks.  #8171)

• Should a right-aligned quote have the border on the right hand side, rather than the left? Visually, I'd remove it entirely for centre-aligned, and move it to the right for right-aligned. (Right-align border for right-aligned quotes #11609)

• It looks like we have two different quotes available: this and a pullquote. I'm guessing that the difference is that a quote is for an external source, whereas a pullquote is a quote pulled from your post. I expect there's been some discussion on this one, so I'll save discussion for the pullquote audit, but I think there's some potential for confusion here, especially where pullquotes allow for a citation, too, and quotes have multiple styles. (Having two types of quote is confusing #11610)

[ZebulanStanphill]

I was extremely surprised to see the "block styles" option in the transforming menu, especially when it then added settings (CSS class) over in the block settings menu. I would expect to see these instead in the block settings menu. Is this a third place for block settings? Do other blocks put settings here?

This is a standard API introduced recently. Themes/plugins can register custom styles for blocks, making it easy for users to choose a pre-made style for a block. The styles use classes, making them easy to update later on. It was placed in the formatting toolbar because it is close in function/concept to block transformations.

The Quote block was supposed to be converted to use nested blocks. See #6520. This covers the size issues, I think. I am not sure if the text color options would still be wanted, and perhaps even the background color options is something that should not be included in core, in favor of theme-provided styles via the aforementioned Block Styles API.

Personally, I would not mind having text color options for every single text-related block, but I think core is supposed to only contain the most important controls. Most of the time, quotes on your website would all look the same, meaning that the styles should be provided by the theme. The only reason the Paragraph block has color settings is because offsetting a single paragraph with different colors was a common-enough use case to warrant the options being added. Also note that you can (or at least you should be able to) manually change the CSS styles of blocks using the Edit as HTML option.

[sarahmonster]

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