Zoom out: Render in-between inserters when selected (WordPress#61559)

carstingaxion · May 22, 2024 · cef484e · cef484e
1 parent 25c9ddf
commit cef484e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
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
@@ -21,6 +21,7 @@ function ZoomOutModeInserters() {
 		sectionRootClientId,
 		insertionPoint,
 		setInserterIsOpened,
+		selectedSection,
 	} = useSelect( ( select ) => {
 		const { getSettings, getBlockOrder } = select( blockEditorStore );
 		const { sectionRootClientId: root } = unlock( getSettings() );
@@ -32,6 +33,7 @@ function ZoomOutModeInserters() {
 		// eslint-disable-next-line @wordpress/data-no-store-string-literals
 		const editor = select( 'core/editor' );
 		return {
+			selectedSection: editor.getSelectedBlock(),
 			blockOrder: getBlockOrder( root ),
 			insertionPoint: unlock( editor ).getInsertionPoint(),
 			sectionRootClientId: root,
@@ -62,7 +64,7 @@ function ZoomOutModeInserters() {
 		};
 	}, [] );
 
-	if ( ! isReady ) {
+	if ( ! isReady || ! selectedSection ) {
 		return null;
 	}
 

diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js
@@ -24,6 +24,12 @@ test.describe( 'Zoom Out', () => {
 		await page.getByRole( 'button', { name: 'Styles' } ).click();
 		await page.getByRole( 'button', { name: 'Browse styles' } ).click();
 
+		// select the 1st pattern
+		await page
+			.frameLocator( 'iframe[name="editor-canvas"]' )
+			.locator( 'header' )
+			.click();
+
 		await expect( page.getByLabel( 'Add pattern' ) ).toHaveCount( 3 );
 		await page.getByLabel( 'Add pattern' ).first().click();
 		await expect( page.getByLabel( 'Add pattern' ) ).toHaveCount( 2 );