Skip to content

Commit 83716c5

Browse files
soderlindsoderlind
committed
Add WP 7+ design-token CSS overrides
- Add wp7-compat.css with CSS custom property overrides for WP 7+ - Add JS entry point for webpack build - Conditionally enqueue wp7-compat.css in SettingsTab and ReviewPage - Add wp7-compat entry to webpack.config.js
1 parent 2c99ab0 commit 83716c5

5 files changed

Lines changed: 233 additions & 0 deletions

File tree

‎src/css/wp7-compat.css‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
/**
2+
* WP 7.0+ admin compatibility overrides for Editorial Workflow.
3+
*
4+
* Loaded only on WordPress 7.0+ to align with the "Modern" default color
5+
* scheme and the new design tokens.
6+
*
7+
* Covers both settings.css and review.css overrides.
8+
*
9+
* @since 1.2.0
10+
* @package VmfaEditorialWorkflow
11+
*/
12+
13+
/* ==========================================================================
14+
Theme color: use CSS custom properties from wp-base-styles
15+
========================================================================== */
16+
17+
/* --- Settings --- */
18+
19+
/* Workflow settings highlight */
20+
.vmfa-workflow-settings {
21+
border-left-color: var(--wp-admin-theme-color);
22+
}
23+
24+
/* Folder icon accent */
25+
.vmfa-folder-icon {
26+
color: var(--wp-admin-theme-color);
27+
}
28+
29+
/* Default access notice */
30+
.vmfa-default-access-notice {
31+
border-left-color: var(--wp-admin-theme-color);
32+
background: rgba(var(--wp-admin-theme-color--rgb), 0.06);
33+
}
34+
35+
.vmfa-default-access-notice .dashicons {
36+
color: var(--wp-admin-theme-color);
37+
}
38+
39+
/* Column toggle hover */
40+
.vmfa-column-toggle:hover {
41+
color: var(--wp-admin-theme-color);
42+
}
43+
44+
/* Column indicator states */
45+
.vmfa-column-indicator.some {
46+
background: linear-gradient(135deg, var(--wp-admin-theme-color) 50%, #fff 50%);
47+
border-color: var(--wp-admin-theme-color);
48+
}
49+
50+
.vmfa-column-indicator.all {
51+
background: var(--wp-admin-theme-color);
52+
border-color: var(--wp-admin-theme-color);
53+
}
54+
55+
/* --- Review --- */
56+
57+
/* Media card hover/selected */
58+
.vmfa-media-card:hover {
59+
border-color: var(--wp-admin-theme-color);
60+
}
61+
62+
.vmfa-media-card.is-selected {
63+
border-color: var(--wp-admin-theme-color);
64+
box-shadow: 0 0 0 2px rgba(var(--wp-admin-theme-color--rgb), 0.25);
65+
}
66+
67+
/* Card title link hover */
68+
.vmfa-card-title a:hover {
69+
color: var(--wp-admin-theme-color);
70+
}
71+
72+
/* Selection count */
73+
.vmfa-selection-count {
74+
color: var(--wp-admin-theme-color);
75+
}
76+
77+
/* Primary action button */
78+
.vmfa-card-actions .button-primary {
79+
background: var(--wp-admin-theme-color);
80+
border-color: var(--wp-admin-theme-color);
81+
}
82+
83+
.vmfa-card-actions .button-primary:hover {
84+
background: var(--wp-admin-theme-color-darker-10);
85+
border-color: var(--wp-admin-theme-color-darker-10);
86+
}
87+
88+
/* Pagination current page */
89+
.vmfa-review-pagination .page-numbers.current {
90+
background: var(--wp-admin-theme-color);
91+
border-color: var(--wp-admin-theme-color);
92+
}
93+
94+
/* Pagination link hover */
95+
.vmfa-review-pagination .page-numbers:hover {
96+
background: #f0f0f0;
97+
}
98+
99+
/* ==========================================================================
100+
Design-token alignment: backgrounds & borders
101+
========================================================================== */
102+
103+
/* --- Settings --- */
104+
105+
/* Card header divider */
106+
.vmfa-card-header {
107+
border-bottom-color: #ddd;
108+
}
109+
110+
/* Permissions list borders */
111+
.vmfa-permissions-list {
112+
border-color: #ddd;
113+
}
114+
115+
.vmfa-permission-role {
116+
border-bottom-color: #ddd;
117+
}
118+
119+
/* Role header row background */
120+
.vmfa-role-header-row {
121+
background: #f0f0f0;
122+
}
123+
124+
.vmfa-role-header:hover {
125+
background: #e8e8e8;
126+
}
127+
128+
/* Settings actions divider */
129+
.vmfa-settings-actions {
130+
border-top-color: #ddd;
131+
}
132+
133+
/* Stat item dividers */
134+
.vmfa-stat-item {
135+
border-right-color: #ddd;
136+
}
137+
138+
/* Card border */
139+
.vmfa-card {
140+
border-color: #ddd;
141+
}
142+
143+
/* Workflow folder background */
144+
.vmfa-workflow-folder {
145+
background: #f0f0f0;
146+
}
147+
148+
/* Empty state */
149+
.vmfa-empty-state {
150+
border-color: #ddd;
151+
background: #f9f9f9;
152+
}
153+
154+
/* --- Review --- */
155+
156+
/* Card actions footer */
157+
.vmfa-card-actions {
158+
background: #f0f0f0;
159+
border-top-color: #ddd;
160+
}
161+
162+
/* Review header divider */
163+
.vmfa-review-header {
164+
border-bottom-color: #ddd;
165+
}
166+
167+
/* Toolbar border */
168+
.vmfa-review-toolbar {
169+
border-color: #ddd;
170+
}
171+
172+
/* Toolbar select-all divider */
173+
.vmfa-toolbar-select-all {
174+
border-right-color: #ddd;
175+
}
176+
177+
/* Media card border */
178+
.vmfa-media-card {
179+
border-color: #ddd;
180+
}
181+
182+
/* Pagination divider */
183+
.vmfa-review-pagination {
184+
border-top-color: #ddd;
185+
}
186+
187+
/* Empty state border */
188+
.vmfa-review-empty {
189+
border-color: #ddd;
190+
}
191+
192+
/* Card thumbnail gradient */
193+
.vmfa-card-thumbnail {
194+
background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
195+
}

‎src/js/wp7-compat.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/**
2+
* WP 7.0+ admin compatibility styles entry point.
3+
*
4+
* This module only imports the CSS override file so webpack extracts
5+
* it into build/wp7-compat.css for conditional PHP enqueuing.
6+
*/
7+
import '../css/wp7-compat.css';

‎src/php/Admin/ReviewPage.php‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,21 @@ public function enqueue_assets( string $hook_suffix ): void {
157157
// Enqueue dashicons for icons.
158158
wp_enqueue_style( 'dashicons' );
159159

160+
// WP 7+ design-token overrides.
161+
if ( function_exists( 'vmfo_is_wp7' ) && vmfo_is_wp7() ) {
162+
$wp7_asset_file = VMFA_EDITORIAL_WORKFLOW_PATH . 'build/wp7-compat.asset.php';
163+
$wp7_version = file_exists( $wp7_asset_file )
164+
? ( include $wp7_asset_file )['version'] ?? VMFA_EDITORIAL_WORKFLOW_VERSION
165+
: VMFA_EDITORIAL_WORKFLOW_VERSION;
166+
167+
wp_enqueue_style(
168+
'vmfa-editorial-workflow-wp7',
169+
VMFA_EDITORIAL_WORKFLOW_URL . 'build/wp7-compat.css',
170+
[ 'vmfa-review', 'wp-base-styles' ],
171+
$wp7_version
172+
);
173+
}
174+
160175
wp_localize_script(
161176
'vmfa-review',
162177
'vmfaReview',

‎src/php/Admin/SettingsTab.php‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,21 @@ public function enqueue_assets( string $active_tab, string $active_subtab ): voi
102102
VMFA_EDITORIAL_WORKFLOW_PATH . 'languages'
103103
);
104104

105+
// WP 7+ design-token overrides.
106+
if ( function_exists( 'vmfo_is_wp7' ) && vmfo_is_wp7() ) {
107+
$wp7_asset_file = VMFA_EDITORIAL_WORKFLOW_PATH . 'build/wp7-compat.asset.php';
108+
$wp7_version = file_exists( $wp7_asset_file )
109+
? ( include $wp7_asset_file )['version'] ?? VMFA_EDITORIAL_WORKFLOW_VERSION
110+
: VMFA_EDITORIAL_WORKFLOW_VERSION;
111+
112+
wp_enqueue_style(
113+
'vmfa-editorial-workflow-wp7',
114+
VMFA_EDITORIAL_WORKFLOW_URL . 'build/wp7-compat.css',
115+
[ 'vmfa-editorial-workflow-settings', 'wp-base-styles' ],
116+
$wp7_version
117+
);
118+
}
119+
105120
wp_localize_script(
106121
'vmfa-editorial-workflow-settings',
107122
'vmfaSettings',

‎webpack.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ module.exports = {
1010
__dirname,
1111
'src/js/media-library-enforcer.js'
1212
),
13+
'wp7-compat': path.resolve( __dirname, 'src/js/wp7-compat.js' ),
1314
},
1415
output: {
1516
...defaultConfig.output,

0 commit comments

Comments
 (0)