Skip to content

Commit 802ae65

Browse files
thomasballarddevthomasballarddev
committed
feat(wp-blocks): changes according to review, color pallete updated
1 parent e54f4df commit 802ae65

3 files changed

Lines changed: 128 additions & 33 deletions

File tree

‎wp-blocks/mcld-services/src/mcld-services/edit.js‎

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,13 @@ export default function Edit({ attributes, setAttributes }) {
2626
setError(null);
2727
setServices(null);
2828
fetch(`${apiUrl.replace(/\/$/, '')}/api/public/services`)
29-
.then((r) => r.json())
29+
.then(async (r) => {
30+
const data = await r.json().catch(() => null);
31+
if (!r.ok || !Array.isArray(data)) {
32+
throw new Error('mattia is cooked');
33+
}
34+
return data;
35+
})
3036
.then(setServices)
3137
.catch(() =>
3238
setError(__('Could not load services. Check the API URL.', 'mcld-services')),
@@ -60,9 +66,11 @@ export default function Edit({ attributes, setAttributes }) {
6066
<button
6167
key={tab.id}
6268
type="button"
69+
id={`mcld-tab-${tab.id}`}
6370
className={`mcld-tab${activeTab === tab.id ? ' is-active' : ''}`}
6471
role="tab"
6572
aria-selected={activeTab === tab.id}
73+
aria-controls={`mcld-panel-${tab.id}`}
6674
onClick={() => setActiveTab(tab.id)}
6775
>
6876
{tab.label}
@@ -71,7 +79,13 @@ export default function Edit({ attributes, setAttributes }) {
7179
</div>
7280

7381
{activeTab === 'services' && (
74-
<div className="mcld-panel" data-panel="services">
82+
<div
83+
id="mcld-panel-services"
84+
className="mcld-panel"
85+
data-panel="services"
86+
role="tabpanel"
87+
aria-labelledby="mcld-tab-services"
88+
>
7589
{!apiUrl && (
7690
<p>
7791
{__(
@@ -101,13 +115,25 @@ export default function Edit({ attributes, setAttributes }) {
101115
)}
102116

103117
{activeTab === 'membership' && (
104-
<div className="mcld-panel" data-panel="membership">
118+
<div
119+
id="mcld-panel-membership"
120+
className="mcld-panel"
121+
data-panel="membership"
122+
role="tabpanel"
123+
aria-labelledby="mcld-tab-membership"
124+
>
105125
<p>{__('Coming soon.', 'mcld-services')}</p>
106126
</div>
107127
)}
108128

109129
{activeTab === 'donations' && (
110-
<div className="mcld-panel" data-panel="donations">
130+
<div
131+
id="mcld-panel-donations"
132+
className="mcld-panel"
133+
data-panel="donations"
134+
role="tabpanel"
135+
aria-labelledby="mcld-tab-donations"
136+
>
111137
<p>{__('Coming soon.', 'mcld-services')}</p>
112138
</div>
113139
)}

‎wp-blocks/mcld-services/src/mcld-services/render.php‎

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
if (!is_array($services)) {
2727
$services = [];
2828
}
29-
set_transient($transient_key, $services, 60);
29+
set_transient($transient_key, $services, 300);
3030
}
3131
}
3232

@@ -37,34 +37,46 @@
3737
<div class="mcld-tabs" role="tablist">
3838
<button
3939
type="button"
40+
id="mcld-tab-services"
4041
class="mcld-tab is-active"
4142
role="tab"
4243
aria-selected="true"
44+
aria-controls="mcld-panel-services"
4345
data-tab="services"
4446
>
4547
<?= esc_html__('Services', 'mcld-services') ?>
4648
</button>
4749
<button
4850
type="button"
51+
id="mcld-tab-membership"
4952
class="mcld-tab"
5053
role="tab"
5154
aria-selected="false"
55+
aria-controls="mcld-panel-membership"
5256
data-tab="membership"
5357
>
5458
<?= esc_html__('Membership', 'mcld-services') ?>
5559
</button>
5660
<button
5761
type="button"
62+
id="mcld-tab-donations"
5863
class="mcld-tab"
5964
role="tab"
6065
aria-selected="false"
66+
aria-controls="mcld-panel-donations"
6167
data-tab="donations"
6268
>
6369
<?= esc_html__('Donations', 'mcld-services') ?>
6470
</button>
6571
</div>
6672

67-
<div class="mcld-panel" data-panel="services" role="tabpanel">
73+
<div
74+
id="mcld-panel-services"
75+
class="mcld-panel"
76+
data-panel="services"
77+
role="tabpanel"
78+
aria-labelledby="mcld-tab-services"
79+
>
6880
<div class="mcld-services-list">
6981
<?php if (empty($services)): ?>
7082
<p class="mcld-services-empty"><?= esc_html__('No active services available.', 'mcld-services') ?></p>
@@ -106,11 +118,25 @@ class="mcld-service-card"
106118
</div>
107119
</div>
108120

109-
<div class="mcld-panel" data-panel="membership" role="tabpanel" hidden>
121+
<div
122+
id="mcld-panel-membership"
123+
class="mcld-panel"
124+
data-panel="membership"
125+
role="tabpanel"
126+
aria-labelledby="mcld-tab-membership"
127+
hidden
128+
>
110129
<p><?= esc_html__('Coming soon.', 'mcld-services') ?></p>
111130
</div>
112131

113-
<div class="mcld-panel" data-panel="donations" role="tabpanel" hidden>
132+
<div
133+
id="mcld-panel-donations"
134+
class="mcld-panel"
135+
data-panel="donations"
136+
role="tabpanel"
137+
aria-labelledby="mcld-tab-donations"
138+
hidden
139+
>
114140
<p><?= esc_html__('Coming soon.', 'mcld-services') ?></p>
115141
</div>
116142

‎wp-blocks/mcld-services/src/mcld-services/style.scss‎

Lines changed: 68 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,23 @@
11
.wp-block-mcld-mcld-services {
2+
--mcld-background: oklch(0.9825 0.0098 87.47);
3+
--mcld-foreground: oklch(0.3211 0 0);
4+
--mcld-muted-foreground: oklch(0.5510 0.0234 264.3637);
5+
--mcld-primary: oklch(0.8426 0.0646 251.4359);
6+
--mcld-secondary: oklch(0.9125 0.1380 99.6725);
7+
--mcld-accent: oklch(0.9514 0.0250 236.8242);
8+
--mcld-ring: oklch(0.6231 0.1880 259.8145);
9+
--mcld-border: oklch(0.9276 0.0058 264.5313);
10+
--mcld-card: #fff;
11+
--mcld-destructive: oklch(0.6368 0.2078 25.3313);
12+
--mcld-radius: 0.5rem;
13+
14+
font-family: Poppins, "Helvetica", "Arial", sans-serif;
15+
color: var(--mcld-foreground);
16+
217
.mcld-tabs {
318
display: flex;
4-
gap: 0.5rem;
5-
border-bottom: 1px solid #e0e0e0;
19+
gap: 0.25rem;
20+
border-bottom: 1px solid var(--mcld-border);
621
margin-bottom: 1.5rem;
722
}
823

@@ -12,18 +27,26 @@
1227
border: 0;
1328
border-bottom: 2px solid transparent;
1429
cursor: pointer;
30+
font-family: inherit;
1531
font-size: 1rem;
1632
font-weight: 500;
17-
padding: 0.75rem 1rem;
18-
color: #555;
33+
padding: 0.75rem 1.25rem;
34+
color: var(--mcld-muted-foreground);
35+
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
1936

2037
&:hover {
21-
color: #111;
38+
color: var(--mcld-ring);
39+
background: var(--mcld-accent);
40+
}
41+
42+
&:focus-visible {
43+
outline: 2px solid var(--mcld-ring);
44+
outline-offset: 2px;
2245
}
2346

2447
&.is-active {
25-
color: #111;
26-
border-bottom-color: #111;
48+
color: var(--mcld-ring);
49+
border-bottom-color: var(--mcld-ring);
2750
}
2851
}
2952

@@ -41,94 +64,114 @@
4164
appearance: none;
4265
text-align: left;
4366
width: 100%;
44-
border: 1px solid #e0e0e0;
45-
border-radius: 8px;
67+
border: 1px solid var(--mcld-border);
68+
border-radius: var(--mcld-radius);
4669
padding: 1.25rem;
47-
background: #fff;
70+
background: var(--mcld-card);
4871
cursor: pointer;
49-
transition: border-color 0.15s ease, box-shadow 0.15s ease;
72+
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
5073

5174
&:hover {
52-
border-color: #111;
53-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
75+
border-color: var(--mcld-primary);
76+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
77+
transform: translateY(-2px);
78+
}
79+
80+
&:focus-visible {
81+
outline: 2px solid var(--mcld-ring);
82+
outline-offset: 2px;
5483
}
5584

5685
h3 {
5786
margin: 0 0 0.5rem;
5887
font-size: 1.1rem;
88+
color: var(--mcld-foreground);
5989
}
6090

6191
p {
6292
margin: 0 0 0.5rem;
63-
color: #555;
93+
color: var(--mcld-muted-foreground);
6494
font-size: 0.9rem;
6595
}
6696

6797
.mcld-service-price {
6898
font-weight: 600;
69-
color: #111;
99+
color: var(--mcld-ring);
70100
font-size: 1rem;
71101
margin-bottom: 0;
72102
}
73103
}
74104

75105
.mcld-services-detail {
76106
max-width: 640px;
107+
background: var(--mcld-background);
108+
border: 1px solid var(--mcld-border);
109+
border-radius: var(--mcld-radius);
110+
padding: 1.5rem;
77111

78112
.mcld-back-button {
79113
appearance: none;
80114
background: transparent;
81115
border: 0;
82116
cursor: pointer;
83-
color: #555;
117+
color: var(--mcld-muted-foreground);
84118
padding: 0;
85119
margin-bottom: 1rem;
120+
font-family: inherit;
86121
font-size: 0.9rem;
87122

88123
&:hover {
89-
color: #111;
124+
color: var(--mcld-ring);
90125
}
91126
}
92127

93128
.mcld-detail-title {
94129
margin: 0 0 0.5rem;
95130
font-size: 1.5rem;
131+
color: var(--mcld-foreground);
96132
}
97133

98134
.mcld-detail-description {
99135
margin: 0 0 1rem;
100-
color: #333;
136+
color: var(--mcld-foreground);
101137
line-height: 1.5;
102138
}
103139

104140
.mcld-detail-price {
105141
font-weight: 600;
106142
font-size: 1.25rem;
143+
color: var(--mcld-ring);
107144
margin: 0 0 1.5rem;
108145
}
109146

110147
.mcld-register-button {
111148
display: inline-block;
112-
background: #111;
149+
background: var(--mcld-ring);
113150
color: #fff;
114151
padding: 0.75rem 1.5rem;
115-
border-radius: 6px;
152+
border-radius: var(--mcld-radius);
116153
text-decoration: none;
117154
font-weight: 600;
155+
transition: background 0.15s ease, transform 0.15s ease;
118156

119157
&:hover {
120-
background: #333;
158+
background: oklch(0.5461 0.2152 262.8809);
159+
transform: translateY(-1px);
160+
}
161+
162+
&:focus-visible {
163+
outline: 2px solid var(--mcld-ring);
164+
outline-offset: 2px;
121165
}
122166
}
123167
}
124168

125-
.mcld-services-empty,
126-
.mcld-services-error {
127-
color: #555;
169+
.mcld-services-empty {
170+
color: var(--mcld-muted-foreground);
128171
}
129172

130173
.mcld-services-error {
131-
color: #c00;
174+
color: var(--mcld-destructive);
132175
}
133176

134177
.mcld-services-data {

0 commit comments

Comments
 (0)