DocumentBar: Fix browser warning error when entering edit mode (#59193)

Co-authored-by: t-hamano <[email protected]> Co-authored-by: ramonjd <[email protected]>
WordPress · Feb 20, 2024 · 5851fd5 · 5851fd5 · github-actions · Feb 20, 2024
1 parent e6b93dc
commit 5851fd5
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js
@@ -11,7 +11,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
 	__experimentalText as Text,
-	__experimentalHStack as HStack,
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
@@ -155,11 +154,8 @@ export default function DocumentBar() {
 					onClick={ () => openCommandCenter() }
 					size="compact"
 				>
-					<HStack
-						as={ motion.div }
+					<motion.div
 						className="editor-document-bar__title"
-						spacing={ 1 }
-						justify="center"
 						// Force entry animation when the back button is added or removed.
 						key={ hasBackButton }
 						initial={
@@ -193,7 +189,7 @@ export default function DocumentBar() {
 						>
 							{ title }
 						</Text>
-					</HStack>
+					</motion.div>
 					<span className="editor-document-bar__shortcut">
 						{ displayShortcut.primary( 'k' ) }
 					</span>

diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss
@@ -40,6 +40,10 @@
 	flex-grow: 1;
 	overflow: hidden;
 	color: $gray-800;
+	gap: $grid-unit-05;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 
 	// Offset the layout based on the width of the ⌘K label. This ensures the title is centrally aligned.
 	@include break-small() {