@wordpress/fields 0.6.0 → 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/LICENSE.md +1 -1
  3. package/build/actions/permanently-delete-post.js +104 -65
  4. package/build/actions/permanently-delete-post.js.map +1 -1
  5. package/build/components/create-template-part-modal/index.js +40 -35
  6. package/build/components/create-template-part-modal/index.js.map +1 -1
  7. package/build/fields/page-title/view.js +6 -2
  8. package/build/fields/page-title/view.js.map +1 -1
  9. package/build-module/actions/permanently-delete-post.js +105 -66
  10. package/build-module/actions/permanently-delete-post.js.map +1 -1
  11. package/build-module/components/create-template-part-modal/index.js +41 -36
  12. package/build-module/components/create-template-part-modal/index.js.map +1 -1
  13. package/build-module/fields/page-title/view.js +6 -2
  14. package/build-module/fields/page-title/view.js.map +1 -1
  15. package/build-style/style-rtl.css +49 -43
  16. package/build-style/style.css +49 -43
  17. package/build-types/actions/permanently-delete-post.d.ts.map +1 -1
  18. package/build-types/components/create-template-part-modal/index.d.ts.map +1 -1
  19. package/build-types/fields/page-title/view.d.ts.map +1 -1
  20. package/package.json +25 -25
  21. package/src/actions/permanently-delete-post.tsx +157 -86
  22. package/src/components/create-template-part-modal/index.tsx +61 -45
  23. package/src/components/create-template-part-modal/style.scss +79 -54
  24. package/src/fields/page-title/view.tsx +5 -2
  25. package/src/style.scss +0 -1
  26. package/tsconfig.json +1 -4
  27. package/tsconfig.tsbuildinfo +1 -1
  28. package/src/fields/page-title/style.scss +0 -10
package/build-style/style.css CHANGED
@@ -121,50 +121,68 @@
121
121
  }
122
122
 
123
123
  .fields-create-template-part-modal__area-radio-group {
124
- width: 100%;
125
- border: 1px solid #757575;
124
+ border: 1px solid #949494;
126
125
  border-radius: 2px;
127
126
  }
128
- .fields-create-template-part-modal__area-radio-group .components-button.fields-create-template-part-modal__area-radio {
129
- display: block;
130
- width: 100%;
131
- height: 100%;
132
- text-align: left;
127
+
128
+ .fields-create-template-part-modal__area-radio-wrapper {
129
+ position: relative;
133
130
  padding: 12px;
131
+ display: grid;
132
+ align-items: center;
133
+ grid-template-columns: min-content 1fr min-content;
134
+ grid-gap: 4px 8px;
135
+ color: #1e1e1e;
134
136
  }
135
- .fields-create-template-part-modal__area-radio-group .components-button.fields-create-template-part-modal__area-radio, .fields-create-template-part-modal__area-radio-group .components-button.fields-create-template-part-modal__area-radio.is-secondary:hover, .fields-create-template-part-modal__area-radio-group .components-button.fields-create-template-part-modal__area-radio.is-primary:hover {
136
- margin: 0;
137
- background-color: inherit;
138
- border-bottom: 1px solid #757575;
139
- border-radius: 0;
137
+ .fields-create-template-part-modal__area-radio-wrapper + .fields-create-template-part-modal__area-radio-wrapper {
138
+ border-top: 1px solid #949494;
140
139
  }
141
- .fields-create-template-part-modal__area-radio-group .components-button.fields-create-template-part-modal__area-radio:not(:focus), .fields-create-template-part-modal__area-radio-group .components-button.fields-create-template-part-modal__area-radio.is-secondary:hover:not(:focus), .fields-create-template-part-modal__area-radio-group .components-button.fields-create-template-part-modal__area-radio.is-primary:hover:not(:focus) {
142
- box-shadow: none;
140
+ .fields-create-template-part-modal__area-radio-wrapper input[type=radio] {
141
+ position: absolute;
142
+ opacity: 0;
143
143
  }
144
- .fields-create-template-part-modal__area-radio-group .components-button.fields-create-template-part-modal__area-radio:focus, .fields-create-template-part-modal__area-radio-group .components-button.fields-create-template-part-modal__area-radio.is-secondary:hover:focus, .fields-create-template-part-modal__area-radio-group .components-button.fields-create-template-part-modal__area-radio.is-primary:hover:focus {
145
- border-bottom: 1px solid #fff;
144
+ .fields-create-template-part-modal__area-radio-wrapper:has(input[type=radio]:checked) {
145
+ z-index: 1;
146
146
  }
147
- .fields-create-template-part-modal__area-radio-group .components-button.fields-create-template-part-modal__area-radio:last-of-type, .fields-create-template-part-modal__area-radio-group .components-button.fields-create-template-part-modal__area-radio.is-secondary:hover:last-of-type, .fields-create-template-part-modal__area-radio-group .components-button.fields-create-template-part-modal__area-radio.is-primary:hover:last-of-type {
148
- border-bottom: none;
147
+ .fields-create-template-part-modal__area-radio-wrapper:has(input[type=radio]:not(:checked)):hover {
148
+ color: var(--wp-admin-theme-color);
149
149
  }
150
- .fields-create-template-part-modal__area-radio-group .components-button.fields-create-template-part-modal__area-radio:not(:hover), .fields-create-template-part-modal__area-radio-group .components-button.fields-create-template-part-modal__area-radio[aria-checked=true] {
151
- color: #1e1e1e;
152
- cursor: auto;
150
+ .fields-create-template-part-modal__area-radio-wrapper > *:not(.fields-create-template-part-modal__area-radio-label) {
151
+ pointer-events: none;
153
152
  }
154
- .fields-create-template-part-modal__area-radio-group .components-button.fields-create-template-part-modal__area-radio:not(:hover) .fields-create-template-part-modal__option-label div, .fields-create-template-part-modal__area-radio-group .components-button.fields-create-template-part-modal__area-radio[aria-checked=true] .fields-create-template-part-modal__option-label div {
155
- color: #949494;
153
+
154
+ .fields-create-template-part-modal__area-radio-label::before {
155
+ content: "";
156
+ position: absolute;
157
+ inset: 0;
158
+ }
159
+ input[type=radio]:not(:checked) ~ .fields-create-template-part-modal__area-radio-label::before {
160
+ cursor: pointer;
156
161
  }
157
- .fields-create-template-part-modal__area-radio-group .components-button.fields-create-template-part-modal__area-radio .fields-create-template-part-modal__option-label {
158
- padding-top: 4px;
159
- white-space: normal;
162
+ input[type=radio]:focus-visible ~ .fields-create-template-part-modal__area-radio-label::before {
163
+ outline: 4px solid transparent;
164
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
160
165
  }
161
- .fields-create-template-part-modal__area-radio-group .components-button.fields-create-template-part-modal__area-radio .fields-create-template-part-modal__option-label div {
162
- padding-top: 4px;
166
+
167
+ .fields-create-template-part-modal__area-radio-icon,
168
+ .fields-create-template-part-modal__area-radio-checkmark {
169
+ fill: currentColor;
170
+ }
171
+
172
+ input[type=radio]:not(:checked) ~ .fields-create-template-part-modal__area-radio-checkmark {
173
+ opacity: 0;
174
+ }
175
+
176
+ .fields-create-template-part-modal__area-radio-description {
177
+ grid-column: 2/3;
178
+ margin: 0;
179
+ color: #757575;
163
180
  font-size: 12px;
181
+ line-height: normal;
182
+ text-wrap: pretty;
164
183
  }
165
- .fields-create-template-part-modal__area-radio-group .components-button.fields-create-template-part-modal__area-radio .fields-create-template-part-modal__checkbox {
166
- margin-left: auto;
167
- min-width: 24px;
184
+ input[type=radio]:not(:checked):hover ~ .fields-create-template-part-modal__area-radio-description {
185
+ color: inherit;
168
186
  }
169
187
 
170
188
  .fields-controls__slug .fields-controls__slug-external-icon {
@@ -234,7 +252,6 @@ fieldset.fields-controls__featured-image span {
234
252
  }
235
253
  fieldset.fields-controls__featured-image .fields-controls__featured-image-upload-button {
236
254
  padding: 0;
237
- height: -moz-fit-content;
238
255
  height: fit-content;
239
256
  }
240
257
  fieldset.fields-controls__featured-image .fields-controls__featured-image-upload-button:hover, fieldset.fields-controls__featured-image .fields-controls__featured-image-upload-button:focus {
@@ -293,17 +310,6 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
293
310
  flex-grow: 0;
294
311
  }
295
312
 
296
- .fields-field__page-title__badge {
297
- background: #f0f0f0;
298
- color: #2f2f2f;
299
- padding: 0 4px;
300
- border-radius: 2px;
301
- font-size: 12px;
302
- font-weight: 400;
303
- flex-shrink: 0;
304
- line-height: 20px;
305
- }
306
-
307
313
  .fields-field__pattern-title span:first-child {
308
314
  flex: 1;
309
315
  }
package/build-types/actions/permanently-delete-post.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"permanently-delete-post.d.ts","sourceRoot":"","sources":["../../src/actions/permanently-delete-post.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAOnD,OAAO,KAAK,EAAiB,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEnE,QAAA,MAAM,qBAAqB,EAAE,MAAM,CAAE,mBAAmB,CAoGvD,CAAC;AAEF;;GAEG;AACH,eAAe,qBAAqB,CAAC"}
1
+ {"version":3,"file":"permanently-delete-post.d.ts","sourceRoot":"","sources":["../../src/actions/permanently-delete-post.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAgBnD,OAAO,KAAK,EAAiB,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEnE,QAAA,MAAM,qBAAqB,EAAE,MAAM,CAAE,mBAAmB,CAkKvD,CAAC;AAEF;;GAEG;AACH,eAAe,qBAAqB,CAAC"}
package/build-types/components/create-template-part-modal/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/create-template-part-modal/index.tsx"],"names":[],"mappings":"AA0CA,KAAK,oCAAoC,GAAG;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,GAAG,EAAE,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,CAAE,YAAY,EAAE,GAAG,KAAM,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AASF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAE,EAChD,UAAU,EACV,GAAG,SAAS,EACZ,EAAE;IACF,UAAU,EAAE,MAAM,CAAC;CACnB,GAAG,oCAAoC,+BAmBvC;AAaD;;;;;;;;;;;;GAYG;AACH,wBAAgB,+BAA+B,CAAE,EAChD,WAA6B,EAC7B,MAAW,EACX,YAA0B,EAC1B,UAAU,EACV,QAAQ,EACR,OAAO,EACP,YAAiB,GACjB,EAAE,oCAAoC,+BAqJtC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/create-template-part-modal/index.tsx"],"names":[],"mappings":"AA4CA,KAAK,oCAAoC,GAAG;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,GAAG,EAAE,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,CAAE,YAAY,EAAE,GAAG,KAAM,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AASF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAE,EAChD,UAAU,EACV,GAAG,SAAS,EACZ,EAAE;IACF,UAAU,EAAE,MAAM,CAAC;CACnB,GAAG,oCAAoC,+BAmBvC;AAaD;;;;;;;;;;;;GAYG;AACH,wBAAgB,+BAA+B,CAAE,EAChD,WAA6B,EAC7B,MAAW,EACX,YAA0B,EAC1B,UAAU,EACV,QAAQ,EACR,OAAO,EACP,YAAiB,GACjB,EAAE,oCAAoC,+BAmKtC"}
package/build-types/fields/page-title/view.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../../src/fields/page-title/view.tsx"],"names":[],"mappings":"AAQA;;GAEG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,MAAM,CAAC,OAAO,UAAU,aAAa,CAAE,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,+BAuBpE"}
1
+ {"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../../src/fields/page-title/view.tsx"],"names":[],"mappings":"AASA;;GAEG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK9C,MAAM,CAAC,OAAO,UAAU,aAAa,CAAE,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,+BAuBpE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/fields",
3
- "version": "0.6.0",
3
+ "version": "0.7.1",
4
4
  "description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -33,29 +33,29 @@
33
33
  ],
34
34
  "dependencies": {
35
35
  "@babel/runtime": "7.25.7",
36
- "@wordpress/api-fetch": "*",
37
- "@wordpress/blob": "*",
38
- "@wordpress/block-editor": "*",
39
- "@wordpress/blocks": "*",
40
- "@wordpress/components": "*",
41
- "@wordpress/compose": "*",
42
- "@wordpress/core-data": "*",
43
- "@wordpress/data": "*",
44
- "@wordpress/dataviews": "*",
45
- "@wordpress/date": "*",
46
- "@wordpress/element": "*",
47
- "@wordpress/hooks": "*",
48
- "@wordpress/html-entities": "*",
49
- "@wordpress/i18n": "*",
50
- "@wordpress/icons": "*",
51
- "@wordpress/media-utils": "*",
52
- "@wordpress/notices": "*",
53
- "@wordpress/patterns": "*",
54
- "@wordpress/primitives": "*",
55
- "@wordpress/private-apis": "*",
56
- "@wordpress/router": "*",
57
- "@wordpress/url": "*",
58
- "@wordpress/warning": "*",
36
+ "@wordpress/api-fetch": "^7.15.1",
37
+ "@wordpress/blob": "^4.15.0",
38
+ "@wordpress/block-editor": "^14.10.1",
39
+ "@wordpress/blocks": "^14.4.1",
40
+ "@wordpress/components": "^29.1.1",
41
+ "@wordpress/compose": "^7.15.1",
42
+ "@wordpress/core-data": "^7.15.1",
43
+ "@wordpress/data": "^10.15.1",
44
+ "@wordpress/dataviews": "^4.11.1",
45
+ "@wordpress/date": "^5.15.1",
46
+ "@wordpress/element": "^6.15.1",
47
+ "@wordpress/hooks": "^4.15.0",
48
+ "@wordpress/html-entities": "^4.15.0",
49
+ "@wordpress/i18n": "^5.15.1",
50
+ "@wordpress/icons": "^10.15.1",
51
+ "@wordpress/media-utils": "^5.15.1",
52
+ "@wordpress/notices": "^5.15.1",
53
+ "@wordpress/patterns": "^2.15.1",
54
+ "@wordpress/primitives": "^4.15.1",
55
+ "@wordpress/private-apis": "^1.15.0",
56
+ "@wordpress/router": "^1.15.1",
57
+ "@wordpress/url": "^4.15.0",
58
+ "@wordpress/warning": "^3.15.0",
59
59
  "change-case": "4.1.2",
60
60
  "client-zip": "^2.4.5",
61
61
  "clsx": "2.1.1",
@@ -67,5 +67,5 @@
67
67
  "publishConfig": {
68
68
  "access": "public"
69
69
  },
70
- "gitHead": "b432c18934c9db866b6dba7d37517a4e97d642e3"
70
+ "gitHead": "0d4503ecc364cf4ca16024673baf5a84dacf212f"
71
71
  }
package/src/actions/permanently-delete-post.tsx CHANGED
@@ -2,10 +2,19 @@
2
2
  * WordPress dependencies
3
3
  */
4
4
  import { store as coreStore } from '@wordpress/core-data';
5
- import { __, sprintf } from '@wordpress/i18n';
5
+ import { __, _n, sprintf } from '@wordpress/i18n';
6
6
  import { store as noticesStore } from '@wordpress/notices';
7
7
  import type { Action } from '@wordpress/dataviews';
8
8
  import { trash } from '@wordpress/icons';
9
+ import { useState } from '@wordpress/element';
10
+ import { useDispatch } from '@wordpress/data';
11
+ import {
12
+ Button,
13
+ __experimentalText as Text,
14
+ __experimentalHStack as HStack,
15
+ __experimentalVStack as VStack,
16
+ } from '@wordpress/components';
17
+ import { decodeEntities } from '@wordpress/html-entities';
9
18
 
10
19
  /**
11
20
  * Internal dependencies
@@ -25,93 +34,155 @@ const permanentlyDeletePost: Action< PostWithPermissions > = {
25
34
  const { status, permissions } = item;
26
35
  return status === 'trash' && permissions?.delete;
27
36
  },
28
- async callback( posts, { registry, onActionPerformed } ) {
37
+ hideModalHeader: true,
38
+ RenderModal: ( { items, closeModal, onActionPerformed } ) => {
39
+ const [ isBusy, setIsBusy ] = useState( false );
29
40
  const { createSuccessNotice, createErrorNotice } =
30
- registry.dispatch( noticesStore );
31
- const { deleteEntityRecord } = registry.dispatch( coreStore );
32
- const promiseResult = await Promise.allSettled(
33
- posts.map( ( post ) => {
34
- return deleteEntityRecord(
35
- 'postType',
36
- post.type,
37
- post.id,
38
- { force: true },
39
- { throwOnError: true }
40
- );
41
- } )
41
+ useDispatch( noticesStore );
42
+ const { deleteEntityRecord } = useDispatch( coreStore );
43
+
44
+ return (
45
+ <VStack spacing="5">
46
+ <Text>
47
+ { items.length > 1
48
+ ? sprintf(
49
+ // translators: %d: number of items to delete.
50
+ _n(
51
+ 'Are you sure you want to permanently delete %d item?',
52
+ 'Are you sure you want to permanently delete %d items?',
53
+ items.length
54
+ ),
55
+ items.length
56
+ )
57
+ : sprintf(
58
+ // translators: %s: The post's title
59
+ __(
60
+ 'Are you sure you want to permanently delete "%s"?'
61
+ ),
62
+ decodeEntities( getItemTitle( items[ 0 ] ) )
63
+ ) }
64
+ </Text>
65
+ <HStack justify="right">
66
+ <Button
67
+ variant="tertiary"
68
+ onClick={ closeModal }
69
+ disabled={ isBusy }
70
+ accessibleWhenDisabled
71
+ __next40pxDefaultSize
72
+ >
73
+ { __( 'Cancel' ) }
74
+ </Button>
75
+ <Button
76
+ variant="primary"
77
+ onClick={ async () => {
78
+ setIsBusy( true );
79
+ const promiseResult = await Promise.allSettled(
80
+ items.map( ( post ) =>
81
+ deleteEntityRecord(
82
+ 'postType',
83
+ post.type,
84
+ post.id,
85
+ { force: true },
86
+ { throwOnError: true }
87
+ )
88
+ )
89
+ );
90
+
91
+ // If all the promises were fulfilled with success.
92
+ if (
93
+ promiseResult.every(
94
+ ( { status } ) => status === 'fulfilled'
95
+ )
96
+ ) {
97
+ let successMessage;
98
+ if ( promiseResult.length === 1 ) {
99
+ successMessage = sprintf(
100
+ /* translators: The posts's title. */
101
+ __( '"%s" permanently deleted.' ),
102
+ getItemTitle( items[ 0 ] )
103
+ );
104
+ } else {
105
+ successMessage = __(
106
+ 'The items were permanently deleted.'
107
+ );
108
+ }
109
+ createSuccessNotice( successMessage, {
110
+ type: 'snackbar',
111
+ id: 'permanently-delete-post-action',
112
+ } );
113
+ onActionPerformed?.( items );
114
+ } else {
115
+ // If there was at lease one failure.
116
+ let errorMessage;
117
+ // If we were trying to permanently delete a single post.
118
+ if ( promiseResult.length === 1 ) {
119
+ const typedError = promiseResult[ 0 ] as {
120
+ reason?: CoreDataError;
121
+ };
122
+ if ( typedError.reason?.message ) {
123
+ errorMessage =
124
+ typedError.reason.message;
125
+ } else {
126
+ errorMessage = __(
127
+ 'An error occurred while permanently deleting the item.'
128
+ );
129
+ }
130
+ // If we were trying to permanently delete multiple posts
131
+ } else {
132
+ const errorMessages = new Set();
133
+ const failedPromises = promiseResult.filter(
134
+ ( { status } ) => status === 'rejected'
135
+ );
136
+ for ( const failedPromise of failedPromises ) {
137
+ const typedError = failedPromise as {
138
+ reason?: CoreDataError;
139
+ };
140
+ if ( typedError.reason?.message ) {
141
+ errorMessages.add(
142
+ typedError.reason.message
143
+ );
144
+ }
145
+ }
146
+ if ( errorMessages.size === 0 ) {
147
+ errorMessage = __(
148
+ 'An error occurred while permanently deleting the items.'
149
+ );
150
+ } else if ( errorMessages.size === 1 ) {
151
+ errorMessage = sprintf(
152
+ /* translators: %s: an error message */
153
+ __(
154
+ 'An error occurred while permanently deleting the items: %s'
155
+ ),
156
+ [ ...errorMessages ][ 0 ]
157
+ );
158
+ } else {
159
+ errorMessage = sprintf(
160
+ /* translators: %s: a list of comma separated error messages */
161
+ __(
162
+ 'Some errors occurred while permanently deleting the items: %s'
163
+ ),
164
+ [ ...errorMessages ].join( ',' )
165
+ );
166
+ }
167
+ }
168
+ createErrorNotice( errorMessage, {
169
+ type: 'snackbar',
170
+ } );
171
+ }
172
+
173
+ setIsBusy( false );
174
+ closeModal?.();
175
+ } }
176
+ isBusy={ isBusy }
177
+ disabled={ isBusy }
178
+ accessibleWhenDisabled
179
+ __next40pxDefaultSize
180
+ >
181
+ { __( 'Delete permanently' ) }
182
+ </Button>
183
+ </HStack>
184
+ </VStack>
42
185
  );
43
- // If all the promises were fulfilled with success.
44
- if ( promiseResult.every( ( { status } ) => status === 'fulfilled' ) ) {
45
- let successMessage;
46
- if ( promiseResult.length === 1 ) {
47
- successMessage = sprintf(
48
- /* translators: The posts's title. */
49
- __( '"%s" permanently deleted.' ),
50
- getItemTitle( posts[ 0 ] )
51
- );
52
- } else {
53
- successMessage = __( 'The items were permanently deleted.' );
54
- }
55
- createSuccessNotice( successMessage, {
56
- type: 'snackbar',
57
- id: 'permanently-delete-post-action',
58
- } );
59
- onActionPerformed?.( posts );
60
- } else {
61
- // If there was at lease one failure.
62
- let errorMessage;
63
- // If we were trying to permanently delete a single post.
64
- if ( promiseResult.length === 1 ) {
65
- const typedError = promiseResult[ 0 ] as {
66
- reason?: CoreDataError;
67
- };
68
- if ( typedError.reason?.message ) {
69
- errorMessage = typedError.reason.message;
70
- } else {
71
- errorMessage = __(
72
- 'An error occurred while permanently deleting the item.'
73
- );
74
- }
75
- // If we were trying to permanently delete multiple posts
76
- } else {
77
- const errorMessages = new Set();
78
- const failedPromises = promiseResult.filter(
79
- ( { status } ) => status === 'rejected'
80
- );
81
- for ( const failedPromise of failedPromises ) {
82
- const typedError = failedPromise as {
83
- reason?: CoreDataError;
84
- };
85
- if ( typedError.reason?.message ) {
86
- errorMessages.add( typedError.reason.message );
87
- }
88
- }
89
- if ( errorMessages.size === 0 ) {
90
- errorMessage = __(
91
- 'An error occurred while permanently deleting the items.'
92
- );
93
- } else if ( errorMessages.size === 1 ) {
94
- errorMessage = sprintf(
95
- /* translators: %s: an error message */
96
- __(
97
- 'An error occurred while permanently deleting the items: %s'
98
- ),
99
- [ ...errorMessages ][ 0 ]
100
- );
101
- } else {
102
- errorMessage = sprintf(
103
- /* translators: %s: a list of comma separated error messages */
104
- __(
105
- 'Some errors occurred while permanently deleting the items: %s'
106
- ),
107
- [ ...errorMessages ].join( ',' )
108
- );
109
- }
110
- }
111
- createErrorNotice( errorMessage, {
112
- type: 'snackbar',
113
- } );
114
- }
115
186
  },
116
187
  };
117
188
 
package/src/components/create-template-part-modal/index.tsx CHANGED
@@ -5,13 +5,8 @@ import {
5
5
  Icon,
6
6
  BaseControl,
7
7
  TextControl,
8
- Flex,
9
- FlexItem,
10
- FlexBlock,
11
8
  Button,
12
9
  Modal,
13
- __experimentalRadioGroup as RadioGroup,
14
- __experimentalRadio as Radio,
15
10
  __experimentalHStack as HStack,
16
11
  __experimentalVStack as VStack,
17
12
  } from '@wordpress/components';
@@ -40,6 +35,13 @@ import {
40
35
  useExistingTemplateParts,
41
36
  } from './utils';
42
37
 
38
+ function getAreaRadioId( value: string, instanceId: number ) {
39
+ return `fields-create-template-part-modal__area-option-${ value }-${ instanceId }`;
40
+ }
41
+ function getAreaRadioDescriptionId( value: string, instanceId: number ) {
42
+ return `fields-create-template-part-modal__area-option-description-${ value }-${ instanceId }`;
43
+ }
44
+
43
45
  type CreateTemplatePartModalContentsProps = {
44
46
  defaultArea?: string;
45
47
  blocks: any[];
@@ -201,52 +203,66 @@ export function CreateTemplatePartModalContents( {
201
203
  onChange={ setTitle }
202
204
  required
203
205
  />
204
- <BaseControl
205
- __nextHasNoMarginBottom
206
- label={ __( 'Area' ) }
207
- id={ `fields-create-template-part-modal__area-selection-${ instanceId }` }
208
- className="fields-create-template-part-modal__area-base-control"
209
- >
210
- <RadioGroup
211
- label={ __( 'Area' ) }
212
- className="fields-create-template-part-modal__area-radio-group"
213
- id={ `fields-create-template-part-modal__area-selection-${ instanceId }` }
214
- onChange={ ( value ) =>
215
- value && typeof value === 'string'
216
- ? setArea( value )
217
- : () => void 0
218
- }
219
- checked={ area }
220
- >
206
+ <fieldset>
207
+ <BaseControl.VisualLabel as="legend">
208
+ { __( 'Area' ) }
209
+ </BaseControl.VisualLabel>
210
+ <div className="fields-create-template-part-modal__area-radio-group">
221
211
  { ( defaultTemplatePartAreas ?? [] ).map( ( item ) => {
222
212
  const icon = getTemplatePartIcon( item.icon );
223
213
  return (
224
- <Radio
225
- __next40pxDefaultSize
226
- key={ item.label }
227
- value={ item.area }
228
- className="fields-create-template-part-modal__area-radio"
214
+ <div
215
+ key={ item.area }
216
+ className="fields-create-template-part-modal__area-radio-wrapper"
229
217
  >
230
- <Flex align="start" justify="start">
231
- <FlexItem>
232
- <Icon icon={ icon } />
233
- </FlexItem>
234
- <FlexBlock className="fields-create-template-part-modal__option-label">
235
- { item.label }
236
- <div>{ item.description }</div>
237
- </FlexBlock>
238
-
239
- <FlexItem className="fields-create-template-part-modal__checkbox">
240
- { area === item.area && (
241
- <Icon icon={ check } />
242
- ) }
243
- </FlexItem>
244
- </Flex>
245
- </Radio>
218
+ <input
219
+ type="radio"
220
+ id={ getAreaRadioId(
221
+ item.area,
222
+ instanceId
223
+ ) }
224
+ name={ `fields-create-template-part-modal__area-${ instanceId }` }
225
+ value={ item.area }
226
+ checked={ area === item.area }
227
+ onChange={ () => {
228
+ setArea( item.area );
229
+ } }
230
+ aria-describedby={ getAreaRadioDescriptionId(
231
+ item.area,
232
+ instanceId
233
+ ) }
234
+ />
235
+ <Icon
236
+ icon={ icon }
237
+ className="fields-create-template-part-modal__area-radio-icon"
238
+ />
239
+ <label
240
+ htmlFor={ getAreaRadioId(
241
+ item.area,
242
+ instanceId
243
+ ) }
244
+ className="fields-create-template-part-modal__area-radio-label"
245
+ >
246
+ { item.label }
247
+ </label>
248
+ <Icon
249
+ icon={ check }
250
+ className="fields-create-template-part-modal__area-radio-checkmark"
251
+ />
252
+ <p
253
+ className="fields-create-template-part-modal__area-radio-description"
254
+ id={ getAreaRadioDescriptionId(
255
+ item.area,
256
+ instanceId
257
+ ) }
258
+ >
259
+ { item.description }
260
+ </p>
261
+ </div>
246
262
  );
247
263
  } ) }
248
- </RadioGroup>
249
- </BaseControl>
264
+ </div>
265
+ </fieldset>
250
266
  <HStack justify="right">
251
267
  <Button
252
268
  __next40pxDefaultSize