diff --git a/plugins/woocommerce-admin/client/embedded.js b/plugins/woocommerce-admin/client/embedded.js
index 230e6548dcc..00adc961403 100644
--- a/plugins/woocommerce-admin/client/embedded.js
+++ b/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(
,
- 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(
+
+
+
,
+ wpBody.insertBefore( noticeContainer, wrap )
);
diff --git a/plugins/woocommerce-admin/client/layout/index.js b/plugins/woocommerce-admin/client/layout/index.js
index befbbc62eb6..2e97a6b2e94 100644
--- a/plugins/woocommerce-admin/client/layout/index.js
+++ b/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 (
+
+ { window.wcAdminFeatures[ 'store-alerts' ] && }
+
+ { children }
+
+ );
+ }
+}
+
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 (
-
-
- { window.wcAdminFeatures[ 'store-alerts' ] &&
}
-
- { ! isEmbeded && (
+ { ! isEmbedded && (
+
- ) }
-
+
+ ) }
);
}
}
Layout.propTypes = {
- isEmbededLayout: PropTypes.bool,
+ isEmbedded: PropTypes.bool,
};
export class PageLayout extends Component {
@@ -104,7 +114,7 @@ export class EmbedLayout extends Component {
return (
-
+
);
}
diff --git a/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss b/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss
index 7f608ed2d45..c3977e4d71f 100644
--- a/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss
+++ b/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;
}
}
diff --git a/plugins/woocommerce-admin/includes/class-wc-admin-loader.php b/plugins/woocommerce-admin/includes/class-wc-admin-loader.php
index a86030542b2..e26c95726d3 100644
--- a/plugins/woocommerce-admin/includes/class-wc-admin-loader.php
+++ b/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 );
?>
-