diff --git a/plugins/woocommerce-admin/client/embedded.js b/plugins/woocommerce-admin/client/embedded.js index c0803857f18..00adc961403 100644 --- a/plugins/woocommerce-admin/client/embedded.js +++ b/plugins/woocommerce-admin/client/embedded.js @@ -13,14 +13,18 @@ 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' ); diff --git a/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss b/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss index 99574d0bc6c..e941b78b61e 100644 --- a/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss +++ b/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss @@ -14,6 +14,18 @@ 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: $small-header-height + 40; + } + } + #screen-meta, #screen-meta-links { top: $large-header-height; 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 ); ?> -
+

@@ -391,9 +391,6 @@ class WC_Admin_Loader {

-
-
-