Add new top admin bar to marketplace (#39145)

plugins/woocommerce-admin/client/marketplace/components/content/content.scss

@@ -4,11 +4,11 @@
 	box-sizing: content-box;
 	margin: auto;
 	max-width: $content-max-width;
-	padding: 0 $content-spacing-small;
+	padding: $header-height-mobile $content-spacing-small $content-spacing-small;
 }
 
 @media screen and (min-width: $breakpoint-medium) {
 	.woocommerce-marketplace__content {
-		padding: $content-spacing-large;
+		padding: $header-height-desktop $content-spacing-large $content-spacing-large;
 	}
 }

plugins/woocommerce-admin/client/marketplace/components/header-account/header-account.tsx

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+export default function HeaderAccount() {
+	return (
+		<a
+			className="woocommerce-marketplace__header-account"
+			href="https://woocommerce.com/my-account/"
+		>
+			<svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					id="Union"
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M7.25 16.4371C6.16445 15.2755 5.5 13.7153 5.5 12C5.5 8.41015 8.41015 5.5 12 5.5C15.5899 5.5 18.5 8.41015 18.5 12C18.5 13.7153 17.8356 15.2755 16.75 16.4371V16C16.75 14.4812 15.5188 13.25 14 13.25L10 13.25C8.48122 13.25 7.25 14.4812 7.25 16V16.4371ZM8.75 17.6304C9.70606 18.1835 10.8161 18.5 12 18.5C13.1839 18.5 14.2939 18.1835 15.25 17.6304V16C15.25 15.3096 14.6904 14.75 14 14.75L10 14.75C9.30964 14.75 8.75 15.3096 8.75 16V17.6304ZM4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM14 10C14 11.1046 13.1046 12 12 12C10.8954 12 10 11.1046 10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10Z"
+					fill="black"
+				/>
+			</svg>
+		</a>
+	);
+}

plugins/woocommerce-admin/client/marketplace/components/header-search-button/header-search-button.tsx

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+
+export default function HeaderSearchButton() {
+	return (
+		<button className="woocommerce-marketplace__header-search-button">
+			<svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					id="Union"
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M19.0001 11C19.0001 14.3137 16.3138 17 13.0001 17C11.6135 17 10.3369 16.5297 9.32086 15.7399L5.53039 19.5304L4.46973 18.4697L8.26019 14.6793C7.47038 13.6632 7.00006 12.3865 7.00006 11C7.00006 7.68629 9.68635 5 13.0001 5C16.3138 5 19.0001 7.68629 19.0001 11ZM17.5001 11C17.5001 13.4853 15.4853 15.5 13.0001 15.5C10.5148 15.5 8.50006 13.4853 8.50006 11C8.50006 8.51472 10.5148 6.5 13.0001 6.5C15.4853 6.5 17.5001 8.51472 17.5001 11Z"
+					fill="#1E1E1E"
+				/>
+			</svg>
+			<span className="screen-reader-text">
+				{ __( 'Search', 'woocommerce' ) }
+			</span>
+		</button>
+	);
+}

plugins/woocommerce-admin/client/marketplace/components/header-search/header-search.tsx

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+
+export default function HeaderSearch() {
+	return (
+		<form className="woocommerce-marketplace__header-search">
+			<input
+				type="search"
+				className="woocommerce-marketplace__header-search-field"
+				placeholder={ __(
+					'Search extensions and themes',
+					'woocommerce'
+				) }
+			/>
+			<button className="woocommerce-marketplace__header-search-button">
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						id="Union"
+						fillRule="evenodd"
+						clipRule="evenodd"
+						d="M19.0001 11C19.0001 14.3137 16.3138 17 13.0001 17C11.6135 17 10.3369 16.5297 9.32086 15.7399L5.53039 19.5304L4.46973 18.4697L8.26019 14.6793C7.47038 13.6632 7.00006 12.3865 7.00006 11C7.00006 7.68629 9.68635 5 13.0001 5C16.3138 5 19.0001 7.68629 19.0001 11ZM17.5001 11C17.5001 13.4853 15.4853 15.5 13.0001 15.5C10.5148 15.5 8.50006 13.4853 8.50006 11C8.50006 8.51472 10.5148 6.5 13.0001 6.5C15.4853 6.5 17.5001 8.51472 17.5001 11Z"
+						fill="#1E1E1E"
+					/>
+				</svg>
+				<span className="screen-reader-text">
+					{ __( 'Search', 'woocommerce' ) }
+				</span>
+			</button>
+		</form>
+	);
+}

plugins/woocommerce-admin/client/marketplace/components/header-title/header-title.tsx

@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+
+export default function HeaderTitle() {
+	return (
+		<div className="woocommerce-marketplace__header-title">
+			{ __( 'Extensions', 'woocommerce' ) }
+		</div>
+	);
+}

plugins/woocommerce-admin/client/marketplace/components/header/header.scss

@@ -0,0 +1,80 @@
+@import '../../stylesheets/_variables.scss';
+
+.woocommerce-marketplace__header {
+	align-items: center;
+	background: #fff;
+	border-bottom: 1px solid $gutenberg-gray-300;
+	display: grid;
+	grid-template: 'mktpl-title mktpl-search mktpl-meta' 60px
+		'mktpl-tabs mktpl-tabs mktpl-tabs' auto / 1fr 320px 36px;
+	left: 0;
+	padding: 10px $content-spacing-large 0;
+	position: absolute;
+	top: -60px;
+	width: 100%;
+
+	/* On narrow screens, "stack" header items and hide the bottom border */
+	@media (width <= $breakpoint-medium) {
+		border-bottom: 0;
+		grid-template: 'mktpl-title mktpl-meta' 60px
+			'mktpl-tabs mktpl-tabs' 48px
+			'mktpl-search mktpl-search' auto / auto 48px;
+		padding: 0;
+	}
+}
+
+.woocommerce-marketplace__header-title {
+	align-items: center;
+	align-self: stretch;
+	display: flex;
+	font-size: 14px;
+	font-weight: 700;
+	grid-area: mktpl-title;
+	line-height: 18px;
+
+	@media (width <= $breakpoint-medium) {
+		padding: 0 $content-spacing-small;
+	}
+}
+
+.woocommerce-marketplace__header-meta {
+	grid-area: mktpl-meta;
+	justify-self: end;
+
+	@media (width <= $breakpoint-medium) {
+		margin-right: $content-spacing-small;
+	}
+}
+
+.woocommerce-marketplace__header-tabs {
+	align-self: end;
+	grid-area: mktpl-tabs;
+
+	@media (width <= $breakpoint-medium) {
+		padding: 0 $content-spacing-small;
+	}
+}
+
+.woocommerce-marketplace__header-search {
+	grid-area: mktpl-search;
+	background: #f0f0f0;
+	border-radius: 2px;
+	display: flex;
+	height: 40px;
+	padding: 4px 8px 4px 12px;
+
+	input[type='search'] {
+		all: unset;
+		flex-grow: 1;
+	}
+
+	@media (width <= $breakpoint-medium) {
+		margin: $content-spacing-small;
+	}
+}
+
+.woocommerce-marketplace__header-search-button {
+	all: unset;
+	cursor: pointer;
+}
+

plugins/woocommerce-admin/client/marketplace/components/header/header.tsx

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import './header.scss';
+import HeaderTitle from '../header-title/header-title';
+import HeaderAccount from '../header-account/header-account';
+import Tabs from '../tabs/tabs';
+import HeaderSearch from '../header-search/header-search';
+
+export interface HeaderProps {
+	selectedTab?: string | undefined;
+	setSelectedTab: ( value: string ) => void;
+}
+
+export default function Header( props: HeaderProps ) {
+	const { selectedTab, setSelectedTab } = props;
+	return (
+		<header className="woocommerce-marketplace__header">
+			<HeaderTitle />
+			<Tabs
+				additionalClassNames={ [
+					'woocommerce-marketplace__header-tabs',
+				] }
+				selectedTab={ selectedTab }
+				setSelectedTab={ setSelectedTab }
+			/>
+			<div className="woocommerce-marketplace__header-meta">
+				<HeaderAccount />
+			</div>
+			<HeaderSearch />
+		</header>
+	);
+}

plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.scss

@@ -2,21 +2,22 @@
 
 .woocommerce-marketplace {
 	&__tabs {
-		margin: auto;
-		padding: 0 $content-spacing-small;
 		box-sizing: content-box;
+		display: flex;
+		gap: 24px;
 	}
 
 	&__tab-button {
 		border-bottom: 1.5px solid transparent;
 		border-radius: 0;
-		padding: 1.5rem 0;
-		margin: 0 1.5rem 0 0;
 		color: $mauve-light-12;
 		font-size: 13px;
 		font-style: normal;
 		font-weight: 600;
+		height: 48px;
 		line-height: 16px;
+		margin: 0 1.5rem 0 0;
+		padding: 0;
 
 		&:focus:not(:disabled) {
 			box-shadow: none;
@@ -28,6 +29,12 @@
 	}
 }
 
+@media (width <= $breakpoint-medium) {
+	.woocommerce-marketplace__tabs {
+		border-bottom: 1px solid $gutenberg-gray-300;
+	}
+}
+
 @media screen and (min-width: $breakpoint-medium) {
 	.woocommerce-marketplace__tabs {
 		padding: 0 $content-spacing-large;

plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx

@@ -16,6 +16,7 @@ import { DEFAULT_TAB_KEY, MARKETPLACE_PATH } from '../constants';
 export interface TabsProps {
 	selectedTab?: string | undefined;
 	setSelectedTab: ( value: string ) => void;
+	additionalClassNames?: Array< string > | undefined;
 }
 
 interface Tab {
@@ -73,7 +74,7 @@ const renderTabs = ( props: TabsProps ) => {
 };
 
 const Tabs = ( props: TabsProps ): JSX.Element => {
-	const { setSelectedTab } = props;
+	const { setSelectedTab, additionalClassNames } = props;
 
 	interface Query {
 		path?: string;
@@ -91,7 +92,12 @@ const Tabs = ( props: TabsProps ): JSX.Element => {
 	}, [ query, setSelectedTab ] );
 
 	return (
-		<nav className="woocommerce-marketplace__tabs">
+		<nav
+			className={ classNames(
+				'woocommerce-marketplace__tabs',
+				additionalClassNames || []
+			) }
+		>
 			{ renderTabs( props ) }
 		</nav>
 	);

plugins/woocommerce-admin/client/marketplace/index.tsx

@@ -8,7 +8,7 @@ import { useState } from '@wordpress/element';
  */
 import './marketplace.scss';
 import { DEFAULT_TAB_KEY } from './components/constants';
-import Tabs from './components/tabs/tabs';
+import Header from './components/header/header';
 import Content from './components/content/content';
 
 export default function Marketplace() {
@@ -16,12 +16,10 @@ export default function Marketplace() {
 
 	return (
 		<div className="woocommerce-marketplace">
-			<div className="woocommerce-marketplace__header">
+			<Header
-				<Tabs
+				selectedTab={ selectedTab }
-					selectedTab={ selectedTab }
+				setSelectedTab={ setSelectedTab }
-					setSelectedTab={ setSelectedTab }
+			/>
-				/>
-			</div>
 			<Content selectedTab={ selectedTab } />
 		</div>
 	);

plugins/woocommerce-admin/client/marketplace/marketplace.scss

@@ -11,8 +11,3 @@
 		padding: 0;
 	}
 }
-
-.woocommerce-marketplace__header {
-	border-bottom: 1px solid $gutenberg-gray-300;
-}
-

plugins/woocommerce-admin/client/marketplace/stylesheets/_variables.scss

@@ -18,6 +18,10 @@ $breakpoint-medium: 769px;
 $breakpoint-large: 1024px;
 $breakpoint-xlarge: 1500px;
 
+// Header
+$header-height-desktop: 89px;
+$header-height-mobile: 129px;
+
 // Colours
 $gutenberg-gray-100: #f0f0f0;
 $gutenberg-gray-300: $gray-300;