@wordpress/edit-site 6.3.0 → 6.4.0

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 (221) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/build/components/add-new-pattern/index.js +8 -2
  3. package/build/components/add-new-pattern/index.js.map +1 -1
  4. package/build/components/add-new-template/index.js +3 -1
  5. package/build/components/add-new-template/index.js.map +1 -1
  6. package/build/components/block-editor/use-site-editor-settings.js +1 -82
  7. package/build/components/block-editor/use-site-editor-settings.js.map +1 -1
  8. package/build/components/global-styles/block-preview-panel.js +14 -5
  9. package/build/components/global-styles/block-preview-panel.js.map +1 -1
  10. package/build/components/global-styles/font-families.js +42 -23
  11. package/build/components/global-styles/font-families.js.map +1 -1
  12. package/build/components/global-styles/font-library-modal/index.js +4 -4
  13. package/build/components/global-styles/font-library-modal/index.js.map +1 -1
  14. package/build/components/global-styles/font-library-modal/installed-fonts.js +58 -10
  15. package/build/components/global-styles/font-library-modal/installed-fonts.js.map +1 -1
  16. package/build/components/global-styles/font-sizes/confirm-delete-font-size-dialog.js +39 -0
  17. package/build/components/global-styles/font-sizes/confirm-delete-font-size-dialog.js.map +1 -0
  18. package/build/components/global-styles/font-sizes/confirm-reset-font-sizes-dialog.js +39 -0
  19. package/build/components/global-styles/font-sizes/confirm-reset-font-sizes-dialog.js.map +1 -0
  20. package/build/components/global-styles/font-sizes/font-size-preview.js +44 -0
  21. package/build/components/global-styles/font-sizes/font-size-preview.js.map +1 -0
  22. package/build/components/global-styles/font-sizes/font-size.js +213 -0
  23. package/build/components/global-styles/font-sizes/font-size.js.map +1 -0
  24. package/build/components/global-styles/font-sizes/font-sizes-count.js +50 -0
  25. package/build/components/global-styles/font-sizes/font-sizes-count.js.map +1 -0
  26. package/build/components/global-styles/font-sizes/font-sizes.js +163 -0
  27. package/build/components/global-styles/font-sizes/font-sizes.js.map +1 -0
  28. package/build/components/global-styles/font-sizes/rename-font-size-dialog.js +67 -0
  29. package/build/components/global-styles/font-sizes/rename-font-size-dialog.js.map +1 -0
  30. package/build/components/global-styles/screen-block.js +10 -8
  31. package/build/components/global-styles/screen-block.js.map +1 -1
  32. package/build/components/global-styles/screen-style-variations.js +2 -2
  33. package/build/components/global-styles/screen-style-variations.js.map +1 -1
  34. package/build/components/global-styles/screen-typography.js +3 -2
  35. package/build/components/global-styles/screen-typography.js.map +1 -1
  36. package/build/components/global-styles/size-control/index.js +85 -0
  37. package/build/components/global-styles/size-control/index.js.map +1 -0
  38. package/build/components/global-styles/style-variations-container.js +3 -0
  39. package/build/components/global-styles/style-variations-container.js.map +1 -1
  40. package/build/components/global-styles/ui.js +8 -0
  41. package/build/components/global-styles/ui.js.map +1 -1
  42. package/build/components/global-styles/variations/variations-color.js.map +1 -1
  43. package/build/components/global-styles/variations/variations-typography.js +1 -1
  44. package/build/components/global-styles/variations/variations-typography.js.map +1 -1
  45. package/build/components/layout/index.js +6 -0
  46. package/build/components/layout/index.js.map +1 -1
  47. package/build/components/layout/router.js +14 -6
  48. package/build/components/layout/router.js.map +1 -1
  49. package/build/components/page-patterns/header.js +1 -1
  50. package/build/components/page-patterns/header.js.map +1 -1
  51. package/build/components/page-patterns/index.js +23 -11
  52. package/build/components/page-patterns/index.js.map +1 -1
  53. package/build/components/page-templates/index.js +41 -34
  54. package/build/components/page-templates/index.js.map +1 -1
  55. package/build/components/post-edit/index.js +105 -0
  56. package/build/components/post-edit/index.js.map +1 -0
  57. package/build/components/post-fields/index.js +314 -0
  58. package/build/components/post-fields/index.js.map +1 -0
  59. package/build/components/post-list/index.js +281 -0
  60. package/build/components/post-list/index.js.map +1 -0
  61. package/build/components/posts-app/router.js +3 -3
  62. package/build/components/posts-app/router.js.map +1 -1
  63. package/build/components/sidebar-dataviews/default-views.js +22 -10
  64. package/build/components/sidebar-dataviews/default-views.js.map +1 -1
  65. package/build/components/sidebar-dataviews/index.js +40 -1
  66. package/build/components/sidebar-dataviews/index.js.map +1 -1
  67. package/build/components/sidebar-navigation-screen-global-styles/content.js +64 -0
  68. package/build/components/sidebar-navigation-screen-global-styles/content.js.map +1 -0
  69. package/build/components/sidebar-navigation-screen-global-styles/index.js +2 -47
  70. package/build/components/sidebar-navigation-screen-global-styles/index.js.map +1 -1
  71. package/build/hooks/push-changes-to-global-styles/index.js +1 -1
  72. package/build/hooks/push-changes-to-global-styles/index.js.map +1 -1
  73. package/build/index.js +5 -1
  74. package/build/index.js.map +1 -1
  75. package/build/store/selectors.js +34 -6
  76. package/build/store/selectors.js.map +1 -1
  77. package/build/utils/get-filtered-template-parts.js +64 -0
  78. package/build/utils/get-filtered-template-parts.js.map +1 -0
  79. package/build-module/components/add-new-pattern/index.js +8 -2
  80. package/build-module/components/add-new-pattern/index.js.map +1 -1
  81. package/build-module/components/add-new-template/index.js +3 -1
  82. package/build-module/components/add-new-template/index.js.map +1 -1
  83. package/build-module/components/block-editor/use-site-editor-settings.js +1 -82
  84. package/build-module/components/block-editor/use-site-editor-settings.js.map +1 -1
  85. package/build-module/components/global-styles/block-preview-panel.js +14 -5
  86. package/build-module/components/global-styles/block-preview-panel.js.map +1 -1
  87. package/build-module/components/global-styles/font-families.js +44 -25
  88. package/build-module/components/global-styles/font-families.js.map +1 -1
  89. package/build-module/components/global-styles/font-library-modal/index.js +4 -4
  90. package/build-module/components/global-styles/font-library-modal/index.js.map +1 -1
  91. package/build-module/components/global-styles/font-library-modal/installed-fonts.js +61 -13
  92. package/build-module/components/global-styles/font-library-modal/installed-fonts.js.map +1 -1
  93. package/build-module/components/global-styles/font-sizes/confirm-delete-font-size-dialog.js +32 -0
  94. package/build-module/components/global-styles/font-sizes/confirm-delete-font-size-dialog.js.map +1 -0
  95. package/build-module/components/global-styles/font-sizes/confirm-reset-font-sizes-dialog.js +32 -0
  96. package/build-module/components/global-styles/font-sizes/confirm-reset-font-sizes-dialog.js.map +1 -0
  97. package/build-module/components/global-styles/font-sizes/font-size-preview.js +37 -0
  98. package/build-module/components/global-styles/font-sizes/font-size-preview.js.map +1 -0
  99. package/build-module/components/global-styles/font-sizes/font-size.js +207 -0
  100. package/build-module/components/global-styles/font-sizes/font-size.js.map +1 -0
  101. package/build-module/components/global-styles/font-sizes/font-sizes-count.js +43 -0
  102. package/build-module/components/global-styles/font-sizes/font-sizes-count.js.map +1 -0
  103. package/build-module/components/global-styles/font-sizes/font-sizes.js +157 -0
  104. package/build-module/components/global-styles/font-sizes/font-sizes.js.map +1 -0
  105. package/build-module/components/global-styles/font-sizes/rename-font-size-dialog.js +61 -0
  106. package/build-module/components/global-styles/font-sizes/rename-font-size-dialog.js.map +1 -0
  107. package/build-module/components/global-styles/screen-block.js +10 -8
  108. package/build-module/components/global-styles/screen-block.js.map +1 -1
  109. package/build-module/components/global-styles/screen-style-variations.js +2 -2
  110. package/build-module/components/global-styles/screen-style-variations.js.map +1 -1
  111. package/build-module/components/global-styles/screen-typography.js +3 -2
  112. package/build-module/components/global-styles/screen-typography.js.map +1 -1
  113. package/build-module/components/global-styles/size-control/index.js +79 -0
  114. package/build-module/components/global-styles/size-control/index.js.map +1 -0
  115. package/build-module/components/global-styles/style-variations-container.js +3 -0
  116. package/build-module/components/global-styles/style-variations-container.js.map +1 -1
  117. package/build-module/components/global-styles/ui.js +8 -0
  118. package/build-module/components/global-styles/ui.js.map +1 -1
  119. package/build-module/components/global-styles/variations/variations-color.js +1 -1
  120. package/build-module/components/global-styles/variations/variations-color.js.map +1 -1
  121. package/build-module/components/global-styles/variations/variations-typography.js +1 -2
  122. package/build-module/components/global-styles/variations/variations-typography.js.map +1 -1
  123. package/build-module/components/layout/index.js +6 -0
  124. package/build-module/components/layout/index.js.map +1 -1
  125. package/build-module/components/layout/router.js +14 -6
  126. package/build-module/components/layout/router.js.map +1 -1
  127. package/build-module/components/page-patterns/header.js +1 -1
  128. package/build-module/components/page-patterns/header.js.map +1 -1
  129. package/build-module/components/page-patterns/index.js +23 -11
  130. package/build-module/components/page-patterns/index.js.map +1 -1
  131. package/build-module/components/page-templates/index.js +43 -37
  132. package/build-module/components/page-templates/index.js.map +1 -1
  133. package/build-module/components/post-edit/index.js +98 -0
  134. package/build-module/components/post-edit/index.js.map +1 -0
  135. package/build-module/components/post-fields/index.js +306 -0
  136. package/build-module/components/post-fields/index.js.map +1 -0
  137. package/build-module/components/post-list/index.js +275 -0
  138. package/build-module/components/post-list/index.js.map +1 -0
  139. package/build-module/components/posts-app/router.js +3 -3
  140. package/build-module/components/posts-app/router.js.map +1 -1
  141. package/build-module/components/sidebar-dataviews/default-views.js +21 -9
  142. package/build-module/components/sidebar-dataviews/default-views.js.map +1 -1
  143. package/build-module/components/sidebar-dataviews/index.js +42 -3
  144. package/build-module/components/sidebar-dataviews/index.js.map +1 -1
  145. package/build-module/components/sidebar-navigation-screen-global-styles/content.js +57 -0
  146. package/build-module/components/sidebar-navigation-screen-global-styles/content.js.map +1 -0
  147. package/build-module/components/sidebar-navigation-screen-global-styles/index.js +2 -47
  148. package/build-module/components/sidebar-navigation-screen-global-styles/index.js.map +1 -1
  149. package/build-module/hooks/push-changes-to-global-styles/index.js +1 -1
  150. package/build-module/hooks/push-changes-to-global-styles/index.js.map +1 -1
  151. package/build-module/index.js +5 -1
  152. package/build-module/index.js.map +1 -1
  153. package/build-module/store/selectors.js +35 -7
  154. package/build-module/store/selectors.js.map +1 -1
  155. package/build-module/utils/get-filtered-template-parts.js +57 -0
  156. package/build-module/utils/get-filtered-template-parts.js.map +1 -0
  157. package/build-style/posts-rtl.css +581 -503
  158. package/build-style/posts.css +581 -503
  159. package/build-style/style-rtl.css +621 -519
  160. package/build-style/style.css +621 -519
  161. package/package.json +41 -41
  162. package/src/components/add-new-pattern/index.js +8 -2
  163. package/src/components/add-new-template/index.js +4 -1
  164. package/src/components/add-new-template/style.scss +4 -6
  165. package/src/components/block-editor/use-site-editor-settings.js +15 -111
  166. package/src/components/global-styles/block-preview-panel.js +22 -9
  167. package/src/components/global-styles/font-families.js +66 -31
  168. package/src/components/global-styles/font-library-modal/index.js +4 -2
  169. package/src/components/global-styles/font-library-modal/installed-fonts.js +92 -11
  170. package/src/components/global-styles/font-library-modal/style.scss +9 -0
  171. package/src/components/global-styles/font-sizes/confirm-delete-font-size-dialog.js +43 -0
  172. package/src/components/global-styles/font-sizes/confirm-reset-font-sizes-dialog.js +37 -0
  173. package/src/components/global-styles/font-sizes/font-size-preview.js +43 -0
  174. package/src/components/global-styles/font-sizes/font-size.js +250 -0
  175. package/src/components/global-styles/font-sizes/font-sizes-count.js +40 -0
  176. package/src/components/global-styles/font-sizes/font-sizes.js +263 -0
  177. package/src/components/global-styles/font-sizes/rename-font-size-dialog.js +70 -0
  178. package/src/components/global-styles/screen-block.js +12 -14
  179. package/src/components/global-styles/screen-style-variations.js +2 -2
  180. package/src/components/global-styles/screen-typography.js +3 -2
  181. package/src/components/global-styles/size-control/index.js +86 -0
  182. package/src/components/global-styles/style-variations-container.js +4 -0
  183. package/src/components/global-styles/style.scss +13 -3
  184. package/src/components/global-styles/ui.js +10 -0
  185. package/src/components/global-styles/variations/variations-color.js +1 -1
  186. package/src/components/global-styles/variations/variations-typography.js +1 -2
  187. package/src/components/layout/index.js +11 -0
  188. package/src/components/layout/router.js +13 -5
  189. package/src/components/layout/style.scss +26 -8
  190. package/src/components/page-patterns/header.js +1 -1
  191. package/src/components/page-patterns/index.js +15 -8
  192. package/src/components/page-templates/index.js +51 -46
  193. package/src/components/page-templates/style.scss +5 -3
  194. package/src/components/post-edit/index.js +96 -0
  195. package/src/components/post-edit/style.scss +9 -0
  196. package/src/components/post-fields/index.js +345 -0
  197. package/src/components/post-list/index.js +326 -0
  198. package/src/components/{posts-app → post-list}/style.scss +12 -9
  199. package/src/components/posts-app/router.js +3 -3
  200. package/src/components/sidebar-dataviews/default-views.js +21 -9
  201. package/src/components/sidebar-dataviews/index.js +36 -1
  202. package/src/components/sidebar-navigation-screen-global-styles/content.js +55 -0
  203. package/src/components/sidebar-navigation-screen-global-styles/index.js +1 -55
  204. package/src/hooks/push-changes-to-global-styles/index.js +1 -1
  205. package/src/index.js +7 -1
  206. package/src/posts.scss +1 -1
  207. package/src/store/selectors.js +53 -14
  208. package/src/store/test/selectors.js +1 -26
  209. package/src/style.scss +2 -1
  210. package/src/utils/get-filtered-template-parts.js +61 -0
  211. package/src/utils/test/get-filtered-template-parts.js +127 -0
  212. package/build/components/global-styles/screen-background.js +0 -36
  213. package/build/components/global-styles/screen-background.js.map +0 -1
  214. package/build/components/posts-app/posts-list.js +0 -568
  215. package/build/components/posts-app/posts-list.js.map +0 -1
  216. package/build-module/components/global-styles/screen-background.js +0 -30
  217. package/build-module/components/global-styles/screen-background.js.map +0 -1
  218. package/build-module/components/posts-app/posts-list.js +0 -560
  219. package/build-module/components/posts-app/posts-list.js.map +0 -1
  220. package/src/components/global-styles/screen-background.js +0 -29
  221. package/src/components/posts-app/posts-list.js +0 -651
@@ -116,7 +116,7 @@
116
116
  flex-direction: column;
117
117
  }
118
118
 
119
- .dataviews-filters__view-actions {
119
+ .dataviews__view-actions {
120
120
  box-sizing: border-box;
121
121
  padding: 16px 48px;
122
122
  flex-shrink: 0;
@@ -125,256 +125,436 @@
125
125
  transition: padding ease-out 0.1s;
126
126
  }
127
127
  @media (prefers-reduced-motion: reduce) {
128
- .dataviews-filters__view-actions {
128
+ .dataviews__view-actions {
129
129
  transition-duration: 0s;
130
130
  transition-delay: 0s;
131
131
  }
132
132
  }
133
- .dataviews-filters__view-actions .components-search-control .components-base-control__field {
133
+ .dataviews__view-actions .components-search-control .components-base-control__field {
134
134
  max-width: 240px;
135
135
  }
136
136
 
137
- .dataviews-filters__container .dataviews-filters__reset-button[aria-disabled=true], .dataviews-filters__container .dataviews-filters__reset-button[aria-disabled=true]:hover {
138
- opacity: 0;
137
+ .dataviews-view-list__primary-field,
138
+ .dataviews-view-grid__primary-field,
139
+ .dataviews-view-table__primary-field {
140
+ font-size: 13px;
141
+ font-weight: 500;
142
+ color: #757575;
143
+ text-overflow: ellipsis;
144
+ white-space: nowrap;
145
+ width: 100%;
139
146
  }
140
- .dataviews-filters__container .dataviews-filters__reset-button[aria-disabled=true]:focus {
141
- opacity: 1;
147
+ .dataviews-view-list__primary-field a,
148
+ .dataviews-view-grid__primary-field a,
149
+ .dataviews-view-table__primary-field a {
150
+ text-decoration: none;
151
+ text-overflow: ellipsis;
152
+ white-space: nowrap;
153
+ overflow: hidden;
154
+ display: block;
155
+ flex-grow: 0;
156
+ color: #1e1e1e;
142
157
  }
143
-
144
- .dataviews-filters-button {
145
- position: relative;
158
+ .dataviews-view-list__primary-field a:hover,
159
+ .dataviews-view-grid__primary-field a:hover,
160
+ .dataviews-view-table__primary-field a:hover {
161
+ color: var(--wp-admin-theme-color);
162
+ }
163
+ .dataviews-view-list__primary-field a:focus,
164
+ .dataviews-view-grid__primary-field a:focus,
165
+ .dataviews-view-table__primary-field a:focus {
166
+ color: var(--wp-admin-theme-color--rgb);
167
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
168
+ border-radius: 2px;
169
+ }
170
+ .dataviews-view-list__primary-field button.components-button.is-link,
171
+ .dataviews-view-grid__primary-field button.components-button.is-link,
172
+ .dataviews-view-table__primary-field button.components-button.is-link {
173
+ text-decoration: none;
174
+ font-weight: inherit;
175
+ text-overflow: ellipsis;
176
+ white-space: nowrap;
177
+ overflow: hidden;
178
+ display: block;
179
+ width: 100%;
180
+ color: #1e1e1e;
181
+ }
182
+ .dataviews-view-list__primary-field button.components-button.is-link:hover,
183
+ .dataviews-view-grid__primary-field button.components-button.is-link:hover,
184
+ .dataviews-view-table__primary-field button.components-button.is-link:hover {
185
+ color: var(--wp-admin-theme-color);
146
186
  }
147
187
 
148
- .dataviews-pagination {
149
- position: sticky;
150
- bottom: 0;
151
- right: 0;
152
- background-color: #fff;
153
- padding: 12px 48px;
154
- border-top: 1px solid #f0f0f0;
155
- color: #757575;
156
- flex-shrink: 0;
188
+ .dataviews-no-results,
189
+ .dataviews-loading {
190
+ padding: 0 48px;
191
+ flex-grow: 1;
192
+ display: flex;
193
+ align-items: center;
194
+ justify-content: center;
157
195
  transition: padding ease-out 0.1s;
158
196
  }
159
197
  @media (prefers-reduced-motion: reduce) {
160
- .dataviews-pagination {
198
+ .dataviews-no-results,
199
+ .dataviews-loading {
161
200
  transition-duration: 0s;
162
201
  transition-delay: 0s;
163
202
  }
164
203
  }
165
204
 
166
- .dataviews-pagination__page-selection {
167
- font-size: 11px;
168
- text-transform: uppercase;
169
- font-weight: 500;
170
- color: #1e1e1e;
205
+ /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
206
+ @container (max-width: 430px) {
207
+ .dataviews__view-actions {
208
+ padding: 12px 24px;
209
+ }
210
+ .dataviews__view-actions .components-search-control .components-base-control__field {
211
+ max-width: 112px;
212
+ }
213
+
214
+ .dataviews-view-grid,
215
+ .dataviews-no-results,
216
+ .dataviews-loading {
217
+ padding-right: 24px;
218
+ padding-left: 24px;
219
+ }
220
+ }
221
+ .dataviews-bulk-actions__modal {
222
+ z-index: 1000001;
171
223
  }
172
224
 
173
- .dataviews-filters-options {
174
- margin: 32px 0 16px;
225
+ .dataviews-bulk-actions__edit-button.components-button {
226
+ flex-shrink: 0;
175
227
  }
176
228
 
177
- .dataviews-view-table {
229
+ .dataviews-bulk-actions-toolbar {
230
+ position: sticky;
231
+ display: flex;
232
+ flex-direction: column;
233
+ align-content: center;
234
+ flex-wrap: wrap;
235
+ width: -moz-fit-content;
236
+ width: fit-content;
237
+ margin-right: auto;
238
+ margin-left: auto;
239
+ bottom: 24px;
240
+ z-index: 2;
241
+ }
242
+ .dataviews-bulk-actions-toolbar .components-accessible-toolbar {
243
+ border-color: #ddd;
244
+ box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1);
245
+ }
246
+ .dataviews-bulk-actions-toolbar .components-accessible-toolbar .components-toolbar-group {
247
+ border-color: #e0e0e0;
248
+ }
249
+ .dataviews-bulk-actions-toolbar .components-accessible-toolbar .components-toolbar-group:last-child {
250
+ border: 0;
251
+ }
252
+ .dataviews-bulk-actions-toolbar .dataviews-bulk-actions-toolbar__selection-count {
253
+ display: flex;
254
+ align-items: center;
255
+ margin: 0 8px 0 8px;
256
+ }
257
+
258
+ .dataviews-bulk-actions-toolbar__wrapper {
259
+ display: flex;
260
+ flex-grow: 1;
178
261
  width: 100%;
179
- text-indent: 0;
180
- border-color: inherit;
181
- border-collapse: collapse;
262
+ }
263
+ .dataviews-bulk-actions-toolbar__wrapper .components-toolbar-group {
264
+ align-items: center;
265
+ }
266
+ .dataviews-bulk-actions-toolbar__wrapper .components-button.is-busy {
267
+ max-height: 36px;
268
+ }
269
+
270
+ .dataviews-filters__button {
182
271
  position: relative;
183
- color: #757575;
184
- margin-bottom: auto;
185
272
  }
186
- .dataviews-view-table a {
187
- text-decoration: none;
188
- color: #1e1e1e;
189
- font-weight: 500;
273
+
274
+ .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true], .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true]:hover {
275
+ opacity: 0;
190
276
  }
191
- .dataviews-view-table th {
192
- text-align: right;
193
- color: #1e1e1e;
194
- font-weight: normal;
195
- font-size: 13px;
277
+ .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true]:focus {
278
+ opacity: 1;
196
279
  }
197
- .dataviews-view-table td,
198
- .dataviews-view-table th {
199
- padding: 12px;
200
- white-space: nowrap;
280
+
281
+ .dataviews-filters__summary-popover .components-popover__content {
282
+ width: 230px;
283
+ padding: 0;
284
+ border-radius: 4px;
201
285
  }
202
- .dataviews-view-table td[data-field-id=actions],
203
- .dataviews-view-table th[data-field-id=actions] {
204
- text-align: left;
286
+
287
+ .dataviews-filters__summary-operators-container {
288
+ padding: 8px 8px 0;
205
289
  }
206
- .dataviews-view-table td.dataviews-view-table__checkbox-column,
207
- .dataviews-view-table th.dataviews-view-table__checkbox-column {
208
- padding-left: 0;
290
+ .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__search-widget-listbox) {
291
+ border-bottom: 1px solid #e0e0e0;
292
+ padding-bottom: 8px;
209
293
  }
210
- .dataviews-view-table tr {
211
- border-bottom: 1px solid #f0f0f0;
294
+ .dataviews-filters__summary-operators-container:empty {
295
+ display: none;
212
296
  }
213
- .dataviews-view-table tr .dataviews-view-table-header-button {
214
- gap: 4px;
297
+ .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-name {
298
+ color: #757575;
215
299
  }
216
- .dataviews-view-table tr td:first-child,
217
- .dataviews-view-table tr th:first-child {
218
- padding-right: 48px;
300
+
301
+ .dataviews-filters__summary-chip-container {
302
+ position: relative;
303
+ white-space: pre-wrap;
219
304
  }
220
- .dataviews-view-table tr td:first-child .dataviews-view-table-header-button,
221
- .dataviews-view-table tr td:first-child .dataviews-view-table-header,
222
- .dataviews-view-table tr th:first-child .dataviews-view-table-header-button,
223
- .dataviews-view-table tr th:first-child .dataviews-view-table-header {
224
- margin-right: -8px;
305
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip {
306
+ border-radius: 16px;
307
+ border: 1px solid transparent;
308
+ cursor: pointer;
309
+ padding: 4px 12px;
310
+ min-height: 32px;
311
+ background: #f0f0f0;
312
+ color: #2f2f2f;
313
+ position: relative;
314
+ display: flex;
315
+ align-items: center;
225
316
  }
226
- .dataviews-view-table tr td:last-child,
227
- .dataviews-view-table tr th:last-child {
228
- padding-left: 48px;
317
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-reset {
318
+ padding-inline-end: 28px;
229
319
  }
230
- .dataviews-view-table tr:last-child {
231
- border-bottom: 0;
320
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip[aria-expanded=true] {
321
+ background: #e0e0e0;
322
+ color: #1e1e1e;
232
323
  }
233
- .dataviews-view-table tr.is-hovered {
234
- background-color: #f8f8f8;
324
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values {
325
+ color: var(--wp-admin-theme-color);
326
+ background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
235
327
  }
236
- .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input {
237
- opacity: 0;
328
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values[aria-expanded=true] {
329
+ background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
238
330
  }
239
- .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:checked, .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:indeterminate, .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:focus {
240
- opacity: 1;
331
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible {
332
+ outline: none;
333
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
241
334
  }
242
- .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
243
- opacity: 0;
335
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip .dataviews-filters-__summary-filter-text-name {
336
+ font-weight: 500;
244
337
  }
245
- .dataviews-view-table tr:focus-within .components-checkbox-control__input,
246
- .dataviews-view-table tr:focus-within .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr.is-hovered .components-checkbox-control__input,
247
- .dataviews-view-table tr.is-hovered .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr:hover .components-checkbox-control__input,
248
- .dataviews-view-table tr:hover .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
249
- opacity: 1;
338
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove {
339
+ width: 24px;
340
+ height: 24px;
341
+ border-radius: 50%;
342
+ border: 0;
343
+ padding: 0;
344
+ position: absolute;
345
+ left: 4px;
346
+ top: 50%;
347
+ transform: translateY(-50%);
348
+ display: flex;
349
+ align-items: center;
350
+ justify-content: center;
351
+ background: transparent;
352
+ cursor: pointer;
250
353
  }
251
- @media (hover: none) {
252
- .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input,
253
- .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
254
- opacity: 1;
255
- }
354
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
355
+ fill: #757575;
256
356
  }
257
- .dataviews-view-table tr.is-selected {
258
- background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
259
- color: #757575;
357
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus {
358
+ background: #e0e0e0;
260
359
  }
261
- .dataviews-view-table tr.is-selected:hover {
262
- background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
360
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover svg, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus svg {
361
+ fill: #1e1e1e;
263
362
  }
264
- .dataviews-view-table thead {
265
- position: sticky;
266
- inset-block-start: 0;
267
- z-index: 1;
363
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg {
364
+ fill: var(--wp-admin-theme-color);
268
365
  }
269
- .dataviews-view-table thead tr {
270
- border: 0;
366
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover {
367
+ background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
271
368
  }
272
- .dataviews-view-table thead th {
273
- background-color: #fff;
274
- box-shadow: inset 0 -1px 0 #f0f0f0;
275
- padding-top: 8px;
276
- padding-bottom: 8px;
277
- padding-right: 12px;
278
- font-size: 11px;
279
- text-transform: uppercase;
280
- font-weight: 500;
369
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus-visible {
370
+ outline: none;
371
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
281
372
  }
282
- .dataviews-view-table thead th:has(.dataviews-view-table-header-button):not(:first-child) {
283
- padding-right: 4px;
373
+
374
+ .dataviews-filters__search-widget-filter-combobox-list {
375
+ max-height: 184px;
376
+ padding: 4px;
377
+ overflow: auto;
378
+ border-top: 1px solid #e0e0e0;
284
379
  }
285
- .dataviews-view-table tbody td {
286
- vertical-align: top;
380
+ .dataviews-filters__search-widget-filter-combobox-list .dataviews-filters__search-widget-filter-combobox-item-value [data-user-value] {
381
+ font-weight: 600;
287
382
  }
288
- .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper {
289
- min-height: 32px;
383
+
384
+ .dataviews-filters__search-widget-listbox {
385
+ max-height: 184px;
386
+ padding: 4px;
387
+ overflow: auto;
388
+ }
389
+
390
+ .dataviews-filters__search-widget-listitem {
290
391
  display: flex;
291
392
  align-items: center;
393
+ gap: 8px;
394
+ border-radius: 2px;
395
+ box-sizing: border-box;
396
+ padding: 8px 12px;
397
+ cursor: default;
398
+ margin-block-end: 2px;
399
+ }
400
+ .dataviews-filters__search-widget-listitem:last-child {
401
+ margin-block-end: 0;
402
+ }
403
+ .dataviews-filters__search-widget-listitem:hover, .dataviews-filters__search-widget-listitem[data-active-item], .dataviews-filters__search-widget-listitem:focus {
404
+ background-color: var(--wp-admin-theme-color);
405
+ color: #fff;
406
+ }
407
+ .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-check, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-check, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-check {
408
+ fill: #fff;
409
+ }
410
+ .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-description, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-description, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-description {
411
+ color: #fff;
412
+ }
413
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-check {
414
+ width: 24px;
415
+ height: 24px;
416
+ flex-shrink: 0;
417
+ }
418
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-description {
419
+ display: block;
420
+ overflow: hidden;
421
+ text-overflow: ellipsis;
422
+ font-size: 12px;
423
+ line-height: 16px;
424
+ color: #757575;
425
+ }
426
+
427
+ .dataviews-filters__search-widget-filter-combobox__wrapper {
428
+ position: relative;
429
+ padding: 8px;
430
+ }
431
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
432
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
433
+ padding: 6px 8px;
434
+ box-shadow: 0 0 0 transparent;
435
+ transition: box-shadow 0.1s linear;
436
+ border-radius: 2px;
437
+ border: 1px solid #949494;
438
+ /* Fonts smaller than 16px causes mobile safari to zoom. */
439
+ font-size: 16px;
440
+ /* Override core line-height. To be reviewed. */
441
+ line-height: normal;
442
+ display: block;
443
+ padding: 0 8px 0 32px;
444
+ background: #f0f0f0;
445
+ border: none;
446
+ width: 100%;
447
+ height: 32px;
448
+ margin-right: 0;
449
+ margin-left: 0;
450
+ /* Fonts smaller than 16px causes mobile safari to zoom. */
451
+ font-size: 16px;
452
+ }
453
+ @media (prefers-reduced-motion: reduce) {
454
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
455
+ transition-duration: 0s;
456
+ transition-delay: 0s;
457
+ }
458
+ }
459
+ @media (min-width: 600px) {
460
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
461
+ font-size: 13px;
462
+ /* Override core line-height. To be reviewed. */
463
+ line-height: normal;
464
+ }
292
465
  }
293
- .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper > * {
294
- flex-grow: 1;
466
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
467
+ border-color: var(--wp-admin-theme-color);
468
+ box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
469
+ outline: 2px solid transparent;
295
470
  }
296
- .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__primary-field a {
297
- flex-grow: 0;
471
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-input-placeholder {
472
+ color: rgba(30, 30, 30, 0.62);
298
473
  }
299
- .dataviews-view-table .dataviews-view-table-header-button {
300
- padding: 4px 8px;
301
- font-size: 11px;
302
- text-transform: uppercase;
303
- font-weight: 500;
474
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
475
+ opacity: 1;
476
+ color: rgba(30, 30, 30, 0.62);
304
477
  }
305
- .dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
306
- color: #1e1e1e;
478
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:-ms-input-placeholder {
479
+ color: rgba(30, 30, 30, 0.62);
307
480
  }
308
- .dataviews-view-table .dataviews-view-table-header-button span {
309
- speak: none;
481
+ @media (min-width: 600px) {
482
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
483
+ font-size: 13px;
484
+ }
310
485
  }
311
- .dataviews-view-table .dataviews-view-table-header-button span:empty {
312
- display: none;
486
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
487
+ background: #fff;
488
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
313
489
  }
314
- .dataviews-view-table .dataviews-view-table-header {
315
- padding-right: 4px;
490
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
491
+ color: #757575;
316
492
  }
317
- .dataviews-view-table .dataviews-view-table__actions-column {
318
- width: 1%;
493
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-decoration, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-cancel-button, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-results-button, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-results-decoration {
494
+ -webkit-appearance: none;
319
495
  }
320
- .dataviews-view-table:has(tr.is-selected) .components-checkbox-control__input {
321
- opacity: 1;
496
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon {
497
+ position: absolute;
498
+ left: 12px;
499
+ top: 50%;
500
+ transform: translateY(-50%);
501
+ display: flex;
502
+ align-items: center;
503
+ justify-content: center;
504
+ width: 24px;
322
505
  }
323
506
 
324
- .dataviews-view-list__primary-field,
325
- .dataviews-view-grid__primary-field,
326
- .dataviews-view-table__primary-field {
327
- font-size: 13px;
328
- font-weight: 500;
507
+ .dataviews-pagination {
508
+ position: sticky;
509
+ bottom: 0;
510
+ right: 0;
511
+ background-color: #fff;
512
+ padding: 12px 48px;
513
+ border-top: 1px solid #f0f0f0;
329
514
  color: #757575;
330
- text-overflow: ellipsis;
331
- white-space: nowrap;
332
- width: 100%;
515
+ flex-shrink: 0;
516
+ transition: padding ease-out 0.1s;
333
517
  }
334
- .dataviews-view-list__primary-field a,
335
- .dataviews-view-grid__primary-field a,
336
- .dataviews-view-table__primary-field a {
337
- text-decoration: none;
338
- text-overflow: ellipsis;
339
- white-space: nowrap;
340
- overflow: hidden;
341
- display: block;
342
- flex-grow: 0;
518
+ @media (prefers-reduced-motion: reduce) {
519
+ .dataviews-pagination {
520
+ transition-duration: 0s;
521
+ transition-delay: 0s;
522
+ }
523
+ }
524
+
525
+ .dataviews-pagination__page-selection {
526
+ font-size: 11px;
527
+ text-transform: uppercase;
528
+ font-weight: 500;
343
529
  color: #1e1e1e;
344
530
  }
345
- .dataviews-view-list__primary-field a:hover,
346
- .dataviews-view-grid__primary-field a:hover,
347
- .dataviews-view-table__primary-field a:hover {
348
- color: var(--wp-admin-theme-color);
531
+
532
+ /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
533
+ @container (max-width: 430px) {
534
+ .dataviews-pagination {
535
+ padding: 12px 24px;
536
+ }
349
537
  }
350
- .dataviews-view-list__primary-field a:focus,
351
- .dataviews-view-grid__primary-field a:focus,
352
- .dataviews-view-table__primary-field a:focus {
353
- color: var(--wp-admin-theme-color--rgb);
354
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
355
- border-radius: 2px;
538
+ .dataviews-action-modal {
539
+ z-index: 1000001;
356
540
  }
357
- .dataviews-view-list__primary-field button.components-button.is-link,
358
- .dataviews-view-grid__primary-field button.components-button.is-link,
359
- .dataviews-view-table__primary-field button.components-button.is-link {
360
- text-decoration: none;
361
- font-weight: inherit;
362
- text-overflow: ellipsis;
363
- white-space: nowrap;
364
- overflow: hidden;
365
- display: block;
366
- width: 100%;
367
- color: #1e1e1e;
541
+
542
+ .dataviews-selection-checkbox {
543
+ --checkbox-input-size: 24px;
544
+ line-height: 0;
545
+ flex-shrink: 0;
368
546
  }
369
- .dataviews-view-list__primary-field button.components-button.is-link:hover,
370
- .dataviews-view-grid__primary-field button.components-button.is-link:hover,
371
- .dataviews-view-table__primary-field button.components-button.is-link:hover {
372
- color: var(--wp-admin-theme-color);
547
+ @media (min-width: 600px) {
548
+ .dataviews-selection-checkbox {
549
+ --checkbox-input-size: 16px;
550
+ }
551
+ }
552
+ .dataviews-selection-checkbox .components-checkbox-control__input-container {
553
+ margin: 0;
373
554
  }
374
555
 
375
556
  .dataviews-view-grid {
376
557
  margin-bottom: auto;
377
- grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
378
558
  grid-template-rows: max-content;
379
559
  padding: 0 48px 24px;
380
560
  transition: padding ease-out 0.1s;
@@ -385,21 +565,6 @@
385
565
  transition-delay: 0s;
386
566
  }
387
567
  }
388
- @media (min-width: 480px) {
389
- .dataviews-view-grid {
390
- grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
391
- }
392
- }
393
- @media (min-width: 1080px) {
394
- .dataviews-view-grid {
395
- grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
396
- }
397
- }
398
- @media (min-width: 1440px) {
399
- .dataviews-view-grid {
400
- grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
401
- }
402
- }
403
568
  .dataviews-view-grid .dataviews-view-grid__card {
404
569
  height: 100%;
405
570
  justify-content: flex-start;
@@ -447,6 +612,7 @@
447
612
  }
448
613
  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field {
449
614
  align-items: flex-start;
615
+ min-height: 24px;
450
616
  }
451
617
  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(.is-column) {
452
618
  align-items: center;
@@ -460,6 +626,9 @@
460
626
  text-overflow: ellipsis;
461
627
  white-space: nowrap;
462
628
  }
629
+ .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field.is-column + .is-row {
630
+ margin-top: 4px;
631
+ }
463
632
  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name {
464
633
  color: #757575;
465
634
  }
@@ -478,6 +647,39 @@
478
647
  font-size: 12px;
479
648
  }
480
649
 
650
+ .dataviews-view-grid.dataviews-view-grid {
651
+ grid-template-columns: repeat(1, minmax(0, 1fr));
652
+ }
653
+ @media (min-width: 480px) {
654
+ .dataviews-view-grid.dataviews-view-grid {
655
+ grid-template-columns: repeat(2, minmax(0, 1fr));
656
+ }
657
+ }
658
+ @media (min-width: 1080px) {
659
+ .dataviews-view-grid.dataviews-view-grid {
660
+ grid-template-columns: repeat(3, minmax(0, 1fr));
661
+ }
662
+ }
663
+ @media (min-width: 1440px) {
664
+ .dataviews-view-grid.dataviews-view-grid {
665
+ grid-template-columns: repeat(4, minmax(0, 1fr));
666
+ }
667
+ }
668
+ @media (min-width: 1920px) {
669
+ .dataviews-view-grid.dataviews-view-grid {
670
+ grid-template-columns: repeat(5, minmax(0, 1fr));
671
+ }
672
+ }
673
+
674
+ .dataviews-density-picker__range-control {
675
+ width: 200px;
676
+ }
677
+
678
+ .dataviews-view-grid__field-value:empty,
679
+ .dataviews-view-grid__field:empty {
680
+ display: none;
681
+ }
682
+
481
683
  .dataviews-view-list {
482
684
  margin: 0 0 auto;
483
685
  }
@@ -493,20 +695,40 @@
493
695
  .dataviews-view-list li .dataviews-view-list__item-wrapper > * {
494
696
  width: 100%;
495
697
  }
698
+ .dataviews-view-list li .dataviews-view-list__item-actions {
699
+ position: absolute;
700
+ top: 16px;
701
+ left: 0;
702
+ }
703
+ .dataviews-view-list li .dataviews-view-list__item-actions > div {
704
+ height: 24px;
705
+ }
496
706
  .dataviews-view-list li .dataviews-view-list__item-actions .components-button {
497
707
  opacity: 0;
498
- position: fixed;
499
- left: 0;
708
+ }
709
+ .dataviews-view-list li:has(.dataviews-view-list__fields:empty) .dataviews-view-list__item-actions {
710
+ top: 50%;
711
+ transform: translateY(-50%);
500
712
  }
501
713
  .dataviews-view-list li.is-selected .dataviews-view-list__item-actions, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions {
502
- padding-left: 24px;
714
+ background: #f8f8f8;
715
+ padding-right: 8px;
716
+ margin-left: 24px;
717
+ box-shadow: 12px 0 8px 0 #f8f8f8;
503
718
  }
504
719
  .dataviews-view-list li.is-selected .dataviews-view-list__item-actions .components-button, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions .components-button, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions .components-button {
505
720
  opacity: 1;
506
721
  position: static;
507
722
  }
508
- .dataviews-view-list li.is-selected .dataviews-view-list__item, .dataviews-view-list li.is-hovered .dataviews-view-list__item, .dataviews-view-list li:focus-within .dataviews-view-list__item {
509
- padding-left: 0;
723
+ .dataviews-view-list li.is-selected .dataviews-view-list__item-actions {
724
+ background-color: #f7f8ff;
725
+ box-shadow: 12px 0 8px 0 #f7f8ff;
726
+ }
727
+ .dataviews-view-list li.is-selected.is-selected {
728
+ border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
729
+ }
730
+ .dataviews-view-list li.is-selected.is-selected + li {
731
+ border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
510
732
  }
511
733
  .dataviews-view-list li:not(.is-selected) .dataviews-view-list__primary-field {
512
734
  color: #1e1e1e;
@@ -532,7 +754,7 @@
532
754
  color: var(--wp-admin-theme-color);
533
755
  }
534
756
  .dataviews-view-list .dataviews-view-list__item {
535
- padding: 16px 24px 16px 0;
757
+ padding: 16px 24px;
536
758
  width: 100%;
537
759
  scroll-margin: 8px 0;
538
760
  }
@@ -547,13 +769,13 @@
547
769
  border-radius: 2px;
548
770
  }
549
771
  .dataviews-view-list .dataviews-view-list__item .dataviews-view-list__primary-field {
550
- min-height: 20px;
551
- line-height: 20px;
772
+ min-height: 24px;
773
+ line-height: 24px;
552
774
  overflow: hidden;
553
775
  }
554
776
  .dataviews-view-list .dataviews-view-list__media-wrapper {
555
- width: 40px;
556
- height: 40px;
777
+ width: 52px;
778
+ height: 52px;
557
779
  overflow: hidden;
558
780
  position: relative;
559
781
  flex-shrink: 0;
@@ -580,303 +802,182 @@
580
802
  height: 32px;
581
803
  background-color: #e0e0e0;
582
804
  }
805
+ .dataviews-view-list .dataviews-view-list__field-wrapper {
806
+ min-height: 52px;
807
+ }
583
808
  .dataviews-view-list .dataviews-view-list__fields {
584
809
  color: #757575;
585
810
  display: flex;
586
- gap: 8px;
811
+ gap: 12px;
812
+ row-gap: 4px;
587
813
  flex-wrap: wrap;
588
814
  font-size: 12px;
589
815
  }
816
+ .dataviews-view-list .dataviews-view-list__fields:empty {
817
+ display: none;
818
+ }
590
819
  .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field:has(.dataviews-view-list__field-value:empty) {
591
820
  display: none;
592
821
  }
593
822
  .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field-value {
594
823
  line-height: 24px;
595
- display: inline-flex;
596
- }
597
- .dataviews-view-list .dataviews-view-list__item-actions {
598
- padding-left: 24px;
599
824
  }
600
825
  .dataviews-view-list + .dataviews-pagination {
601
826
  justify-content: space-between;
602
827
  }
603
828
 
604
- .dataviews-action-modal {
605
- z-index: 1000001;
606
- }
607
-
608
- .dataviews-no-results,
609
- .dataviews-loading {
610
- padding: 0 48px;
611
- flex-grow: 1;
612
- display: flex;
613
- align-items: center;
614
- justify-content: center;
615
- transition: padding ease-out 0.1s;
616
- }
617
- @media (prefers-reduced-motion: reduce) {
618
- .dataviews-no-results,
619
- .dataviews-loading {
620
- transition-duration: 0s;
621
- transition-delay: 0s;
622
- }
623
- }
624
-
625
- .dataviews-view-table-selection-checkbox {
626
- --checkbox-input-size: 24px;
627
- line-height: 0;
628
- flex-shrink: 0;
629
- }
630
- @media (min-width: 600px) {
631
- .dataviews-view-table-selection-checkbox {
632
- --checkbox-input-size: 16px;
633
- }
634
- }
635
- .dataviews-view-table-selection-checkbox .components-checkbox-control__input-container {
636
- margin: 0;
637
- }
638
-
639
- .dataviews-bulk-edit-button.components-button {
640
- flex-shrink: 0;
641
- }
642
-
643
- .dataviews-filter-summary__popover .components-popover__content {
644
- width: 230px;
645
- padding: 0;
646
- border-radius: 4px;
647
- }
648
-
649
- .dataviews-search-widget-filter-combobox-list {
650
- max-height: 184px;
651
- padding: 4px;
652
- overflow: auto;
653
- border-top: 1px solid #e0e0e0;
829
+ .dataviews-view-table {
830
+ width: 100%;
831
+ text-indent: 0;
832
+ border-color: inherit;
833
+ border-collapse: collapse;
834
+ position: relative;
835
+ color: #757575;
836
+ margin-bottom: auto;
654
837
  }
655
- .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item-value [data-user-value] {
656
- font-weight: 600;
838
+ .dataviews-view-table a {
839
+ text-decoration: none;
840
+ color: #1e1e1e;
841
+ font-weight: 500;
657
842
  }
658
-
659
- .dataviews-search-widget-listbox {
660
- max-height: 184px;
661
- padding: 4px;
662
- overflow: auto;
843
+ .dataviews-view-table th {
844
+ text-align: right;
845
+ color: #1e1e1e;
846
+ font-weight: normal;
847
+ font-size: 13px;
663
848
  }
664
-
665
- .dataviews-search-widget-listitem {
666
- display: flex;
667
- align-items: center;
668
- gap: 8px;
669
- border-radius: 2px;
670
- box-sizing: border-box;
671
- padding: 8px 12px;
672
- cursor: default;
673
- margin-block-end: 2px;
849
+ .dataviews-view-table td,
850
+ .dataviews-view-table th {
851
+ padding: 12px;
852
+ white-space: nowrap;
674
853
  }
675
- .dataviews-search-widget-listitem:last-child {
676
- margin-block-end: 0;
854
+ .dataviews-view-table td.dataviews-view-table__actions-column,
855
+ .dataviews-view-table th.dataviews-view-table__actions-column {
856
+ text-align: left;
677
857
  }
678
- .dataviews-search-widget-listitem:hover, .dataviews-search-widget-listitem[data-active-item], .dataviews-search-widget-listitem:focus {
679
- background-color: var(--wp-admin-theme-color);
680
- color: #fff;
858
+ .dataviews-view-table td.dataviews-view-table__checkbox-column,
859
+ .dataviews-view-table th.dataviews-view-table__checkbox-column {
860
+ padding-left: 0;
681
861
  }
682
- .dataviews-search-widget-listitem:hover .dataviews-search-widget-listitem-check, .dataviews-search-widget-listitem[data-active-item] .dataviews-search-widget-listitem-check, .dataviews-search-widget-listitem:focus .dataviews-search-widget-listitem-check {
683
- fill: #fff;
862
+ .dataviews-view-table tr {
863
+ border-top: 1px solid #f0f0f0;
684
864
  }
685
- .dataviews-search-widget-listitem:hover .dataviews-search-widget-listitem-description, .dataviews-search-widget-listitem[data-active-item] .dataviews-search-widget-listitem-description, .dataviews-search-widget-listitem:focus .dataviews-search-widget-listitem-description {
686
- color: #fff;
865
+ .dataviews-view-table tr .dataviews-view-table-header-button {
866
+ gap: 4px;
687
867
  }
688
- .dataviews-search-widget-listitem .dataviews-search-widget-listitem-check {
689
- width: 24px;
690
- height: 24px;
691
- flex-shrink: 0;
868
+ .dataviews-view-table tr td:first-child,
869
+ .dataviews-view-table tr th:first-child {
870
+ padding-right: 48px;
692
871
  }
693
- .dataviews-search-widget-listitem .dataviews-search-widget-listitem-description {
694
- display: block;
695
- overflow: hidden;
696
- text-overflow: ellipsis;
697
- font-size: 12px;
698
- line-height: 16px;
699
- color: #757575;
872
+ .dataviews-view-table tr td:first-child .dataviews-view-table-header-button,
873
+ .dataviews-view-table tr td:first-child .dataviews-view-table-header,
874
+ .dataviews-view-table tr th:first-child .dataviews-view-table-header-button,
875
+ .dataviews-view-table tr th:first-child .dataviews-view-table-header {
876
+ margin-right: -8px;
700
877
  }
701
-
702
- .dataviews-search-widget-filter-combobox__wrapper {
703
- position: relative;
704
- padding: 8px;
878
+ .dataviews-view-table tr td:last-child,
879
+ .dataviews-view-table tr th:last-child {
880
+ padding-left: 48px;
705
881
  }
706
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input {
707
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
708
- padding: 6px 8px;
709
- box-shadow: 0 0 0 transparent;
710
- transition: box-shadow 0.1s linear;
711
- border-radius: 2px;
712
- border: 1px solid #949494;
713
- /* Fonts smaller than 16px causes mobile safari to zoom. */
714
- font-size: 16px;
715
- /* Override core line-height. To be reviewed. */
716
- line-height: normal;
717
- display: block;
718
- padding: 0 8px 0 32px;
719
- background: #f0f0f0;
720
- border: none;
721
- width: 100%;
722
- height: 32px;
723
- margin-right: 0;
724
- margin-left: 0;
725
- /* Fonts smaller than 16px causes mobile safari to zoom. */
726
- font-size: 16px;
882
+ .dataviews-view-table tr:last-child {
883
+ border-bottom: 0;
727
884
  }
728
- @media (prefers-reduced-motion: reduce) {
729
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input {
730
- transition-duration: 0s;
731
- transition-delay: 0s;
732
- }
885
+ .dataviews-view-table tr.is-hovered {
886
+ background-color: #f8f8f8;
733
887
  }
734
- @media (min-width: 600px) {
735
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input {
736
- font-size: 13px;
737
- /* Override core line-height. To be reviewed. */
738
- line-height: normal;
739
- }
888
+ .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input {
889
+ opacity: 0;
740
890
  }
741
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input:focus {
742
- border-color: var(--wp-admin-theme-color);
743
- box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
744
- outline: 2px solid transparent;
891
+ .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:checked, .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:indeterminate, .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:focus {
892
+ opacity: 1;
745
893
  }
746
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input::-webkit-input-placeholder {
747
- color: rgba(30, 30, 30, 0.62);
894
+ .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
895
+ opacity: 0;
748
896
  }
749
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input::-moz-placeholder {
897
+ .dataviews-view-table tr:focus-within .components-checkbox-control__input,
898
+ .dataviews-view-table tr:focus-within .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr.is-hovered .components-checkbox-control__input,
899
+ .dataviews-view-table tr.is-hovered .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr:hover .components-checkbox-control__input,
900
+ .dataviews-view-table tr:hover .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
750
901
  opacity: 1;
751
- color: rgba(30, 30, 30, 0.62);
752
902
  }
753
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input:-ms-input-placeholder {
754
- color: rgba(30, 30, 30, 0.62);
755
- }
756
- @media (min-width: 600px) {
757
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input {
758
- font-size: 13px;
903
+ @media (hover: none) {
904
+ .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input,
905
+ .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
906
+ opacity: 1;
759
907
  }
760
908
  }
761
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input:focus {
762
- background: #fff;
763
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
764
- }
765
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input::placeholder {
909
+ .dataviews-view-table tr.is-selected {
910
+ background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
766
911
  color: #757575;
767
912
  }
768
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input::-webkit-search-decoration, .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input::-webkit-search-cancel-button, .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input::-webkit-search-results-button, .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input::-webkit-search-results-decoration {
769
- -webkit-appearance: none;
913
+ .dataviews-view-table tr.is-selected, .dataviews-view-table tr.is-selected + tr {
914
+ border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
770
915
  }
771
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__icon {
772
- position: absolute;
773
- left: 12px;
774
- top: 50%;
775
- transform: translateY(-50%);
776
- display: flex;
777
- align-items: center;
778
- justify-content: center;
779
- width: 24px;
916
+ .dataviews-view-table tr.is-selected:hover {
917
+ background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
780
918
  }
781
-
782
- .dataviews-filter-summary__operators-container {
783
- padding: 8px 8px 0;
919
+ .dataviews-view-table thead {
920
+ position: sticky;
921
+ inset-block-start: 0;
922
+ z-index: 1;
784
923
  }
785
- .dataviews-filter-summary__operators-container:has(+ .dataviews-search-widget-listbox) {
786
- border-bottom: 1px solid #e0e0e0;
787
- padding-bottom: 8px;
924
+ .dataviews-view-table thead tr {
925
+ border: 0;
788
926
  }
789
- .dataviews-filter-summary__operators-container:empty {
790
- display: none;
927
+ .dataviews-view-table thead th {
928
+ background-color: #fff;
929
+ padding-top: 8px;
930
+ padding-bottom: 8px;
931
+ padding-right: 12px;
932
+ font-size: 11px;
933
+ text-transform: uppercase;
934
+ font-weight: 500;
791
935
  }
792
- .dataviews-filter-summary__operators-container .dataviews-filter-summary__operators-filter-name {
793
- color: #757575;
936
+ .dataviews-view-table thead th:has(.dataviews-view-table-header-button):not(:first-child) {
937
+ padding-right: 4px;
794
938
  }
795
-
796
- .dataviews-filter-summary__chip-container {
797
- position: relative;
798
- white-space: pre-wrap;
939
+ .dataviews-view-table tbody td {
940
+ vertical-align: top;
799
941
  }
800
- .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip {
801
- border-radius: 16px;
802
- border: 1px solid transparent;
803
- cursor: pointer;
804
- padding: 4px 12px;
942
+ .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper {
805
943
  min-height: 32px;
806
- background: #f0f0f0;
807
- color: #2f2f2f;
808
- position: relative;
809
944
  display: flex;
810
945
  align-items: center;
811
946
  }
812
- .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip.has-reset {
813
- padding-inline-end: 28px;
814
- }
815
- .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:hover, .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:focus-visible, .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip[aria-expanded=true] {
816
- background: #e0e0e0;
817
- color: #1e1e1e;
818
- }
819
- .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip.has-values {
820
- color: var(--wp-admin-theme-color);
821
- background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
822
- }
823
- .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip.has-values:hover, .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip.has-values[aria-expanded=true] {
824
- background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
825
- }
826
- .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:focus-visible {
827
- outline: none;
828
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
947
+ .dataviews-view-table tbody .components-v-stack > .dataviews-view-table__cell-content-wrapper:not(:first-child) {
948
+ min-height: 0;
829
949
  }
830
- .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip .dataviews-filter-summary__filter-text-name {
950
+ .dataviews-view-table .dataviews-view-table-header-button {
951
+ padding: 4px 8px;
952
+ font-size: 11px;
953
+ text-transform: uppercase;
831
954
  font-weight: 500;
832
955
  }
833
- .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip-remove {
834
- width: 24px;
835
- height: 24px;
836
- border-radius: 50%;
837
- border: 0;
838
- padding: 0;
839
- position: absolute;
840
- left: 4px;
841
- top: 50%;
842
- transform: translateY(-50%);
843
- display: flex;
844
- align-items: center;
845
- justify-content: center;
846
- background: transparent;
847
- cursor: pointer;
956
+ .dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
957
+ color: #1e1e1e;
848
958
  }
849
- .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip-remove svg {
850
- fill: #757575;
959
+ .dataviews-view-table .dataviews-view-table-header-button span {
960
+ speak: none;
851
961
  }
852
- .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip-remove:hover, .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip-remove:focus {
853
- background: #e0e0e0;
962
+ .dataviews-view-table .dataviews-view-table-header-button span:empty {
963
+ display: none;
854
964
  }
855
- .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip-remove:hover svg, .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip-remove:focus svg {
856
- fill: #1e1e1e;
965
+ .dataviews-view-table .dataviews-view-table-header {
966
+ padding-right: 4px;
857
967
  }
858
- .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip-remove.has-values svg {
859
- fill: var(--wp-admin-theme-color);
968
+ .dataviews-view-table .dataviews-view-table__actions-column {
969
+ width: 1%;
860
970
  }
861
- .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip-remove.has-values:hover {
862
- background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
971
+ .dataviews-view-table:has(tr.is-selected) .components-checkbox-control__input {
972
+ opacity: 1;
863
973
  }
864
- .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip-remove:focus-visible {
865
- outline: none;
866
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
974
+
975
+ .dataviews-view-table__cell-content-wrapper:empty {
976
+ display: none;
867
977
  }
868
978
 
869
979
  /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
870
980
  @container (max-width: 430px) {
871
- .dataviews-pagination,
872
- .dataviews-filters__view-actions {
873
- padding: 12px 24px;
874
- }
875
-
876
- .dataviews-filters__view-actions .components-search-control .components-base-control__field {
877
- max-width: 112px;
878
- }
879
-
880
981
  .dataviews-view-table tr td:first-child,
881
982
  .dataviews-view-table tr th:first-child {
882
983
  padding-right: 24px;
@@ -886,53 +987,14 @@
886
987
  .dataviews-view-table tr th:last-child {
887
988
  padding-left: 24px;
888
989
  }
889
-
890
- .dataviews-view-grid,
891
- .dataviews-no-results,
892
- .dataviews-loading {
893
- padding-right: 24px;
894
- padding-left: 24px;
895
- }
896
- }
897
- .dataviews-bulk-actions-toolbar-wrapper {
898
- display: flex;
899
- flex-grow: 1;
900
- width: 100%;
901
- }
902
- .dataviews-bulk-actions-toolbar-wrapper .components-toolbar-group {
903
- align-items: center;
904
- }
905
- .dataviews-bulk-actions-toolbar-wrapper .components-button.is-busy {
906
- max-height: 36px;
907
- }
908
-
909
- .dataviews-bulk-actions {
910
- position: sticky;
911
- display: flex;
912
- flex-direction: column;
913
- align-content: center;
914
- flex-wrap: wrap;
915
- width: -moz-fit-content;
916
- width: fit-content;
917
- margin-right: auto;
918
- margin-left: auto;
919
- bottom: 24px;
920
- z-index: 2;
921
- }
922
- .dataviews-bulk-actions .components-accessible-toolbar {
923
- border-color: #ddd;
924
- box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1);
925
990
  }
926
- .dataviews-bulk-actions .components-accessible-toolbar .components-toolbar-group {
927
- border-color: #e0e0e0;
928
- }
929
- .dataviews-bulk-actions .components-accessible-toolbar .components-toolbar-group:last-child {
930
- border: 0;
991
+ .dataviews-view-table-selection-checkbox {
992
+ --checkbox-input-size: 24px;
931
993
  }
932
- .dataviews-bulk-actions .dataviews-bulk-actions__selection-count {
933
- display: flex;
934
- align-items: center;
935
- margin: 0 8px 0 8px;
994
+ @media (min-width: 600px) {
995
+ .dataviews-view-table-selection-checkbox {
996
+ --checkbox-input-size: 16px;
997
+ }
936
998
  }
937
999
 
938
1000
  .edit-site-layout {
@@ -959,7 +1021,7 @@
959
1021
  }
960
1022
  @media (min-width: 782px) {
961
1023
  .edit-site-layout__sidebar-region {
962
- width: 360px;
1024
+ width: 300px;
963
1025
  }
964
1026
  }
965
1027
  .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region {
@@ -1094,8 +1156,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
1094
1156
  .edit-site-layout__view-mode-toggle.components-button:hover, .edit-site-layout__view-mode-toggle.components-button:active {
1095
1157
  color: #fff;
1096
1158
  }
1097
- .edit-site-layout__view-mode-toggle.components-button:focus {
1098
- box-shadow: none;
1159
+ .edit-site-layout__view-mode-toggle.components-button:focus-visible, .edit-site-layout__view-mode-toggle.components-button:focus {
1160
+ box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 6px var(--wp-admin-theme-color);
1161
+ outline: 4px solid #0000;
1162
+ outline-offset: 4px;
1099
1163
  }
1100
1164
  .edit-site-layout__view-mode-toggle.components-button::before {
1101
1165
  transition: box-shadow 0.1s ease;
@@ -1115,9 +1179,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
1115
1179
  transition-delay: 0s;
1116
1180
  }
1117
1181
  }
1118
- .edit-site-layout__view-mode-toggle.components-button:focus::before {
1119
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba(255, 255, 255, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1120
- }
1121
1182
  .edit-site-layout__view-mode-toggle.components-button .edit-site-layout__view-mode-toggle-icon {
1122
1183
  display: flex;
1123
1184
  height: 64px;
@@ -1170,6 +1231,20 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
1170
1231
  padding-left: 16px;
1171
1232
  }
1172
1233
 
1234
+ .edit-site-layout.is-full-canvas .edit-site-layout__view-mode-toggle.components-button:focus-visible, .edit-site-layout.is-full-canvas .edit-site-layout__view-mode-toggle.components-button:focus {
1235
+ box-shadow: none;
1236
+ outline: none;
1237
+ outline-offset: 0;
1238
+ }
1239
+ .edit-site-layout.is-full-canvas .edit-site-layout__view-mode-toggle.components-button:focus-visible .edit-site-site-icon svg, .edit-site-layout.is-full-canvas .edit-site-layout__view-mode-toggle.components-button:focus .edit-site-site-icon svg {
1240
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #3858e9);
1241
+ outline: 3px solid #0000;
1242
+ height: 40px;
1243
+ width: 40px;
1244
+ padding: 2px;
1245
+ border-radius: 2px;
1246
+ }
1247
+
1173
1248
  .edit-site-page {
1174
1249
  color: #2f2f2f;
1175
1250
  background: #fff;
@@ -1265,7 +1340,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
1265
1340
  contain: content;
1266
1341
  }
1267
1342
 
1268
- @keyframes _qixpa_slide-from-right {
1343
+ @keyframes _9l0co_slide-from-right {
1269
1344
  from {
1270
1345
  transform: translateX(-50px);
1271
1346
  opacity: 0;
@@ -1275,7 +1350,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
1275
1350
  opacity: 1;
1276
1351
  }
1277
1352
  }
1278
- @keyframes _qixpa_slide-from-left {
1353
+ @keyframes _9l0co_slide-from-left {
1279
1354
  from {
1280
1355
  transform: translateX(50px);
1281
1356
  opacity: 0;
@@ -1331,10 +1406,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
1331
1406
  }
1332
1407
  }
1333
1408
  .edit-site-sidebar__screen-wrapper.slide-from-left {
1334
- animation-name: _qixpa_slide-from-left;
1409
+ animation-name: _9l0co_slide-from-left;
1335
1410
  }
1336
1411
  .edit-site-sidebar__screen-wrapper.slide-from-right {
1337
- animation-name: _qixpa_slide-from-right;
1412
+ animation-name: _9l0co_slide-from-right;
1338
1413
  }
1339
1414
 
1340
1415
  .edit-site-site-hub {
@@ -1458,18 +1533,18 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
1458
1533
  background: #fff;
1459
1534
  }
1460
1535
 
1461
- .posts-list-page__featured-image {
1536
+ .edit-site-post-list__featured-image {
1462
1537
  height: 100%;
1463
1538
  object-fit: cover;
1464
1539
  width: 100%;
1465
1540
  }
1466
1541
 
1467
- .posts-list-page__featured-image-wrapper {
1542
+ .edit-site-post-list__featured-image-wrapper {
1468
1543
  height: 100%;
1469
1544
  width: 100%;
1470
1545
  border-radius: 4px;
1471
1546
  }
1472
- .posts-list-page__featured-image-wrapper.is-layout-table:not(:has(.posts-list-page-preview-field__button)), .posts-list-page__featured-image-wrapper.is-layout-table .posts-list-page-preview-field__button {
1547
+ .edit-site-post-list__featured-image-wrapper.is-layout-table:not(:has(.edit-site-post-list__featured-image-button)), .edit-site-post-list__featured-image-wrapper.is-layout-table .edit-site-post-list__featured-image-button {
1473
1548
  width: 32px;
1474
1549
  height: 32px;
1475
1550
  display: block;
@@ -1479,7 +1554,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
1479
1554
  background-color: #f0f0f0;
1480
1555
  flex-grow: 0 !important;
1481
1556
  }
1482
- .posts-list-page__featured-image-wrapper.is-layout-table:not(:has(.posts-list-page-preview-field__button))::after, .posts-list-page__featured-image-wrapper.is-layout-table .posts-list-page-preview-field__button::after {
1557
+ .edit-site-post-list__featured-image-wrapper.is-layout-table:not(:has(.edit-site-post-list__featured-image-button))::after, .edit-site-post-list__featured-image-wrapper.is-layout-table .edit-site-post-list__featured-image-button::after {
1483
1558
  border-radius: 4px;
1484
1559
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
1485
1560
  content: "";
@@ -1490,7 +1565,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
1490
1565
  width: 100%;
1491
1566
  }
1492
1567
 
1493
- .posts-list-page-preview-field__button {
1568
+ .edit-site-post-list__featured-image-button {
1494
1569
  box-shadow: none;
1495
1570
  border: none;
1496
1571
  padding: 0;
@@ -1502,22 +1577,22 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
1502
1577
  width: 100%;
1503
1578
  border-radius: 4px;
1504
1579
  }
1505
- .posts-list-page-preview-field__button:focus-visible {
1580
+ .edit-site-post-list__featured-image-button:focus-visible {
1506
1581
  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1507
1582
  outline: 2px solid transparent;
1508
1583
  }
1509
1584
 
1510
- .dataviews-view-grid__card.is-selected .posts-list-page-preview-field__button::after {
1585
+ .dataviews-view-grid__card.is-selected .edit-site-post-list__featured-image-button::after {
1511
1586
  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1512
1587
  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
1513
1588
  }
1514
1589
 
1515
- .posts-list-page-title span {
1590
+ .edit-site-post-list__title span {
1516
1591
  text-overflow: ellipsis;
1517
1592
  overflow: hidden;
1518
1593
  }
1519
1594
 
1520
- .posts-list-page-title-badge {
1595
+ .edit-site-post-list__title-badge {
1521
1596
  background: #f0f0f0;
1522
1597
  color: #757575;
1523
1598
  padding: 0 4px;
@@ -1525,13 +1600,16 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
1525
1600
  font-size: 12px;
1526
1601
  font-weight: 400;
1527
1602
  flex-shrink: 0;
1603
+ line-height: 20px;
1528
1604
  }
1529
1605
 
1530
- .posts-list-page-post-author-field__icon-container {
1606
+ .edit-site-post-list__status-icon {
1531
1607
  height: 24px;
1608
+ width: 24px;
1532
1609
  }
1533
- .posts-list-page-post-author-field__icon-container svg {
1610
+ .edit-site-post-list__status-icon svg {
1534
1611
  fill: currentColor;
1612
+ margin-right: -4px;
1535
1613
  }
1536
1614
 
1537
1615
  .edit-site-resizable-frame__inner {