Make global inserter always visilble

WordPress · May 21, 2020 · 8245ee8 · 8245ee8
1 parent 01419ef
commit 8245ee8
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 26 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/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',
@@ -127,7 +132,7 @@ describe( 'cpt locking', () => {
 			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,7 +22,6 @@ function HeaderToolbar( { onToggleInserter, isInserterOpen } ) {
 	const {
 		hasFixedToolbar,
 		isInserterEnabled,
-		isInserterVisible,
 		isTextModeEnabled,
 		previewDeviceType,
 	} = useSelect( ( select ) => {
@@ -38,10 +37,11 @@ function HeaderToolbar( { onToggleInserter, isInserterOpen } ) {
 			// 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: hasInserterItems(
-				getBlockRootClientId( getBlockSelectionEnd() )
-			),
+				select( 'core/editor' ).getEditorSettings()
+					.richEditingEnabled &&
+				hasInserterItems(
+					getBlockRootClientId( getBlockSelectionEnd() )
+				),
 			isTextModeEnabled:
 				select( 'core/edit-post' ).getEditorMode() === 'text',
 			previewDeviceType: select(
@@ -65,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 />