try maing the inserter always visible

WordPress · Mar 7, 2023 · 4d42882 · 4d42882
1 parent 3941d32
commit 4d42882
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 43 deletions.
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -28,7 +28,12 @@ const preventDefault = ( event ) => {
 	event.preventDefault();
 };
 
-function HeaderToolbar() {
+function HeaderToolbar( {
+	showInserter = true,
+	showTools = true,
+	showListView = true,
+	showUndoRedo = true,
+} ) {
 	const inserterButton = useRef();
 	const { setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editPostStore );
@@ -116,22 +121,24 @@ function HeaderToolbar() {
 			aria-label={ toolbarAriaLabel }
 		>
 			<div className="edit-post-header-toolbar__left">
-				<ToolbarItem
-					ref={ inserterButton }
-					as={ Button }
-					className="edit-post-header-toolbar__inserter-toggle"
-					variant="primary"
-					isPressed={ isInserterOpened }
-					onMouseDown={ preventDefault }
-					onClick={ toggleInserter }
-					disabled={ ! isInserterEnabled }
-					icon={ plus }
-					label={ showIconLabels ? shortLabel : longLabel }
-					showTooltip={ ! showIconLabels }
-				/>
+				{ showInserter && (
+					<ToolbarItem
+						ref={ inserterButton }
+						as={ Button }
+						className="edit-post-header-toolbar__inserter-toggle"
+						variant="primary"
+						isPressed={ isInserterOpened }
+						onMouseDown={ preventDefault }
+						onClick={ toggleInserter }
+						disabled={ ! isInserterEnabled }
+						icon={ plus }
+						label={ showIconLabels ? shortLabel : longLabel }
+						showTooltip={ ! showIconLabels }
+					/>
+				) }
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<>
-						{ isLargeViewport && (
+						{ showTools && isLargeViewport && (
 							<ToolbarItem
 								as={ ToolSelector }
 								showTooltip={ ! showIconLabels }
@@ -141,17 +148,25 @@ function HeaderToolbar() {
 								disabled={ isTextModeEnabled }
 							/>
 						) }
-						<ToolbarItem
-							as={ EditorHistoryUndo }
-							showTooltip={ ! showIconLabels }
-							variant={ showIconLabels ? 'tertiary' : undefined }
-						/>
-						<ToolbarItem
-							as={ EditorHistoryRedo }
-							showTooltip={ ! showIconLabels }
-							variant={ showIconLabels ? 'tertiary' : undefined }
-						/>
-						{ overflowItems }
+						{ showUndoRedo && (
+							<>
+								<ToolbarItem
+									as={ EditorHistoryUndo }
+									showTooltip={ ! showIconLabels }
+									variant={
+										showIconLabels ? 'tertiary' : undefined
+									}
+								/>
+								<ToolbarItem
+									as={ EditorHistoryRedo }
+									showTooltip={ ! showIconLabels }
+									variant={
+										showIconLabels ? 'tertiary' : undefined
+									}
+								/>
+							</>
+						) }
+						{ showListView && overflowItems }
 					</>
 				) }
 			</div>

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -41,9 +41,9 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 		const _selectedBlockClientIds = getSelectedBlockClientIds();
 		const parents =
 			_selectedBlockClientIds?.length === 1
-				? getBlockParents( _selectedBlockClientIds )
+				? getBlockParents( _selectedBlockClientIds[ 0 ] )
 				: [];
-		const _firstParentClientId = parents[ parents.length - 1 ];
+		const hasParent = parents.length > 0;
 		return {
 			hasSelectedBlocks: !! _selectedBlockClientIds.length,
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
@@ -55,9 +55,9 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 			isDistractionFreeMode:
 				select( editPostStore ).isFeatureActive( 'distractionFree' ),
 			hasFixedToolbar: settings.hasFixedToolbar,
-			firstParentClientId: _firstParentClientId,
+			firstParentClientId: hasParent,
 		};
-	}, [] );
+	} );
 
 	const isDistractionFree = isDistractionFreeMode && isLargeViewport;
 
@@ -88,19 +88,25 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 			>
 				{ ! hasFixedToolbar && <HeaderToolbar /> }
 				{ ! hasSelectedBlocks && hasFixedToolbar && <HeaderToolbar /> }
-				{ hasFixedToolbar && (
-					<div
-						style={
-							firstParentClientId
-								? {
-										position: 'relative',
-										left: '70px',
-								  }
-								: {}
-						}
-					>
-						<BlockToolbar hideDragHandle={ hasFixedToolbar } />
-					</div>
+				{ hasSelectedBlocks && hasFixedToolbar && (
+					<>
+						<HeaderToolbar
+							showInserter={ true }
+							showTools={ false }
+							showListView={ false }
+							showUndoRedo={ false }
+						/>
+						<div
+							style={ {
+								display: 'flex',
+								width: '100%',
+								position: 'relative',
+								left: firstParentClientId ? '60px' : '0',
+							} }
+						>
+							<BlockToolbar hideDragHandle={ hasFixedToolbar } />
+						</div>
+					</>
 				) }
 				<TemplateTitle />
 			</motion.div>