From 574b8bc4c529e17c3c70d10cd1543f671756c37c Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Tue, 16 Jul 2024 18:41:17 -0700
Subject: [PATCH] Remove has-back-button class name

---
 packages/editor/src/components/header/index.js   | 2 +-
 packages/editor/src/components/header/style.scss | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
index 96bc9256ea6476..e5c1eac1b779c9 100644
--- a/packages/editor/src/components/header/index.js
+++ b/packages/editor/src/components/header/index.js
@@ -94,12 +94,12 @@ function Header( {
 	return (
 		<div
 			className={ clsx( 'editor-header edit-post-header', {
-				'has-back-button': hasBackButton,
 				'has-center': hasCenter,
 			} ) }
 		>
 			{ hasBackButton && (
 				<motion.div
+					className="editor-header__back-button"
 					variants={ backButtonVariations }
 					transition={ { type: 'tween' } }
 				>
diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss
index 86289c482aae8e..b0e95e1d3424b0 100644
--- a/packages/editor/src/components/header/style.scss
+++ b/packages/editor/src/components/header/style.scss
@@ -27,15 +27,17 @@
 .editor-header__toolbar {
 	grid-column: 1 / 3;
 	// When there is no back button or the viewport is <= mobile the margin keeps the content off
-	// the starting edge. Otherwise, it’s overriden to and the parent’s `gap` does the job instead.
+	// the starting edge.
 	> :first-child {
 		margin-inline: $grid-unit-20 0;
 	}
 
-	.has-back-button.editor-header & {
+	// This is the typical case, the back button takes up the first column.
+	.editor-header__back-button + & {
 		grid-column: 2 / 3;
 
 		@include break-mobile {
+			// Clears the margin; at this breakpoint the parent’s `gap` takes its place.
 			> :first-child {
 				margin-inline: 0;
 			}