Make global inserter always visible & Fix a Global inserter bug (#22115)

WordPress · May 21, 2020 · e290640 · e290640
1 parent ce65934
commit e290640
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 33 deletions.
diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js
@@ -86,13 +86,14 @@ class Inserter extends Component {
 			blockTitle,
 			hasSingleBlockType,
 			toggleProps,
+			hasItems,
 			renderToggle = defaultRenderToggle,
 		} = this.props;
 
 		return renderToggle( {
 			onToggle,
 			isOpen,
-			disabled,
+			disabled: disabled || ! hasItems,
 			blockTitle,
 			hasSingleBlockType,
 			toggleProps,
@@ -249,5 +250,10 @@ export default compose( [
 			},
 		};
 	} ),
-	ifCondition( ( { hasItems } ) => hasItems ),
+	// The global inserter should always be visible, we are using ( ! isAppender && ! rootClientId && ! clientId ) as
+	// a way to detect the global Inserter.
+	ifCondition(
+		( { hasItems, isAppender, rootClientId, clientId } ) =>
+			hasItems || ( ! isAppender && ! rootClientId && ! clientId )
+	),
 ] )( Inserter );
diff --git a/packages/e2e-tests/plugins/cpt-locking.php b/packages/e2e-tests/plugins/cpt-locking.php
@@ -20,6 +20,7 @@ function gutenberg_test_cpt_locking() {
 			),
 		),
 		array( 'core/quote' ),
+		array( 'core/columns' ),
 	);
 	register_post_type(
 		'locked-all-post',

diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap
@@ -11,7 +11,11 @@ exports[`cpt locking template_lock all should not error when deleting the cotent
 
 <!-- wp:quote -->
 <blockquote class=\\"wp-block-quote\\"><p></p></blockquote>
-<!-- /wp:quote -->"
+<!-- /wp:quote -->
+
+<!-- wp:columns -->
+<div class=\\"wp-block-columns\\"></div>
+<!-- /wp:columns -->"
 `;
 
 exports[`cpt locking template_lock false should allow blocks to be inserted 1`] = `
@@ -27,6 +31,10 @@ exports[`cpt locking template_lock false should allow blocks to be inserted 1`]
 <blockquote class=\\"wp-block-quote\\"><p></p></blockquote>
 <!-- /wp:quote -->
 
+<!-- wp:columns -->
+<div class=\\"wp-block-columns\\"></div>
+<!-- /wp:columns -->
+
 <!-- wp:list -->
 <ul><li>List content</li></ul>
 <!-- /wp:list -->"
@@ -43,7 +51,11 @@ exports[`cpt locking template_lock false should allow blocks to be moved 1`] = `
 
 <!-- wp:quote -->
 <blockquote class=\\"wp-block-quote\\"><p></p></blockquote>
-<!-- /wp:quote -->"
+<!-- /wp:quote -->
+
+<!-- wp:columns -->
+<div class=\\"wp-block-columns\\"></div>
+<!-- /wp:columns -->"
 `;
 
 exports[`cpt locking template_lock false should allow blocks to be removed 1`] = `
@@ -53,7 +65,11 @@ exports[`cpt locking template_lock false should allow blocks to be removed 1`] =
 
 <!-- wp:quote -->
 <blockquote class=\\"wp-block-quote\\"><p></p></blockquote>
-<!-- /wp:quote -->"
+<!-- /wp:quote -->
+
+<!-- wp:columns -->
+<div class=\\"wp-block-columns\\"></div>
+<!-- /wp:columns -->"
 `;
 
 exports[`cpt locking template_lock insert should allow blocks to be moved 1`] = `
@@ -67,5 +83,9 @@ exports[`cpt locking template_lock insert should allow blocks to be moved 1`] =
 
 <!-- wp:quote -->
 <blockquote class=\\"wp-block-quote\\"><p></p></blockquote>
-<!-- /wp:quote -->"
+<!-- /wp:quote -->
+
+<!-- wp:columns -->
+<div class=\\"wp-block-columns\\"></div>
+<!-- /wp:columns -->"
 `;
diff --git a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js
@@ -21,10 +21,15 @@ describe( 'cpt locking', () => {
 		await deactivatePlugin( 'gutenberg-test-plugin-cpt-locking' );
 	} );
 
-	const shouldRemoveTheInserter = async () => {
+	const shouldDisableTheInserter = async () => {
 		expect(
-			await page.$( '.edit-post-header [aria-label="Add block"]' )
-		).toBeNull();
+			await page.evaluate( () => {
+				const inserter = document.querySelector(
+					'.edit-post-header [aria-label="Add block"]'
+				);
+				return inserter.getAttribute( 'disabled' );
+			} )
+		).not.toBeNull();
 	};
 
 	const shouldNotAllowBlocksToBeRemoved = async () => {
@@ -60,7 +65,7 @@ describe( 'cpt locking', () => {
 			await createNewPost( { postType: 'locked-all-post' } );
 		} );
 
-		it( 'should remove the inserter', shouldRemoveTheInserter );
+		it( 'should disable the inserter', shouldDisableTheInserter );
 
 		it(
 			'should not allow blocks to be removed',
@@ -102,14 +107,32 @@ describe( 'cpt locking', () => {
 				'The content of your post doesn’t match the template assigned to your post type.'
 			);
 		} );
+
+		it( 'can use the global inserter in inner blocks', async () => {
+			await page.click( 'button[aria-label="Two columns; equal split"]' );
+			await page.click(
+				'.wp-block-column .block-editor-button-block-appender'
+			);
+			await page.type( '.block-editor-inserter__search-input', 'image' );
+			await page.keyboard.press( 'Tab' );
+			await page.keyboard.press( 'Enter' );
+			await page.click( '.edit-post-header-toolbar__inserter-toggle' );
+			await page.type(
+				'.block-editor-inserter__search-input',
+				'gallery'
+			);
+			await page.keyboard.press( 'Tab' );
+			await page.keyboard.press( 'Enter' );
+			expect( await page.$( '.wp-block-gallery' ) ).not.toBeNull();
+		} );
 	} );
 
 	describe( 'template_lock insert', () => {
 		beforeEach( async () => {
 			await createNewPost( { postType: 'locked-insert-post' } );
 		} );
 
-		it( 'should remove the inserter', shouldRemoveTheInserter );
+		it( 'should disable the inserter', shouldDisableTheInserter );
 
 		it(
 			'should not allow blocks to be removed',

diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -22,27 +22,33 @@ function HeaderToolbar( { onToggleInserter, isInserterOpen } ) {
 	const {
 		hasFixedToolbar,
 		isInserterEnabled,
-		isInserterVisible,
 		isTextModeEnabled,
 		previewDeviceType,
-	} = useSelect(
-		( select ) => ( {
+	} = useSelect( ( select ) => {
+		const {
+			hasInserterItems,
+			getBlockRootClientId,
+			getBlockSelectionEnd,
+		} = select( 'core/block-editor' );
+		return {
 			hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive(
 				'fixedToolbar'
 			),
 			// This setting (richEditingEnabled) should not live in the block editor's setting.
 			isInserterEnabled:
 				select( 'core/edit-post' ).getEditorMode() === 'visual' &&
-				select( 'core/editor' ).getEditorSettings().richEditingEnabled,
-			isInserterVisible: select( 'core/block-editor' ).hasInserterItems(),
+				select( 'core/editor' ).getEditorSettings()
+					.richEditingEnabled &&
+				hasInserterItems(
+					getBlockRootClientId( getBlockSelectionEnd() )
+				),
 			isTextModeEnabled:
 				select( 'core/edit-post' ).getEditorMode() === 'text',
 			previewDeviceType: select(
 				'core/edit-post'
 			).__experimentalGetPreviewDeviceType(),
-		} ),
-		[]
-	);
+		};
+	}, [] );
 	const isLargeViewport = useViewportMatch( 'medium' );
 
 	const displayBlockToolbar =
@@ -59,20 +65,18 @@ function HeaderToolbar( { onToggleInserter, isInserterOpen } ) {
 			className="edit-post-header-toolbar"
 			aria-label={ toolbarAriaLabel }
 		>
-			{ isInserterVisible && (
-				<Button
-					className="edit-post-header-toolbar__inserter-toggle"
-					isPrimary
-					isPressed={ isInserterOpen }
-					onClick={ onToggleInserter }
-					disabled={ ! isInserterEnabled }
-					icon={ plus }
-					label={ _x(
-						'Add block',
-						'Generic label for block inserter button'
-					) }
-				/>
-			) }
+			<Button
+				className="edit-post-header-toolbar__inserter-toggle"
+				isPrimary
+				isPressed={ isInserterOpen }
+				onClick={ onToggleInserter }
+				disabled={ ! isInserterEnabled }
+				icon={ plus }
+				label={ _x(
+					'Add block',
+					'Generic label for block inserter button'
+				) }
+			/>
 			<ToolSelector />
 			<EditorHistoryUndo />
 			<EditorHistoryRedo />