Quote: reduce steps to take to add citation

[annezazu]

Post GB 18.1 where this PR was merged #59073 it now takes some configuration to get the citation to show. This is partially due to inner blocks in the quote block causing you to need to select the overall quote block as the parent to open a citation field. This stands in contrast to the Image block where the "add caption" toggle is always visible.

Here's a video demoing the different experiences including post 18.1, pre 18.1, and the difference in experience between Quote and Image blocks:

Screen.Recording.2024-04-29.at.9.42.38.AM.mov

I'm mentioning the Image block as I believe that experience for hiding/showing caption is what inspired the same for the Quote block but I could be wrong here. As it stands, it's now harder to know how to add a citation when you're writing a quote, due to needing to select the parent block, even though a citation is very likely to be used when using the Quote block. Opening this to gather feedback and see what design solutions there might be @WordPress/gutenberg-design.

[jasmussen]

Removing the layout shift when just selecting the quote, as well as making the action of adding the citation explicit, was motivation for the button. I think this works especially well with the Image block, where the button is present by just selecting the image, and as you suggest, the problem with the quote block is having to select the parent.

Can we do what we did with the Buttons/Button block combo, and simply surface some of the parent buttons when a child is selected? In the following screenshot, the justification and alignment controls are from the parent Buttons block, surfaced even when the Button itself is selected:

I vaguely recall @gziolo working on this, in case he can chime in.

[t-hamano]

Can we do what we did with the Buttons/Button block combo, and simply surface some of the parent buttons when a child is selected?

I don't know if this is technically possible, but this block can contain more Quote blocks. In that case, I'm worried that both the parent and own toolbars will be displayed.

[jasmussen]

That would certainly be an extreme case, but one to handle. I like to think designwise we could handle this, potentially by refactoring how "parent toolbar items" are shown. Here's an idea for the button:

Essentially, the alignment and justification controls that are surfaced from the button parent, we move those into the "parent section of the block toolbar". It becomes less elegant as just a single "select parent" button, but in the cases where this particular function is used, i.e. Buttons, it feels still clearer.

That same pattern as applied to the Quote block would then look like this:

[gziolo]

Can we do what we did with the Buttons/Button block combo, and simply surface some of the parent buttons when a child is selected? In the following screenshot, the justification and alignment controls are from the parent Buttons block, surfaced even when the Button itself is selected:

That's an interesting idea to show the toolbar item from the parent in the child blocks. So far we settled on using a single slot that is coming from the parent so we definitely have two options:

• move its placement next to the parent block
• split it and offer two different slots so the developers can decide where it would work better for them

[jasmussen]

I'd prefer moving the slot before adding an additional one. Especially if it's easy, that way we could get a feel for it without committing too much time and energy in case it doesn't feel right in practice.

[gziolo]

It should be enough to move the following lines to a different place in this file together with all the necessary display conditions up in the React tree:

gutenberg/packages/block-editor/src/components/block-toolbar/index.js

Lines 206 to 209 in d504dd1

	<BlockControls.Slot
	group="parent"
	className="block-editor-block-toolbar__slot"
	/>

[richtabor]

I like to think designwise we could handle this, potentially by refactoring how "parent toolbar items" are shown.

I'm a bit hesitant.

The downside is that the concept of the parent block selector will be bit more difficult to grasp, if there are more icons available in the parent group. Currently it performs one intentional action, to bring you up one level. If we add more controls that don't do that, I think we're mixing too many ideas.

In this particular case, I'm not sure a citation control to the parent selector will make it easier to add a citation. You'll just see an extra icon next to the quote icon, which may be more confusing.

I get the intention behind #59073, but I'm curious if this works for parent/innerblocks related content, like the Quote block. I don't mind the displacement of content when it's pertinent, like the citation, or even with the Details blocks.

As aside, but perhaps if we had a flow where you selected the Quote block, then were able to drill down into the contents, it'd be fine to have the explicit citation button.

[ellatrix]

@mtias mentioned to me several times he'd like to see the quote appear as a single block when the quote only contains a single paragraph (or default block). What do you all think about that? Would it solve this issue?

I'm slightly concerned that it might be confusing to have a different experience depending on the quote content.

[mtias]

@ellatrix I think it's worth trying!

[richtabor]

@mtias mentioned to me several times he'd like to see the quote appear as a single block when the quote only contains a single paragraph (or default block). What do you all think about that? Would it solve this issue?

I too think it's worth trying.

[jasmussen]

If it's worth trying (agreed it is), then now's a great time between 6.6 and 6.7.

[ellatrix]

Question: if it melts with a single paragraph, what happens to the align button? There's a text align button for both the quote as a whole and paragraph. Should both show? Or only one? Which?

[kadamwhite]

To anecdotally underscore the discoverability issue, multiple enterprise-scale clients filed bugs with us that "VIP removed the ability to add captions to quote blocks" after the latest WP upgrade went live.

Increasing the visibility of parent block buttons is worth pursuing, but the UX of having the field appear and disappear upon selection was comfortable to large editorial teams and (any) button appears to be consistently less usable.

I don't mind the displacement of content when it's pertinent, like the citation, or even with the Details blocks.

I'd suggest the layout shift was pertinent, as @richtabor suggests here.

[mtias]

@kadamwhite thanks for sharing, we tend to get the opposite feedback regarding accessibility since those appearing and disappearing fields are not discernible on screen readers and they get in the way of keyboard navigation.

[kadamwhite]

Very valid issues around accessibility, thanks for clarifying that!

[mtias]

Sure! It's still good to know and contextualize the usability impact regardless—curious about how much use the citation field was getting among authors before.