Commit ce2198184d1 for woocommerce
commit ce2198184d10fa7952ca0570b8780fcea650e1ff
Author: Jill Q. <jill.quek@automattic.com>
Date: Thu Jun 11 18:25:43 2026 +0800
Refresh legacy admin empty states (#64645)
* Refresh legacy admin empty states
* Refresh legacy admin empty states
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
diff --git a/plugins/woocommerce/changelog/sprinkle-orders-empty-state b/plugins/woocommerce/changelog/sprinkle-orders-empty-state
new file mode 100644
index 00000000000..83ebfb16d3b
--- /dev/null
+++ b/plugins/woocommerce/changelog/sprinkle-orders-empty-state
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Reduce the visual weight of legacy admin empty states to align with WordPress admin styling.
diff --git a/plugins/woocommerce/client/legacy/css/_variables.scss b/plugins/woocommerce/client/legacy/css/_variables.scss
index 158f3773496..5e5dbe73c24 100644
--- a/plugins/woocommerce/client/legacy/css/_variables.scss
+++ b/plugins/woocommerce/client/legacy/css/_variables.scss
@@ -35,6 +35,10 @@ $radius-s: 2px !default; // Small
// Adjacent work in #64280 adds $gray-700 and $gray-900 — coordinate on merge.
$gray-100: #f6f7f7 !default; // Subtle backgrounds.
$gray-200: #dcdcde !default; // Borders, dividers.
+$gray-400: #cccccc !default; // Matches Core $gray-400.
+
+// Spacing tokens — mirrors WP Design System naming.
+$grid-unit-60: 48px !default; // Matches Core $grid-unit-60.
// export vars as CSS vars
:root {
diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss
index 2509bac2d4d..6804c3ff89e 100644
--- a/plugins/woocommerce/client/legacy/css/admin.scss
+++ b/plugins/woocommerce/client/legacy/css/admin.scss
@@ -7543,84 +7543,72 @@ table.bar_chart {
}
}
-.woocommerce_page_wc-orders,
-.post-type-shop_order {
- .woocommerce-BlankState-message::before {
- @include icon("\e01d");
- }
-}
-
-.post-type-shop_coupon .woocommerce-BlankState-message::before {
- @include icon("\e600");
-}
-
-.post-type-product .woocommerce-BlankState-message::before {
- @include icon("\e006");
-}
-
-.woocommerce-BlankState--api .woocommerce-BlankState-message::before {
- @include icon("\e01c");
-}
-
-.woocommerce-BlankState--webhooks .woocommerce-BlankState-message::before {
- @include icon("\e01b");
-}
-
.woocommerce-BlankState {
+ max-width: 764px;
+ margin: auto;
text-align: center;
- padding: 5em 0 0;
+ padding: $grid-unit-60 0;
.woocommerce-BlankState-message {
- color: #aaa;
- margin: 0 auto 1.5em;
- line-height: 1.5em;
- font-size: 1.2em;
+ color: $gray-900;
+ margin: 0 auto 12px;
+ line-height: 1.4;
+ font-size: 13px;
+ font-weight: 400;
max-width: 500px;
+ }
- &::before {
- color: #ddd;
- text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2),
- 0 1px 0 rgba(255, 255, 255, 0.8);
- font-size: 8em;
- display: block;
- position: relative !important;
- top: auto;
- left: auto;
- line-height: 1em;
- margin: 0 0 0.1875em;
- }
+ .woocommerce-BlankState-buttons {
+ margin-bottom: 32px;
}
+}
- .woocommerce-BlankState-cta {
- font-size: 1.2em;
- padding: 0.75em 1.5em;
- margin: 0 0.25em;
- height: auto;
- display: inline-block !important;
+.woocommerce-BlankState--orders,
+.woocommerce-BlankState--products,
+.woocommerce-BlankState--coupons,
+.woocommerce-BlankState--api,
+.woocommerce-BlankState--webhooks,
+.woocommerce-BlankState--stock-notifications {
+ .woocommerce-BlankState-message::before {
+ content: "";
+ display: block;
+ width: 32px;
+ height: 32px;
+ margin: 0 auto 12px;
+ background-color: $gray-400;
+ -webkit-mask-image: var(--wc-blank-state-icon);
+ mask-image: var(--wc-blank-state-icon);
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
}
}
-.woocommerce-customer-stock-notifications .woocommerce-BlankState,
-.woocommerce_page_wc-orders .woocommerce-BlankState,
-.post-type-product .woocommerce-BlankState,
-.post-type-shop_order .woocommerce-BlankState {
- max-width: 764px;
- text-align: center;
- margin: auto;
+.woocommerce-BlankState--orders {
+ --wc-blank-state-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.83 6.342l.602.3.625-.25.443-.176v12.569l-.443-.178-.625-.25-.603.301-1.444.723-2.41-.804-.475-.158-.474.158-2.41.803-1.445-.722-.603-.3-.625.25-.443.177V6.215l.443.178.625.25.603-.301 1.444-.722 2.41.803.475.158.474-.158 2.41-.803 1.445.722zM20 4l-1.5.6-1 .4-2-1-3 1-3-1-2 1-1-.4L5 4v17l1.5-.6 1-.4 2 1 3-1 3 1 2-1 1 .4 1.5.6V4zm-3.5 6.25v-1.5h-8v1.5h8zm0 3v-1.5h-8v1.5h8zm-8 3v-1.5h8v1.5h-8z'%2F%3E%3C%2Fsvg%3E");
+}
- .woocommerce-BlankState-message {
- color: #444;
- font-size: 1.5em;
- margin: 0 auto 1em;
- }
+.woocommerce-BlankState--products {
+ --wc-blank-state-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 5.5h14a.5.5 0 01.5.5v1.5a.5.5 0 01-.5.5H5a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM4 9.232A2 2 0 013 7.5V6a2 2 0 012-2h14a2 2 0 012 2v1.5a2 2 0 01-1 1.732V18a2 2 0 01-2 2H6a2 2 0 01-2-2V9.232zm1.5.268V18a.5.5 0 00.5.5h12a.5.5 0 00.5-.5V9.5h-13z'%2F%3E%3C%2Fsvg%3E");
+}
- .woocommerce-BlankState-message::before {
- font-size: 120px;
- }
+.woocommerce-BlankState--coupons {
+ --wc-blank-state-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.75 4a.75.75 0 0 0-.75.75v7.826c0 .2.08.39.22.53l6.72 6.716a2.313 2.313 0 0 0 3.276-.001l5.61-5.611-.531-.53.532.528a2.315 2.315 0 0 0 0-3.264L13.104 4.22a.75.75 0 0 0-.53-.22H4.75ZM19 12.576a.815.815 0 0 1-.236.574l-5.61 5.611a.814.814 0 0 1-1.153 0L5.5 12.264V5.5h6.763l6.5 6.502a.816.816 0 0 1 .237.574ZM8.75 9.75a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z'%2F%3E%3C%2Fsvg%3E");
+}
- .woocommerce-BlankState-buttons {
- margin-bottom: 4em;
- }
+.woocommerce-BlankState--api {
+ --wc-blank-state-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 13.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM9 16a4.002 4.002 0 003.8-2.75H15V16h2.5v-2.75H19v-2.5h-6.2A4.002 4.002 0 005 12a4 4 0 004 4z'%2F%3E%3C%2Fsvg%3E");
+}
+
+.woocommerce-BlankState--webhooks {
+ --wc-blank-state-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17.389H8.444A5.194 5.194 0 1 1 8.444 7H10v1.5H8.444a3.694 3.694 0 0 0 0 7.389H10v1.5ZM14 7h1.556a5.194 5.194 0 0 1 0 10.39H14v-1.5h1.556a3.694 3.694 0 0 0 0-7.39H14V7Zm-4.5 6h5v-1.5h-5V13Z'%2F%3E%3C%2Fsvg%3E");
+}
+
+.woocommerce-BlankState--stock-notifications {
+ --wc-blank-state-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17 11.5c0 1.353.17 2.368.976 3 .266.209.602.376 1.024.5v1H5v-1c.422-.124.757-.291 1.024-.5.806-.632.976-1.647.976-3V9c0-2.8 2.2-5 5-5s5 2.2 5 5v2.5ZM15.5 9v2.5c0 .93.066 1.98.515 2.897l.053.103H7.932a4.018 4.018 0 0 0 .053-.103c.449-.917.515-1.967.515-2.897V9c0-1.972 1.528-3.5 3.5-3.5s3.5 1.528 3.5 3.5Zm-5.492 9.008c0-.176.023-.346.065-.508h3.854A1.996 1.996 0 0 1 12 20c-1.1 0-1.992-.892-1.992-1.992Z'%2F%3E%3C%2Fsvg%3E");
}
.post-type-product {
diff --git a/plugins/woocommerce/includes/admin/class-wc-admin-api-keys.php b/plugins/woocommerce/includes/admin/class-wc-admin-api-keys.php
index 3e358029914..29c6d127e6d 100644
--- a/plugins/woocommerce/includes/admin/class-wc-admin-api-keys.php
+++ b/plugins/woocommerce/includes/admin/class-wc-admin-api-keys.php
@@ -115,7 +115,7 @@ class WC_Admin_API_Keys {
echo '<div class="woocommerce-BlankState woocommerce-BlankState--api">';
?>
<h2 class="woocommerce-BlankState-message"><?php esc_html_e( 'The WooCommerce REST API allows external apps to view and manage store data. Access is granted only to those with valid API keys.', 'woocommerce' ); ?></h2>
- <a class="woocommerce-BlankState-cta button-primary button" href="<?php echo esc_url( admin_url( 'admin.php?page=wc-settings&tab=advanced§ion=keys&create-key=1' ) ); ?>"><?php esc_html_e( 'Create an API key', 'woocommerce' ); ?></a>
+ <a class="woocommerce-BlankState-cta button button-secondary" href="<?php echo esc_url( admin_url( 'admin.php?page=wc-settings&tab=advanced§ion=keys&create-key=1' ) ); ?>"><?php esc_html_e( 'Create an API key', 'woocommerce' ); ?></a>
<style type="text/css">#posts-filter .wp-list-table, #posts-filter .tablenav.top, .tablenav.bottom .actions { display: none; }</style>
<?php
}
diff --git a/plugins/woocommerce/includes/admin/class-wc-admin-webhooks.php b/plugins/woocommerce/includes/admin/class-wc-admin-webhooks.php
index d447a3a3d1d..e232d8384f0 100644
--- a/plugins/woocommerce/includes/admin/class-wc-admin-webhooks.php
+++ b/plugins/woocommerce/includes/admin/class-wc-admin-webhooks.php
@@ -317,7 +317,7 @@ class WC_Admin_Webhooks {
echo '<div class="woocommerce-BlankState woocommerce-BlankState--webhooks">';
?>
<h2 class="woocommerce-BlankState-message"><?php esc_html_e( 'Webhooks are event notifications sent to URLs of your choice. They can be used to integrate with third-party services which support them.', 'woocommerce' ); ?></h2>
- <a class="woocommerce-BlankState-cta button-primary button" href="<?php echo esc_url( admin_url( 'admin.php?page=wc-settings&tab=advanced§ion=webhooks&edit-webhook=0' ) ); ?>"><?php esc_html_e( 'Create a new webhook', 'woocommerce' ); ?></a>
+ <a class="woocommerce-BlankState-cta button button-secondary" href="<?php echo esc_url( admin_url( 'admin.php?page=wc-settings&tab=advanced§ion=webhooks&edit-webhook=0' ) ); ?>"><?php esc_html_e( 'Create a new webhook', 'woocommerce' ); ?></a>
<style type="text/css">#posts-filter .wp-list-table, #posts-filter .tablenav.top, .tablenav.bottom .actions { display: none; }</style>
<?php
}
diff --git a/plugins/woocommerce/includes/admin/list-tables/class-wc-admin-list-table-coupons.php b/plugins/woocommerce/includes/admin/list-tables/class-wc-admin-list-table-coupons.php
index fde7b32603a..061cbc6c679 100644
--- a/plugins/woocommerce/includes/admin/list-tables/class-wc-admin-list-table-coupons.php
+++ b/plugins/woocommerce/includes/admin/list-tables/class-wc-admin-list-table-coupons.php
@@ -42,10 +42,10 @@ class WC_Admin_List_Table_Coupons extends WC_Admin_List_Table {
* Render blank state.
*/
protected function render_blank_state() {
- echo '<div class="woocommerce-BlankState">';
+ echo '<div class="woocommerce-BlankState woocommerce-BlankState--coupons">';
echo '<h2 class="woocommerce-BlankState-message">' . esc_html__( 'Coupons are a great way to offer discounts and rewards to your customers. They will appear here once created.', 'woocommerce' ) . '</h2>';
- echo '<a class="woocommerce-BlankState-cta button-primary button" href="' . esc_url( admin_url( 'post-new.php?post_type=shop_coupon' ) ) . '">' . esc_html__( 'Create your first coupon', 'woocommerce' ) . '</a>';
- echo '<a class="woocommerce-BlankState-cta button" target="_blank" href="https://woocommerce.com/document/coupon-management/?utm_source=blankslate&utm_medium=product&utm_content=couponsdoc&utm_campaign=woocommerceplugin">' . esc_html__( 'Learn more about coupons', 'woocommerce' ) . '</a>';
+ echo '<a class="woocommerce-BlankState-cta button button-secondary" href="' . esc_url( admin_url( 'post-new.php?post_type=shop_coupon' ) ) . '">' . esc_html__( 'Create your first coupon', 'woocommerce' ) . '</a>';
+ echo '<a class="woocommerce-BlankState-cta button button-secondary" target="_blank" rel="noopener noreferrer" href="https://woocommerce.com/document/coupon-management/?utm_source=blankslate&utm_medium=product&utm_content=couponsdoc&utm_campaign=woocommerceplugin">' . esc_html__( 'Learn more about coupons', 'woocommerce' ) . '</a>';
echo '</div>';
}
diff --git a/plugins/woocommerce/includes/admin/list-tables/class-wc-admin-list-table-products.php b/plugins/woocommerce/includes/admin/list-tables/class-wc-admin-list-table-products.php
index cc8750af1e2..26aaab999c3 100644
--- a/plugins/woocommerce/includes/admin/list-tables/class-wc-admin-list-table-products.php
+++ b/plugins/woocommerce/includes/admin/list-tables/class-wc-admin-list-table-products.php
@@ -86,14 +86,14 @@ class WC_Admin_List_Table_Products extends WC_Admin_List_Table {
* Render blank state.
*/
protected function render_blank_state() {
- echo '<div class="woocommerce-BlankState">';
+ echo '<div class="woocommerce-BlankState woocommerce-BlankState--products">';
echo '<h2 class="woocommerce-BlankState-message">' . esc_html__( 'Ready to start selling something awesome?', 'woocommerce' ) . '</h2>';
echo '<div class="woocommerce-BlankState-buttons">';
- echo '<a class="woocommerce-BlankState-cta button-primary button" href="' . esc_url( admin_url( 'post-new.php?post_type=product&tutorial=true' ) ) . '">' . esc_html__( 'Create Product', 'woocommerce' ) . '</a>';
- echo '<a class="woocommerce-BlankState-cta button" href="' . esc_url( admin_url( 'edit.php?post_type=product&page=product_importer' ) ) . '">' . esc_html__( 'Start Import', 'woocommerce' ) . '</a>';
+ echo '<a class="woocommerce-BlankState-cta button button-secondary" href="' . esc_url( admin_url( 'post-new.php?post_type=product&tutorial=true' ) ) . '">' . esc_html__( 'Create Product', 'woocommerce' ) . '</a>';
+ echo '<a class="woocommerce-BlankState-cta button button-secondary" href="' . esc_url( admin_url( 'edit.php?post_type=product&page=product_importer' ) ) . '">' . esc_html__( 'Start Import', 'woocommerce' ) . '</a>';
echo '</div>';
diff --git a/plugins/woocommerce/src/Internal/Admin/Orders/ListTable.php b/plugins/woocommerce/src/Internal/Admin/Orders/ListTable.php
index 12567de5658..a0eb20d53e6 100644
--- a/plugins/woocommerce/src/Internal/Admin/Orders/ListTable.php
+++ b/plugins/woocommerce/src/Internal/Admin/Orders/ListTable.php
@@ -292,14 +292,14 @@ class ListTable extends WP_List_Table {
*/
public function render_blank_state(): void {
?>
- <div class="woocommerce-BlankState">
+ <div class="woocommerce-BlankState woocommerce-BlankState--orders">
<h2 class="woocommerce-BlankState-message">
<?php esc_html_e( 'When you receive a new order, it will appear here.', 'woocommerce' ); ?>
</h2>
<div class="woocommerce-BlankState-buttons">
- <a class="woocommerce-BlankState-cta button-primary button" target="_blank" href="https://woocommerce.com/document/managing-orders/?utm_source=blankslate&utm_medium=product&utm_content=ordersdoc&utm_campaign=woocommerceplugin"><?php esc_html_e( 'Learn more about orders', 'woocommerce' ); ?></a>
+ <a class="woocommerce-BlankState-cta button button-secondary" target="_blank" rel="noopener noreferrer" href="https://woocommerce.com/document/managing-orders/?utm_source=blankslate&utm_medium=product&utm_content=ordersdoc&utm_campaign=woocommerceplugin"><?php esc_html_e( 'Learn more about orders', 'woocommerce' ); ?></a>
</div>
<?php
diff --git a/plugins/woocommerce/src/Internal/StockNotifications/Admin/Templates/html-admin-notifications.php b/plugins/woocommerce/src/Internal/StockNotifications/Admin/Templates/html-admin-notifications.php
index 533660e524b..2a56440e6db 100644
--- a/plugins/woocommerce/src/Internal/StockNotifications/Admin/Templates/html-admin-notifications.php
+++ b/plugins/woocommerce/src/Internal/StockNotifications/Admin/Templates/html-admin-notifications.php
@@ -36,11 +36,11 @@ use Automattic\WooCommerce\Internal\StockNotifications\Admin\NotificationsPage;
<?php } else { ?>
- <div class="woocommerce-BlankState">
+ <div class="woocommerce-BlankState woocommerce-BlankState--stock-notifications">
<h2 class="woocommerce-BlankState-message">
<?php esc_html_e( 'No customers have signed up to receive stock notifications from you just yet.', 'woocommerce' ); ?>
</h2>
- <a class="woocommerce-BlankState-cta button-primary button" target="_blank" href="https://woocommerce.com/document/back-in-stock-notifications"><?php esc_html_e( 'Learn more', 'woocommerce' ); ?></a>
+ <a class="woocommerce-BlankState-cta button button-secondary" target="_blank" rel="noopener noreferrer" href="https://woocommerce.com/document/back-in-stock-notifications"><?php esc_html_e( 'Learn more', 'woocommerce' ); ?></a>
</div>
<?php } ?>