Move motion to header-edit-mode level (#55904)

Moving the motion up to the layout level for the header keeps the navigation document tools and the animation of it separated for a cleaner implementation.
WordPress · Nov 6, 2023 · 90d5306 · 90d5306
1 parent 62f38a7
commit 90d5306
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 95 deletions.
diff --git a/packages/edit-site/src/components/header-edit-mode/document-tools/index.js b/packages/edit-site/src/components/header-edit-mode/document-tools/index.js
@@ -12,11 +12,7 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { _x, __ } from '@wordpress/i18n';
 import { listView, plus, chevronUpDown } from '@wordpress/icons';
-import {
-	__unstableMotion as motion,
-	Button,
-	ToolbarItem,
-} from '@wordpress/components';
+import { Button, ToolbarItem } from '@wordpress/components';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as preferencesStore } from '@wordpress/preferences';
 
@@ -39,8 +35,6 @@ export default function DocumentTools( {
 	isDistractionFree,
 	showIconLabels,
 	setListViewToggleElement,
-	toolbarTransition,
-	toolbarVariants,
 } ) {
 	const inserterButton = useRef();
 	const {
@@ -125,103 +119,92 @@ export default function DocumentTools( {
 	const isZoomedOutView = blockEditorMode === 'zoom-out';
 
 	return (
-		<motion.div
-			variants={ toolbarVariants }
-			transition={ toolbarTransition }
+		<NavigableToolbar
+			className="edit-site-header-edit-mode__start"
+			aria-label={ __( 'Document tools' ) }
+			shouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }
 		>
-			<NavigableToolbar
-				className="edit-site-header-edit-mode__start"
-				aria-label={ __( 'Document tools' ) }
-				shouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }
-			>
-				<div className="edit-site-header-edit-mode__toolbar">
-					{ ! isDistractionFree && (
-						<ToolbarItem
-							ref={ inserterButton }
-							as={ Button }
-							className="edit-site-header-edit-mode__inserter-toggle"
-							variant="primary"
-							isPressed={ isInserterOpen }
-							onMouseDown={ preventDefault }
-							onClick={ toggleInserter }
-							disabled={ ! isVisualMode }
-							icon={ plus }
-							label={ showIconLabels ? shortLabel : longLabel }
-							showTooltip={ ! showIconLabels }
-							aria-expanded={ isInserterOpen }
-						/>
-					) }
-					{ isLargeViewport && (
-						<>
-							{ ! hasFixedToolbar && (
-								<ToolbarItem
-									as={ ToolSelector }
-									showTooltip={ ! showIconLabels }
-									variant={
-										showIconLabels ? 'tertiary' : undefined
-									}
-									disabled={ ! isVisualMode }
-								/>
-							) }
+			<div className="edit-site-header-edit-mode__toolbar">
+				{ ! isDistractionFree && (
+					<ToolbarItem
+						ref={ inserterButton }
+						as={ Button }
+						className="edit-site-header-edit-mode__inserter-toggle"
+						variant="primary"
+						isPressed={ isInserterOpen }
+						onMouseDown={ preventDefault }
+						onClick={ toggleInserter }
+						disabled={ ! isVisualMode }
+						icon={ plus }
+						label={ showIconLabels ? shortLabel : longLabel }
+						showTooltip={ ! showIconLabels }
+						aria-expanded={ isInserterOpen }
+					/>
+				) }
+				{ isLargeViewport && (
+					<>
+						{ ! hasFixedToolbar && (
 							<ToolbarItem
-								as={ UndoButton }
+								as={ ToolSelector }
 								showTooltip={ ! showIconLabels }
 								variant={
 									showIconLabels ? 'tertiary' : undefined
 								}
+								disabled={ ! isVisualMode }
 							/>
+						) }
+						<ToolbarItem
+							as={ UndoButton }
+							showTooltip={ ! showIconLabels }
+							variant={ showIconLabels ? 'tertiary' : undefined }
+						/>
+						<ToolbarItem
+							as={ RedoButton }
+							showTooltip={ ! showIconLabels }
+							variant={ showIconLabels ? 'tertiary' : undefined }
+						/>
+						{ ! isDistractionFree && (
 							<ToolbarItem
-								as={ RedoButton }
+								as={ Button }
+								className="edit-site-header-edit-mode__list-view-toggle"
+								disabled={ ! isVisualMode || isZoomedOutView }
+								icon={ listView }
+								isPressed={ isListViewOpen }
+								/* translators: button label text should, if possible, be under 16 characters. */
+								label={ __( 'List View' ) }
+								onClick={ toggleListView }
+								ref={ setListViewToggleElement }
+								shortcut={ listViewShortcut }
 								showTooltip={ ! showIconLabels }
 								variant={
 									showIconLabels ? 'tertiary' : undefined
 								}
+								aria-expanded={ isListViewOpen }
 							/>
-							{ ! isDistractionFree && (
+						) }
+						{ isZoomedOutViewExperimentEnabled &&
+							! isDistractionFree &&
+							! hasFixedToolbar && (
 								<ToolbarItem
 									as={ Button }
-									className="edit-site-header-edit-mode__list-view-toggle"
-									disabled={
-										! isVisualMode || isZoomedOutView
-									}
-									icon={ listView }
-									isPressed={ isListViewOpen }
+									className="edit-site-header-edit-mode__zoom-out-view-toggle"
+									icon={ chevronUpDown }
+									isPressed={ isZoomedOutView }
 									/* translators: button label text should, if possible, be under 16 characters. */
-									label={ __( 'List View' ) }
-									onClick={ toggleListView }
-									ref={ setListViewToggleElement }
-									shortcut={ listViewShortcut }
-									showTooltip={ ! showIconLabels }
-									variant={
-										showIconLabels ? 'tertiary' : undefined
-									}
-									aria-expanded={ isListViewOpen }
+									label={ __( 'Zoom-out View' ) }
+									onClick={ () => {
+										setPreviewDeviceType( 'Desktop' );
+										__unstableSetEditorMode(
+											isZoomedOutView
+												? 'edit'
+												: 'zoom-out'
+										);
+									} }
 								/>
 							) }
-							{ isZoomedOutViewExperimentEnabled &&
-								! isDistractionFree &&
-								! hasFixedToolbar && (
-									<ToolbarItem
-										as={ Button }
-										className="edit-site-header-edit-mode__zoom-out-view-toggle"
-										icon={ chevronUpDown }
-										isPressed={ isZoomedOutView }
-										/* translators: button label text should, if possible, be under 16 characters. */
-										label={ __( 'Zoom-out View' ) }
-										onClick={ () => {
-											setPreviewDeviceType( 'Desktop' );
-											__unstableSetEditorMode(
-												isZoomedOutView
-													? 'edit'
-													: 'zoom-out'
-											);
-										} }
-									/>
-								) }
-						</>
-					) }
-				</div>
-			</NavigableToolbar>
-		</motion.div>
+					</>
+				) }
+			</div>
+		</NavigableToolbar>
 	);
 }
diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -110,14 +110,17 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 			} ) }
 		>
 			{ hasDefaultEditorCanvasView && (
-				<DocumentTools
-					blockEditorMode={ blockEditorMode }
-					isDistractionFree={ isDistractionFree }
-					showIconLabels={ showIconLabels }
-					setListViewToggleElement={ setListViewToggleElement }
-					toolbarTransition={ toolbarTransition }
-					toolbarVariants={ toolbarVariants }
-				/>
+				<motion.div
+					variants={ toolbarVariants }
+					transition={ toolbarTransition }
+				>
+					<DocumentTools
+						blockEditorMode={ blockEditorMode }
+						isDistractionFree={ isDistractionFree }
+						showIconLabels={ showIconLabels }
+						setListViewToggleElement={ setListViewToggleElement }
+					/>
+				</motion.div>
 			) }
 
 			{ ! isDistractionFree && (