Add notice of disabled blocks to block inserter when no results are found #17338

brentswisher · 2019-09-04T23:33:17Z

Fixes #17235.
(Also potentially fixes part of #15121)

Description

If blocks are disabled when a search in the inserter comes up empty, it will now display a message with the number of disabled blocks and include a button that will open the block manager. If no blocks are disabled, the existing messaging will be used.

How has this been tested?

Open the block manager and disable some blocks.
Open the inserter, type until no matching blocks are found, see new messaging.
Open Block manager and re-enable all blocks
Open the inserter, type until no matching blocks are found, see existing messaging.

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.

mapk · 2019-09-05T00:31:16Z

I just tested this and it works great, @brentswisher! Thanks for helping encourage positive feedback for WP users!

I am curious to as to how this might tie in with @melchoyce's work on the Block Directory. Mel, I know you're designing for a state when no blocks are found, and I'm not sure if there are any conflicts here.

gziolo

Agreed, nice UI improvement. I left some minor code comments. Overall, it looks great.

gziolo · 2019-09-05T03:43:57Z

packages/block-editor/src/components/inserter/menu.js

+										}
+										<br />
+										<Button
+											isButton


There is no „isButton” prop in „Button” component.

🤦‍♂ haha, I suppose not, removed. (I was trying to get it styled like a button and tried that before I added isDefault and forgot to remove it)

gziolo · 2019-09-05T03:45:49Z

packages/block-editor/src/components/inserter/menu.js

+										<Button
+											isButton
+											isDefault
+											className="editor-inserter__block-manager-button block-editor-inserter__block-manager-button"


There should be only one class name here, the obe starting with „block-editor”. The other one exists only for backward compatibility in other places.

Fixed, thanks! I knew one was older but wasn't sure if I was supposed to still include it or not.

gziolo · 2019-09-05T03:50:36Z

packages/block-editor/src/components/inserter/menu.js

@@ -438,12 +469,15 @@ export default compose(
 			}
 		}
 		const destinationRootBlockName = getBlockName( destinationRootClientId );
+		const hiddenBlockTypes = getPreference( 'hiddenBlockTypes' );
+		const numberOfHiddenBlocks = isArray( hiddenBlockTypes ) && hiddenBlockTypes.length;


This const will return „false” when „hiddenBlockTypes” is not an array. Is there any case where it would have other type?

I am not overly familiar with getPreference and this is how it was done in the block manager, so I did it here as well. In looking into it further though, hiddenBlockTypes is defaulted to [] and it may not be necessary.

My thought/assumption at the time of adding it was if the block-editor is used in another context in the future, that preference may not exist, and the isArray() would prevent hiddenBlockTypes.length from erroring in that case, but that doesn't look like it is accurate.

Pinging @jorgefilipecosta as it looks like he added the message to the block manager and may have some insight as to a reason it is needed, otherwise I can remove it here.

Hi @brentswisher, normally when we have a list of blocks, boolean false means no blocks and true means all blocks, that the case we followed for allowed blocks.
Andrew original block manager code used as size lodash function https://github.com/WordPress/gutenberg//blob/4698c304a19d81c7f27f8c49e9cf9c4babd7309f/packages/edit-post/src/editor.js#L59
The tests for using hiddenBlockTypes don't account for booleans so I'm not sure if in this case we are following the all/none convention but writing the code I preferred to play on the safe side, also as referred it may avoid a case where the preference because of some reason does not exists.

I guess I should have also just used size and it would cleaner, here I think we can also use size.

Great, thanks for the feedback, I've updated this to use size and it works well. @gziolo I think that should address all of the issues if you wouldn't mind taking a second look?

shaunandrews · 2019-09-05T13:13:34Z

I wonder about the functionality of disabling a block to begin with. Maybe disabling a block should hide it from the default view, but still show it when searching. Perhaps this defeats the purpose, but worth a discussion.

melchoyce · 2019-09-05T17:13:19Z

I had a couple ideas I tried out for the Block Directory project:

(The other ones are not worth sharing)

mapk · 2019-09-06T22:45:39Z

While this PR offers a nice little button to open the Block Manager, it would be great to include the graphical element from this PR over here: #17326 Let's get these two PRs talking to one another.

I think this would be a good first step. Then we can look at expanding this to include Mel's more advanced features of actually showing the blocks that are disabled in the Inserter.

…ound for a search.

brentswisher · 2019-09-11T15:26:17Z

@mapk @melchoyce - I'm thinking it might be best to get this merged and then try to iterate? I personally won't have a lot of time the next few weeks to spend with Gutenberg and I would like to get a notification of some kind into Wordpress 5.3. Then when I have some more time to commit to it I can revisit the more advanced approach?

mapk

Alrighty, this is good. It's approved from a design perspective. Let's get it merged.

youknowriad · 2019-09-14T13:14:10Z

packages/block-editor/src/components/inserter/menu.js

@@ -429,6 +456,9 @@ export default compose(
 		const {
 			getChildBlockNames,
 		} = select( 'core/blocks' );
+		const {
+			getPreference,
+		} = select( 'core/edit-post' );


The inserter is a generic component from the block-editor package. It can't use a selector from the core/edit-post package. I wonder if the hiddenBlocks are available in the getSettings selector of the block-editor store instead.

youknowriad · 2019-09-14T13:14:41Z

packages/block-editor/src/components/inserter/menu.js

@@ -457,6 +490,10 @@ export default compose(
 			__experimentalFetchReusableBlocks: fetchReusableBlocks,
 		} = dispatch( 'core/editor' );

+		const {
+			openModal,
+		} = dispatch( 'core/edit-post' );


Same here, we're not allowed to use actions from the core/edit-post module in this package.

brentswisher · 2022-10-13T13:04:44Z

Closing as this is stale.

brentswisher requested review from ellatrix, talldan and youknowriad as code owners September 4, 2019 23:33

brentswisher added Needs Design Feedback Needs general design feedback. [Feature] Inserter The main way to insert blocks using the + button in the editing interface labels Sep 4, 2019

gziolo reviewed Sep 5, 2019

View reviewed changes

karmatosed removed the Needs Design Feedback Needs general design feedback. label Sep 8, 2019

brentswisher added 3 commits September 11, 2019 10:14

Add notice of disabled blocks to block inserter when no results are f…

d52429c

…ound for a search.

Remove old classname and bad property from new block manager button

5c78b86

Replace isArray and length check with size in hiddenBlock lookup

617dd60

brentswisher force-pushed the add/inserter-disabled-block-notice branch from 29e10d2 to 617dd60 Compare September 11, 2019 15:22

mapk approved these changes Sep 11, 2019

View reviewed changes

youknowriad requested changes Sep 14, 2019

View reviewed changes

Base automatically changed from master to trunk March 1, 2021 15:42

brentswisher closed this Oct 13, 2022

youknowriad deleted the add/inserter-disabled-block-notice branch October 13, 2022 19:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add notice of disabled blocks to block inserter when no results are found #17338

Add notice of disabled blocks to block inserter when no results are found #17338

brentswisher commented Sep 4, 2019

mapk commented Sep 5, 2019

gziolo left a comment

gziolo Sep 5, 2019

brentswisher Sep 5, 2019

gziolo Sep 5, 2019

brentswisher Sep 5, 2019

gziolo Sep 5, 2019

brentswisher Sep 5, 2019

jorgefilipecosta Sep 10, 2019

brentswisher Sep 11, 2019

shaunandrews commented Sep 5, 2019

melchoyce commented Sep 5, 2019 •

edited

Loading

mapk commented Sep 6, 2019

brentswisher commented Sep 11, 2019

mapk left a comment

youknowriad Sep 14, 2019

youknowriad Sep 14, 2019

brentswisher commented Oct 13, 2022

Add notice of disabled blocks to block inserter when no results are found #17338

Add notice of disabled blocks to block inserter when no results are found #17338

Conversation

brentswisher commented Sep 4, 2019

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

mapk commented Sep 5, 2019

gziolo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shaunandrews commented Sep 5, 2019

melchoyce commented Sep 5, 2019 • edited Loading

mapk commented Sep 6, 2019

brentswisher commented Sep 11, 2019

mapk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brentswisher commented Oct 13, 2022

melchoyce commented Sep 5, 2019 •

edited

Loading