Fix editor header hidden in Firefox (woocommerce#38247)

* Update page config to add support for layout header/footer * Fix lint error
vishstack · May 18, 2023 · 2843fbb · 2843fbb
1 parent 5d6b3d5
commit 2843fbb
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 17 deletions.
diff --git a/packages/js/product-editor/changelog/fix-38242_editor_hidden_in_firefox b/packages/js/product-editor/changelog/fix-38242_editor_hidden_in_firefox
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Remove css unrelated to the product block editor.
diff --git a/packages/js/product-editor/src/components/block-editor/style.scss b/packages/js/product-editor/src/components/block-editor/style.scss
@@ -101,9 +101,3 @@
 		display: none; // use important or increase specificity.
 	}
 }
-
-.woocommerce-layout:has( .woocommerce-product-block-editor ) {
-	.woocommerce-layout__header {
-		display: none;
-	}
-}
diff --git a/plugins/woocommerce-admin/client/layout/controller.js b/plugins/woocommerce-admin/client/layout/controller.js
@@ -182,6 +182,9 @@ export const getPages = () => {
 			navArgs: {
 				id: 'woocommerce-add-product',
 			},
+			layout: {
+				header: false,
+			},
 			wpOpenMenu: 'menu-posts-product',
 			capability: 'manage_woocommerce',
 		} );
@@ -196,6 +199,9 @@ export const getPages = () => {
 			navArgs: {
 				id: 'woocommerce-edit-product',
 			},
+			layout: {
+				header: false,
+			},
 			wpOpenMenu: 'menu-posts-product',
 			capability: 'manage_woocommerce',
 		} );

diff --git a/plugins/woocommerce-admin/client/layout/index.js b/plugins/woocommerce-admin/client/layout/index.js
@@ -185,7 +185,8 @@ function _Layout( {
 		);
 	}
 
-	const { breadcrumbs } = page;
+	const { breadcrumbs, layout = { header: true, footer: true } } = page;
+	const { header: showHeader = true, footer: showFooter = true } = layout;
 
 	const query = Object.fromEntries(
 		new URLSearchParams( location && location.search )
@@ -199,15 +200,17 @@ function _Layout( {
 		>
 			<SlotFillProvider>
 				<div className="woocommerce-layout">
-					<Header
-						sections={
-							isFunction( breadcrumbs )
-								? breadcrumbs( { match } )
-								: breadcrumbs
-						}
-						isEmbedded={ isEmbedded }
-						query={ query }
-					/>
+					{ showHeader && (
+						<Header
+							sections={
+								isFunction( breadcrumbs )
+									? breadcrumbs( { match } )
+									: breadcrumbs
+							}
+							isEmbedded={ isEmbedded }
+							query={ query }
+						/>
+					) }
 					<TransientNotices />
 					{ ! isEmbedded && (
 						<PrimaryLayout>
@@ -226,7 +229,7 @@ function _Layout( {
 							<WCPayUsageModal />
 						</Suspense>
 					) }
-					<Footer />
+					{ showFooter && <Footer /> }
 					<CustomerEffortScoreModalContainer />
 				</div>
 				<PluginArea scope="woocommerce-admin" />

diff --git a/plugins/woocommerce/changelog/fix-38242_editor_hidden_in_firefox b/plugins/woocommerce/changelog/fix-38242_editor_hidden_in_firefox
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Add support for `showHeader` config in router config to hide header if needed.