Merge pull request woocommerce/woocommerce-admin#2291 from woocommerce/fix/2192-screen-meta-links

Move StoreAlerts below screen meta links on embed pages.

plugins/woocommerce-admin/client/embedded.js

@@ -9,13 +9,30 @@ import { Provider as SlotFillProvider } from 'react-slot-fill';
  * Internal dependencies
  */
 import './stylesheets/_embedded.scss';
-import { EmbedLayout } from './layout';
+import { EmbedLayout, PrimaryLayout as NoticeArea } from './layout';
 import 'store';
 import 'wc-api/wp-data-store';
 
+const embeddedRoot = document.getElementById( 'woocommerce-embedded-root' );
+
+// Render the header.
 render(
 	<SlotFillProvider>
 		<EmbedLayout />
 	</SlotFillProvider>,
-	document.getElementById( 'woocommerce-embedded-root' )
+	embeddedRoot
+);
+
+embeddedRoot.classList.remove( 'is-embed-loading' );
+
+// Render notices just above the WP content div.
+const wpBody = document.getElementById( 'wpbody-content' );
+const wrap = wpBody.querySelector( '.wrap' );
+const noticeContainer = document.createElement( 'div' );
+
+render(
+	<div className="woocommerce-layout">
+		<NoticeArea />
+	</div>,
+	wpBody.insertBefore( noticeContainer, wrap )
 );

plugins/woocommerce-admin/client/layout/index.js

@@ -24,6 +24,19 @@ import { recordPageView } from 'lib/tracks';
 import TransientNotices from './transient-notices';
 import StoreAlerts from './store-alerts';
 
+export class PrimaryLayout extends Component {
+	render() {
+		const { children } = this.props;
+		return (
+			<div className="woocommerce-layout__primary" id="woocommerce-layout__primary">
+				{ window.wcAdminFeatures[ 'store-alerts' ] && <StoreAlerts /> }
+				<Notices />
+				{ children }
+			</div>
+		);
+	}
+}
+
 class Layout extends Component {
 	componentDidMount() {
 		this.recordPageViewTrack();
@@ -60,28 +73,25 @@ class Layout extends Component {
 	}
 
 	render() {
-		const { isEmbeded, ...restProps } = this.props;
+		const { isEmbedded, ...restProps } = this.props;
 		return (
 			<div className="woocommerce-layout">
 				<Slot name="header" />
 				<TransientNotices />
-
-				<div className="woocommerce-layout__primary" id="woocommerce-layout__primary">
-					{ window.wcAdminFeatures[ 'store-alerts' ] && <StoreAlerts /> }
-					<Notices />
-					{ ! isEmbeded && (
+				{ ! isEmbedded && (
+					<PrimaryLayout>
 						<div className="woocommerce-layout__main">
 							<Controller { ...restProps } />
 						</div>
+					</PrimaryLayout>
 				) }
 			</div>
-			</div>
 		);
 	}
 }
 
 Layout.propTypes = {
-	isEmbededLayout: PropTypes.bool,
+	isEmbedded: PropTypes.bool,
 };
 
 export class PageLayout extends Component {
@@ -104,7 +114,7 @@ export class EmbedLayout extends Component {
 		return (
 			<Fragment>
 				<Header sections={ wcSettings.embedBreadcrumbs } isEmbedded />
-				<Layout isEmbeded />
+				<Layout isEmbedded />
 			</Fragment>
 		);
 	}

plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss

@@ -14,11 +14,40 @@
 		padding: 20px;
 	}
 
+	#woocommerce-embedded-root.is-embed-loading + #wpbody .wrap {
+		padding-top: $large-header-height + 40;
+
+		@include breakpoint( '782px-960px' ) {
+			padding-top: $medium-header-height + 40;
+		}
+
+		@include breakpoint( '<782px' ) {
+			padding-top: 30px;
+		}
+	}
+
+	#screen-meta,
+	#screen-meta-links {
+		top: $large-header-height;
+
+		@include breakpoint( '782px-960px' ) {
+			top: $medium-header-height;
+		}
+
+		@include breakpoint( '<782px' ) {
+			top: $small-header-height;
+		}
+	}
+
 	#screen-meta {
 		border-right: 0;
 		margin: 0;
 	}
 
+	#screen-meta-links {
+		position: relative;
+	}
+
 	.notice {
 		margin: 5px 15px 2px;
 		padding: 1px 12px;
@@ -46,10 +75,14 @@
 
 	.woocommerce-layout__primary {
 		margin: 0;
-		padding-top: 80px;
+		padding-top: $large-header-height + 20;
 
 		@include breakpoint( '782px-960px' ) {
-			padding-top: 60px;
+			padding-top: $medium-header-height + 20;
+		}
+
+		@include breakpoint( '<782px' ) {
+			padding-top: 10px;
 		}
 	}
 

plugins/woocommerce-admin/includes/class-wc-admin-loader.php

@@ -378,7 +378,7 @@ class WC_Admin_Loader {
 		$sections = self::get_embed_breadcrumbs();
 		$sections = is_array( $sections ) ? $sections : array( $sections );
 		?>
-		<div id="woocommerce-embedded-root">
+		<div id="woocommerce-embedded-root" class="is-embed-loading">
 			<div class="woocommerce-layout">
 				<div class="woocommerce-layout__header is-embed-loading">
 					<h1 class="woocommerce-layout__header-breadcrumbs">
@@ -391,9 +391,6 @@ class WC_Admin_Loader {
 					</h1>
 				</div>
 			</div>
-			<div class="woocommerce-layout__primary is-embed-loading" id="woocommerce-layout__primary">
-				<div id="woocommerce-layout__notice-list" class="woocommerce-layout__notice-list"></div>
-			</div>
 		</div>
 		<?php
 	}