Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consider whether Pullquote should be a separate block, a style of quotes, or vice versa #5947

Closed
jasmussen opened this issue Apr 3, 2018 · 17 comments
Labels
[Feature] Blocks Overall functionality of blocks Needs Decision Needs a decision to be actionable or relevant

Comments

@jasmussen
Copy link
Contributor

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

screen shot 2018-04-03 at 10 58 11

Quote style 2:

screen shot 2018-04-03 at 10 58 15

and Pullquote:

screen shot 2018-04-03 at 10 58 26

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?

@jasmussen jasmussen added Needs Design Feedback Needs general design feedback. Needs Decision Needs a decision to be actionable or relevant labels Apr 3, 2018
@ianstewart
Copy link
Contributor

ianstewart commented Apr 3, 2018

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 …

quote-block-layouts

… 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
Copy link
Member

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.

@karmatosed karmatosed added Needs Design Needs design efforts. and removed Needs Design Feedback Needs general design feedback. Needs Decision Needs a decision to be actionable or relevant labels Apr 3, 2018
@jasmussen
Copy link
Contributor Author

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
Copy link
Contributor

all three can transform into each other, right?

Yep. I think that's a key thing.

@ianstewart
Copy link
Contributor

ianstewart commented Apr 4, 2018

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
Copy link

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
Copy link
Member

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
Copy link
Contributor

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
Copy link

mrwweb commented May 1, 2018

"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
Copy link
Contributor Author

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
Copy link

BinaryMoon commented Jul 4, 2018

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
Copy link
Member

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

@ZebulanStanphill
Copy link
Member

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.

@designsimply designsimply added [Feature] Blocks Overall functionality of blocks Needs Decision Needs a decision to be actionable or relevant labels Jul 17, 2018
@mtias
Copy link
Member

mtias commented Jul 18, 2018

Related #5457.

@leahkoerper
Copy link
Contributor

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.

secondary-menu

@jasmussen
Copy link
Contributor Author

@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
Copy link
Member

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?

jasmussen pushed a commit that referenced this issue Aug 10, 2018
This PR takes a meager stab at #5947 by copying the pullquote styles to the basic quote block and making it a variation, now titled "Elaborate". Name aside, which is up for discussion, this PR is mostly intended to get the ball rolling on eventually doing this, vs. keeping the status quo.

If we mean to move forward, aside from feedback, the actual pullquote needs to be deprecated and removed, and I'd need help doing that as I assume it's not enough to just delete the pullquote folder.

One issue already surfaced from this: the pullquote block features block level alignments, whereas the quote block features only inline level alignments (text align). That means you can float the pullquote, but not the quote. At least not yet, though presumably with a container block you'd be able to do that in the future.

What are your thoughts on how to move forward with this?
jasmussen pushed a commit that referenced this issue Aug 24, 2018
This PR takes a meager stab at #5947 by copying the pullquote styles to the basic quote block and making it a variation, now titled "Elaborate". Name aside, which is up for discussion, this PR is mostly intended to get the ball rolling on eventually doing this, vs. keeping the status quo.

If we mean to move forward, aside from feedback, the actual pullquote needs to be deprecated and removed, and I'd need help doing that as I assume it's not enough to just delete the pullquote folder.

One issue already surfaced from this: the pullquote block features block level alignments, whereas the quote block features only inline level alignments (text align). That means you can float the pullquote, but not the quote. At least not yet, though presumably with a container block you'd be able to do that in the future.

What are your thoughts on how to move forward with this?
@mtias mtias closed this as completed Oct 7, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Blocks Overall functionality of blocks Needs Decision Needs a decision to be actionable or relevant
Projects
None yet
Development

No branches or pull requests