Skip to content

Commit 6c85663

Browse files
ntsekourastyxla
ntsekouras
and
tyxla
authored
Experiment: Taxonomies implement auto-fill labels (#77786)
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org>
1 parent 8ece9a1 commit 6c85663

5 files changed

Lines changed: 192 additions & 6 deletions

File tree

‎packages/user-taxonomies/src/fields/labels.tsx‎

Lines changed: 94 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
/**
22
* WordPress dependencies
33
*/
4+
import { Button } from '@wordpress/components';
5+
import type { DataFormControlProps, Field, Form } from '@wordpress/dataviews';
46
import { __ } from '@wordpress/i18n';
5-
import type { Field, Form } from '@wordpress/dataviews';
7+
import { trash } from '@wordpress/icons';
8+
9+
import { Stack, Text } from '@wordpress/ui';
610

711
/**
812
* Internal dependencies
913
*/
1014
import type { StoredLabels, TaxonomyFormData } from '../types';
11-
import { STRING_LABEL_KEYS } from '../utils';
15+
import { deriveLabels, STRING_LABEL_KEYS } from '../utils';
1216

1317
type LabelFieldOptions = {
1418
placeholder?: string;
@@ -157,8 +161,95 @@ export const chooseFromMostUsedField = labelField(
157161
}
158162
);
159163

164+
function LabelsActionsEdit( {
165+
data,
166+
onChange,
167+
}: DataFormControlProps< TaxonomyFormData > ) {
168+
const plural = data.title.raw.trim();
169+
const singular = data.config.labels.singular_name.trim();
170+
const canAutoFill = !! plural.length && !! singular.length;
171+
const hasOverrides = STRING_LABEL_KEYS.some(
172+
( key ) =>
173+
key !== 'singular_name' &&
174+
( data.config.labels[ key ] ?? '' ) !== ''
175+
);
176+
return (
177+
<Stack direction="column" gap="md">
178+
<Text variant="body-md" className="taxonomy-form__help-text">
179+
{ __(
180+
'Override the text WordPress shows in admin lists, menus, and forms. Auto-fill replaces every label below with values derived from the current plural and singular names — including any you have already customized. Clearing removes all overrides so WordPress falls back to its defaults. If you rename the taxonomy after auto-filling, click Auto-fill again to keep them in sync.'
181+
) }
182+
</Text>
183+
<Stack direction="row" justify="flex-end" gap="sm">
184+
<Button
185+
__next40pxDefaultSize
186+
variant="secondary"
187+
size="compact"
188+
accessibleWhenDisabled
189+
disabled={ ! canAutoFill }
190+
onClick={ () =>
191+
onChange( {
192+
config: {
193+
...data.config,
194+
labels: {
195+
...data.config.labels,
196+
...deriveLabels( plural, singular ),
197+
},
198+
},
199+
} )
200+
}
201+
>
202+
{ __( 'Auto-fill labels' ) }
203+
</Button>
204+
<Button
205+
__next40pxDefaultSize
206+
size="compact"
207+
icon={ trash }
208+
isDestructive
209+
label={ __( 'Clear labels' ) }
210+
accessibleWhenDisabled
211+
disabled={ ! hasOverrides }
212+
onClick={ () => {
213+
const cleared: StoredLabels = {
214+
singular_name: data.config.labels.singular_name,
215+
};
216+
for ( const key of STRING_LABEL_KEYS ) {
217+
if ( key !== 'singular_name' ) {
218+
cleared[ key ] = '';
219+
}
220+
}
221+
onChange( {
222+
config: { ...data.config, labels: cleared },
223+
} );
224+
} }
225+
/>
226+
</Stack>
227+
</Stack>
228+
);
229+
}
230+
231+
// TODO: Replace this phantom field once DataForm supports per-card header
232+
// actions or arbitrary React among children. We register a no-value Field
233+
// solely to render the Labels card's description and action buttons,
234+
// suppressing its label via labelPosition: 'none'.
235+
export const labelsActionsField: Field< TaxonomyFormData > = {
236+
id: '__labels_actions',
237+
label: '',
238+
getValue: () => '',
239+
setValue: () => ( {} ),
240+
Edit: LabelsActionsEdit,
241+
enableSorting: false,
242+
filterBy: false,
243+
};
244+
160245
export const labelsForm: Form = {
161246
layout: { type: 'regular' },
162247
// singular_name lives in the General card, so exclude it here.
163-
fields: STRING_LABEL_KEYS.filter( ( key ) => key !== 'singular_name' ),
248+
fields: [
249+
{
250+
id: '__labels_actions',
251+
layout: { type: 'regular', labelPosition: 'none' },
252+
},
253+
...STRING_LABEL_KEYS.filter( ( key ) => key !== 'singular_name' ),
254+
],
164255
};

‎packages/user-taxonomies/src/utils.ts‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
import { store as coreStore } from '@wordpress/core-data';
55
import { useSelect } from '@wordpress/data';
66
import { useMemo } from '@wordpress/element';
7+
import { __, sprintf } from '@wordpress/i18n';
78

89
/**
910
* Internal dependencies
@@ -43,6 +44,91 @@ export const STRING_LABEL_KEYS: ( keyof StoredLabels )[] = [
4344
'choose_from_most_used',
4445
];
4546

47+
export function deriveLabels(
48+
plural: string,
49+
singular: string
50+
): Omit< StoredLabels, 'singular_name' > {
51+
const lcPlural = plural.toLowerCase();
52+
return {
53+
menu_name: plural,
54+
all_items: sprintf(
55+
/* translators: %s: Plural taxonomy label. */
56+
__( 'All %s' ),
57+
plural
58+
),
59+
edit_item: sprintf(
60+
/* translators: %s: Singular taxonomy label. */
61+
__( 'Edit %s' ),
62+
singular
63+
),
64+
view_item: sprintf(
65+
/* translators: %s: Singular taxonomy label. */
66+
__( 'View %s' ),
67+
singular
68+
),
69+
update_item: sprintf(
70+
/* translators: %s: Singular taxonomy label. */
71+
__( 'Update %s' ),
72+
singular
73+
),
74+
add_new_item: sprintf(
75+
/* translators: %s: Singular taxonomy label. */
76+
__( 'Add New %s' ),
77+
singular
78+
),
79+
new_item_name: sprintf(
80+
/* translators: %s: Singular taxonomy label. */
81+
__( 'New %s Name' ),
82+
singular
83+
),
84+
search_items: sprintf(
85+
/* translators: %s: Plural taxonomy label. */
86+
__( 'Search %s' ),
87+
plural
88+
),
89+
not_found: sprintf(
90+
/* translators: %s: Plural taxonomy label, lowercase. */
91+
__( 'No %s found.' ),
92+
lcPlural
93+
),
94+
back_to_items: sprintf(
95+
/* translators: %s: Plural taxonomy label. */
96+
__( '← Back to %s' ),
97+
plural
98+
),
99+
parent_item: sprintf(
100+
/* translators: %s: Singular taxonomy label. */
101+
__( 'Parent %s' ),
102+
singular
103+
),
104+
popular_items: sprintf(
105+
/* translators: %s: Plural taxonomy label. */
106+
__( 'Popular %s' ),
107+
plural
108+
),
109+
separate_items_with_commas: sprintf(
110+
/* translators: %s: Plural taxonomy label, lowercase. */
111+
__( 'Separate %s with commas' ),
112+
lcPlural
113+
),
114+
parent_item_colon: sprintf(
115+
/* translators: %s: Singular taxonomy label. */
116+
__( 'Parent %s:' ),
117+
singular
118+
),
119+
add_or_remove_items: sprintf(
120+
/* translators: %s: Plural taxonomy label, lowercase. */
121+
__( 'Add or remove %s' ),
122+
lcPlural
123+
),
124+
choose_from_most_used: sprintf(
125+
/* translators: %s: Plural taxonomy label, lowercase. */
126+
__( 'Choose from the most used %s' ),
127+
lcPlural
128+
),
129+
};
130+
}
131+
46132
export function toFormData( row: TaxonomyRecord ): TaxonomyFormData {
47133
const config = row.config ?? {};
48134
const labels: StoredLabels = {};

‎routes/taxonomies/stage.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,10 @@ function TaxonomiesPage() {
129129
paginationInfo={ paginationInfo }
130130
defaultLayouts={ defaultLayouts }
131131
getItemId={ ( item ) => String( item.id ) }
132+
isItemClickable={ () => true }
133+
onClickItem={ ( item ) =>
134+
navigate( { to: `/edit/${ item.id }` } )
135+
}
132136
/>
133137
</Page>
134138
);

‎routes/taxonomy-edit/stage.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import {
2828
editItemField,
2929
generalForm,
3030
hierarchicalField,
31+
labelsActionsField,
3132
labelsForm,
3233
menuNameField,
3334
newItemNameField,
@@ -142,6 +143,7 @@ function TaxonomyPage( {
142143
hierarchicalField,
143144
statusField,
144145
// Labels
146+
labelsActionsField,
145147
menuNameField,
146148
allItemsField,
147149
editItemField,
@@ -182,9 +184,6 @@ function TaxonomyPage( {
182184
{
183185
id: 'labels',
184186
label: __( 'Labels' ),
185-
description: __(
186-
'Override the text WordPress shows in admin lists, menus, and forms. Leave blank to use defaults derived from the plural and singular names.'
187-
),
188187
layout: {
189188
type: 'card',
190189
isCollapsible: true,

‎routes/taxonomy-edit/taxonomy-form.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1+
@use "@wordpress/base-styles/colors" as *;
2+
13
.taxonomy-form {
24
box-sizing: border-box;
35
width: 100%;
46
max-width: 680px;
57
margin: 0 auto;
68
padding: 24px;
79
}
10+
11+
.taxonomy-form__help-text {
12+
color: $gray-700;
13+
}

0 commit comments

Comments
 (0)