Skip to content

Commit 16df8d5

Browse files
troychaplintroychaplin
authored
Update/settings page (#171)
* add: demo settings page * change: core settings pages * add: all setting pages * change: settings layouts * change: column data * change: column widths * change: styles * fix: message display and count * fix: post meta priority level * update: changelog * fix: lint issues * fix: lint issues * change: settings page styles * change: settings page styles * setting styles * change: settings code cleanup * change: setting page styles * change: validation setting column data
1 parent 9e7c29d commit 16df8d5

92 files changed

Lines changed: 3027 additions & 1382 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎ADDING-COLUMNS.md‎

Lines changed: 349 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,349 @@
1+
# Adding New Columns to Settings Table
2+
3+
This guide shows you how to easily add new columns to the DataViews-style settings table.
4+
5+
## Quick Example: Add a "Priority" Column
6+
7+
### Step 1: Define the Column (`src/settings-demo/config/columns.js`)
8+
9+
```javascript
10+
export const COLUMNS = [
11+
{
12+
id: 'check',
13+
header: __('Validation Check', 'block-accessibility-checks'),
14+
width: '1fr',
15+
minWidth: '300px',
16+
primary: true,
17+
},
18+
{
19+
id: 'block',
20+
header: __('Block', 'block-accessibility-checks'),
21+
width: '180px',
22+
},
23+
// 🆕 ADD NEW COLUMN HERE
24+
{
25+
id: 'priority',
26+
header: __('Priority', 'block-accessibility-checks'),
27+
width: '120px',
28+
enableSorting: true, // Future feature
29+
},
30+
{
31+
id: 'level',
32+
header: __('Level', 'block-accessibility-checks'),
33+
width: '240px',
34+
align: 'right',
35+
},
36+
];
37+
```
38+
39+
### Step 2: Render the Cell Content (`src/settings-demo/components/TableRow.js`)
40+
41+
Add a case in the `renderCell()` function:
42+
43+
```javascript
44+
const renderCell = (column) => {
45+
switch (column.id) {
46+
case 'check':
47+
return (
48+
<div className="ba11y-dataview-cell-content">
49+
<span className="ba11y-check-description">
50+
{row.check.description}
51+
</span>
52+
</div>
53+
);
54+
55+
// ... other cases ...
56+
57+
// 🆕 ADD NEW CASE HERE
58+
case 'priority':
59+
return (
60+
<div className="ba11y-dataview-cell-content">
61+
<span className="ba11y-priority-badge">
62+
{row.check.priority || 'Medium'}
63+
</span>
64+
</div>
65+
);
66+
67+
case 'level':
68+
// ... existing code ...
69+
}
70+
};
71+
```
72+
73+
### Step 3: (Optional) Add Styles (`src/settings-demo.scss`)
74+
75+
```scss
76+
// Priority badge
77+
.ba11y-priority-badge {
78+
display: inline-flex;
79+
align-items: center;
80+
padding: 3px 8px;
81+
background: #fff3cd;
82+
border: 1px solid #ffc107;
83+
border-radius: 2px;
84+
font-size: 11px;
85+
color: #856404;
86+
font-weight: 500;
87+
text-transform: uppercase;
88+
}
89+
```
90+
91+
### Step 4: Rebuild
92+
93+
```bash
94+
npm run build
95+
```
96+
97+
**That's it!** Your new column will automatically appear in the table.
98+
99+
---
100+
101+
## Column Configuration Options
102+
103+
```javascript
104+
{
105+
id: 'unique-id', // Required: Unique column identifier
106+
header: 'Display Name', // Required: Column header text (use __ for i18n)
107+
width: '200px', // Required: CSS width (px, %, 1fr, etc.)
108+
minWidth: '100px', // Optional: Minimum width
109+
maxWidth: '500px', // Optional: Maximum width
110+
enableSorting: true, // Optional: Enable sorting (future feature)
111+
align: 'left', // Optional: left|center|right (default: left)
112+
primary: false, // Optional: Bold treatment (default: false)
113+
}
114+
```
115+
116+
---
117+
118+
## More Column Examples
119+
120+
### Status Column (with colored badge)
121+
122+
```javascript
123+
// In columns.js
124+
{
125+
id: 'status',
126+
header: __('Status', 'block-accessibility-checks'),
127+
width: '100px',
128+
}
129+
130+
// In TableRow.js
131+
case 'status':
132+
const statusClass = row.check.enabled ? 'status-active' : 'status-inactive';
133+
return (
134+
<div className="ba11y-dataview-cell-content">
135+
<span className={`ba11y-status-badge ${statusClass}`}>
136+
{row.check.enabled ? 'Active' : 'Inactive'}
137+
</span>
138+
</div>
139+
);
140+
141+
// In settings-demo.scss
142+
.ba11y-status-badge {
143+
display: inline-flex;
144+
padding: 3px 8px;
145+
border-radius: 2px;
146+
font-size: 11px;
147+
font-weight: 500;
148+
149+
&.status-active {
150+
background: #d1f4e0;
151+
color: #007017;
152+
}
153+
154+
&.status-inactive {
155+
background: #f0f0f1;
156+
color: #646970;
157+
}
158+
}
159+
```
160+
161+
### Help Link Column
162+
163+
```javascript
164+
// In columns.js
165+
{
166+
id: 'help',
167+
header: '',
168+
width: '60px',
169+
align: 'center',
170+
}
171+
172+
// In TableRow.js
173+
case 'help':
174+
return (
175+
<div className="ba11y-dataview-cell-content">
176+
<a
177+
href={`https://example.com/docs/${row.check.name}`}
178+
target="_blank"
179+
rel="noopener noreferrer"
180+
className="ba11y-help-link"
181+
>
182+
<Icon icon={help} />
183+
</a>
184+
</div>
185+
);
186+
```
187+
188+
### Actions Menu Column
189+
190+
```javascript
191+
// In columns.js
192+
{
193+
id: 'actions',
194+
header: '',
195+
width: '60px',
196+
align: 'right',
197+
}
198+
199+
// In TableRow.js (using WordPress components)
200+
import { DropdownMenu } from '@wordpress/components';
201+
import { moreVertical } from '@wordpress/icons';
202+
203+
case 'actions':
204+
return (
205+
<div className="ba11y-dataview-cell-content">
206+
<DropdownMenu
207+
icon={moreVertical}
208+
label={__('Actions', 'block-accessibility-checks')}
209+
controls={[
210+
{
211+
title: __('Reset to default', 'block-accessibility-checks'),
212+
onClick: () => handleReset(row.id),
213+
},
214+
{
215+
title: __('View documentation', 'block-accessibility-checks'),
216+
onClick: () => handleViewDocs(row.id),
217+
},
218+
]}
219+
/>
220+
</div>
221+
);
222+
```
223+
224+
---
225+
226+
## Tips & Best Practices
227+
228+
### Column Widths:
229+
- Use `1fr` for flexible columns that fill available space
230+
- Use `px` for fixed-width columns (badges, actions, etc.)
231+
- Set `minWidth` to prevent columns from getting too narrow
232+
- First column usually `1fr` with a `minWidth`
233+
234+
### Column Order:
235+
- Primary content (check name) comes first
236+
- Metadata (block, category) in middle
237+
- Actions/controls (level, actions) on right
238+
239+
### Alignment:
240+
- Text content: `align: 'left'` (default)
241+
- Numbers: `align: 'right'`
242+
- Icons/actions: `align: 'center'` or `'right'`
243+
244+
### Responsive:
245+
- Columns automatically stack on mobile (<782px)
246+
- Consider which columns are most important
247+
- Very wide tables might need horizontal scroll
248+
249+
### Accessibility:
250+
- Use semantic `role` attributes (already handled)
251+
- Ensure badges have proper color contrast
252+
- Interactive elements need focus states
253+
- Screen readers should announce column headers
254+
255+
---
256+
257+
## Common Patterns
258+
259+
### Badge with Icon:
260+
```javascript
261+
import { check } from '@wordpress/icons';
262+
263+
<span className="ba11y-badge">
264+
<Icon icon={check} size={16} />
265+
{label}
266+
</span>
267+
```
268+
269+
### Tooltip on Hover:
270+
```javascript
271+
import { Tooltip } from '@wordpress/components';
272+
273+
<Tooltip text={row.check.description}>
274+
<span className="ba11y-badge">{label}</span>
275+
</Tooltip>
276+
```
277+
278+
### Conditional Rendering:
279+
```javascript
280+
case 'advanced':
281+
if (!row.check.supportsAdvanced) {
282+
return <div className="ba11y-dataview-cell-content">—</div>;
283+
}
284+
return (
285+
<div className="ba11y-dataview-cell-content">
286+
{/* Your content */}
287+
</div>
288+
);
289+
```
290+
291+
---
292+
293+
## Testing Your New Column
294+
295+
1. **Build the project:**
296+
```bash
297+
npm run build
298+
```
299+
300+
2. **Check in browser:**
301+
- Navigate to Block Checks → Demo Settings
302+
- Verify column appears with correct header
303+
- Check alignment and spacing
304+
- Test responsive behavior (resize window)
305+
306+
3. **Verify accessibility:**
307+
- Tab through table with keyboard
308+
- Use screen reader to verify column headers
309+
- Check color contrast for badges
310+
311+
4. **Test edge cases:**
312+
- Empty/null values
313+
- Very long text
314+
- Special characters
315+
- Different browsers
316+
317+
---
318+
319+
## Removing a Column
320+
321+
Simply remove it from the `COLUMNS` array in `columns.js`:
322+
323+
```javascript
324+
// Before
325+
export const COLUMNS = [
326+
{ id: 'check', ... },
327+
{ id: 'block', ... },
328+
{ id: 'category', ... }, // ← Remove this
329+
{ id: 'level', ... },
330+
];
331+
332+
// After
333+
export const COLUMNS = [
334+
{ id: 'check', ... },
335+
{ id: 'block', ... },
336+
{ id: 'level', ... },
337+
];
338+
```
339+
340+
The grid will automatically adjust!
341+
342+
---
343+
344+
## Need Help?
345+
346+
- Check existing columns in `columns.js` for examples
347+
- Look at `TableRow.js` to see how cells are rendered
348+
- Review `settings-demo.scss` for styling patterns
349+
- Test changes incrementally (one column at a time)

0 commit comments

Comments
 (0)