Skip to content

Commit

Permalink
Avoid the double shadow in the inserter popover
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad committed Aug 9, 2019
1 parent 61e2357 commit 6f5db04
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 81 deletions.
151 changes: 78 additions & 73 deletions packages/block-editor/src/components/inserter/menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
deburr,
} from 'lodash';
import scrollIntoView from 'dom-scroll-into-view';
import classnames from 'classnames';

/**
* WordPress dependencies
Expand Down Expand Up @@ -276,88 +277,92 @@ export class InserterMenu extends Component {
/* eslint-disable jsx-a11y/no-autofocus, jsx-a11y/no-static-element-interactions */
return (
<div
className="editor-inserter__menu block-editor-inserter__menu"
className={ classnames( 'editor-inserter__menu block-editor-inserter__menu', {
'has-help-panel': showInserterHelpPanel,
} ) }
onKeyPress={ stopKeyPropagation }
onKeyDown={ this.onKeyDown }
>
<label htmlFor={ `block-editor-inserter__search-${ instanceId }` } className="screen-reader-text">
{ __( 'Search for a block' ) }
</label>
<input
id={ `block-editor-inserter__search-${ instanceId }` }
type="search"
placeholder={ __( 'Search for a block' ) }
className="editor-inserter__search block-editor-inserter__search"
autoFocus
onChange={ this.onChangeSearchInput }
/>

<div
className="editor-inserter__results block-editor-inserter__results"
ref={ this.inserterResults }
tabIndex="0"
role="region"
aria-label={ __( 'Available block types' ) }
>

<ChildBlocks
rootClientId={ rootClientId }
items={ childItems }
onSelect={ onSelect }
onHover={ this.onHover }
<div className="block-editor-inserter__main-area">
<label htmlFor={ `block-editor-inserter__search-${ instanceId }` } className="screen-reader-text">
{ __( 'Search for a block' ) }
</label>
<input
id={ `block-editor-inserter__search-${ instanceId }` }
type="search"
placeholder={ __( 'Search for a block' ) }
className="editor-inserter__search block-editor-inserter__search"
autoFocus
onChange={ this.onChangeSearchInput }
/>

{ !! suggestedItems.length &&
<PanelBody
title={ _x( 'Most Used', 'blocks' ) }
opened={ isPanelOpen( 'suggested' ) }
onToggle={ this.onTogglePanel( 'suggested' ) }
ref={ this.bindPanel( 'suggested' ) }
>
<BlockTypesList items={ suggestedItems } onSelect={ onSelect } onHover={ this.onHover } />
</PanelBody>
}

{ map( getCategories(), ( category ) => {
const categoryItems = itemsPerCategory[ category.slug ];
if ( ! categoryItems || ! categoryItems.length ) {
return null;
}
return (
<div
className="editor-inserter__results block-editor-inserter__results"
ref={ this.inserterResults }
tabIndex="0"
role="region"
aria-label={ __( 'Available block types' ) }
>

<ChildBlocks
rootClientId={ rootClientId }
items={ childItems }
onSelect={ onSelect }
onHover={ this.onHover }
/>

{ !! suggestedItems.length &&
<PanelBody
key={ category.slug }
title={ category.title }
icon={ category.icon }
opened={ isPanelOpen( category.slug ) }
onToggle={ this.onTogglePanel( category.slug ) }
ref={ this.bindPanel( category.slug ) }
title={ _x( 'Most Used', 'blocks' ) }
opened={ isPanelOpen( 'suggested' ) }
onToggle={ this.onTogglePanel( 'suggested' ) }
ref={ this.bindPanel( 'suggested' ) }
>
<BlockTypesList items={ categoryItems } onSelect={ onSelect } onHover={ this.onHover } />
<BlockTypesList items={ suggestedItems } onSelect={ onSelect } onHover={ this.onHover } />
</PanelBody>
);
} ) }

{ !! reusableItems.length && (
<PanelBody
className="editor-inserter__reusable-blocks-panel block-editor-inserter__reusable-blocks-panel"
title={ __( 'Reusable' ) }
opened={ isPanelOpen( 'reusable' ) }
onToggle={ this.onTogglePanel( 'reusable' ) }
icon="controls-repeat"
ref={ this.bindPanel( 'reusable' ) }
>
<BlockTypesList items={ reusableItems } onSelect={ onSelect } onHover={ this.onHover } />
<a
className="editor-inserter__manage-reusable-blocks block-editor-inserter__manage-reusable-blocks"
href={ addQueryArgs( 'edit.php', { post_type: 'wp_block' } ) }
}

{ map( getCategories(), ( category ) => {
const categoryItems = itemsPerCategory[ category.slug ];
if ( ! categoryItems || ! categoryItems.length ) {
return null;
}
return (
<PanelBody
key={ category.slug }
title={ category.title }
icon={ category.icon }
opened={ isPanelOpen( category.slug ) }
onToggle={ this.onTogglePanel( category.slug ) }
ref={ this.bindPanel( category.slug ) }
>
<BlockTypesList items={ categoryItems } onSelect={ onSelect } onHover={ this.onHover } />
</PanelBody>
);
} ) }

{ !! reusableItems.length && (
<PanelBody
className="editor-inserter__reusable-blocks-panel block-editor-inserter__reusable-blocks-panel"
title={ __( 'Reusable' ) }
opened={ isPanelOpen( 'reusable' ) }
onToggle={ this.onTogglePanel( 'reusable' ) }
icon="controls-repeat"
ref={ this.bindPanel( 'reusable' ) }
>
{ __( 'Manage All Reusable Blocks' ) }
</a>
</PanelBody>
) }
{ isEmpty( suggestedItems ) && isEmpty( reusableItems ) && isEmpty( itemsPerCategory ) && (
<p className="editor-inserter__no-results block-editor-inserter__no-results">{ __( 'No blocks found.' ) }</p>
) }
<BlockTypesList items={ reusableItems } onSelect={ onSelect } onHover={ this.onHover } />
<a
className="editor-inserter__manage-reusable-blocks block-editor-inserter__manage-reusable-blocks"
href={ addQueryArgs( 'edit.php', { post_type: 'wp_block' } ) }
>
{ __( 'Manage All Reusable Blocks' ) }
</a>
</PanelBody>
) }
{ isEmpty( suggestedItems ) && isEmpty( reusableItems ) && isEmpty( itemsPerCategory ) && (
<p className="editor-inserter__no-results block-editor-inserter__no-results">{ __( 'No blocks found.' ) }</p>
) }
</div>
</div>

{ showInserterHelpPanel && (
Expand Down
26 changes: 18 additions & 8 deletions packages/block-editor/src/components/inserter/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,21 @@ $block-inserter-search-height: 38px;
}

.block-editor-inserter__menu {
height: 100%;
display: flex;
width: auto;

@include break-medium {
width: 400px;
position: relative;

&.has-help-panel {
width: 700px;
}
}
}

.block-editor-inserter__main-area {
width: auto;
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -132,16 +147,11 @@ $block-inserter-search-height: 38px;

.block-editor-inserter__menu-help-panel {
display: none;
border: $border-width solid $light-gray-500;
box-shadow: $shadow-popover;
background: $white;
position: absolute;
left: 100%;
top: -1px;
bottom: -1px;
border-left: $border-width solid $light-gray-500;
width: 300px;
height: 100%;
padding: 20px;
overflow: auto;
overflow-y: auto;

@include break-medium {
display: block;
Expand Down

0 comments on commit 6f5db04

Please sign in to comment.