Show one inserter at a time

WordPress · Jun 16, 2020 · 187a372 · 187a372
1 parent 1969397
commit 187a372
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState, useMemo } from '@wordpress/element';
+import { useState, useMemo, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { VisuallyHidden, Button } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -127,13 +127,19 @@ function QuickInserter( {
 		[ filterValue, patterns ]
 	);
 
-	const onExpand = useSelect(
+	const setInsererIsOpened = useSelect(
 		( select ) =>
 			select( 'core/block-editor' ).getSettings()
-				.__experimentalOnExpandInserter,
+				.__experimentalSetIsInserterOpened,
 		[]
 	);
 
+	useEffect( () => {
+		if ( setInsererIsOpened ) {
+			setInsererIsOpened( false );
+		}
+	}, [ setInsererIsOpened ] );
+
 	return (
 		<div className="block-editor-inserter__quick-inserter">
 			{ showSearch && (
@@ -152,10 +158,10 @@ function QuickInserter( {
 				onHover={ onToggleInsertionPoint }
 			/>
 
-			{ onExpand && (
+			{ setInsererIsOpened && (
 				<Button
 					className="block-editor-inserter__quick-inserter-expand"
-					onClick={ onExpand }
+					onClick={ () => setInsererIsOpened( true ) }
 				>
 					{ __( 'Browse all' ) }
 				</Button>

diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js
@@ -46,7 +46,7 @@ class Editor extends Component {
 		blockTypes,
 		preferredStyleVariations,
 		__experimentalLocalAutosaveInterval,
-		__experimentalOnExpandInserter,
+		__experimentalSetIsInserterOpened,
 		updatePreferredStyleVariations
 	) {
 		settings = {
@@ -60,7 +60,7 @@ class Editor extends Component {
 			__experimentalLocalAutosaveInterval,
 
 			// This is marked as experimental to give time for the quick inserter to mature.
-			__experimentalOnExpandInserter,
+			__experimentalSetIsInserterOpened,
 		};
 
 		// Omit hidden block types if exists and non-empty.
@@ -95,7 +95,7 @@ class Editor extends Component {
 			blockTypes,
 			preferredStyleVariations,
 			__experimentalLocalAutosaveInterval,
-			onExpandInserter,
+			setIsInserterOpened,
 			updatePreferredStyleVariations,
 			...props
 		} = this.props;
@@ -112,7 +112,7 @@ class Editor extends Component {
 			blockTypes,
 			preferredStyleVariations,
 			__experimentalLocalAutosaveInterval,
-			onExpandInserter,
+			setIsInserterOpened,
 			updatePreferredStyleVariations
 		);
 
@@ -172,11 +172,13 @@ export default compose( [
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
-		const { updatePreferredStyleVariations } = dispatch( 'core/edit-post' );
+		const {
+			updatePreferredStyleVariations,
+			setIsInserterOpened,
+		} = dispatch( 'core/edit-post' );
 		return {
 			updatePreferredStyleVariations,
-			onExpandInserter: () =>
-				dispatch( 'core/edit-post' ).setIsInserterOpened( true ),
+			setIsInserterOpened,
 		};
 	} ),
 ] )( Editor );
diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
@@ -126,7 +126,7 @@ class EditorProvider extends Component {
 				'__experimentalGlobalStylesUserEntityId',
 				'__experimentalGlobalStylesBase',
 				'__experimentalPreferredStyleVariations',
-				'__experimentalOnExpandInserter',
+				'__experimentalSetIsInserterOpened',
 				'alignWide',
 				'allowedBlockTypes',
 				'availableLegacyWidgets',