From 841b71af44f54851285375361665dd4f799bebb2 Mon Sep 17 00:00:00 2001
From: Thomas Guillot <thomas@automattic.com>
Date: Wed, 26 Jun 2024 10:22:09 +0100
Subject: [PATCH] feat: move classic theme fix to css

---
 assets/css/frontend/components/tabs.css      |  1 -
 includes/blocks/block-editor/tabs/edit.js    |  6 ------
 includes/blocks/block-editor/tabs/editor.css | 10 ++++++++++
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/assets/css/frontend/components/tabs.css b/assets/css/frontend/components/tabs.css
index 15718d8..a56849e 100644
--- a/assets/css/frontend/components/tabs.css
+++ b/assets/css/frontend/components/tabs.css
@@ -9,7 +9,6 @@
 
 .tab-list {
 	display: flex;
-	flex-wrap: wrap;
 	font-family: var(--newspack-ui-font-family, system-ui, sans-serif);
 	font-size: var(--newspack-ui-font-size-s, 16px);
 	font-weight: 600;
diff --git a/includes/blocks/block-editor/tabs/edit.js b/includes/blocks/block-editor/tabs/edit.js
index 78a0ec5..6a4a2ff 100644
--- a/includes/blocks/block-editor/tabs/edit.js
+++ b/includes/blocks/block-editor/tabs/edit.js
@@ -151,12 +151,6 @@ const TabsEdit = (props) => {
 				if (tabHeader && tabHeaderButton) {
 					tabHeader.style.left = `${tabHeaderButton.offsetLeft}px`;
 					tabHeader.style.top = `-${tabHeader.offsetHeight + 24}px`;
-
-					// For some reason with the Classic Theme, if tabHeader is empty we're 4px off. 
-					if ( document.body.classList.contains('theme-newspack-theme/newspack-theme') && tabHeader.querySelector( 'span' ) ) {
-						tabHeader.style.top = `-${tabHeader.offsetHeight + 28}px`;
-					}
-
 				}
 			});
 		});
diff --git a/includes/blocks/block-editor/tabs/editor.css b/includes/blocks/block-editor/tabs/editor.css
index 4a75d6f..5921649 100644
--- a/includes/blocks/block-editor/tabs/editor.css
+++ b/includes/blocks/block-editor/tabs/editor.css
@@ -126,4 +126,14 @@
 
 .wp-block[data-type="newspack/tabs-item"] + .block-list-appender {
 	display: none !important;
+}
+
+body[class*="theme-newspack-theme/newspack-theme"] {
+	& .wp-block[data-type="newspack/tabs"] {
+		& .tab-header {
+			& .rich-text:has( span ) {
+				top: -4px;
+			}
+		}
+	}
 }
\ No newline at end of file