Open inserter sidebar when clicking on inserter buttons on zoom-out m…

…ode (#61434) * add generic button instead of inserter between sections * Make it work :) * removed comments * Open tab + category * removed animations and extra horizontal divs * Hide active inserter * Reset active inserter when closing inserter panel * Reset active inserter * Simplify * Add comment on core/editor store use * Add active indictator * make the indicator larger * add e2e test * removed unused class * Reset insertion point on block order change * Don't reset insertion point on mount * Remove unnecessary props --------- Co-authored-by: Margarita Cabrera Ramirez <[email protected]> Co-authored-by: Ella <[email protected]> Co-authored-by: Rich Tabor <[email protected]>
WordPress · May 9, 2024 · 15b8049 · 15b8049
1 parent ded5a39
commit 15b8049
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 20 deletions.
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
@@ -262,3 +262,11 @@
 .is-dragging-components-draggable .components-tooltip {
 	display: none;
 }
+
+.components-popover.block-editor-block-popover__inbetween .block-editor-button-pattern-inserter__button {
+	pointer-events: all;
+	position: absolute;
+	transform: translateX(-50%) translateY(-50%);
+	top: 50%;
+	left: 50%;
+}
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -2,25 +2,56 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { plus } from '@wordpress/icons';
+import { _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import BlockPopoverInbetween from '../block-popover/inbetween';
 import { store as blockEditorStore } from '../../store';
-import Inserter from '../inserter';
 import { unlock } from '../../lock-unlock';
 
-function ZoomOutModeInserters( { __unstableContentRef } ) {
+function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
-	const blockOrder = useSelect( ( select ) => {
-		const { sectionRootClientId } = unlock(
-			select( blockEditorStore ).getSettings()
-		);
-		return select( blockEditorStore ).getBlockOrder( sectionRootClientId );
+	const {
+		blockOrder,
+		sectionRootClientId,
+		insertionPoint,
+		setInserterIsOpened,
+	} = useSelect( ( select ) => {
+		const { getSettings, getBlockOrder } = select( blockEditorStore );
+		const { sectionRootClientId: root } = unlock( getSettings() );
+		// To do: move ZoomOutModeInserters to core/editor.
+		// Or we perhaps we should move the insertion point state to the
+		// block-editor store. I'm not sure what it was ever moved to the editor
+		// store, because all the inserter components all live in the
+		// block-editor package.
+		// eslint-disable-next-line @wordpress/data-no-store-string-literals
+		const editor = select( 'core/editor' );
+		return {
+			blockOrder: getBlockOrder( root ),
+			insertionPoint: unlock( editor ).getInsertionPoint(),
+			sectionRootClientId: root,
+			setInserterIsOpened:
+				getSettings().__experimentalSetIsInserterOpened,
+		};
 	}, [] );
 
+	const isMounted = useRef( false );
+
+	useEffect( () => {
+		if ( ! isMounted.current ) {
+			isMounted.current = true;
+			return;
+		}
+		// reset insertion point when the block order changes
+		setInserterIsOpened( true );
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ blockOrder ] );
+
 	// Defer the initial rendering to avoid the jumps due to the animation.
 	useEffect( () => {
 		const timeout = setTimeout( () => {
@@ -41,15 +72,39 @@ function ZoomOutModeInserters( { __unstableContentRef } ) {
 				key={ index }
 				previousClientId={ clientId }
 				nextClientId={ blockOrder[ index ] }
-				__unstableContentRef={ __unstableContentRef }
 			>
-				<div className="block-editor-block-list__insertion-point-inserter is-with-inserter">
-					<Inserter
-						position="bottom center"
-						clientId={ blockOrder[ index ] }
-						__experimentalIsQuick
+				{ insertionPoint.insertionIndex === index && (
+					<div
+						style={ {
+							borderRadius: '0',
+							height: '12px',
+							opacity: 1,
+							transform: 'translateY(-50%)',
+							width: '100%',
+						} }
+						className="block-editor-block-list__insertion-point-indicator"
+					/>
+				) }
+				{ insertionPoint.insertionIndex !== index && (
+					<Button
+						variant="primary"
+						icon={ plus }
+						size="compact"
+						className="block-editor-button-pattern-inserter__button"
+						onClick={ () => {
+							setInserterIsOpened( {
+								rootClientId: sectionRootClientId,
+								insertionIndex: index,
+								tab: 'patterns',
+								category: 'all',
+							} );
+						} }
+						label={ _x(
+							'Add pattern',
+							'Generic label for pattern inserter button'
+						) }
 					/>
-				</div>
+				) }
 			</BlockPopoverInbetween>
 		);
 	} );

diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js
@@ -20,6 +20,8 @@ function InserterLibrary(
 		showInserterHelpPanel,
 		showMostUsedBlocks = false,
 		__experimentalInsertionIndex,
+		__experimentalInitialTab,
+		__experimentalInitialCategory,
 		__experimentalFilterValue,
 		__experimentalOnPatternCategorySelection,
 		onSelect = noop,
@@ -53,6 +55,8 @@ function InserterLibrary(
 			__experimentalOnPatternCategorySelection={
 				__experimentalOnPatternCategorySelection
 			}
+			__experimentalInitialTab={ __experimentalInitialTab }
+			__experimentalInitialCategory={ __experimentalInitialCategory }
 			shouldFocusBlock={ shouldFocusBlock }
 			ref={ ref }
 			onClose={ onClose }

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -48,6 +48,8 @@ function InserterMenu(
 		shouldFocusBlock = true,
 		__experimentalOnPatternCategorySelection = NOOP,
 		onClose,
+		__experimentalInitialTab,
+		__experimentalInitialCategory,
 	},
 	ref
 ) {
@@ -59,12 +61,15 @@ function InserterMenu(
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( __experimentalFilterValue );
 	const [ hoveredItem, setHoveredItem ] = useState( null );
-	const [ selectedPatternCategory, setSelectedPatternCategory ] =
-		useState( null );
+	const [ selectedPatternCategory, setSelectedPatternCategory ] = useState(
+		__experimentalInitialCategory
+	);
 	const [ patternFilter, setPatternFilter ] = useState( 'all' );
 	const [ selectedMediaCategory, setSelectedMediaCategory ] =
 		useState( null );
-	const [ selectedTab, setSelectedTab ] = useState( 'blocks' );
+	const [ selectedTab, setSelectedTab ] = useState(
+		__experimentalInitialTab
+	);
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {
@@ -306,6 +311,7 @@ function InserterMenu(
 					ref={ tabsRef }
 					onSelect={ handleSetSelectedTab }
 					onClose={ onClose }
+					selectedTab={ selectedTab }
 				>
 					{ inserterSearch }
 					{ selectedTab === 'blocks' &&

diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js
@@ -33,12 +33,12 @@ const mediaTab = {
 	title: __( 'Media' ),
 };
 
-function InserterTabs( { onSelect, children, onClose }, ref ) {
+function InserterTabs( { onSelect, children, onClose, selectedTab }, ref ) {
 	const tabs = [ blocksTab, patternsTab, mediaTab ];
 
 	return (
 		<div className="block-editor-inserter__tabs" ref={ ref }>
-			<Tabs onSelect={ onSelect }>
+			<Tabs onSelect={ onSelect } selectedTabId={ selectedTab }>
 				<div className="block-editor-inserter-sidebar__header">
 					<Button
 						className="block-editor-inserter-sidebar__close-button"

diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
@@ -62,6 +62,8 @@ export default function InserterSidebar( {
 					__experimentalInsertionIndex={
 						insertionPoint.insertionIndex
 					}
+					__experimentalInitialTab={ insertionPoint.tab }
+					__experimentalInitialCategory={ insertionPoint.category }
 					__experimentalFilterValue={ insertionPoint.filterValue }
 					__experimentalOnPatternCategorySelection={
 						isRightSidebarOpen ? closeGeneralSidebar : undefined

diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js
@@ -61,4 +61,25 @@ test.describe( 'Zoom Out', () => {
 
 		await expect( zoomOutButton ).toBeFocused();
 	} );
+
+	test( 'Clicking on inserter while on zoom-out should open the patterns tab on the inserter', async ( {
+		page,
+	} ) => {
+		const zoomOutButton = page.getByRole( 'button', {
+			name: 'Zoom-out View',
+			exact: true,
+		} );
+
+		await zoomOutButton.click();
+		await expect( page.getByLabel( 'Add pattern' ) ).toHaveCount( 3 );
+		await page.getByLabel( 'Add pattern' ).first().click();
+		await expect( page.getByLabel( 'Add pattern' ) ).toHaveCount( 2 );
+
+		await expect(
+			page
+				.locator( '#tabs-2-allPatterns-view div' )
+				.filter( { hasText: 'All' } )
+				.nth( 1 )
+		).toBeVisible();
+	} );
 } );