Quote alternative style

[mtias]

Let's do a stronger, more opinionated design variation for the style 2 to see how it feels. We should also consider dropping the multiple style control and creating a separate block for it. (This occupies the role of quote-format that WordPress currently has.)

Example:

[joyously]

Please remember that blockquote is just an extended quotation of an external source. It can have all sorts of different HTML, not just p tags, which means that centering is a bad idea. Centering is so difficult to read that it should not be encouraged by the editor.

[jasmussen]

Absolutely, this issue would be for a separate block that's meant to be decorative. It would not be the standard quote.

[jasmussen]

The following design is for a separate pullquote block. This allowed me to add a "background image" option to the toolbar. The gray color is form the dimming overlay that will dim the background image if applied. Or just stand on its own as a solid color. The specific design might need to be polished a bit in implementation as we see various quotes applied to it, but the ingredients — a bold quote and a citation field — are there.

Placeholder:

Filled out:

Selected:

Because this assumes a separate block, I experimentally removed the alignment controls, so this block is always full-width. But that fact is not gospel, but rather a subject to discuss: does a separate pullquote block intended to replace the quote post format need alignments?

Here's a mockup that assumes it's the same quote block, but in "Style 2":

[karmatosed]

We should be cautious of capitalisation due to those that have reading complications. Can we be opinionated whilst in normal case? Its not a good thing we are changing this to uppercase.

[mtias]

Definitely.

[rileybrook]

Does a separate pullquote block intended to replace the quote post format need alignments?

Providing the same alignment options as the regular image block could provide more visual design options within a post, and a more creative user experience.

[jasmussen]

Here are new mockups, based on discussion here.

1. Placeholder:

2. Neutral

3. Selected

Simple. No background. No caps. Big bold text that's centered. Same-as-image alignments. Only one style, which the theme will provide. CC: @mkaz

[karmatosed]

@jasmussen awesome, that works really well I think.

[jasmussen]

Since this is merged, I'm closing as fixed!