From 4d361ed04fbe946e1f487616de5ad62ae92d50a8 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 9 Jan 2024 13:46:09 +0100
Subject: [PATCH 1/2] Fix styling and focus style.

---
 .../edit-widgets/src/components/header/document-tools/index.js | 1 +
 packages/edit-widgets/src/components/header/style.scss         | 3 +--
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/edit-widgets/src/components/header/document-tools/index.js b/packages/edit-widgets/src/components/header/document-tools/index.js
index a9799ac993f9a..a675de925db32 100644
--- a/packages/edit-widgets/src/components/header/document-tools/index.js
+++ b/packages/edit-widgets/src/components/header/document-tools/index.js
@@ -83,6 +83,7 @@ function DocumentTools() {
 			className="edit-widgets-header-toolbar"
 			aria-label={ __( 'Document tools' ) }
 			shouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }
+			variant="unstyled"
 		>
 			<ToolbarItem
 				ref={ inserterButton }
diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss
index 2dd4b88eebddf..c5bdc2561d5d5 100644
--- a/packages/edit-widgets/src/components/header/style.scss
+++ b/packages/edit-widgets/src/components/header/style.scss
@@ -45,7 +45,6 @@
 	align-items: center;
 	justify-content: center;
 	flex-shrink: 2;
-	overflow-x: hidden;
 	padding-left: $grid-unit-20;
 }
 
@@ -67,7 +66,7 @@
 }
 
 .edit-widgets-header-toolbar {
-	border: none;
+	gap: $grid-unit-10;
 
 	// The Toolbar component adds different styles to buttons, so we reset them
 	// here to the original button styles

From e0685c5a9c59465fc798e5abbb0a3097d932c770 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 9 Jan 2024 14:23:24 +0100
Subject: [PATCH 2/2] Fix Widgets toolbar Undo and Redo buttons keyboard
 interaction.

---
 .../src/components/header/document-tools/index.js     |  4 ++--
 .../src/components/header/undo-redo/redo.js           | 11 ++++++++---
 .../src/components/header/undo-redo/undo.js           | 11 ++++++++---
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/edit-widgets/src/components/header/document-tools/index.js b/packages/edit-widgets/src/components/header/document-tools/index.js
index a675de925db32..4391ece0b89e2 100644
--- a/packages/edit-widgets/src/components/header/document-tools/index.js
+++ b/packages/edit-widgets/src/components/header/document-tools/index.js
@@ -105,8 +105,8 @@ function DocumentTools() {
 			/>
 			{ isMediumViewport && (
 				<>
-					<UndoButton />
-					<RedoButton />
+					<ToolbarItem as={ UndoButton } />
+					<ToolbarItem as={ RedoButton } />
 					<ToolbarItem
 						as={ Button }
 						className="edit-widgets-header-toolbar__list-view-toggle"
diff --git a/packages/edit-widgets/src/components/header/undo-redo/redo.js b/packages/edit-widgets/src/components/header/undo-redo/redo.js
index c4f4e6df37b91..17d0ecb892d0a 100644
--- a/packages/edit-widgets/src/components/header/undo-redo/redo.js
+++ b/packages/edit-widgets/src/components/header/undo-redo/redo.js
@@ -2,13 +2,14 @@
  * WordPress dependencies
  */
 import { __, isRTL } from '@wordpress/i18n';
-import { ToolbarButton } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
 import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
+import { forwardRef } from '@wordpress/element';
 
-export default function RedoButton() {
+function RedoButton( props, ref ) {
 	const shortcut = isAppleOS()
 		? displayShortcut.primaryShift( 'z' )
 		: displayShortcut.primary( 'y' );
@@ -19,7 +20,9 @@ export default function RedoButton() {
 	);
 	const { redo } = useDispatch( coreStore );
 	return (
-		<ToolbarButton
+		<Button
+			{ ...props }
+			ref={ ref }
 			icon={ ! isRTL() ? redoIcon : undoIcon }
 			label={ __( 'Redo' ) }
 			shortcut={ shortcut }
@@ -31,3 +34,5 @@ export default function RedoButton() {
 		/>
 	);
 }
+
+export default forwardRef( RedoButton );
diff --git a/packages/edit-widgets/src/components/header/undo-redo/undo.js b/packages/edit-widgets/src/components/header/undo-redo/undo.js
index 827ed1a415d74..271c73a452d9e 100644
--- a/packages/edit-widgets/src/components/header/undo-redo/undo.js
+++ b/packages/edit-widgets/src/components/header/undo-redo/undo.js
@@ -2,20 +2,23 @@
  * WordPress dependencies
  */
 import { __, isRTL } from '@wordpress/i18n';
-import { ToolbarButton } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
+import { forwardRef } from '@wordpress/element';
 
-export default function UndoButton() {
+function UndoButton( props, ref ) {
 	const hasUndo = useSelect(
 		( select ) => select( coreStore ).hasUndo(),
 		[]
 	);
 	const { undo } = useDispatch( coreStore );
 	return (
-		<ToolbarButton
+		<Button
+			{ ...props }
+			ref={ ref }
 			icon={ ! isRTL() ? undoIcon : redoIcon }
 			label={ __( 'Undo' ) }
 			shortcut={ displayShortcut.primary( 'z' ) }
@@ -27,3 +30,5 @@ export default function UndoButton() {
 		/>
 	);
 }
+
+export default forwardRef( UndoButton );