Gutenboarding: cleanup block UI hiding styles

[simison]

Once WordPress/gutenberg#18173 is released in NPM together with Gutenberg 7.2 (Wed, Jan 8th), we can remove this bit of CSS and rely on new mechanism instead to hide block UI:

wp-calypso/client/landing/gutenboarding/style.scss

Lines 24 to 60 in ea170c6

	/**
	* Hide the block UI with CSS overrides
	*
	* @TODO: Remove this once Gutenberg gets support for hiding block UI.
	*
	* @see https://github.com/WordPress/gutenberg/issues/7469
	* @see https://github.com/WordPress/gutenberg/pull/18173
	*/
	.gutenboarding-block-list {
	.wp-block {
	&.is-selected {
	.block-editor-block-contextual-toolbar {
	display: none;
	}
	}
	&.block-editor-block-list__block {
	// Need to get super specific to override the core css selectors:
	&,
	&.has-child-selected,
	&.is-navigate-mode,
	&.is-hovered {
	> .block-editor-block-list__block-edit {
	&::before {
	transition: none;
	border: none;
	outline: none;
	box-shadow: none;
	}
	> .block-editor-block-list__breadcrumb {
	display: none;
	}
	}
	}
	}
	}
	}

...it was added in #37225

[simison]

PR to update to latest @wordpress/* packages: #38554

[roo2]

It looks like the changes to gutenberg/block-editor package isn't published to NPM yet as part of 7.2, @ellatrix are you about to update the NPM packages too as part of the 7.2 release? Or are the NPM packages just a separate task?

https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/package.json (not updated yet)

[simison]

I think there was a release 3 days ago.

@roo2 I unassigned you if you don't mind — let's keep this task for a few other new a8c devs.

[simison]

Might depend on doing @wordpress/* packages update in Calypso first — I haven't confirmed. #38880

[Addison-Stavlo]

Is the idea here to create our own custom block that utilizes this functionality for its InnerBlocks, and then use that as a wrapper for everything that needs its toolbar hidden?

I may be be interpreting this wrong, but this doesn't look like an optional prop we can add to blocks to hide UI, but something that needs to be hardcoded as a prop on InnerBlocks inside the blocks edit.js definition (like in the example noted for using it in the Buttons block https://github.com/WordPress/gutenberg/blob/c079120ce39044e53ea41a6a1a246aeec8195433/packages/block-library/src/buttons/edit.js#L20-L25). If that is the case, having the CSS that is already in place may be the simplest route here? Or maybe I am missing something?

[sirreal]

The idea would be to use the prop added in @wordpress/[email protected]:

https://github.com/WordPress/gutenberg/pull/18173/files#diff-f3c7dfbd917e42c14ab7c5d2c21b119eR81

to BlockList here:

wp-calypso/client/landing/gutenboarding/gutenboard.tsx

Line 65 in 1bb7be8

<BlockList className="gutenboarding-block-list" />

This should let us control the visibility of block UI that we don't require right now rather than hiding these elements via CSS.

We don't have 3.5.0 yet, it's currently blocked. This is the PR: #38880

[yansern]

The __experimentalUIParts attributes doesn't give us the possibility to prevent the block toolbar component from being rendered. We need to add a new attribute called hasToolbar to the __experimentalUIParts to control whether the block toolbar renders or not render. This will require a PR in Gutenberg.

[sirreal]

We don't have 3.5.0 yet, it's currently blocked. This is the PR: #38880

#38880 has landed.

---

We need to add a new attribute […] This will require a PR in Gutenberg.

👍 Can you open a PR there? Until we have upstream changes, can we start to use the features of __experimentalUIParts in @wordpress/[email protected] and reduce this CSS hiding right now?

[yansern]

👍 Can you open a PR there?

Created a PR for hasToolbar option which completely prevent the block toolbar from rendering. WordPress/gutenberg#19922

Until we have upstream changes, can we start to use the features of __experimentalUIParts in @wordpress/[email protected] and reduce this CSS hiding right now?

The 2 options added were hasSelectedUI and hasMovers as seen here https://github.com/WordPress/gutenberg/pull/18173/files. The hasSelectedUI option only prevents the has-selected-ui classname from being added to the block. This classname is responsible for hiding/showing the editing border around the block.

We can't reduce CSS hiding on our part yet because the block toolbar is still being rendered so I hope my PR gets approved soon.

[yansern]

I have updated the PR in WordPress/gutenberg#19922 from disabling the BlockToolbar to disabling the entire BlockPopover.

Just to explain the difference between BlockToolbar and BlockPopover component. BlockToolbar is actually a child component of BlockPopover component, the component tree looks like this:

BlockPopover
  |_ BlockToolbar
  |_ BlockBreadcrumb
  |_ Inserter (to insert another block)

In order to disable the block UI completely, you'll need to use both hasSelectedUI and hasPopover attributes on the __experimentalUIParts property, e.g.

<BlockList __experimentalUIParts={ { hasPopover: false, hasSelectedUI: false } } />

The hasPopover attribute disables the block popover.

The hasSelectedUI attribute disables the black border around the block when it is focused.

[yansern]

hasPopover option is now available in the 3.7.0 of `@wordpress/block-editor. WordPress/gutenberg@b3f900c

[yansern]

This is now fixed in this commit 444cc85 in this PR #39336.