Skip to content

Commit

Permalink
Fix inserter / block directory issues (#17517)
Browse files Browse the repository at this point in the history
* 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 <robert@noisysocks.com>
  • Loading branch information
2 people authored and youknowriad committed Sep 30, 2019
1 parent 41228ed commit 3499336
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 6 deletions.
13 changes: 8 additions & 5 deletions packages/block-editor/src/components/inserter/menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 }
Expand Down Expand Up @@ -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>
);
Expand All @@ -381,7 +384,7 @@ export class InserterMenu extends Component {
</div>
</div>

{ showInserterHelpPanel && (
{ hasHelpPanel && (
<div className="block-editor-inserter__menu-help-panel">
{ hoveredItem && (
<>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ function InserterMenuDownloadableBlocksPanel() {
<__experimentalInserterMenuExtension>
{
( { onSelect, onHover, filterValue, hasItems } ) => {
if ( ! hasItems ) {
if ( hasItems || ! filterValue ) {
return null;
}

Expand Down

0 comments on commit 3499336

Please sign in to comment.