Skip to content

Commit

Permalink
Adds a modal version of the block inserter only in Distraction Free m…
Browse files Browse the repository at this point in the history
…ode.
  • Loading branch information
draganescu committed Oct 17, 2022
1 parent 583ac8f commit eaccab4
Show file tree
Hide file tree
Showing 5 changed files with 178 additions and 2 deletions.
36 changes: 36 additions & 0 deletions packages/block-editor/src/components/inserter/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { plus } from '@wordpress/icons';
*/
import InserterMenu from './menu';
import QuickInserter from './quick-inserter';
import ModalInserter from './modal-inserter';
import { store as blockEditorStore } from '../../store';

const defaultRenderToggle = ( {
Expand Down Expand Up @@ -142,6 +143,7 @@ class Inserter extends Component {
// This prop is experimental to give some time for the quick inserter to mature
// Feel free to make them stable after a few releases.
__experimentalIsQuick: isQuick,
__experimentalIsModal: isModal,
prioritizePatterns,
} = this.props;

Expand All @@ -159,6 +161,20 @@ class Inserter extends Component {
);
}

if ( isModal ) {
return (
<ModalInserter
onSelect={ () => {
onClose();
} }
rootClientId={ rootClientId }
clientId={ clientId }
isAppender={ isAppender }
prioritizePatterns={ prioritizePatterns }
/>
);
}

return (
<InserterMenu
onSelect={ () => {
Expand All @@ -173,16 +189,36 @@ class Inserter extends Component {
);
}

renderModal() {
const { rootClientId, clientId, isAppender, prioritizePatterns } =
this.props;

return (
<ModalInserter
onSelect={ () => null }
rootClientId={ rootClientId }
clientId={ clientId }
isAppender={ isAppender }
prioritizePatterns={ prioritizePatterns }
/>
);
}

render() {
const {
position,
hasSingleBlockType,
directInsertBlock,
insertOnlyAllowedBlock,
__experimentalIsQuick: isQuick,
__experimentalIsModal: isModal,
onSelectOrClose,
} = this.props;

if ( isModal ) {
return this.renderModal();
}

if ( hasSingleBlockType || directInsertBlock ) {
return this.renderToggle( { onToggle: insertOnlyAllowedBlock } );
}
Expand Down
113 changes: 113 additions & 0 deletions packages/block-editor/src/components/inserter/modal-inserter.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { SearchControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';

/**
* Internal dependencies
*/
import InserterSearchResults from './search-results';
import useInsertionPoint from './hooks/use-insertion-point';
import usePatternsState from './hooks/use-patterns-state';
import useBlockTypesState from './hooks/use-block-types-state';
import { store as blockEditorStore } from '../../store';

const SEARCH_THRESHOLD = 6;
const SHOWN_BLOCK_TYPES = 6;
const SHOWN_BLOCK_PATTERNS = 2;
const SHOWN_BLOCK_PATTERNS_WITH_PRIORITIZATION = 4;

export default function ModalInserter(
{ onSelect, rootClientId, clientId, isAppender, prioritizePatterns },
ref
) {
const [ filterValue, setFilterValue ] = useState( '' );
const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
onSelect,
rootClientId,
clientId,
isAppender,
} );
const [ blockTypes ] = useBlockTypesState(
destinationRootClientId,
onInsertBlocks
);

const [ patterns ] = usePatternsState(
onInsertBlocks,
destinationRootClientId
);

const { setInserterIsOpened } = useSelect(
( select ) => {
const { getSettings, getBlockIndex, getBlockCount } =
select( blockEditorStore );
const settings = getSettings();
const index = getBlockIndex( clientId );
const blockCount = getBlockCount();

return {
setInserterIsOpened: settings.__experimentalSetIsInserterOpened,
insertionIndex: index === -1 ? blockCount : index,
};
},
[ clientId ]
);

const showPatterns =
patterns.length && ( !! filterValue || prioritizePatterns );
const showSearch =
( showPatterns && patterns.length > SEARCH_THRESHOLD ) ||
blockTypes.length > SEARCH_THRESHOLD;

let maxBlockPatterns = 0;
if ( showPatterns ) {
maxBlockPatterns = prioritizePatterns
? SHOWN_BLOCK_PATTERNS_WITH_PRIORITIZATION
: SHOWN_BLOCK_PATTERNS;
}

return (
<div
className={ classnames( 'block-editor-inserter__quick-inserter', {
'has-search': showSearch,
'has-expand': setInserterIsOpened,
} ) }
>
{ showSearch && (
<SearchControl
ref={ ref }
className="block-editor-inserter__search"
value={ filterValue }
onChange={ ( value ) => {
setFilterValue( value );
} }
label={ __( 'Search for blocks and patterns' ) }
placeholder={ __( 'Search' ) }
/>
) }

<div className="block-editor-inserter__quick-inserter-results">
<InserterSearchResults
filterValue={ filterValue }
onSelect={ onSelect }
rootClientId={ rootClientId }
clientId={ clientId }
isAppender={ isAppender }
maxBlockPatterns={ maxBlockPatterns }
maxBlockTypes={ SHOWN_BLOCK_TYPES }
isDraggable={ false }
prioritizePatterns={ prioritizePatterns }
/>
</div>
</div>
);
}
1 change: 0 additions & 1 deletion packages/edit-post/src/components/header/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,6 @@
visibility: hidden;
}

& > .edit-post-header__toolbar .edit-post-header-toolbar__inserter-toggle,
& > .edit-post-header__toolbar .edit-post-header-toolbar__list-view-toggle,
& > .edit-post-header__settings > .block-editor-post-preview__dropdown,
& > .edit-post-header__settings > .interface-pinned-items {
Expand Down
6 changes: 5 additions & 1 deletion packages/edit-post/src/components/layout/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ import WelcomeGuide from '../welcome-guide';
import ActionsPanel from './actions-panel';
import StartPageOptions from '../start-page-options';
import { store as editPostStore } from '../../store';
import { ModalInserter } from './modal-inserter';

const interfaceLabels = {
/* translators: accessibility text for the editor top bar landmark region. */
Expand Down Expand Up @@ -174,9 +175,12 @@ function Layout( { styles } ) {
: __( 'Block Library' );

const secondarySidebar = () => {
if ( mode === 'visual' && isInserterOpened ) {
if ( mode === 'visual' && ! isDistractionFree && isInserterOpened ) {
return <InserterSidebar />;
}
if ( mode === 'visual' && isDistractionFree && isInserterOpened ) {
return <ModalInserter />;
}
if ( mode === 'visual' && isListViewOpened ) {
return <ListViewSidebar />;
}
Expand Down
24 changes: 24 additions & 0 deletions packages/edit-post/src/components/layout/modal-inserter.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Modal } from '@wordpress/components';
import { Inserter } from '@wordpress/block-editor';
import { useDispatch } from '@wordpress/data';

/**
* Internal dependencies
*/
import { store as editPostStore } from '../../store';

export function ModalInserter() {
const { setIsInserterOpened } = useDispatch( editPostStore );
const closeModal = () => {
setIsInserterOpened( false );
};
return (
<Modal onRequestClose={ closeModal } title={ __( 'Insert block' ) }>
<Inserter __experimentalIsModal />
</Modal>
);
}

0 comments on commit eaccab4

Please sign in to comment.