Commit 35a74734d39 for woocommerce
commit 35a74734d3950232841edd62f7c8330cf4eda1b5
Author: Luigi Teschio <gigitux@gmail.com>
Date: Wed Aug 5 09:20:39 2026 +0200
Fix product editor content shift on initial load (#67351)
* Fix product editor content shift on initial load
* Add changelog entry for product editor content shift
* clean up test
diff --git a/plugins/woocommerce/changelog/fix-product-editor-content-shift b/plugins/woocommerce/changelog/fix-product-editor-content-shift
new file mode 100644
index 00000000000..53b79219222
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-product-editor-content-shift
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Prevent product editor content from shifting during initial page load.
diff --git a/plugins/woocommerce/client/admin/client/embedded-body-layout/render-embedded-layout.tsx b/plugins/woocommerce/client/admin/client/embedded-body-layout/render-embedded-layout.tsx
index c188ae0b2d2..56e83f3051f 100644
--- a/plugins/woocommerce/client/admin/client/embedded-body-layout/render-embedded-layout.tsx
+++ b/plugins/woocommerce/client/admin/client/embedded-body-layout/render-embedded-layout.tsx
@@ -77,10 +77,10 @@ const findWrapElement = ( wpBody: HTMLElement ) => {
*/
const renderNotices = ( wpBody: HTMLElement, wrap: Element ) => {
const noticeContainer = document.createElement( 'div' );
+ // Preserve the wrap's initial top spacing when this container breaks its adjacent-sibling selector.
+ noticeContainer.className = 'woocommerce-layout';
createRoot( wpBody.insertBefore( noticeContainer, wrap ) ).render(
- <div className="woocommerce-layout">
- <NoticeArea />
- </div>
+ <NoticeArea />
);
};
diff --git a/plugins/woocommerce/client/admin/client/header/style.scss b/plugins/woocommerce/client/admin/client/header/style.scss
index 2781542a05d..20a7e62bcbb 100644
--- a/plugins/woocommerce/client/admin/client/header/style.scss
+++ b/plugins/woocommerce/client/admin/client/header/style.scss
@@ -234,6 +234,10 @@
// Firefox 121+). Older browsers fall through to the JS-driven class
// path above and still work — they just get the small flash.
body:has(.wrap > h1.wp-heading-inline) {
+ #wpbody {
+ margin-top: $adminbar-height;
+ }
+
.woocommerce-layout__header-heading {
display: none;
}