Fix inserter / block directory issues (#17517)

* Fix flipped `hasItems` value * Only show help panel when blocks are available * Only render the block directory when a search term has been entered * Make boolean logic more readable De Morgan'd, whatever that is Co-Authored-By: Robert Anderson <[email protected]>
WordPress · Sep 30, 2019 · bc5972b · bc5972b
1 parent 24329be
commit bc5972b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -262,10 +262,13 @@ export class InserterMenu extends Component {
 			openPanels,
 			reusableItems,
 			suggestedItems,
+			filterValue,
 		} = this.state;
+
 		const isPanelOpen = ( panel ) => openPanels.indexOf( panel ) !== -1;
-		const hasItems = isEmpty( suggestedItems ) && isEmpty( reusableItems ) && isEmpty( itemsPerCategory );
+		const hasItems = ! isEmpty( suggestedItems ) || ! isEmpty( reusableItems ) || ! isEmpty( itemsPerCategory );
 		const hoveredItemBlockType = hoveredItem ? getBlockType( hoveredItem.name ) : null;
+		const hasHelpPanel = hasItems && showInserterHelpPanel;
 
 		// Disable reason (no-autofocus): The inserter menu is a modal display, not one which
 		// is always visible, and one which already incurs this behavior of autoFocus via
@@ -276,7 +279,7 @@ export class InserterMenu extends Component {
 		return (
 			<div
 				className={ classnames( 'editor-inserter__menu block-editor-inserter__menu', {
-					'has-help-panel': showInserterHelpPanel,
+					'has-help-panel': hasHelpPanel,
 				} ) }
 				onKeyPress={ stopKeyPropagation }
 				onKeyDown={ this.onKeyDown }
@@ -362,15 +365,15 @@ export class InserterMenu extends Component {
 							fillProps={ {
 								onSelect,
 								onHover: this.onHover,
-								filterValue: this.state.filterValue,
+								filterValue,
 								hasItems,
 							} }
 						>
 							{ ( fills ) => {
 								if ( fills.length ) {
 									return fills;
 								}
-								if ( hasItems ) {
+								if ( ! hasItems ) {
 									return (
 										<p className="editor-inserter__no-results block-editor-inserter__no-results">{ __( 'No blocks found.' ) }</p>
 									);
@@ -381,7 +384,7 @@ export class InserterMenu extends Component {
 					</div>
 				</div>
 
-				{ showInserterHelpPanel && (
+				{ hasHelpPanel && (
 					<div className="block-editor-inserter__menu-help-panel">
 						{ hoveredItem && (
 							<>

diff --git a/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js b/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js
@@ -19,7 +19,7 @@ function InserterMenuDownloadableBlocksPanel() {
 		<__experimentalInserterMenuExtension>
 			{
 				( { onSelect, onHover, filterValue, hasItems } ) => {
-					if ( ! hasItems ) {
+					if ( hasItems || ! filterValue ) {
 						return null;
 					}