Gutenberg: Consider whether Pullquote should be a separate block, a style of quotes, or vice versa

[jasmussen]

In Gutenberg right now there are three styles of quotes. Quote style 1:

Quote style 2:

and Pullquote:

These three styles are all valuable, but what is the best way to present them to users? Should they be three separate quote blocks, or three styles of the same quote block?

Having had these two blocks and two styles in Gutenberg for a while now, it _feels_ like maybe three blocks is more discoverable. But if we decide to do that, we should make sure that one quote can transform into the other two easily. Right now you can't transform a normal Quote to a Pullquote.

Thoughts?

[ianstewart]

I some have thoughts backed up by only gut feeling.

I'll echo your concern there with discoverability. It doesn't _feel_ very discoverable. I also think having alternate layouts for blocks and groups of blocks will be very powerful for post and page creation. (Especially for pages.) So powerful that I question baking them in right now in this manner, at least with this block.

So with that in mind I'd suggest splitting out the layouts instead into three blocks.

1. Block Quote
2. Fancy (or some other word) Quote
3. Pull Quote

If any one of these blocks could convert into another we could always merge them back into one block with "layouts" if it tested poorly. Or if we develop some sort of "robust layout system."

By "robust layout system" I mean something like …

… or some way for plugins and themes to provide a consistent way of interacting with the design of a block (or group of blocks) and making that apparent to the user in some very visual way.

[karmatosed]

I would +1 making this into 3 separate blocks. Historically right from the WCUS testing we ran through, this has been a stumble point for people. I like the break down @ianstewart suggests, it seems fitting and the right path based on our block patterns.

Fancy (or some other word) Quote

Custom Quote or Styled Quote seem right to me if we have the styling options of the paragraph. I'd also include font sizing into that.

[jasmussen]

Block Quote
Fancy (or some other word) Quote
Pull Quote

I like the sound of that. And all three can transform into each other, right? This seems like it could be the actionable next step.

Also dig the style selector you have, but let's remember that if we put it in the sidebar, casual users who dismiss the sidebar might not see that at all. In this case, I personally think it's the right balance — the idea being you can get by not ever discovering those designs, but if you do, it's _extra_ — but worth mentioning.

[ianstewart]

all three can transform into each other, right?

Yep. I think that's a key thing.

[ianstewart]

but let's remember that if we put it in the sidebar, casual users who dismiss the sidebar might not see that at all. In this case, I personally think it's the right balance — the idea being you can get by not ever discovering those designs, but if you do, it's extra — but worth mentioning.

Totally. However alternate layouts for a block or group of block are presented (my mockup above was super-duper quick) to me the key things are …

1. Presenting them in "some very visual way" (attractive/fun/delightful, plus gives people a "care moment" for consideration of how their post/page will be presented, like a mini-, or atomic-, preview)
2. and having some sort of framework for themes+plugins to introduce alternate layouts. (Because I suspect that could be like, some part of "the future of themes" in whatever form themes+plugins+Gutenberg become and allow for pretty robust customization+site-building.)

[michelleweber]

If you're going with three blocks and need three separate names, some suggestions:

1. Classic Block Quote, Basic Block Quote, Simple Block Quote
2. Stylized Block Quote, Formatted Block Quote, Custom Block Quote
3. Pull Quote, Classic Pull Quote

Of if you want to go a little more functional-sounding titles to differentiate the uses more:

1. Basic Quoted Text, Simple Quoted Text
2. Prominent Quoted Text
3. Pull Quote, Classic Pull Quote

In either case, I'd hope there would be a little ? icon or tooltip or something to help me figure out which one I want to use. Not having used/tested anything like this, my first reaction is that I expect these to be three styles of one type of block, so it feels like a little advice is helpful here.

If this is useful, I will continue to mull :)

(I'm trying to figure out the best way to differentiate 1 and 2; for now, I tend to think "Basic" and "Custom" do that the most clearly. Other Editors will have ideas too!)

[karmatosed]

In either case, I'd hope there would be a little ? icon or tooltip or something to help me figure out which one I want to use. Not having used/tested anything like this, my first reaction is that I expect these to be three styles of one type of block, so it feels like a little advice is helpful here.

This makes me want preview on all blocks even more :)

[chrisvanpatten]

Not to totally be obtuse, but I'm really struggling to understand why there should be three separate pullquote blocks defined as part of Gutenberg core. Why not just have one pullquote style and allow themes to extend that block with their own alternatives (that could gracefully fall back to the default when the theme is changed)?

[mrwweb]

"Discoverability" & Progressive Disclosure

Like @chrisvanpatten, I don't know that it's necessarily important that alternate styles of a blockquote element are easily discoverable. I think it's worth considering that maybe it's not important!

It seems worth making the obvious point that making all three blockquote styles more "discoverable" also means all other blocks are marginally _less_ discoverable as the competition for attention increases.

The Nielsen-Norman Group article on progressive disclosure seems relevant here and worth quoting at length:

Interaction designers face a dilemma:

• Users want power, features, and enough options to handle all of their special needs. (Everybody is a special case somehow. For example: Who wants line numbers in a word processor? Millions of users, that's who, including most big law firms.)
• Users want simplicity; they don't have time learn a profusion of features in enough depth to select the few that are optimal for their needs.

Progressive disclosure is one of the best ways to satisfy both of these conflicting requirements. It's a simple, yet powerful idea:

• Initially, show users only a few of the most important options.
• Offer a larger set of specialized options upon request. Disclose these secondary features only if a user asks for them, meaning that most users can proceed with their tasks without worrying about this added complexity.

Thinking about it that way, I find that the idea of adding a "Quote" block is simple for new users and that _styling_ that quote block in multiple ways is powerful for more advanced users. When put that way, the sidebar actually seems like a natural place for this.

I definitely understand that new users struggled to find the styles in testing, I just wonder if that's actually a good outcome.

Alternate Styles For Blocks in General

I left a longer comment on #5360, but it seems important to consider what happens if even more quote styles get added by the theme developer or a plugin. The decision made here could potentially determine whether a site has 18 quote blocks or 1 quote block with 18 styles. For many reasons, including the progressive disclosure point above, I think the latter is preferable.

[jasmussen]

Recent improvements in #7362 make it possible to address this ticket by retiring the pullquote block and making it a variation. Should we do that? See also #7624.

[BinaryMoon]

I think we should retire the pullquote block. I don't think most regular users would understand the difference between this and the quote block.

A variant of the quote block would be much better imo

[karmatosed]

I think we should have 2 variations and just have quote.

[ZebulanStanphill]

Pullquotes should be wrapped in an <aside> as they are not part of the main content, so if there is a pullquote variation added to the Quote block, it should change the markup of the Quote block. Otherwise, the pullquote block should remain a separate block or simply not included in core at all. Notably, the style of the pullquote could still be a Quote variation, but just not called a pullquote style since it could be used for regular blockquotes.

[mtias]

Related #5457.

[leahkoerper]

My team has been struggling with the same discoverability v. simplicity issue for our blocks and I found this issue while looking for guidance in Gutencore. In the case of the Quote block(s), I'm in favor of it being one block with various styles, especially since the Quote and Pullquote are so similar. If you use the center align option with Twenty Seventeen they are basically indistinguishable.

We've been noodling around with the idea of a secondary step of the quote inserter from which the user could decide the style. It keeps the main inserter listings a less cluttered but still teaches the user about the availability of styles. They could opt to set one as default (thus skipping the secondary inserter step in the future), and also always have the option to switch the style from the block menu as we can now on the Quote block.

[jasmussen]

@leahkoerper Nice, thank you for the mockup. I could see that potentially working well, though I would make the flow this:

• Click quote
• Get a modal with a scrim behind it, no search, just "Choose block style"
• Pick a choice and _then_ the block is inserted.

As far as I'm concerned the pullquote block should be made into a variation. I'm trying to find the time to make it, but our plates are full :)

[ZebulanStanphill]

I agree with @jasmussen, although I would avoid calling the variation a pullquote, since semantically a pullquote should have its <blockquote> wrapped in an <aside>. Currently block styles can not change the HTML of a block; they can only change CSS classes. To make a proper pullquote, you would probably use a Quote block nested in a Container block (with its element set to <aside> via the inspector, rather than the default <div>). This could even be a Reusable block included by default in core to be used as a template, though you would want to make using Reusable blocks as templates easier first. (See #8403.)

Notably, this UI raises the question of what happens when you use the slash inserter. Which variation is inserted there? Additionally, if there is some way of setting a default, then how do you change the default?