Gallery edit button appears on all blocks once a gallery block is added

[swissspidy]

Tested using the current plugin in the WordPress Plugin Directory (0.10.0).

Steps to reproduce:

1. Add a new embed block, e.g. for a tweet or a YouTube video
2. Select the newly added block
3. Click on the edit button with the pencil icon

Expected:

The form to edit the embed URL is shown, or perhaps even a bunch of new options (e.g. timeframe for YouTube videos or color options for tweets).

Actual result:

The media modal gets opened, with the "Edit Gallery" view being shown. Obviously, I'm not editing a gallery.

[notnownikki]

I'm having trouble reproducing this, there shouldn't be an edit button there at all.

Here's what I'm doing:

Are there any image or gallery blocks in your post? Or do you get this with the embed block by itself, and no other blocks?

[swissspidy]

Yeah, turns out this happens when there is a gallery block somewhere else in the content. It doesn't need to directly follow the embed block.

As soon as I remove the gallery, the edit button for the embed is gone. When I re-add it, it's back again.

[notnownikki]

Reproduced. This goes a bit further too, seems that the edit button on the gallery block gets applied to every subsequent block in the post.

Thanks for finding this!

[swissspidy]

Worth noting that it does not only affect blocks after the gallery block. In my dummy post, the embed block comes first.

[notnownikki]

You're absolutely right, sorry, missed its appearance when I tested!

[notnownikki]

First look at this... (and I'm most likely wrong, first time looking at this code...)

In blocks/block-controls/index.js we have a slot defined:

export default function BlockControls( { controls, children } ) {
        return (
                <Fill name="Formatting.Toolbar">
                        <Toolbar controls={ controls } />
                        { children }
                </Fill>
        );
}

And then in blocks/library/gallery/index.js we do this:

				<Fill name="Formatting.Toolbar">
					<Toolbar controls={ [ {
						icon: 'edit',
						title: __( 'Edit Gallery' ),
						onClick: () => editMediaLibrary( attributes, setAttributes ),
					} ] } />
				</Fill>

So that appears to me that we're adding the edit button to Formatting.Toolbar. and that's gettnig rendered on all blocks that use the formatting toolbar.

Calling @aduth, @iseulde, and @youknowriad 😄

[aduth]

The problem is that a block's edit return value is always rendered, even when the block is not currently selected. Since the Gallery block always renders the formatting toolbar, this also means it is rendered regardless of which block is currently selected, resulting in the bug reported here. Instead, we need to control when the formatting toolbar is to be shown; namely, when its focus prop is truthy. If this is changed to:

focus && (
	<Fill name="Formatting.Toolbar">
		<Toolbar controls={ [ {
			icon: 'edit',
			title: __( 'Edit Gallery' ),
			onClick: () => editMediaLibrary( attributes, setAttributes ),
		} ] } />
	</Fill>
)

...it should work correctly again. <BlockControls> is encouraged as an abstraction to avoid naming the fill directly (should we want to refactor the naming or implementation).

Documentation: https://github.com/WordPress/gutenberg/tree/master/blocks#blockcontrols
Related: #830, where this behavior is noted as a downside. This is a problem with slots in that we cannot distinguish where the fill comes from, i.e. can't filter to slots rendered by blocks which have focus. This must be the responsibility of the block's render.

[notnownikki]

Ah, that's making sense, ok great I think I can pick this up :)

[notnownikki]

Fixed in #1262