Quote and Verse block styles

[coreymckrill]

Breaking this out from #9.

It appears that the three style variations for quotes called for in the design haven't been implemented yet:

Also the verse block:

(Grouping these two together because they're pretty similar, function-wise.)

The first two quote styles appear to be full-width, while the third is content-width. Surprisingly, the quote block does not appear to support the standard layout options, so we'll probably need to implement the widths via custom styles.

The quote block comes with three predefined block variations: default, plain, and large. We could either repurpose these with our own style rules, or possibly remove/rename them and add our own that are more descriptive. Perhaps something like full-width short, full-width long, and content width?

The verse block can probably just be styled as-is, rather than adding variations.

[coreymckrill]

I just noticed that the Pullquote block actually does implement "Quote 2" from the design--kind of. The quotation mark background image probably needs some size adjusting. But I don't see an implementation of "Quote 1"

Interesting that the Pullquote block also does implement the standard layout options. Maybe that's what differentiates it from the Quote block?

[coreymckrill]

@beafialho what is the use case intention here? When should the Pullquote block (Quote 1 and Quote 2 above) be used, vs. a Quote block (Quote 3 above)?

Skimming through a few of the most recent posts on News, it appears that we're currently exclusively using the Quote block, so the designs with a big background quotation mark image aren't really being used...

[beafialho]

@beafialho what is the use case intention here? When should the Pullquote block (Quote 1 and Quote 2 above) be used, vs. a Quote block (Quote 3 above)?

We included several quote styles to add variety to posts: Quote 2 is the most impactful through the font size, Quote 3 the most discrete that blends with the content. That way if you want to add more than one quote to a post, you can vary in styles. Here's a nice example of that.

The quote block comes with three predefined block variations: default, plain, and large. We could either repurpose these with our own style rules, or possibly remove/rename them and add our own that are more descriptive. Perhaps something like full-width short, full-width long, and content width?

Theoretically, pull quotes are highlights from the post that have a more dominant position in the post whereas quotes cite the content found in some other sources. Not knowing if post authors will pick a quote style by these standards, I wonder if your suggestion above makes the most sense: renaming Quote 2 full-width and Quote 3 content width.

I've included Quote 1 in the final mockups because of those three predefined block variations but I worry it may not blend as well with the posts. Do you see any problems with including only two styles?

[coreymckrill]

I don't see any problem with just having the one Pull Quote style and the one Quote style. And in that regard, I don't think we'd want to rename the blocks themselves, so it's probably best to leave the names as-is. I'm going to mark this issue as "Content" in case we want to go back and add variety to the type of quote blocks being used in older posts.

[beafialho]

Cool, thank you 👍