Commit 92ac7d90354 for woocommerce
commit 92ac7d90354d06540b4cc6d565d8cc3d833c8954
Author: Jana Hernandez <71137829+JanaMW27@users.noreply.github.com>
Date: Tue May 12 14:39:02 2026 +0200
Add order-detail-redesign feature flag and 1200px cap on Order edit (#64669)
* Cap admin Order edit screen at 1200px and center it
Adds a nested SCSS rule scoped to the HPOS order edit/new screen
(`.woocommerce_page_wc-orders`) and the legacy `shop_order` CPT edit
screen (`.post-type-shop_order`), qualified with `.wrap:has(#poststuff)`
so the orders list screen is unaffected.
* Drop redundant comment on Order edit max-width rule
The CSS declarations already describe what they do; only the
`:has(#poststuff)` qualifier needed a why-comment.
* Add changelog entry for admin Order detail max-width
* Gate Order detail max-width cap behind order-detail-redesign feature flag
Adds the `order-detail-redesign` flag (default off) to wc-admin features
config and a small Init.php that hooks `admin_body_class` to add
`woocommerce-feature-enabled-order-detail-redesign` on the HPOS and legacy
order edit/new screens. The framework's auto-class only fires on wc-admin
and embedded pages, so the order edit screen needs explicit handling.
The 1200px cap is now scoped to require both the page body class and the
feature body class; the flag is off by default, so visible behavior is
unchanged unless toggled on via the WooCommerce Beta Tester plugin.
* Move OrderDetailRedesign feature class to Internal namespace
Addresses review feedback on PR #64669. Moves Init out of Admin\Features
into Internal\Features so the feature can be removed without breaking
backwards compatibility if it does not ship.
Because Features::get_feature_class() only auto-discovers classes under
Admin\Features\*, Init is now manually instantiated in
Features::load_features() (mirroring the existing Blueprint precedent)
when the order-detail-redesign flag is enabled.
* Simplify OrderDetailRedesign\Init: drop screen detection
Per Mike's review feedback, screen-level scoping is already handled by
the CSS selectors that chain `.woocommerce-feature-enabled-order-detail-redesign`
with WP's page classes (`.woocommerce_page_wc-orders`, `.post-type-shop_order`)
and `:has(#poststuff)`. The PHP screen-detection is redundant, so we drop
`is_order_edit_screen()` and add the body class on every admin page while
the feature is enabled.
Side effect: removes the `$_GET` access (and its phpcs-ignore comments)
and resolves the missing `post-new` base case CodeRabbit flagged.
diff --git a/plugins/woocommerce/changelog/max-width-order-detail-page b/plugins/woocommerce/changelog/max-width-order-detail-page
new file mode 100644
index 00000000000..8a3daafa7e0
--- /dev/null
+++ b/plugins/woocommerce/changelog/max-width-order-detail-page
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add the `order-detail-redesign` feature flag (default off). When enabled, caps the admin Order edit screen at 1200px on wide displays.
diff --git a/plugins/woocommerce/changelog/move-order-detail-redesign-internal b/plugins/woocommerce/changelog/move-order-detail-redesign-internal
new file mode 100644
index 00000000000..81e74c02658
--- /dev/null
+++ b/plugins/woocommerce/changelog/move-order-detail-redesign-internal
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Move `OrderDetailRedesign` feature class to the `Internal` namespace so it can be removed without breaking backwards compatibility if the feature is not shipped.
diff --git a/plugins/woocommerce/client/admin/config/core.json b/plugins/woocommerce/client/admin/config/core.json
index b62ff072f13..a585520efc3 100644
--- a/plugins/woocommerce/client/admin/config/core.json
+++ b/plugins/woocommerce/client/admin/config/core.json
@@ -45,6 +45,7 @@
"product-editor-template-system": false,
"use-wp-horizon": false,
"rest-api-v4": false,
+ "order-detail-redesign": false,
"product-variations-classic-redesign": false
}
}
diff --git a/plugins/woocommerce/client/admin/config/development.json b/plugins/woocommerce/client/admin/config/development.json
index 3ce9855beaa..29de91b1d7f 100644
--- a/plugins/woocommerce/client/admin/config/development.json
+++ b/plugins/woocommerce/client/admin/config/development.json
@@ -45,6 +45,7 @@
"product-editor-template-system": false,
"use-wp-horizon": false,
"rest-api-v4": false,
+ "order-detail-redesign": false,
"product-variations-classic-redesign": false
}
}
diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss
index 6aabcdcc319..5783efacd96 100644
--- a/plugins/woocommerce/client/legacy/css/admin.scss
+++ b/plugins/woocommerce/client/legacy/css/admin.scss
@@ -3005,6 +3005,13 @@ ul.wc_coupon_list_block {
.woocommerce_page_wc-orders,
.post-type-shop_order {
+ // Gated behind the `order-detail-redesign` feature flag (body class added by OrderDetailRedesign\Init).
+ // `:has(#poststuff)` excludes the orders list screen (which doesn't render #poststuff).
+ &.woocommerce-feature-enabled-order-detail-redesign .wrap:has(#poststuff) {
+ max-width: 1200px;
+ margin-inline: auto;
+ }
+
.tablenav .one-page .displaying-num {
display: none;
}
diff --git a/plugins/woocommerce/src/Admin/Features/Features.php b/plugins/woocommerce/src/Admin/Features/Features.php
index c28efc76a87..87458ed0326 100644
--- a/plugins/woocommerce/src/Admin/Features/Features.php
+++ b/plugins/woocommerce/src/Admin/Features/Features.php
@@ -151,6 +151,10 @@ class Features {
if ( FeaturesUtil::feature_is_enabled( 'blueprint' ) ) {
new \Automattic\WooCommerce\Admin\Features\Blueprint\Init();
}
+
+ if ( FeaturesUtil::feature_is_enabled( 'order-detail-redesign' ) ) {
+ new \Automattic\WooCommerce\Internal\Features\OrderDetailRedesign\Init();
+ }
}
/**
diff --git a/plugins/woocommerce/src/Internal/Features/OrderDetailRedesign/Init.php b/plugins/woocommerce/src/Internal/Features/OrderDetailRedesign/Init.php
new file mode 100644
index 00000000000..554270ed0b2
--- /dev/null
+++ b/plugins/woocommerce/src/Internal/Features/OrderDetailRedesign/Init.php
@@ -0,0 +1,53 @@
+<?php
+/**
+ * WooCommerce Order Detail Redesign feature loader.
+ *
+ * @package WooCommerce
+ */
+
+declare( strict_types = 1 );
+
+namespace Automattic\WooCommerce\Internal\Features\OrderDetailRedesign;
+
+/**
+ * Loads support for the redesigned WooCommerce order detail page.
+ *
+ * Manually instantiated from `Features::load_features()` when the
+ * `order-detail-redesign` feature flag is enabled (see
+ * `client/admin/config/core.json`). Lives in the `Internal` namespace
+ * because the feature class is not part of the public API surface.
+ *
+ * @since 10.9.0
+ */
+class Init {
+
+ const FEATURE_ID = 'order-detail-redesign';
+
+ /**
+ * Constructor.
+ */
+ public function __construct() {
+ if ( ! is_admin() ) {
+ return;
+ }
+
+ add_filter( 'admin_body_class', array( $this, 'handle_admin_body_class' ) );
+ }
+
+ /**
+ * Adds the feature body class to every admin page while the feature is enabled.
+ *
+ * Screen-level scoping is handled by the CSS selectors, which chain this
+ * class with the WP-provided page classes (`.woocommerce_page_wc-orders`,
+ * `.post-type-shop_order`) and qualifiers like `:has(#poststuff)` so the
+ * styles only apply on the actual order edit/new screens.
+ *
+ * @internal
+ *
+ * @param string $classes Existing space-separated body classes.
+ * @return string
+ */
+ public function handle_admin_body_class( string $classes ): string {
+ return $classes . ' woocommerce-feature-enabled-' . self::FEATURE_ID;
+ }
+}