Remove has-back-button class name

WordPress · Jul 17, 2024 · 574b8bc · 574b8bc
1 parent d4ce22b
commit 574b8bc
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git 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
@@ -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;
 			}