Move StoreAlerts below screen meta links on embed pages.

plugins/woocommerce-admin/client/embedded.js

@@ -9,13 +9,26 @@ 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';
 
+// Render the header.
 render(
 	<SlotFillProvider>
 		<EmbedLayout />
 	</SlotFillProvider>,
 	document.getElementById( 'woocommerce-embedded-root' )
 );
+
+// 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,30 +73,38 @@ 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>
-					) }
-				</div>
+					</PrimaryLayout>
+				) }
 			</div>
 		);
 	}
 }
 
 Layout.propTypes = {
-	isEmbededLayout: PropTypes.bool,
+	isEmbedded: PropTypes.bool,
 };
 
+export class NoticeArea extends Component {
+	render() {
+		return (
+			<Fragment>
+				{ window.wcAdminFeatures[ 'store-alerts' ] && <StoreAlerts /> }
+				<Notices />
+			</Fragment>
+		);
+	}
+}
+
 export class PageLayout extends Component {
 	render() {
 		return (
@@ -104,7 +125,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,28 @@
 		padding: 20px;
 	}
 
+	#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 +63,10 @@
 
 	.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;
 		}
 	}