Skip to content

Commit

Permalink
Make the inserter behave as a popover
Browse files Browse the repository at this point in the history
  • Loading branch information
youknowriad committed Aug 7, 2020
1 parent d09ff88 commit faf22d8
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 22 deletions.
15 changes: 14 additions & 1 deletion packages/edit-post/src/components/header/header-toolbar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,10 @@ import {
__experimentalToolbarItem as ToolbarItem,
} from '@wordpress/components';
import { plus } from '@wordpress/icons';
import { useRef } from '@wordpress/element';

function HeaderToolbar() {
const inserterButton = useRef();
const { setIsInserterOpened } = useDispatch( 'core/edit-post' );
const {
hasFixedToolbar,
Expand Down Expand Up @@ -72,11 +74,22 @@ function HeaderToolbar() {
aria-label={ toolbarAriaLabel }
>
<ToolbarItem
ref={ inserterButton }
as={ Button }
className="edit-post-header-toolbar__inserter-toggle"
isPrimary
isPressed={ isInserterOpened }
onClick={ () => setIsInserterOpened( ! isInserterOpened ) }
onMouseDown={ ( event ) => {
event.preventDefault();
} }
onClick={ () => {
if ( isInserterOpened ) {
// Focusing the inserter button closes the inserter popover
inserterButton.current.focus();
} else {
setIsInserterOpened( true );
}
} }
disabled={ ! isInserterEnabled }
icon={ plus }
label={ _x(
Expand Down
49 changes: 28 additions & 21 deletions packages/edit-post/src/components/layout/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ import SettingsSidebar from '../sidebar/settings-sidebar';
import MetaBoxes from '../meta-boxes';
import WelcomeGuide from '../welcome-guide';
import ActionsPanel from './actions-panel';
import PopoverWrapper from './popover-wrapper';

const interfaceLabels = {
leftSidebar: __( 'Block library' ),
Expand Down Expand Up @@ -178,29 +179,35 @@ function Layout() {
leftSidebar={
mode === 'visual' &&
isInserterOpened && (
<div className="edit-post-layout__inserter-panel">
<div className="edit-post-layout__inserter-panel-header">
<Button
icon={ close }
onClick={ () =>
setIsInserterOpened( false )
}
/>
</div>
<div className="edit-post-layout__inserter-panel-content">
<Library
showMostUsedBlocks={
showMostUsedBlocks
}
showInserterHelpPanel
onSelect={ () => {
if ( isMobileViewport ) {
setIsInserterOpened( false );
<PopoverWrapper
onClose={ () => setIsInserterOpened( false ) }
>
<div className="edit-post-layout__inserter-panel">
<div className="edit-post-layout__inserter-panel-header">
<Button
icon={ close }
onClick={ () =>
setIsInserterOpened( false )
}
/>
</div>
<div className="edit-post-layout__inserter-panel-content">
<Library
showMostUsedBlocks={
showMostUsedBlocks
}
} }
/>
showInserterHelpPanel
onSelect={ () => {
if ( isMobileViewport ) {
setIsInserterOpened(
false
);
}
} }
/>
</div>
</div>
</div>
</PopoverWrapper>
)
}
sidebar={
Expand Down
53 changes: 53 additions & 0 deletions packages/edit-post/src/components/layout/popover-wrapper.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/**
* WordPress dependencies
*/
import {
withConstrainedTabbing,
withFocusReturn,
withFocusOutside,
} from '@wordpress/components';
import { Component } from '@wordpress/element';
import { ESCAPE } from '@wordpress/keycodes';

function stopPropagation( event ) {
event.stopPropagation();
}

const DetectOutside = withFocusOutside(
class extends Component {
handleFocusOutside( event ) {
this.props.onFocusOutside( event );
}

render() {
return this.props.children;
}
}
);

const FocusManaged = withConstrainedTabbing(
withFocusReturn( ( { children } ) => children )
);

export default function PopoverWrapper( { onClose, children } ) {
// Event handlers
const maybeClose = ( event ) => {
// Close on escape
if ( event.keyCode === ESCAPE && onClose ) {
event.stopPropagation();
onClose();
}
};

// Disable reason: this stops certain events from propagating outside of the component.
// - onMouseDown is disabled as this can cause interactions with other DOM elements
/* eslint-disable jsx-a11y/no-static-element-interactions */
return (
<div onKeyDown={ maybeClose } onMouseDown={ stopPropagation }>
<DetectOutside onFocusOutside={ onClose }>
<FocusManaged>{ children }</FocusManaged>
</DetectOutside>
</div>
);
/* eslint-enable jsx-a11y/no-static-element-interactions */
}

0 comments on commit faf22d8

Please sign in to comment.