@wordpress/edit-site 6.3.0 → 6.5.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 (334) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/build/components/add-new-pattern/index.js +14 -3
  3. package/build/components/add-new-pattern/index.js.map +1 -1
  4. package/build/components/add-new-post/index.js +2 -1
  5. package/build/components/add-new-post/index.js.map +1 -1
  6. package/build/components/add-new-template/index.js +3 -1
  7. package/build/components/add-new-template/index.js.map +1 -1
  8. package/build/components/add-new-template/utils.js +2 -2
  9. package/build/components/add-new-template/utils.js.map +1 -1
  10. package/build/components/block-editor/use-site-editor-settings.js +1 -82
  11. package/build/components/block-editor/use-site-editor-settings.js.map +1 -1
  12. package/build/components/editor/index.js +71 -20
  13. package/build/components/editor/index.js.map +1 -1
  14. package/build/components/global-styles/block-preview-panel.js +14 -5
  15. package/build/components/global-styles/block-preview-panel.js.map +1 -1
  16. package/build/components/global-styles/font-families.js +40 -22
  17. package/build/components/global-styles/font-families.js.map +1 -1
  18. package/build/components/global-styles/font-library-modal/context.js +0 -5
  19. package/build/components/global-styles/font-library-modal/context.js.map +1 -1
  20. package/build/components/global-styles/font-library-modal/font-collection.js +25 -5
  21. package/build/components/global-styles/font-library-modal/font-collection.js.map +1 -1
  22. package/build/components/global-styles/font-library-modal/index.js +5 -12
  23. package/build/components/global-styles/font-library-modal/index.js.map +1 -1
  24. package/build/components/global-styles/font-library-modal/installed-fonts.js +78 -15
  25. package/build/components/global-styles/font-library-modal/installed-fonts.js.map +1 -1
  26. package/build/components/global-styles/font-library-modal/upload-fonts.js +2 -3
  27. package/build/components/global-styles/font-library-modal/upload-fonts.js.map +1 -1
  28. package/build/components/global-styles/font-sizes/confirm-delete-font-size-dialog.js +39 -0
  29. package/build/components/global-styles/font-sizes/confirm-delete-font-size-dialog.js.map +1 -0
  30. package/build/components/global-styles/font-sizes/confirm-reset-font-sizes-dialog.js +39 -0
  31. package/build/components/global-styles/font-sizes/confirm-reset-font-sizes-dialog.js.map +1 -0
  32. package/build/components/global-styles/font-sizes/font-size-preview.js +44 -0
  33. package/build/components/global-styles/font-sizes/font-size-preview.js.map +1 -0
  34. package/build/components/global-styles/font-sizes/font-size.js +213 -0
  35. package/build/components/global-styles/font-sizes/font-size.js.map +1 -0
  36. package/build/components/global-styles/font-sizes/font-sizes-count.js +50 -0
  37. package/build/components/global-styles/font-sizes/font-sizes-count.js.map +1 -0
  38. package/build/components/global-styles/font-sizes/font-sizes.js +163 -0
  39. package/build/components/global-styles/font-sizes/font-sizes.js.map +1 -0
  40. package/build/components/global-styles/font-sizes/rename-font-size-dialog.js +67 -0
  41. package/build/components/global-styles/font-sizes/rename-font-size-dialog.js.map +1 -0
  42. package/build/components/global-styles/screen-block.js +10 -8
  43. package/build/components/global-styles/screen-block.js.map +1 -1
  44. package/build/components/global-styles/screen-style-variations.js +2 -2
  45. package/build/components/global-styles/screen-style-variations.js.map +1 -1
  46. package/build/components/global-styles/screen-typeset.js +40 -0
  47. package/build/components/global-styles/screen-typeset.js.map +1 -0
  48. package/build/components/global-styles/screen-typography-element.js +14 -0
  49. package/build/components/global-styles/screen-typography-element.js.map +1 -1
  50. package/build/components/global-styles/screen-typography.js +5 -6
  51. package/build/components/global-styles/screen-typography.js.map +1 -1
  52. package/build/components/global-styles/shadows-edit-panel.js +50 -59
  53. package/build/components/global-styles/shadows-edit-panel.js.map +1 -1
  54. package/build/components/global-styles/size-control/index.js +85 -0
  55. package/build/components/global-styles/size-control/index.js.map +1 -0
  56. package/build/components/global-styles/style-variations-container.js +3 -0
  57. package/build/components/global-styles/style-variations-container.js.map +1 -1
  58. package/build/components/global-styles/typeset-button.js +97 -0
  59. package/build/components/global-styles/typeset-button.js.map +1 -0
  60. package/build/components/global-styles/typeset.js +80 -0
  61. package/build/components/global-styles/typeset.js.map +1 -0
  62. package/build/components/global-styles/ui.js +12 -0
  63. package/build/components/global-styles/ui.js.map +1 -1
  64. package/build/components/global-styles/utils.js +10 -1
  65. package/build/components/global-styles/utils.js.map +1 -1
  66. package/build/components/global-styles/variations/variations-color.js.map +1 -1
  67. package/build/components/global-styles/variations/variations-typography.js +1 -1
  68. package/build/components/global-styles/variations/variations-typography.js.map +1 -1
  69. package/build/components/layout/index.js +6 -0
  70. package/build/components/layout/index.js.map +1 -1
  71. package/build/components/layout/router.js +14 -6
  72. package/build/components/layout/router.js.map +1 -1
  73. package/build/components/page-patterns/fields.js +230 -0
  74. package/build/components/page-patterns/fields.js.map +1 -0
  75. package/build/components/page-patterns/header.js +1 -1
  76. package/build/components/page-patterns/header.js.map +1 -1
  77. package/build/components/page-patterns/index.js +21 -227
  78. package/build/components/page-patterns/index.js.map +1 -1
  79. package/build/components/page-patterns/use-patterns.js +26 -1
  80. package/build/components/page-patterns/use-patterns.js.map +1 -1
  81. package/build/components/page-templates/fields.js +169 -0
  82. package/build/components/page-templates/fields.js.map +1 -0
  83. package/build/components/page-templates/index.js +38 -198
  84. package/build/components/page-templates/index.js.map +1 -1
  85. package/build/components/post-edit/index.js +117 -0
  86. package/build/components/post-edit/index.js.map +1 -0
  87. package/build/components/post-fields/index.js +318 -0
  88. package/build/components/post-fields/index.js.map +1 -0
  89. package/build/components/post-list/index.js +339 -0
  90. package/build/components/post-list/index.js.map +1 -0
  91. package/build/components/posts-app/router.js +3 -3
  92. package/build/components/posts-app/router.js.map +1 -1
  93. package/build/components/sidebar-dataviews/add-new-view.js +2 -2
  94. package/build/components/sidebar-dataviews/add-new-view.js.map +1 -1
  95. package/build/components/sidebar-dataviews/dataview-item.js +2 -3
  96. package/build/components/sidebar-dataviews/dataview-item.js.map +1 -1
  97. package/build/components/sidebar-dataviews/default-views.js +103 -91
  98. package/build/components/sidebar-dataviews/default-views.js.map +1 -1
  99. package/build/components/sidebar-dataviews/index.js +2 -2
  100. package/build/components/sidebar-dataviews/index.js.map +1 -1
  101. package/build/components/sidebar-navigation-screen-global-styles/content.js +64 -0
  102. package/build/components/sidebar-navigation-screen-global-styles/content.js.map +1 -0
  103. package/build/components/sidebar-navigation-screen-global-styles/index.js +2 -47
  104. package/build/components/sidebar-navigation-screen-global-styles/index.js.map +1 -1
  105. package/build/components/site-hub/index.js +6 -3
  106. package/build/components/site-hub/index.js.map +1 -1
  107. package/build/components/style-book/index.js +22 -25
  108. package/build/components/style-book/index.js.map +1 -1
  109. package/build/components/sync-state-with-url/use-init-edited-entity-from-url.js +5 -0
  110. package/build/components/sync-state-with-url/use-init-edited-entity-from-url.js.map +1 -1
  111. package/build/hooks/push-changes-to-global-styles/index.js +3 -4
  112. package/build/hooks/push-changes-to-global-styles/index.js.map +1 -1
  113. package/build/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js +2 -4
  114. package/build/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js.map +1 -1
  115. package/build/index.js +4 -2
  116. package/build/index.js.map +1 -1
  117. package/build/store/selectors.js +34 -6
  118. package/build/store/selectors.js.map +1 -1
  119. package/build/utils/get-filtered-template-parts.js +64 -0
  120. package/build/utils/get-filtered-template-parts.js.map +1 -0
  121. package/build-module/components/add-new-pattern/index.js +14 -3
  122. package/build-module/components/add-new-pattern/index.js.map +1 -1
  123. package/build-module/components/add-new-post/index.js +2 -1
  124. package/build-module/components/add-new-post/index.js.map +1 -1
  125. package/build-module/components/add-new-template/index.js +3 -1
  126. package/build-module/components/add-new-template/index.js.map +1 -1
  127. package/build-module/components/add-new-template/utils.js +2 -2
  128. package/build-module/components/add-new-template/utils.js.map +1 -1
  129. package/build-module/components/block-editor/use-site-editor-settings.js +1 -82
  130. package/build-module/components/block-editor/use-site-editor-settings.js.map +1 -1
  131. package/build-module/components/editor/index.js +73 -22
  132. package/build-module/components/editor/index.js.map +1 -1
  133. package/build-module/components/global-styles/block-preview-panel.js +14 -5
  134. package/build-module/components/global-styles/block-preview-panel.js.map +1 -1
  135. package/build-module/components/global-styles/font-families.js +42 -24
  136. package/build-module/components/global-styles/font-families.js.map +1 -1
  137. package/build-module/components/global-styles/font-library-modal/context.js +0 -5
  138. package/build-module/components/global-styles/font-library-modal/context.js.map +1 -1
  139. package/build-module/components/global-styles/font-library-modal/font-collection.js +26 -6
  140. package/build-module/components/global-styles/font-library-modal/font-collection.js.map +1 -1
  141. package/build-module/components/global-styles/font-library-modal/index.js +5 -12
  142. package/build-module/components/global-styles/font-library-modal/index.js.map +1 -1
  143. package/build-module/components/global-styles/font-library-modal/installed-fonts.js +81 -18
  144. package/build-module/components/global-styles/font-library-modal/installed-fonts.js.map +1 -1
  145. package/build-module/components/global-styles/font-library-modal/upload-fonts.js +2 -3
  146. package/build-module/components/global-styles/font-library-modal/upload-fonts.js.map +1 -1
  147. package/build-module/components/global-styles/font-sizes/confirm-delete-font-size-dialog.js +32 -0
  148. package/build-module/components/global-styles/font-sizes/confirm-delete-font-size-dialog.js.map +1 -0
  149. package/build-module/components/global-styles/font-sizes/confirm-reset-font-sizes-dialog.js +32 -0
  150. package/build-module/components/global-styles/font-sizes/confirm-reset-font-sizes-dialog.js.map +1 -0
  151. package/build-module/components/global-styles/font-sizes/font-size-preview.js +37 -0
  152. package/build-module/components/global-styles/font-sizes/font-size-preview.js.map +1 -0
  153. package/build-module/components/global-styles/font-sizes/font-size.js +207 -0
  154. package/build-module/components/global-styles/font-sizes/font-size.js.map +1 -0
  155. package/build-module/components/global-styles/font-sizes/font-sizes-count.js +43 -0
  156. package/build-module/components/global-styles/font-sizes/font-sizes-count.js.map +1 -0
  157. package/build-module/components/global-styles/font-sizes/font-sizes.js +157 -0
  158. package/build-module/components/global-styles/font-sizes/font-sizes.js.map +1 -0
  159. package/build-module/components/global-styles/font-sizes/rename-font-size-dialog.js +61 -0
  160. package/build-module/components/global-styles/font-sizes/rename-font-size-dialog.js.map +1 -0
  161. package/build-module/components/global-styles/screen-block.js +10 -8
  162. package/build-module/components/global-styles/screen-block.js.map +1 -1
  163. package/build-module/components/global-styles/screen-style-variations.js +2 -2
  164. package/build-module/components/global-styles/screen-style-variations.js.map +1 -1
  165. package/build-module/components/global-styles/screen-typeset.js +34 -0
  166. package/build-module/components/global-styles/screen-typeset.js.map +1 -0
  167. package/build-module/components/global-styles/screen-typography-element.js +14 -0
  168. package/build-module/components/global-styles/screen-typography-element.js.map +1 -1
  169. package/build-module/components/global-styles/screen-typography.js +5 -6
  170. package/build-module/components/global-styles/screen-typography.js.map +1 -1
  171. package/build-module/components/global-styles/shadows-edit-panel.js +51 -60
  172. package/build-module/components/global-styles/shadows-edit-panel.js.map +1 -1
  173. package/build-module/components/global-styles/size-control/index.js +79 -0
  174. package/build-module/components/global-styles/size-control/index.js.map +1 -0
  175. package/build-module/components/global-styles/style-variations-container.js +3 -0
  176. package/build-module/components/global-styles/style-variations-container.js.map +1 -1
  177. package/build-module/components/global-styles/typeset-button.js +89 -0
  178. package/build-module/components/global-styles/typeset-button.js.map +1 -0
  179. package/build-module/components/global-styles/typeset.js +71 -0
  180. package/build-module/components/global-styles/typeset.js.map +1 -0
  181. package/build-module/components/global-styles/ui.js +12 -0
  182. package/build-module/components/global-styles/ui.js.map +1 -1
  183. package/build-module/components/global-styles/utils.js +10 -1
  184. package/build-module/components/global-styles/utils.js.map +1 -1
  185. package/build-module/components/global-styles/variations/variations-color.js +1 -1
  186. package/build-module/components/global-styles/variations/variations-color.js.map +1 -1
  187. package/build-module/components/global-styles/variations/variations-typography.js +1 -2
  188. package/build-module/components/global-styles/variations/variations-typography.js.map +1 -1
  189. package/build-module/components/layout/index.js +6 -0
  190. package/build-module/components/layout/index.js.map +1 -1
  191. package/build-module/components/layout/router.js +14 -6
  192. package/build-module/components/layout/router.js.map +1 -1
  193. package/build-module/components/page-patterns/fields.js +223 -0
  194. package/build-module/components/page-patterns/fields.js.map +1 -0
  195. package/build-module/components/page-patterns/header.js +1 -1
  196. package/build-module/components/page-patterns/header.js.map +1 -1
  197. package/build-module/components/page-patterns/index.js +24 -230
  198. package/build-module/components/page-patterns/index.js.map +1 -1
  199. package/build-module/components/page-patterns/use-patterns.js +26 -1
  200. package/build-module/components/page-patterns/use-patterns.js.map +1 -1
  201. package/build-module/components/page-templates/fields.js +160 -0
  202. package/build-module/components/page-templates/fields.js.map +1 -0
  203. package/build-module/components/page-templates/index.js +39 -199
  204. package/build-module/components/page-templates/index.js.map +1 -1
  205. package/build-module/components/post-edit/index.js +110 -0
  206. package/build-module/components/post-edit/index.js.map +1 -0
  207. package/build-module/components/post-fields/index.js +310 -0
  208. package/build-module/components/post-fields/index.js.map +1 -0
  209. package/build-module/components/post-list/index.js +333 -0
  210. package/build-module/components/post-list/index.js.map +1 -0
  211. package/build-module/components/posts-app/router.js +3 -3
  212. package/build-module/components/posts-app/router.js.map +1 -1
  213. package/build-module/components/sidebar-dataviews/add-new-view.js +2 -2
  214. package/build-module/components/sidebar-dataviews/add-new-view.js.map +1 -1
  215. package/build-module/components/sidebar-dataviews/dataview-item.js +2 -3
  216. package/build-module/components/sidebar-dataviews/dataview-item.js.map +1 -1
  217. package/build-module/components/sidebar-dataviews/default-views.js +102 -90
  218. package/build-module/components/sidebar-dataviews/default-views.js.map +1 -1
  219. package/build-module/components/sidebar-dataviews/index.js +5 -5
  220. package/build-module/components/sidebar-dataviews/index.js.map +1 -1
  221. package/build-module/components/sidebar-navigation-screen-global-styles/content.js +57 -0
  222. package/build-module/components/sidebar-navigation-screen-global-styles/content.js.map +1 -0
  223. package/build-module/components/sidebar-navigation-screen-global-styles/index.js +2 -47
  224. package/build-module/components/sidebar-navigation-screen-global-styles/index.js.map +1 -1
  225. package/build-module/components/site-hub/index.js +7 -4
  226. package/build-module/components/site-hub/index.js.map +1 -1
  227. package/build-module/components/style-book/index.js +23 -26
  228. package/build-module/components/style-book/index.js.map +1 -1
  229. package/build-module/components/sync-state-with-url/use-init-edited-entity-from-url.js +5 -0
  230. package/build-module/components/sync-state-with-url/use-init-edited-entity-from-url.js.map +1 -1
  231. package/build-module/hooks/push-changes-to-global-styles/index.js +3 -4
  232. package/build-module/hooks/push-changes-to-global-styles/index.js.map +1 -1
  233. package/build-module/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js +2 -3
  234. package/build-module/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js.map +1 -1
  235. package/build-module/index.js +4 -2
  236. package/build-module/index.js.map +1 -1
  237. package/build-module/store/selectors.js +35 -7
  238. package/build-module/store/selectors.js.map +1 -1
  239. package/build-module/utils/get-filtered-template-parts.js +57 -0
  240. package/build-module/utils/get-filtered-template-parts.js.map +1 -0
  241. package/build-style/posts-rtl.css +749 -492
  242. package/build-style/posts.css +749 -492
  243. package/build-style/style-rtl.css +956 -613
  244. package/build-style/style.css +956 -613
  245. package/package.json +41 -41
  246. package/src/components/add-new-pattern/index.js +16 -5
  247. package/src/components/add-new-post/index.js +2 -1
  248. package/src/components/add-new-template/index.js +4 -1
  249. package/src/components/add-new-template/style.scss +4 -6
  250. package/src/components/add-new-template/utils.js +10 -6
  251. package/src/components/block-editor/use-site-editor-settings.js +15 -111
  252. package/src/components/editor/index.js +80 -22
  253. package/src/components/editor/style.scss +59 -1
  254. package/src/components/global-styles/block-preview-panel.js +22 -9
  255. package/src/components/global-styles/font-families.js +65 -32
  256. package/src/components/global-styles/font-library-modal/context.js +0 -5
  257. package/src/components/global-styles/font-library-modal/font-collection.js +34 -10
  258. package/src/components/global-styles/font-library-modal/index.js +6 -9
  259. package/src/components/global-styles/font-library-modal/installed-fonts.js +115 -16
  260. package/src/components/global-styles/font-library-modal/style.scss +9 -0
  261. package/src/components/global-styles/font-library-modal/upload-fonts.js +2 -2
  262. package/src/components/global-styles/font-sizes/confirm-delete-font-size-dialog.js +43 -0
  263. package/src/components/global-styles/font-sizes/confirm-reset-font-sizes-dialog.js +37 -0
  264. package/src/components/global-styles/font-sizes/font-size-preview.js +43 -0
  265. package/src/components/global-styles/font-sizes/font-size.js +250 -0
  266. package/src/components/global-styles/font-sizes/font-sizes-count.js +40 -0
  267. package/src/components/global-styles/font-sizes/font-sizes.js +263 -0
  268. package/src/components/global-styles/font-sizes/rename-font-size-dialog.js +70 -0
  269. package/src/components/global-styles/screen-block.js +12 -14
  270. package/src/components/global-styles/screen-style-variations.js +2 -2
  271. package/src/components/global-styles/screen-typeset.js +42 -0
  272. package/src/components/global-styles/screen-typography-element.js +14 -0
  273. package/src/components/global-styles/screen-typography.js +7 -6
  274. package/src/components/global-styles/shadows-edit-panel.js +66 -73
  275. package/src/components/global-styles/size-control/index.js +86 -0
  276. package/src/components/global-styles/style-variations-container.js +4 -0
  277. package/src/components/global-styles/style.scss +17 -10
  278. package/src/components/global-styles/typeset-button.js +93 -0
  279. package/src/components/global-styles/typeset.js +73 -0
  280. package/src/components/global-styles/ui.js +15 -0
  281. package/src/components/global-styles/utils.js +13 -1
  282. package/src/components/global-styles/variations/variations-color.js +1 -1
  283. package/src/components/global-styles/variations/variations-typography.js +1 -2
  284. package/src/components/layout/index.js +11 -0
  285. package/src/components/layout/router.js +13 -5
  286. package/src/components/layout/style.scss +34 -8
  287. package/src/components/page-patterns/fields.js +251 -0
  288. package/src/components/page-patterns/header.js +1 -1
  289. package/src/components/page-patterns/index.js +24 -246
  290. package/src/components/page-patterns/style.scss +82 -85
  291. package/src/components/page-patterns/use-patterns.js +31 -1
  292. package/src/components/page-templates/fields.js +157 -0
  293. package/src/components/page-templates/index.js +46 -192
  294. package/src/components/page-templates/style.scss +19 -8
  295. package/src/components/post-edit/index.js +115 -0
  296. package/src/components/post-edit/style.scss +9 -0
  297. package/src/components/post-fields/index.js +357 -0
  298. package/src/components/post-list/index.js +386 -0
  299. package/src/components/{posts-app → post-list}/style.scss +12 -9
  300. package/src/components/posts-app/router.js +3 -3
  301. package/src/components/sidebar-dataviews/add-new-view.js +2 -4
  302. package/src/components/sidebar-dataviews/dataview-item.js +2 -2
  303. package/src/components/sidebar-dataviews/default-views.js +116 -104
  304. package/src/components/sidebar-dataviews/index.js +4 -3
  305. package/src/components/sidebar-navigation-screen-global-styles/content.js +55 -0
  306. package/src/components/sidebar-navigation-screen-global-styles/index.js +1 -55
  307. package/src/components/site-hub/index.js +11 -2
  308. package/src/components/site-icon/style.scss +4 -1
  309. package/src/components/style-book/index.js +27 -32
  310. package/src/components/sync-state-with-url/use-init-edited-entity-from-url.js +5 -0
  311. package/src/hooks/push-changes-to-global-styles/index.js +3 -4
  312. package/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js +2 -3
  313. package/src/index.js +6 -2
  314. package/src/posts.scss +1 -1
  315. package/src/store/selectors.js +53 -14
  316. package/src/store/test/selectors.js +1 -26
  317. package/src/style.scss +2 -1
  318. package/src/utils/get-filtered-template-parts.js +61 -0
  319. package/src/utils/test/get-filtered-template-parts.js +127 -0
  320. package/build/components/global-styles/screen-background.js +0 -36
  321. package/build/components/global-styles/screen-background.js.map +0 -1
  322. package/build/components/posts-app/posts-list.js +0 -568
  323. package/build/components/posts-app/posts-list.js.map +0 -1
  324. package/build/utils/clone-deep.js +0 -15
  325. package/build/utils/clone-deep.js.map +0 -1
  326. package/build-module/components/global-styles/screen-background.js +0 -30
  327. package/build-module/components/global-styles/screen-background.js.map +0 -1
  328. package/build-module/components/posts-app/posts-list.js +0 -560
  329. package/build-module/components/posts-app/posts-list.js.map +0 -1
  330. package/build-module/utils/clone-deep.js +0 -9
  331. package/build-module/utils/clone-deep.js.map +0 -1
  332. package/src/components/global-styles/screen-background.js +0 -29
  333. package/src/components/posts-app/posts-list.js +0 -651
  334. package/src/utils/clone-deep.js +0 -8
@@ -34,6 +34,9 @@
34
34
  * Grid System.
35
35
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
36
36
  */
37
+ /**
38
+ * Radius scale.
39
+ */
37
40
  /**
38
41
  * Dimensions.
39
42
  */
@@ -116,7 +119,8 @@
116
119
  flex-direction: column;
117
120
  }
118
121
 
119
- .dataviews-filters__view-actions {
122
+ .dataviews__view-actions,
123
+ .dataviews-filters__container {
120
124
  box-sizing: border-box;
121
125
  padding: 16px 48px;
122
126
  flex-shrink: 0;
@@ -125,202 +129,17 @@
125
129
  transition: padding ease-out 0.1s;
126
130
  }
127
131
  @media (prefers-reduced-motion: reduce) {
128
- .dataviews-filters__view-actions {
132
+ .dataviews__view-actions,
133
+ .dataviews-filters__container {
129
134
  transition-duration: 0s;
130
135
  transition-delay: 0s;
131
136
  }
132
137
  }
133
- .dataviews-filters__view-actions .components-search-control .components-base-control__field {
138
+ .dataviews__view-actions .components-search-control .components-base-control__field,
139
+ .dataviews-filters__container .components-search-control .components-base-control__field {
134
140
  max-width: 240px;
135
141
  }
136
142
 
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;
139
- }
140
- .dataviews-filters__container .dataviews-filters__reset-button[aria-disabled=true]:focus {
141
- opacity: 1;
142
- }
143
-
144
- .dataviews-filters-button {
145
- position: relative;
146
- }
147
-
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;
157
- transition: padding ease-out 0.1s;
158
- }
159
- @media (prefers-reduced-motion: reduce) {
160
- .dataviews-pagination {
161
- transition-duration: 0s;
162
- transition-delay: 0s;
163
- }
164
- }
165
-
166
- .dataviews-pagination__page-selection {
167
- font-size: 11px;
168
- text-transform: uppercase;
169
- font-weight: 500;
170
- color: #1e1e1e;
171
- }
172
-
173
- .dataviews-filters-options {
174
- margin: 32px 0 16px;
175
- }
176
-
177
- .dataviews-view-table {
178
- width: 100%;
179
- text-indent: 0;
180
- border-color: inherit;
181
- border-collapse: collapse;
182
- position: relative;
183
- color: #757575;
184
- margin-bottom: auto;
185
- }
186
- .dataviews-view-table a {
187
- text-decoration: none;
188
- color: #1e1e1e;
189
- font-weight: 500;
190
- }
191
- .dataviews-view-table th {
192
- text-align: right;
193
- color: #1e1e1e;
194
- font-weight: normal;
195
- font-size: 13px;
196
- }
197
- .dataviews-view-table td,
198
- .dataviews-view-table th {
199
- padding: 12px;
200
- white-space: nowrap;
201
- }
202
- .dataviews-view-table td[data-field-id=actions],
203
- .dataviews-view-table th[data-field-id=actions] {
204
- text-align: left;
205
- }
206
- .dataviews-view-table td.dataviews-view-table__checkbox-column,
207
- .dataviews-view-table th.dataviews-view-table__checkbox-column {
208
- padding-left: 0;
209
- }
210
- .dataviews-view-table tr {
211
- border-bottom: 1px solid #f0f0f0;
212
- }
213
- .dataviews-view-table tr .dataviews-view-table-header-button {
214
- gap: 4px;
215
- }
216
- .dataviews-view-table tr td:first-child,
217
- .dataviews-view-table tr th:first-child {
218
- padding-right: 48px;
219
- }
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;
225
- }
226
- .dataviews-view-table tr td:last-child,
227
- .dataviews-view-table tr th:last-child {
228
- padding-left: 48px;
229
- }
230
- .dataviews-view-table tr:last-child {
231
- border-bottom: 0;
232
- }
233
- .dataviews-view-table tr.is-hovered {
234
- background-color: #f8f8f8;
235
- }
236
- .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input {
237
- opacity: 0;
238
- }
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;
241
- }
242
- .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
243
- opacity: 0;
244
- }
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;
250
- }
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
- }
256
- }
257
- .dataviews-view-table tr.is-selected {
258
- background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
259
- color: #757575;
260
- }
261
- .dataviews-view-table tr.is-selected:hover {
262
- background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
263
- }
264
- .dataviews-view-table thead {
265
- position: sticky;
266
- inset-block-start: 0;
267
- z-index: 1;
268
- }
269
- .dataviews-view-table thead tr {
270
- border: 0;
271
- }
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;
281
- }
282
- .dataviews-view-table thead th:has(.dataviews-view-table-header-button):not(:first-child) {
283
- padding-right: 4px;
284
- }
285
- .dataviews-view-table tbody td {
286
- vertical-align: top;
287
- }
288
- .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper {
289
- min-height: 32px;
290
- display: flex;
291
- align-items: center;
292
- }
293
- .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper > * {
294
- flex-grow: 1;
295
- }
296
- .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__primary-field a {
297
- flex-grow: 0;
298
- }
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;
304
- }
305
- .dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
306
- color: #1e1e1e;
307
- }
308
- .dataviews-view-table .dataviews-view-table-header-button span {
309
- speak: none;
310
- }
311
- .dataviews-view-table .dataviews-view-table-header-button span:empty {
312
- display: none;
313
- }
314
- .dataviews-view-table .dataviews-view-table-header {
315
- padding-right: 4px;
316
- }
317
- .dataviews-view-table .dataviews-view-table__actions-column {
318
- width: 1%;
319
- }
320
- .dataviews-view-table:has(tr.is-selected) .components-checkbox-control__input {
321
- opacity: 1;
322
- }
323
-
324
143
  .dataviews-view-list__primary-field,
325
144
  .dataviews-view-grid__primary-field,
326
145
  .dataviews-view-table__primary-field {
@@ -372,297 +191,215 @@
372
191
  color: var(--wp-admin-theme-color);
373
192
  }
374
193
 
375
- .dataviews-view-grid {
376
- margin-bottom: auto;
377
- grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
378
- grid-template-rows: max-content;
379
- padding: 0 48px 24px;
194
+ .dataviews-no-results,
195
+ .dataviews-loading {
196
+ padding: 0 48px;
197
+ flex-grow: 1;
198
+ display: flex;
199
+ align-items: center;
200
+ justify-content: center;
380
201
  transition: padding ease-out 0.1s;
381
202
  }
382
203
  @media (prefers-reduced-motion: reduce) {
383
- .dataviews-view-grid {
204
+ .dataviews-no-results,
205
+ .dataviews-loading {
384
206
  transition-duration: 0s;
385
207
  transition-delay: 0s;
386
208
  }
387
209
  }
388
- @media (min-width: 480px) {
389
- .dataviews-view-grid {
390
- grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
210
+
211
+ /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
212
+ @container (max-width: 430px) {
213
+ .dataviews__view-actions,
214
+ .dataviews-filters__container {
215
+ padding: 12px 24px;
391
216
  }
392
- }
393
- @media (min-width: 1080px) {
394
- .dataviews-view-grid {
395
- grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
217
+ .dataviews__view-actions .components-search-control .components-base-control__field,
218
+ .dataviews-filters__container .components-search-control .components-base-control__field {
219
+ max-width: 112px;
396
220
  }
397
- }
398
- @media (min-width: 1440px) {
399
- .dataviews-view-grid {
400
- grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
221
+
222
+ .dataviews-view-grid,
223
+ .dataviews-no-results,
224
+ .dataviews-loading {
225
+ padding-right: 24px;
226
+ padding-left: 24px;
401
227
  }
402
228
  }
403
- .dataviews-view-grid .dataviews-view-grid__card {
404
- height: 100%;
405
- justify-content: flex-start;
229
+ .dataviews-bulk-actions__modal {
230
+ z-index: 1000001;
406
231
  }
407
- .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-actions {
408
- padding: 8px 0 4px;
232
+
233
+ .dataviews-bulk-actions__edit-button.components-button {
234
+ flex-shrink: 0;
409
235
  }
410
- .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__primary-field {
411
- min-height: 32px;
236
+
237
+ .dataviews-bulk-actions-toolbar {
238
+ position: sticky;
239
+ display: flex;
240
+ flex-direction: column;
241
+ align-content: center;
242
+ flex-wrap: wrap;
243
+ width: -moz-fit-content;
244
+ width: fit-content;
245
+ margin-right: auto;
246
+ margin-left: auto;
247
+ bottom: 24px;
248
+ z-index: 2;
412
249
  }
413
- .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
414
- color: #1e1e1e;
250
+ .dataviews-bulk-actions-toolbar .components-accessible-toolbar {
251
+ border-color: #ddd;
252
+ 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);
415
253
  }
416
- .dataviews-view-grid .dataviews-view-grid__media {
417
- width: 100%;
418
- min-height: 200px;
419
- aspect-ratio: 1/1;
420
- background-color: #f0f0f0;
421
- border-radius: 4px;
422
- position: relative;
254
+ .dataviews-bulk-actions-toolbar .components-accessible-toolbar .components-toolbar-group {
255
+ border-color: #e0e0e0;
423
256
  }
424
- .dataviews-view-grid .dataviews-view-grid__media img {
425
- object-fit: cover;
426
- width: 100%;
427
- height: 100%;
257
+ .dataviews-bulk-actions-toolbar .components-accessible-toolbar .components-toolbar-group:last-child {
258
+ border: 0;
428
259
  }
429
- .dataviews-view-grid .dataviews-view-grid__media::after {
430
- content: "";
431
- position: absolute;
432
- top: 0;
433
- right: 0;
434
- width: 100%;
435
- height: 100%;
436
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
437
- border-radius: 4px;
438
- pointer-events: none;
439
- }
440
- .dataviews-view-grid .dataviews-view-grid__fields {
441
- position: relative;
442
- font-size: 12px;
443
- line-height: 16px;
444
- }
445
- .dataviews-view-grid .dataviews-view-grid__fields:not(:empty) {
446
- padding: 0 0 12px;
447
- }
448
- .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field {
449
- align-items: flex-start;
450
- }
451
- .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(.is-column) {
452
- align-items: center;
453
- }
454
- .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(.is-column) .dataviews-view-grid__field-name {
455
- width: 35%;
456
- }
457
- .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(.is-column) .dataviews-view-grid__field-value {
458
- width: 65%;
459
- overflow: hidden;
460
- text-overflow: ellipsis;
461
- white-space: nowrap;
462
- }
463
- .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name {
464
- color: #757575;
465
- }
466
- .dataviews-view-grid .dataviews-view-grid__badge-fields:not(:empty) {
467
- padding-bottom: 12px;
468
- }
469
- .dataviews-view-grid .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value {
470
- width: -moz-fit-content;
471
- width: fit-content;
472
- background: #f0f0f0;
473
- padding: 0 8px;
474
- min-height: 24px;
475
- border-radius: 2px;
260
+ .dataviews-bulk-actions-toolbar .dataviews-bulk-actions-toolbar__selection-count {
476
261
  display: flex;
477
262
  align-items: center;
478
- font-size: 12px;
263
+ margin: 0 8px 0 8px;
479
264
  }
480
265
 
481
- .dataviews-view-list {
482
- margin: 0 0 auto;
266
+ .dataviews-bulk-actions-toolbar__wrapper {
267
+ display: flex;
268
+ flex-grow: 1;
269
+ width: 100%;
483
270
  }
484
- .dataviews-view-list li {
485
- margin: 0;
486
- cursor: pointer;
487
- border-top: 1px solid #f0f0f0;
271
+ .dataviews-bulk-actions-toolbar__wrapper .components-toolbar-group {
272
+ align-items: center;
488
273
  }
489
- .dataviews-view-list li .dataviews-view-list__item-wrapper {
274
+ .dataviews-bulk-actions-toolbar__wrapper .components-button.is-busy {
275
+ max-height: 36px;
276
+ }
277
+
278
+ .dataviews-filters__button {
490
279
  position: relative;
491
- border-radius: 4px;
492
280
  }
493
- .dataviews-view-list li .dataviews-view-list__item-wrapper > * {
494
- width: 100%;
281
+
282
+ .dataviews-filters__container {
283
+ padding-top: 0;
495
284
  }
496
- .dataviews-view-list li .dataviews-view-list__item-actions .components-button {
285
+
286
+ .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true], .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true]:hover {
497
287
  opacity: 0;
498
- position: fixed;
499
- left: 0;
500
- }
501
- .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;
503
288
  }
504
- .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 {
289
+ .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true]:focus {
505
290
  opacity: 1;
506
- position: static;
507
- }
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;
510
- }
511
- .dataviews-view-list li:not(.is-selected) .dataviews-view-list__primary-field {
512
- color: #1e1e1e;
513
- }
514
- .dataviews-view-list li:not(.is-selected):hover, .dataviews-view-list li:not(.is-selected):focus-within {
515
- color: var(--wp-admin-theme-color);
516
- background-color: #f8f8f8;
517
291
  }
518
- .dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__primary-field,
519
- .dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__fields, .dataviews-view-list li:not(.is-selected):focus-within .dataviews-view-list__primary-field,
520
- .dataviews-view-list li:not(.is-selected):focus-within .dataviews-view-list__fields {
521
- color: var(--wp-admin-theme-color);
522
- }
523
- .dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper,
524
- .dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper {
525
- background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
526
- color: #1e1e1e;
292
+
293
+ .dataviews-filters__summary-popover .components-popover__content {
294
+ width: 230px;
295
+ padding: 0;
296
+ border-radius: 4px;
527
297
  }
528
- .dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__primary-field,
529
- .dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__fields,
530
- .dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__primary-field,
531
- .dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__fields {
532
- color: var(--wp-admin-theme-color);
298
+
299
+ .dataviews-filters__summary-operators-container {
300
+ padding: 8px 8px 0;
533
301
  }
534
- .dataviews-view-list .dataviews-view-list__item {
535
- padding: 16px 24px 16px 0;
536
- width: 100%;
537
- scroll-margin: 8px 0;
302
+ .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__search-widget-listbox) {
303
+ border-bottom: 1px solid #e0e0e0;
304
+ padding-bottom: 8px;
538
305
  }
539
- .dataviews-view-list .dataviews-view-list__item:focus-visible::before {
540
- position: absolute;
541
- content: "";
542
- top: calc(var(--wp-admin-border-width-focus) + 1px);
543
- left: var(--wp-admin-border-width-focus);
544
- bottom: var(--wp-admin-border-width-focus);
545
- right: var(--wp-admin-border-width-focus);
546
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
547
- border-radius: 2px;
306
+ .dataviews-filters__summary-operators-container:empty {
307
+ display: none;
548
308
  }
549
- .dataviews-view-list .dataviews-view-list__item .dataviews-view-list__primary-field {
550
- min-height: 20px;
551
- line-height: 20px;
552
- overflow: hidden;
309
+ .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-name {
310
+ color: #757575;
553
311
  }
554
- .dataviews-view-list .dataviews-view-list__media-wrapper {
555
- width: 40px;
556
- height: 40px;
557
- overflow: hidden;
312
+
313
+ .dataviews-filters__summary-chip-container {
558
314
  position: relative;
559
- flex-shrink: 0;
560
- background-color: #f0f0f0;
561
- border-radius: 4px;
562
- }
563
- .dataviews-view-list .dataviews-view-list__media-wrapper img {
564
- width: 100%;
565
- height: 100%;
566
- object-fit: cover;
567
- }
568
- .dataviews-view-list .dataviews-view-list__media-wrapper::after {
569
- content: "";
570
- position: absolute;
571
- top: 0;
572
- right: 0;
573
- width: 100%;
574
- height: 100%;
575
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
576
- border-radius: 4px;
577
- }
578
- .dataviews-view-list .dataviews-view-list__media-placeholder {
579
- min-width: 32px;
580
- height: 32px;
581
- background-color: #e0e0e0;
315
+ white-space: pre-wrap;
582
316
  }
583
- .dataviews-view-list .dataviews-view-list__fields {
584
- color: #757575;
317
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip {
318
+ border-radius: 16px;
319
+ border: 1px solid transparent;
320
+ cursor: pointer;
321
+ padding: 4px 12px;
322
+ min-height: 32px;
323
+ background: #f0f0f0;
324
+ color: #2f2f2f;
325
+ position: relative;
585
326
  display: flex;
586
- gap: 8px;
587
- flex-wrap: wrap;
588
- font-size: 12px;
327
+ align-items: center;
589
328
  }
590
- .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field:has(.dataviews-view-list__field-value:empty) {
591
- display: none;
329
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-reset {
330
+ padding-inline-end: 28px;
592
331
  }
593
- .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field-value {
594
- line-height: 24px;
595
- display: inline-flex;
332
+ .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] {
333
+ background: #e0e0e0;
334
+ color: #1e1e1e;
596
335
  }
597
- .dataviews-view-list .dataviews-view-list__item-actions {
598
- padding-left: 24px;
336
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values {
337
+ color: var(--wp-admin-theme-color);
338
+ background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
599
339
  }
600
- .dataviews-view-list + .dataviews-pagination {
601
- justify-content: space-between;
340
+ .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] {
341
+ background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
602
342
  }
603
-
604
- .dataviews-action-modal {
605
- z-index: 1000001;
343
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible {
344
+ outline: none;
345
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
606
346
  }
607
-
608
- .dataviews-no-results,
609
- .dataviews-loading {
610
- padding: 0 48px;
611
- flex-grow: 1;
347
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip .dataviews-filters-__summary-filter-text-name {
348
+ font-weight: 500;
349
+ }
350
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove {
351
+ width: 24px;
352
+ height: 24px;
353
+ border-radius: 50%;
354
+ border: 0;
355
+ padding: 0;
356
+ position: absolute;
357
+ left: 4px;
358
+ top: 50%;
359
+ transform: translateY(-50%);
612
360
  display: flex;
613
361
  align-items: center;
614
362
  justify-content: center;
615
- transition: padding ease-out 0.1s;
363
+ background: transparent;
364
+ cursor: pointer;
616
365
  }
617
- @media (prefers-reduced-motion: reduce) {
618
- .dataviews-no-results,
619
- .dataviews-loading {
620
- transition-duration: 0s;
621
- transition-delay: 0s;
622
- }
366
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
367
+ fill: #757575;
623
368
  }
624
-
625
- .dataviews-view-table-selection-checkbox {
626
- --checkbox-input-size: 24px;
627
- line-height: 0;
628
- flex-shrink: 0;
369
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus {
370
+ background: #e0e0e0;
629
371
  }
630
- @media (min-width: 600px) {
631
- .dataviews-view-table-selection-checkbox {
632
- --checkbox-input-size: 16px;
633
- }
372
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover svg, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus svg {
373
+ fill: #1e1e1e;
634
374
  }
635
- .dataviews-view-table-selection-checkbox .components-checkbox-control__input-container {
636
- margin: 0;
375
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg {
376
+ fill: var(--wp-admin-theme-color);
637
377
  }
638
-
639
- .dataviews-bulk-edit-button.components-button {
640
- flex-shrink: 0;
378
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover {
379
+ background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
641
380
  }
642
-
643
- .dataviews-filter-summary__popover .components-popover__content {
644
- width: 230px;
645
- padding: 0;
646
- border-radius: 4px;
381
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus-visible {
382
+ outline: none;
383
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
647
384
  }
648
385
 
649
- .dataviews-search-widget-filter-combobox-list {
386
+ .dataviews-filters__search-widget-filter-combobox-list {
650
387
  max-height: 184px;
651
388
  padding: 4px;
652
389
  overflow: auto;
653
390
  border-top: 1px solid #e0e0e0;
654
391
  }
655
- .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item-value [data-user-value] {
392
+ .dataviews-filters__search-widget-filter-combobox-list .dataviews-filters__search-widget-filter-combobox-item-value [data-user-value] {
656
393
  font-weight: 600;
657
394
  }
658
395
 
659
- .dataviews-search-widget-listbox {
396
+ .dataviews-filters__search-widget-listbox {
660
397
  max-height: 184px;
661
398
  padding: 4px;
662
399
  overflow: auto;
663
400
  }
664
401
 
665
- .dataviews-search-widget-listitem {
402
+ .dataviews-filters__search-widget-listitem {
666
403
  display: flex;
667
404
  align-items: center;
668
405
  gap: 8px;
@@ -672,25 +409,25 @@
672
409
  cursor: default;
673
410
  margin-block-end: 2px;
674
411
  }
675
- .dataviews-search-widget-listitem:last-child {
412
+ .dataviews-filters__search-widget-listitem:last-child {
676
413
  margin-block-end: 0;
677
414
  }
678
- .dataviews-search-widget-listitem:hover, .dataviews-search-widget-listitem[data-active-item], .dataviews-search-widget-listitem:focus {
415
+ .dataviews-filters__search-widget-listitem:hover, .dataviews-filters__search-widget-listitem[data-active-item], .dataviews-filters__search-widget-listitem:focus {
679
416
  background-color: var(--wp-admin-theme-color);
680
417
  color: #fff;
681
418
  }
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 {
419
+ .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 {
683
420
  fill: #fff;
684
421
  }
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 {
422
+ .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 {
686
423
  color: #fff;
687
424
  }
688
- .dataviews-search-widget-listitem .dataviews-search-widget-listitem-check {
425
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-check {
689
426
  width: 24px;
690
427
  height: 24px;
691
428
  flex-shrink: 0;
692
429
  }
693
- .dataviews-search-widget-listitem .dataviews-search-widget-listitem-description {
430
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-description {
694
431
  display: block;
695
432
  overflow: hidden;
696
433
  text-overflow: ellipsis;
@@ -699,11 +436,11 @@
699
436
  color: #757575;
700
437
  }
701
438
 
702
- .dataviews-search-widget-filter-combobox__wrapper {
439
+ .dataviews-filters__search-widget-filter-combobox__wrapper {
703
440
  position: relative;
704
441
  padding: 8px;
705
442
  }
706
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input {
443
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
707
444
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
708
445
  padding: 6px 8px;
709
446
  box-shadow: 0 0 0 transparent;
@@ -726,49 +463,49 @@
726
463
  font-size: 16px;
727
464
  }
728
465
  @media (prefers-reduced-motion: reduce) {
729
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input {
466
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
730
467
  transition-duration: 0s;
731
468
  transition-delay: 0s;
732
469
  }
733
470
  }
734
471
  @media (min-width: 600px) {
735
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input {
472
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
736
473
  font-size: 13px;
737
474
  /* Override core line-height. To be reviewed. */
738
475
  line-height: normal;
739
476
  }
740
477
  }
741
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input:focus {
478
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
742
479
  border-color: var(--wp-admin-theme-color);
743
480
  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
744
481
  outline: 2px solid transparent;
745
482
  }
746
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input::-webkit-input-placeholder {
483
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-input-placeholder {
747
484
  color: rgba(30, 30, 30, 0.62);
748
485
  }
749
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input::-moz-placeholder {
486
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
750
487
  opacity: 1;
751
488
  color: rgba(30, 30, 30, 0.62);
752
489
  }
753
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input:-ms-input-placeholder {
490
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:-ms-input-placeholder {
754
491
  color: rgba(30, 30, 30, 0.62);
755
492
  }
756
493
  @media (min-width: 600px) {
757
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input {
494
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
758
495
  font-size: 13px;
759
496
  }
760
497
  }
761
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input:focus {
498
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
762
499
  background: #fff;
763
500
  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
764
501
  }
765
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__input::placeholder {
502
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
766
503
  color: #757575;
767
504
  }
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 {
505
+ .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 {
769
506
  -webkit-appearance: none;
770
507
  }
771
- .dataviews-search-widget-filter-combobox__wrapper .dataviews-search-widget-filter-combobox__icon {
508
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon {
772
509
  position: absolute;
773
510
  left: 12px;
774
511
  top: 50%;
@@ -779,104 +516,580 @@
779
516
  width: 24px;
780
517
  }
781
518
 
782
- .dataviews-filter-summary__operators-container {
783
- padding: 8px 8px 0;
519
+ .dataviews-filters__container-visibility-toggle {
520
+ position: relative;
521
+ flex-shrink: 0;
784
522
  }
785
- .dataviews-filter-summary__operators-container:has(+ .dataviews-search-widget-listbox) {
786
- border-bottom: 1px solid #e0e0e0;
787
- padding-bottom: 8px;
523
+
524
+ .dataviews-filters-toggle__count {
525
+ position: absolute;
526
+ top: 0;
527
+ left: 0;
528
+ transform: translate(-50%, -50%);
529
+ background: var(--wp-admin-theme-color, #3858e9);
530
+ height: 16px;
531
+ min-width: 16px;
532
+ line-height: 16px;
533
+ padding: 0 4px;
534
+ text-align: center;
535
+ border-radius: 8px;
536
+ font-size: 11px;
537
+ outline: var(--wp-admin-border-width-focus) solid #fff;
538
+ color: #fff;
788
539
  }
789
- .dataviews-filter-summary__operators-container:empty {
790
- display: none;
540
+
541
+ .dataviews-search {
542
+ width: -moz-fit-content;
543
+ width: fit-content;
791
544
  }
792
- .dataviews-filter-summary__operators-container .dataviews-filter-summary__operators-filter-name {
545
+
546
+ .dataviews-pagination {
547
+ position: sticky;
548
+ bottom: 0;
549
+ right: 0;
550
+ background-color: #fff;
551
+ padding: 12px 48px;
552
+ border-top: 1px solid #f0f0f0;
793
553
  color: #757575;
554
+ flex-shrink: 0;
555
+ transition: padding ease-out 0.1s;
556
+ }
557
+ @media (prefers-reduced-motion: reduce) {
558
+ .dataviews-pagination {
559
+ transition-duration: 0s;
560
+ transition-delay: 0s;
561
+ }
562
+ }
563
+
564
+ .dataviews-pagination__page-selection {
565
+ font-size: 11px;
566
+ text-transform: uppercase;
567
+ font-weight: 500;
568
+ color: #1e1e1e;
569
+ }
570
+
571
+ /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
572
+ @container (max-width: 430px) {
573
+ .dataviews-pagination {
574
+ padding: 12px 24px;
575
+ }
576
+ }
577
+ .dataviews-action-modal {
578
+ z-index: 1000001;
579
+ }
580
+
581
+ .dataviews-selection-checkbox {
582
+ --checkbox-input-size: 24px;
583
+ line-height: 0;
584
+ flex-shrink: 0;
585
+ }
586
+ @media (min-width: 600px) {
587
+ .dataviews-selection-checkbox {
588
+ --checkbox-input-size: 16px;
589
+ }
590
+ }
591
+ .dataviews-selection-checkbox .components-checkbox-control__input-container {
592
+ margin: 0;
593
+ }
594
+
595
+ .dataviews-view-config {
596
+ width: 320px;
597
+ /* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
598
+ container-type: inline-size;
599
+ padding: 16px;
600
+ }
601
+
602
+ .dataviews-view-config__sort-direction .components-toggle-group-control-option-base {
603
+ text-transform: uppercase;
604
+ }
605
+
606
+ .dataviews-settings-section__title.dataviews-settings-section__title {
607
+ line-height: 24px;
608
+ font-size: 15px;
609
+ }
610
+
611
+ .dataviews-settings-section__sidebar {
612
+ grid-column: span 4;
794
613
  }
795
614
 
796
- .dataviews-filter-summary__chip-container {
615
+ .dataviews-settings-section__content,
616
+ .dataviews-settings-section__content > * {
617
+ grid-column: span 8;
618
+ }
619
+
620
+ .dataviews-settings-section__content .is-divided-in-two {
621
+ display: contents;
622
+ }
623
+ .dataviews-settings-section__content .is-divided-in-two > * {
624
+ grid-column: span 4;
625
+ }
626
+
627
+ /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
628
+ @container (max-width: 500px) {
629
+ .dataviews-settings-section.dataviews-settings-section {
630
+ grid-template-columns: repeat(2, 1fr);
631
+ }
632
+ .dataviews-settings-section.dataviews-settings-section .dataviews-settings-section__sidebar {
633
+ grid-column: span 2;
634
+ }
635
+ .dataviews-settings-section.dataviews-settings-section .dataviews-settings-section__content {
636
+ grid-column: span 2;
637
+ }
638
+ }
639
+ .dataviews-view-grid {
640
+ margin-bottom: auto;
641
+ grid-template-rows: max-content;
642
+ padding: 0 48px 24px;
643
+ transition: padding ease-out 0.1s;
644
+ }
645
+ @media (prefers-reduced-motion: reduce) {
646
+ .dataviews-view-grid {
647
+ transition-duration: 0s;
648
+ transition-delay: 0s;
649
+ }
650
+ }
651
+ .dataviews-view-grid .dataviews-view-grid__card {
652
+ height: 100%;
653
+ justify-content: flex-start;
797
654
  position: relative;
798
- white-space: pre-wrap;
799
655
  }
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;
656
+ .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-actions {
657
+ padding: 8px 0 4px;
658
+ }
659
+ .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__primary-field {
805
660
  min-height: 32px;
661
+ }
662
+ .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
663
+ color: #1e1e1e;
664
+ }
665
+ .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after {
666
+ background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
667
+ box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
668
+ }
669
+ .dataviews-view-grid .dataviews-view-grid__media {
670
+ width: 100%;
671
+ min-height: 200px;
672
+ aspect-ratio: 1/1;
673
+ background-color: #f0f0f0;
674
+ border-radius: 4px;
675
+ position: relative;
676
+ }
677
+ .dataviews-view-grid .dataviews-view-grid__media img {
678
+ object-fit: cover;
679
+ width: 100%;
680
+ height: 100%;
681
+ }
682
+ .dataviews-view-grid .dataviews-view-grid__media::after {
683
+ content: "";
684
+ position: absolute;
685
+ top: 0;
686
+ right: 0;
687
+ width: 100%;
688
+ height: 100%;
689
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
690
+ border-radius: 4px;
691
+ pointer-events: none;
692
+ }
693
+ .dataviews-view-grid .dataviews-view-grid__fields {
694
+ position: relative;
695
+ font-size: 12px;
696
+ line-height: 16px;
697
+ }
698
+ .dataviews-view-grid .dataviews-view-grid__fields:not(:empty) {
699
+ padding: 0 0 12px;
700
+ }
701
+ .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty) {
702
+ min-height: 24px;
703
+ line-height: 20px;
704
+ padding-top: 2px;
705
+ }
706
+ .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field {
707
+ align-items: flex-start;
708
+ min-height: 24px;
709
+ }
710
+ .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
711
+ display: none;
712
+ }
713
+ .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(.is-column) {
714
+ align-items: center;
715
+ }
716
+ .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(.is-column) .dataviews-view-grid__field-name {
717
+ width: 35%;
718
+ }
719
+ .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(.is-column) .dataviews-view-grid__field-value {
720
+ width: 65%;
721
+ overflow: hidden;
722
+ text-overflow: ellipsis;
723
+ white-space: nowrap;
724
+ }
725
+ .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field.is-column + .is-row {
726
+ margin-top: 4px;
727
+ }
728
+ .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name {
729
+ color: #757575;
730
+ }
731
+ .dataviews-view-grid .dataviews-view-grid__badge-fields:not(:empty) {
732
+ padding-bottom: 12px;
733
+ }
734
+ .dataviews-view-grid .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value {
735
+ width: -moz-fit-content;
736
+ width: fit-content;
806
737
  background: #f0f0f0;
807
- color: #2f2f2f;
738
+ padding: 0 8px;
739
+ min-height: 24px;
740
+ border-radius: 2px;
741
+ display: flex;
742
+ align-items: center;
743
+ font-size: 12px;
744
+ }
745
+
746
+ .dataviews-view-grid.dataviews-view-grid {
747
+ grid-template-columns: repeat(1, minmax(0, 1fr));
748
+ }
749
+ @media (min-width: 480px) {
750
+ .dataviews-view-grid.dataviews-view-grid {
751
+ grid-template-columns: repeat(2, minmax(0, 1fr));
752
+ }
753
+ }
754
+ @media (min-width: 1080px) {
755
+ .dataviews-view-grid.dataviews-view-grid {
756
+ grid-template-columns: repeat(3, minmax(0, 1fr));
757
+ }
758
+ }
759
+ @media (min-width: 1440px) {
760
+ .dataviews-view-grid.dataviews-view-grid {
761
+ grid-template-columns: repeat(4, minmax(0, 1fr));
762
+ }
763
+ }
764
+ @media (min-width: 1920px) {
765
+ .dataviews-view-grid.dataviews-view-grid {
766
+ grid-template-columns: repeat(5, minmax(0, 1fr));
767
+ }
768
+ }
769
+
770
+ .dataviews-density-picker__range-control {
771
+ width: 200px;
772
+ }
773
+
774
+ .dataviews-view-grid__field-value:empty,
775
+ .dataviews-view-grid__field:empty {
776
+ display: none;
777
+ }
778
+
779
+ .dataviews-view-grid__card .dataviews-selection-checkbox {
780
+ position: absolute;
781
+ top: -9999em;
782
+ right: 8px;
783
+ z-index: 1;
784
+ }
785
+
786
+ .dataviews-view-grid__card:hover .dataviews-selection-checkbox,
787
+ .dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
788
+ .dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
789
+ top: 8px;
790
+ }
791
+
792
+ .dataviews-view-list {
793
+ margin: 0 0 auto;
794
+ }
795
+ .dataviews-view-list li {
796
+ margin: 0;
797
+ cursor: pointer;
798
+ border-top: 1px solid #f0f0f0;
799
+ }
800
+ .dataviews-view-list li .dataviews-view-list__item-wrapper {
801
+ position: relative;
802
+ border-radius: 4px;
803
+ }
804
+ .dataviews-view-list li .dataviews-view-list__item-wrapper > * {
805
+ width: 100%;
806
+ }
807
+ .dataviews-view-list li .dataviews-view-list__item-actions {
808
+ position: absolute;
809
+ top: 16px;
810
+ left: 0;
811
+ }
812
+ .dataviews-view-list li .dataviews-view-list__item-actions > div {
813
+ height: 24px;
814
+ }
815
+ .dataviews-view-list li .dataviews-view-list__item-actions .components-button {
816
+ opacity: 0;
817
+ }
818
+ .dataviews-view-list li:has(.dataviews-view-list__fields:empty) .dataviews-view-list__item-actions {
819
+ top: 50%;
820
+ transform: translateY(-50%);
821
+ }
822
+ .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 {
823
+ background: #f8f8f8;
824
+ padding-right: 8px;
825
+ margin-left: 24px;
826
+ box-shadow: 12px 0 8px 0 #f8f8f8;
827
+ }
828
+ .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 {
829
+ opacity: 1;
830
+ position: static;
831
+ }
832
+ .dataviews-view-list li.is-selected .dataviews-view-list__item-actions {
833
+ background-color: #f7f8ff;
834
+ box-shadow: 12px 0 8px 0 #f7f8ff;
835
+ }
836
+ .dataviews-view-list li.is-selected.is-selected {
837
+ border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
838
+ }
839
+ .dataviews-view-list li.is-selected.is-selected + li {
840
+ border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
841
+ }
842
+ .dataviews-view-list li:not(.is-selected) .dataviews-view-list__primary-field {
843
+ color: #1e1e1e;
844
+ }
845
+ .dataviews-view-list li:not(.is-selected):hover, .dataviews-view-list li:not(.is-selected):focus-within {
846
+ color: var(--wp-admin-theme-color);
847
+ background-color: #f8f8f8;
848
+ }
849
+ .dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__primary-field,
850
+ .dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__fields, .dataviews-view-list li:not(.is-selected):focus-within .dataviews-view-list__primary-field,
851
+ .dataviews-view-list li:not(.is-selected):focus-within .dataviews-view-list__fields {
852
+ color: var(--wp-admin-theme-color);
853
+ }
854
+ .dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper,
855
+ .dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper {
856
+ background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
857
+ color: #1e1e1e;
858
+ }
859
+ .dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__primary-field,
860
+ .dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__fields,
861
+ .dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__primary-field,
862
+ .dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__fields {
863
+ color: var(--wp-admin-theme-color);
864
+ }
865
+ .dataviews-view-list .dataviews-view-list__item {
866
+ padding: 16px 24px;
867
+ width: 100%;
868
+ scroll-margin: 8px 0;
869
+ }
870
+ .dataviews-view-list .dataviews-view-list__item:focus-visible::before {
871
+ position: absolute;
872
+ content: "";
873
+ top: calc(var(--wp-admin-border-width-focus) + 1px);
874
+ left: var(--wp-admin-border-width-focus);
875
+ bottom: var(--wp-admin-border-width-focus);
876
+ right: var(--wp-admin-border-width-focus);
877
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
878
+ border-radius: 2px;
879
+ }
880
+ .dataviews-view-list .dataviews-view-list__item .dataviews-view-list__primary-field {
881
+ min-height: 24px;
882
+ line-height: 24px;
883
+ overflow: hidden;
884
+ }
885
+ .dataviews-view-list .dataviews-view-list__media-wrapper {
886
+ width: 52px;
887
+ height: 52px;
888
+ overflow: hidden;
808
889
  position: relative;
890
+ flex-shrink: 0;
891
+ background-color: #f0f0f0;
892
+ border-radius: 4px;
893
+ }
894
+ .dataviews-view-list .dataviews-view-list__media-wrapper img {
895
+ width: 100%;
896
+ height: 100%;
897
+ object-fit: cover;
898
+ }
899
+ .dataviews-view-list .dataviews-view-list__media-wrapper::after {
900
+ content: "";
901
+ position: absolute;
902
+ top: 0;
903
+ right: 0;
904
+ width: 100%;
905
+ height: 100%;
906
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
907
+ border-radius: 4px;
908
+ }
909
+ .dataviews-view-list .dataviews-view-list__media-placeholder {
910
+ min-width: 32px;
911
+ height: 32px;
912
+ background-color: #e0e0e0;
913
+ }
914
+ .dataviews-view-list .dataviews-view-list__field-wrapper {
915
+ min-height: 52px;
916
+ }
917
+ .dataviews-view-list .dataviews-view-list__fields {
918
+ color: #757575;
919
+ display: flex;
920
+ gap: 12px;
921
+ row-gap: 4px;
922
+ flex-wrap: wrap;
923
+ font-size: 12px;
924
+ }
925
+ .dataviews-view-list .dataviews-view-list__fields:empty {
926
+ display: none;
927
+ }
928
+ .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field:has(.dataviews-view-list__field-value:empty) {
929
+ display: none;
930
+ }
931
+ .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field-value {
932
+ min-height: 24px;
933
+ line-height: 20px;
809
934
  display: flex;
810
935
  align-items: center;
811
936
  }
812
- .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip.has-reset {
813
- padding-inline-end: 28px;
937
+ .dataviews-view-list + .dataviews-pagination {
938
+ justify-content: space-between;
814
939
  }
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;
940
+
941
+ .dataviews-view-table {
942
+ width: 100%;
943
+ text-indent: 0;
944
+ border-color: inherit;
945
+ border-collapse: collapse;
946
+ position: relative;
947
+ color: #757575;
948
+ margin-bottom: auto;
949
+ }
950
+ .dataviews-view-table a {
951
+ text-decoration: none;
952
+ color: #1e1e1e;
953
+ font-weight: 500;
954
+ }
955
+ .dataviews-view-table th {
956
+ text-align: right;
817
957
  color: #1e1e1e;
958
+ font-weight: normal;
959
+ font-size: 13px;
960
+ }
961
+ .dataviews-view-table td,
962
+ .dataviews-view-table th {
963
+ padding: 12px;
964
+ white-space: nowrap;
965
+ }
966
+ .dataviews-view-table td.dataviews-view-table__actions-column,
967
+ .dataviews-view-table th.dataviews-view-table__actions-column {
968
+ text-align: left;
969
+ }
970
+ .dataviews-view-table td.dataviews-view-table__checkbox-column,
971
+ .dataviews-view-table th.dataviews-view-table__checkbox-column {
972
+ padding-left: 0;
973
+ }
974
+ .dataviews-view-table tr {
975
+ border-top: 1px solid #f0f0f0;
976
+ }
977
+ .dataviews-view-table tr .dataviews-view-table-header-button {
978
+ gap: 4px;
979
+ }
980
+ .dataviews-view-table tr td:first-child,
981
+ .dataviews-view-table tr th:first-child {
982
+ padding-right: 48px;
983
+ }
984
+ .dataviews-view-table tr td:first-child .dataviews-view-table-header-button,
985
+ .dataviews-view-table tr td:first-child .dataviews-view-table-header,
986
+ .dataviews-view-table tr th:first-child .dataviews-view-table-header-button,
987
+ .dataviews-view-table tr th:first-child .dataviews-view-table-header {
988
+ margin-right: -8px;
989
+ }
990
+ .dataviews-view-table tr td:last-child,
991
+ .dataviews-view-table tr th:last-child {
992
+ padding-left: 48px;
993
+ }
994
+ .dataviews-view-table tr:last-child {
995
+ border-bottom: 0;
996
+ }
997
+ .dataviews-view-table tr.is-hovered {
998
+ background-color: #f8f8f8;
999
+ }
1000
+ .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input {
1001
+ opacity: 0;
1002
+ }
1003
+ .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 {
1004
+ opacity: 1;
1005
+ }
1006
+ .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
1007
+ opacity: 0;
1008
+ }
1009
+ .dataviews-view-table tr:focus-within .components-checkbox-control__input,
1010
+ .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,
1011
+ .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,
1012
+ .dataviews-view-table tr:hover .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
1013
+ opacity: 1;
1014
+ }
1015
+ @media (hover: none) {
1016
+ .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input,
1017
+ .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
1018
+ opacity: 1;
1019
+ }
1020
+ }
1021
+ .dataviews-view-table tr.is-selected {
1022
+ background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
1023
+ color: #757575;
1024
+ }
1025
+ .dataviews-view-table tr.is-selected, .dataviews-view-table tr.is-selected + tr {
1026
+ border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
1027
+ }
1028
+ .dataviews-view-table tr.is-selected:hover {
1029
+ background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
1030
+ }
1031
+ .dataviews-view-table thead {
1032
+ position: sticky;
1033
+ inset-block-start: 0;
1034
+ z-index: 1;
1035
+ }
1036
+ .dataviews-view-table thead tr {
1037
+ border: 0;
1038
+ }
1039
+ .dataviews-view-table thead th {
1040
+ background-color: #fff;
1041
+ padding-top: 8px;
1042
+ padding-bottom: 8px;
1043
+ padding-right: 12px;
1044
+ font-size: 11px;
1045
+ text-transform: uppercase;
1046
+ font-weight: 500;
1047
+ }
1048
+ .dataviews-view-table thead th:has(.dataviews-view-table-header-button):not(:first-child) {
1049
+ padding-right: 4px;
818
1050
  }
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);
1051
+ .dataviews-view-table tbody td {
1052
+ vertical-align: top;
822
1053
  }
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);
1054
+ .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper {
1055
+ min-height: 32px;
1056
+ display: flex;
1057
+ align-items: center;
825
1058
  }
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);
1059
+ .dataviews-view-table tbody .components-v-stack > .dataviews-view-table__cell-content-wrapper:not(:first-child) {
1060
+ min-height: 0;
829
1061
  }
830
- .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip .dataviews-filter-summary__filter-text-name {
1062
+ .dataviews-view-table .dataviews-view-table-header-button {
1063
+ padding: 4px 8px;
1064
+ font-size: 11px;
1065
+ text-transform: uppercase;
831
1066
  font-weight: 500;
832
1067
  }
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;
1068
+ .dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
1069
+ color: #1e1e1e;
848
1070
  }
849
- .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip-remove svg {
850
- fill: #757575;
1071
+ .dataviews-view-table .dataviews-view-table-header-button span {
1072
+ speak: none;
851
1073
  }
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;
1074
+ .dataviews-view-table .dataviews-view-table-header-button span:empty {
1075
+ display: none;
854
1076
  }
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;
1077
+ .dataviews-view-table .dataviews-view-table-header {
1078
+ padding-right: 4px;
857
1079
  }
858
- .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip-remove.has-values svg {
859
- fill: var(--wp-admin-theme-color);
1080
+ .dataviews-view-table .dataviews-view-table__actions-column {
1081
+ width: 1%;
860
1082
  }
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);
1083
+ .dataviews-view-table:has(tr.is-selected) .components-checkbox-control__input {
1084
+ opacity: 1;
863
1085
  }
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);
1086
+
1087
+ .dataviews-view-table__cell-content-wrapper:empty {
1088
+ display: none;
867
1089
  }
868
1090
 
869
1091
  /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
870
1092
  @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
1093
  .dataviews-view-table tr td:first-child,
881
1094
  .dataviews-view-table tr th:first-child {
882
1095
  padding-right: 24px;
@@ -886,53 +1099,71 @@
886
1099
  .dataviews-view-table tr th:last-child {
887
1100
  padding-left: 24px;
888
1101
  }
889
-
890
- .dataviews-view-grid,
891
- .dataviews-no-results,
892
- .dataviews-loading {
893
- padding-right: 24px;
894
- padding-left: 24px;
1102
+ }
1103
+ .dataviews-view-table-selection-checkbox {
1104
+ --checkbox-input-size: 24px;
1105
+ }
1106
+ @media (min-width: 600px) {
1107
+ .dataviews-view-table-selection-checkbox {
1108
+ --checkbox-input-size: 16px;
895
1109
  }
896
1110
  }
897
- .dataviews-bulk-actions-toolbar-wrapper {
898
- display: flex;
899
- flex-grow: 1;
1111
+
1112
+ .dataforms-layouts-panel__field {
900
1113
  width: 100%;
1114
+ min-height: 32px;
1115
+ justify-content: flex-start !important;
1116
+ align-items: flex-start !important;
901
1117
  }
902
- .dataviews-bulk-actions-toolbar-wrapper .components-toolbar-group {
1118
+
1119
+ .dataforms-layouts-panel__field-label {
1120
+ width: 38%;
1121
+ flex-shrink: 0;
1122
+ min-height: 32px;
1123
+ display: flex;
903
1124
  align-items: center;
904
- }
905
- .dataviews-bulk-actions-toolbar-wrapper .components-button.is-busy {
906
- max-height: 36px;
1125
+ padding: 6px 0;
1126
+ line-height: 20px;
1127
+ -webkit-hyphens: auto;
1128
+ hyphens: auto;
907
1129
  }
908
1130
 
909
- .dataviews-bulk-actions {
910
- position: sticky;
1131
+ .dataforms-layouts-panel__field-control {
1132
+ flex-grow: 1;
1133
+ min-height: 32px;
911
1134
  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;
1135
+ align-items: center;
921
1136
  }
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);
1137
+ .dataforms-layouts-panel__field-control .components-button {
1138
+ max-width: 100%;
1139
+ text-align: right;
1140
+ white-space: normal;
1141
+ text-wrap: balance;
1142
+ text-wrap: pretty;
1143
+ min-height: 32px;
925
1144
  }
926
- .dataviews-bulk-actions .components-accessible-toolbar .components-toolbar-group {
927
- border-color: #e0e0e0;
1145
+ .dataforms-layouts-panel__field-control .components-dropdown {
1146
+ max-width: 100%;
928
1147
  }
929
- .dataviews-bulk-actions .components-accessible-toolbar .components-toolbar-group:last-child {
930
- border: 0;
1148
+
1149
+ .dataforms-layouts-panel__field-dropdown .components-popover__content {
1150
+ min-width: 320px;
1151
+ padding: 16px;
931
1152
  }
932
- .dataviews-bulk-actions .dataviews-bulk-actions__selection-count {
933
- display: flex;
934
- align-items: center;
935
- margin: 0 8px 0 8px;
1153
+
1154
+ .dataforms-layouts-panel__dropdown-header {
1155
+ margin-bottom: 16px;
1156
+ }
1157
+
1158
+ [class].dataforms-layouts-panel__dropdown-header-action {
1159
+ height: 24px;
1160
+ }
1161
+ [class].dataforms-layouts-panel__dropdown-header-action.has-icon {
1162
+ min-width: 24px;
1163
+ padding: 0;
1164
+ }
1165
+ [class].dataforms-layouts-panel__dropdown-header-action:not(.has-icon) {
1166
+ text-decoration: underline;
936
1167
  }
937
1168
 
938
1169
  .edit-site-custom-template-modal__contents-wrapper {
@@ -1013,15 +1244,12 @@
1013
1244
  margin-bottom: 4px;
1014
1245
  }
1015
1246
 
1016
- .edit-site-add-new-template__modal {
1017
- max-width: 832px;
1018
- width: calc(100% - 64px);
1019
- margin-top: 64px;
1020
- max-height: calc(100% - 128px);
1021
- }
1022
1247
  @media (min-width: 960px) {
1023
1248
  .edit-site-add-new-template__modal {
1249
+ max-width: 832px;
1250
+ margin-top: 64px;
1024
1251
  width: calc(100% - 128px);
1252
+ max-height: calc(100% - 128px);
1025
1253
  }
1026
1254
  }
1027
1255
  .edit-site-add-new-template__modal .edit-site-add-new-template__template-button svg,
@@ -1082,8 +1310,7 @@
1082
1310
  .edit-site-custom-template-modal__contents .edit-site-add-new-template__template-list__prompt,
1083
1311
  .edit-site-add-new-template__template-list__contents .edit-site-add-new-template__custom-template-button,
1084
1312
  .edit-site-add-new-template__template-list__contents .edit-site-add-new-template__template-list__prompt {
1085
- grid-column-start: 1;
1086
- grid-column-end: 4;
1313
+ grid-column: 1/-1;
1087
1314
  }
1088
1315
 
1089
1316
  .edit-site-add-new-template__template-list__contents > .components-button {
@@ -1153,6 +1380,17 @@
1153
1380
  overflow: hidden;
1154
1381
  }
1155
1382
 
1383
+ .edit-site-font-size__item {
1384
+ white-space: nowrap;
1385
+ text-overflow: ellipsis;
1386
+ overflow: hidden;
1387
+ line-break: anywhere;
1388
+ }
1389
+
1390
+ .edit-site-font-size__item-value {
1391
+ color: #757575;
1392
+ }
1393
+
1156
1394
  .edit-site-global-styles-screen {
1157
1395
  margin: 12px 16px 16px;
1158
1396
  }
@@ -1171,7 +1409,6 @@
1171
1409
  color: #757575;
1172
1410
  }
1173
1411
 
1174
- .edit-site-global-styles-font-families__add-fonts,
1175
1412
  .edit-site-global-styles-font-families__manage-fonts {
1176
1413
  justify-content: center;
1177
1414
  }
@@ -1229,13 +1466,13 @@
1229
1466
  .edit-site-global-styles__block-preview-panel {
1230
1467
  position: relative;
1231
1468
  width: 100%;
1232
- overflow: auto;
1233
1469
  border: #e0e0e0 1px solid;
1234
1470
  border-radius: 2px;
1471
+ overflow: hidden;
1235
1472
  }
1236
1473
 
1237
1474
  .edit-site-global-styles__shadow-preview-panel {
1238
- height: 150px;
1475
+ height: 144px;
1239
1476
  border: #e0e0e0 1px solid;
1240
1477
  border-radius: 2px;
1241
1478
  overflow: auto;
@@ -1251,13 +1488,12 @@
1251
1488
  height: 60px;
1252
1489
  }
1253
1490
 
1254
- .edit-site-global-styles__shadow-editor-panel {
1491
+ .edit-site-global-styles__shadow-editor__dropdown-content {
1255
1492
  width: 280px;
1256
- padding: 16px;
1257
- margin-bottom: 4px;
1258
1493
  }
1259
- .edit-site-global-styles__shadow-editor-panel .edit-site-global-styles__shadow-editor-color-palette {
1260
- margin-bottom: -4px;
1494
+
1495
+ .edit-site-global-styles__shadow-editor-panel {
1496
+ margin-bottom: 4px;
1261
1497
  }
1262
1498
 
1263
1499
  .edit-site-global-styles__shadow-editor__dropdown {
@@ -1639,44 +1875,25 @@
1639
1875
  z-index: 1;
1640
1876
  }
1641
1877
 
1642
- .edit-site-patterns__section-header .screen-reader-shortcut:focus {
1643
- top: 0;
1644
- }
1645
-
1646
- .edit-site-patterns__pattern-title .is-link {
1647
- text-decoration: none;
1648
- color: #e0e0e0;
1649
- }
1650
- .edit-site-patterns__pattern-title .is-link:hover, .edit-site-patterns__pattern-title .is-link:focus {
1651
- color: #fff;
1652
- }
1653
- .edit-site-patterns__pattern-title .edit-site-patterns__pattern-icon {
1654
- border-radius: 4px;
1655
- background: var(--wp-block-synced-color);
1656
- fill: #fff;
1657
- }
1658
- .edit-site-patterns__pattern-title .edit-site-patterns__pattern-lock-icon {
1659
- fill: currentcolor;
1660
- }
1661
-
1662
1878
  .edit-site-patterns__delete-modal {
1663
1879
  width: 384px;
1664
1880
  }
1665
1881
 
1666
- .edit-site-page-patterns-dataviews .page-patterns-preview-field {
1882
+ .page-patterns-preview-field {
1667
1883
  display: flex;
1668
1884
  flex-direction: column;
1669
1885
  height: 100%;
1886
+ border-radius: 4px;
1670
1887
  }
1671
- .edit-site-page-patterns-dataviews .page-patterns-preview-field.is-viewtype-table {
1888
+ .dataviews-view-table .page-patterns-preview-field {
1672
1889
  width: 96px;
1673
1890
  flex-grow: 0;
1674
1891
  border-radius: 2px;
1675
1892
  }
1676
- .edit-site-page-patterns-dataviews .page-patterns-preview-field.is-viewtype-table .page-patterns-preview-field__button {
1893
+ .dataviews-view-table .page-patterns-preview-field .page-patterns-preview-field__button {
1677
1894
  border-radius: 2px;
1678
1895
  }
1679
- .edit-site-page-patterns-dataviews .page-patterns-preview-field .page-patterns-preview-field__button {
1896
+ .page-patterns-preview-field .page-patterns-preview-field__button {
1680
1897
  box-shadow: none;
1681
1898
  border: none;
1682
1899
  padding: 0;
@@ -1687,21 +1904,24 @@
1687
1904
  height: 100%;
1688
1905
  border-radius: 4px;
1689
1906
  }
1690
- .edit-site-page-patterns-dataviews .page-patterns-preview-field .page-patterns-preview-field__button:focus-visible {
1907
+ .page-patterns-preview-field .page-patterns-preview-field__button:focus-visible {
1691
1908
  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1692
1909
  outline: 2px solid transparent;
1693
1910
  }
1694
- .edit-site-page-patterns-dataviews .page-patterns-preview-field .page-patterns-preview-field__button[aria-disabled=true] {
1911
+ .page-patterns-preview-field .page-patterns-preview-field__button[aria-disabled=true] {
1695
1912
  cursor: default;
1696
1913
  }
1697
- .edit-site-page-patterns-dataviews .edit-site-patterns__pattern-icon {
1914
+
1915
+ .edit-site-patterns__pattern-icon {
1698
1916
  fill: var(--wp-block-synced-color);
1699
1917
  flex-shrink: 0;
1700
1918
  }
1701
- .edit-site-page-patterns-dataviews .edit-site-patterns__pattern-lock-icon {
1919
+
1920
+ .edit-site-patterns__pattern-lock-icon {
1702
1921
  min-width: min-content;
1703
1922
  }
1704
- .edit-site-page-patterns-dataviews .edit-site-patterns__section-header {
1923
+
1924
+ .edit-site-patterns__section-header {
1705
1925
  border-bottom: 1px solid #f0f0f0;
1706
1926
  padding: 16px 48px;
1707
1927
  position: sticky;
@@ -1712,23 +1932,27 @@
1712
1932
  min-height: 40px;
1713
1933
  }
1714
1934
  @media (prefers-reduced-motion: reduce) {
1715
- .edit-site-page-patterns-dataviews .edit-site-patterns__section-header {
1935
+ .edit-site-patterns__section-header {
1716
1936
  transition-duration: 0s;
1717
1937
  transition-delay: 0s;
1718
1938
  }
1719
1939
  }
1720
- .edit-site-page-patterns-dataviews .edit-site-patterns__section-header .edit-site-patterns__title {
1940
+ .edit-site-patterns__section-header .edit-site-patterns__title {
1721
1941
  min-height: 40px;
1722
1942
  }
1723
- .edit-site-page-patterns-dataviews .edit-site-patterns__section-header .edit-site-patterns__title .components-heading {
1943
+ .edit-site-patterns__section-header .edit-site-patterns__title .components-heading {
1724
1944
  flex-grow: 1;
1725
1945
  flex-basis: 0;
1726
1946
  white-space: nowrap;
1727
1947
  }
1728
- .edit-site-page-patterns-dataviews .edit-site-patterns__section-header .edit-site-patterns__sub-title {
1948
+ .edit-site-patterns__section-header .edit-site-patterns__sub-title {
1729
1949
  margin-bottom: 8px;
1730
1950
  }
1731
- .edit-site-page-patterns-dataviews .edit-site-patterns__pattern-title {
1951
+ .edit-site-patterns__section-header .screen-reader-shortcut:focus {
1952
+ top: 0;
1953
+ }
1954
+
1955
+ .edit-site-patterns__pattern-title {
1732
1956
  display: block;
1733
1957
  width: 100%;
1734
1958
  white-space: nowrap;
@@ -1736,6 +1960,22 @@
1736
1960
  text-overflow: ellipsis;
1737
1961
  color: inherit;
1738
1962
  }
1963
+ .edit-site-patterns__pattern-title .is-link {
1964
+ text-decoration: none;
1965
+ color: #e0e0e0;
1966
+ }
1967
+ .edit-site-patterns__pattern-title .is-link:hover, .edit-site-patterns__pattern-title .is-link:focus {
1968
+ color: #fff;
1969
+ }
1970
+ .edit-site-patterns__pattern-title .edit-site-patterns__pattern-icon {
1971
+ border-radius: 4px;
1972
+ background: var(--wp-block-synced-color);
1973
+ fill: #fff;
1974
+ }
1975
+ .edit-site-patterns__pattern-title .edit-site-patterns__pattern-lock-icon {
1976
+ fill: currentcolor;
1977
+ }
1978
+
1739
1979
  .edit-site-page-patterns-dataviews .dataviews-pagination {
1740
1980
  z-index: 2;
1741
1981
  }
@@ -1782,6 +2022,8 @@
1782
2022
  display: flex;
1783
2023
  flex-direction: column;
1784
2024
  height: 100%;
2025
+ width: 100%;
2026
+ border-radius: 4px;
1785
2027
  }
1786
2028
  .page-templates-preview-field .page-templates-preview-field__button {
1787
2029
  box-shadow: none;
@@ -1798,17 +2040,19 @@
1798
2040
  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1799
2041
  outline: 2px solid transparent;
1800
2042
  }
1801
- .page-templates-preview-field.is-viewtype-list .block-editor-block-preview__container {
2043
+ .dataviews-view-list .page-templates-preview-field .block-editor-block-preview__container {
1802
2044
  height: 120px;
1803
2045
  }
1804
- .page-templates-preview-field.is-viewtype-grid .block-editor-block-preview__container {
2046
+ .dataviews-view-grid .page-templates-preview-field .block-editor-block-preview__container {
1805
2047
  height: 100%;
1806
2048
  }
1807
- .page-templates-preview-field.is-viewtype-table {
2049
+ .dataviews-view-table .page-templates-preview-field {
1808
2050
  border-radius: 2px;
1809
2051
  position: relative;
2052
+ width: 120px;
2053
+ max-height: 160px;
1810
2054
  }
1811
- .page-templates-preview-field.is-viewtype-table::after {
2055
+ .dataviews-view-table .page-templates-preview-field::after {
1812
2056
  content: "";
1813
2057
  position: absolute;
1814
2058
  top: 0;
@@ -1820,7 +2064,12 @@
1820
2064
  }
1821
2065
 
1822
2066
  .page-templates-description {
1823
- white-space: normal;
2067
+ max-width: 50em;
2068
+ text-wrap: balance;
2069
+ text-wrap: pretty;
2070
+ }
2071
+ .dataviews-view-table .page-templates-description {
2072
+ margin-bottom: 8px;
1824
2073
  }
1825
2074
 
1826
2075
  .edit-site-page-templates .dataviews-pagination {
@@ -1833,12 +2082,12 @@
1833
2082
  width: 24px;
1834
2083
  height: 24px;
1835
2084
  align-items: center;
1836
- justify-content: center;
2085
+ justify-content: right;
1837
2086
  display: flex;
1838
2087
  }
1839
2088
  .page-templates-author-field__avatar img {
1840
- width: 20px;
1841
- height: 20px;
2089
+ width: 16px;
2090
+ height: 16px;
1842
2091
  object-fit: cover;
1843
2092
  opacity: 0;
1844
2093
  transition: opacity 0.1s linear;
@@ -1861,6 +2110,7 @@
1861
2110
  height: 24px;
1862
2111
  }
1863
2112
  .page-templates-author-field__icon svg {
2113
+ margin-right: -4px;
1864
2114
  fill: currentColor;
1865
2115
  }
1866
2116
 
@@ -1902,6 +2152,57 @@
1902
2152
  justify-content: center;
1903
2153
  }
1904
2154
 
2155
+ .edit-site-editor__view-mode-toggle {
2156
+ /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
2157
+ view-transition-name: toggle;
2158
+ /* stylelint-enable */
2159
+ top: 0;
2160
+ right: 0;
2161
+ height: 60px;
2162
+ width: 60px;
2163
+ z-index: 100;
2164
+ }
2165
+ .edit-site-editor__view-mode-toggle .components-button {
2166
+ color: #fff;
2167
+ height: 100%;
2168
+ width: 100%;
2169
+ border-radius: 0;
2170
+ overflow: hidden;
2171
+ padding: 0;
2172
+ display: flex;
2173
+ align-items: center;
2174
+ justify-content: center;
2175
+ }
2176
+ .edit-site-editor__view-mode-toggle .components-button:hover, .edit-site-editor__view-mode-toggle .components-button:active {
2177
+ color: #fff;
2178
+ }
2179
+ .edit-site-editor__view-mode-toggle .components-button:focus {
2180
+ box-shadow: none;
2181
+ }
2182
+ .edit-site-editor__view-mode-toggle .edit-site-editor__view-mode-toggle-icon svg,
2183
+ .edit-site-editor__view-mode-toggle .edit-site-editor__view-mode-toggle-icon img {
2184
+ background: #1e1e1e;
2185
+ display: block;
2186
+ }
2187
+
2188
+ .edit-site-editor__back-icon {
2189
+ position: absolute;
2190
+ top: 0;
2191
+ right: 0;
2192
+ width: 60px;
2193
+ height: 60px;
2194
+ display: flex;
2195
+ align-items: center;
2196
+ justify-content: center;
2197
+ background-color: #cccccc;
2198
+ pointer-events: none;
2199
+ }
2200
+ .edit-site-editor__back-icon.has-site-icon {
2201
+ background-color: rgba(255, 255, 255, 0.6);
2202
+ -webkit-backdrop-filter: saturate(180%) blur(15px);
2203
+ backdrop-filter: saturate(180%) blur(15px);
2204
+ }
2205
+
1905
2206
  .edit-site-welcome-guide {
1906
2207
  width: 312px;
1907
2208
  }
@@ -1969,7 +2270,7 @@
1969
2270
  }
1970
2271
  @media (min-width: 782px) {
1971
2272
  .edit-site-layout__sidebar-region {
1972
- width: 360px;
2273
+ width: 300px;
1973
2274
  }
1974
2275
  }
1975
2276
  .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region {
@@ -2080,6 +2381,13 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
2080
2381
  animation-delay: 255ms;
2081
2382
  }
2082
2383
 
2384
+ @media (prefers-reduced-motion) {
2385
+ ::view-transition-group(*),
2386
+ ::view-transition-old(*),
2387
+ ::view-transition-new(*) {
2388
+ animation: none !important;
2389
+ }
2390
+ }
2083
2391
  /* stylelint-enable */
2084
2392
  .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
2085
2393
  display: none;
@@ -2104,8 +2412,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
2104
2412
  .edit-site-layout__view-mode-toggle.components-button:hover, .edit-site-layout__view-mode-toggle.components-button:active {
2105
2413
  color: #fff;
2106
2414
  }
2107
- .edit-site-layout__view-mode-toggle.components-button:focus {
2108
- box-shadow: none;
2415
+ .edit-site-layout__view-mode-toggle.components-button:focus-visible, .edit-site-layout__view-mode-toggle.components-button:focus {
2416
+ box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 6px var(--wp-admin-theme-color);
2417
+ outline: 4px solid #0000;
2418
+ outline-offset: 4px;
2109
2419
  }
2110
2420
  .edit-site-layout__view-mode-toggle.components-button::before {
2111
2421
  transition: box-shadow 0.1s ease;
@@ -2125,9 +2435,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
2125
2435
  transition-delay: 0s;
2126
2436
  }
2127
2437
  }
2128
- .edit-site-layout__view-mode-toggle.components-button:focus::before {
2129
- 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);
2130
- }
2131
2438
  .edit-site-layout__view-mode-toggle.components-button .edit-site-layout__view-mode-toggle-icon {
2132
2439
  display: flex;
2133
2440
  height: 64px;
@@ -2180,6 +2487,20 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
2180
2487
  padding-left: 16px;
2181
2488
  }
2182
2489
 
2490
+ .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 {
2491
+ box-shadow: none;
2492
+ outline: none;
2493
+ outline-offset: 0;
2494
+ }
2495
+ .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 {
2496
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #3858e9);
2497
+ outline: 3px solid #0000;
2498
+ height: 40px;
2499
+ width: 40px;
2500
+ padding: 2px;
2501
+ border-radius: 2px;
2502
+ }
2503
+
2183
2504
  .edit-site-save-hub {
2184
2505
  color: #949494;
2185
2506
  border-top: 1px solid #2f2f2f;
@@ -2216,7 +2537,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
2216
2537
  contain: content;
2217
2538
  }
2218
2539
 
2219
- @keyframes _ld46o_slide-from-right {
2540
+ @keyframes _jly87_slide-from-right {
2220
2541
  from {
2221
2542
  transform: translateX(-50px);
2222
2543
  opacity: 0;
@@ -2226,7 +2547,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
2226
2547
  opacity: 1;
2227
2548
  }
2228
2549
  }
2229
- @keyframes _ld46o_slide-from-left {
2550
+ @keyframes _jly87_slide-from-left {
2230
2551
  from {
2231
2552
  transform: translateX(50px);
2232
2553
  opacity: 0;
@@ -2282,10 +2603,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
2282
2603
  }
2283
2604
  }
2284
2605
  .edit-site-sidebar__screen-wrapper.slide-from-left {
2285
- animation-name: _ld46o_slide-from-left;
2606
+ animation-name: _jly87_slide-from-left;
2286
2607
  }
2287
2608
  .edit-site-sidebar__screen-wrapper.slide-from-right {
2288
- animation-name: _ld46o_slide-from-right;
2609
+ animation-name: _jly87_slide-from-right;
2289
2610
  }
2290
2611
 
2291
2612
  .edit-site-sidebar-button {
@@ -2666,9 +2987,11 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
2666
2987
 
2667
2988
  .edit-site-site-icon__icon {
2668
2989
  fill: currentColor;
2990
+ width: 100%;
2991
+ height: 100%;
2669
2992
  }
2670
2993
  .edit-site-layout.is-full-canvas .edit-site-site-icon__icon {
2671
- padding: 6px;
2994
+ padding: 12px;
2672
2995
  }
2673
2996
 
2674
2997
  .edit-site-site-icon__image {
@@ -2676,6 +2999,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
2676
2999
  height: 100%;
2677
3000
  object-fit: cover;
2678
3001
  background: #333;
3002
+ aspect-ratio: 1/1;
2679
3003
  }
2680
3004
  .edit-site-layout.is-full-canvas .edit-site-site-icon__image {
2681
3005
  border-radius: 0;
@@ -2743,18 +3067,27 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
2743
3067
  background: #fff;
2744
3068
  }
2745
3069
 
2746
- .posts-list-page__featured-image {
3070
+ .edit-site-post-edit {
3071
+ padding: 24px;
3072
+ }
3073
+ .edit-site-post-edit.is-empty .edit-site-page-content {
3074
+ display: flex;
3075
+ align-items: center;
3076
+ justify-content: center;
3077
+ }
3078
+
3079
+ .edit-site-post-list__featured-image {
2747
3080
  height: 100%;
2748
3081
  object-fit: cover;
2749
3082
  width: 100%;
2750
3083
  }
2751
3084
 
2752
- .posts-list-page__featured-image-wrapper {
3085
+ .edit-site-post-list__featured-image-wrapper {
2753
3086
  height: 100%;
2754
3087
  width: 100%;
2755
3088
  border-radius: 4px;
2756
3089
  }
2757
- .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 {
3090
+ .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 {
2758
3091
  width: 32px;
2759
3092
  height: 32px;
2760
3093
  display: block;
@@ -2764,7 +3097,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
2764
3097
  background-color: #f0f0f0;
2765
3098
  flex-grow: 0 !important;
2766
3099
  }
2767
- .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 {
3100
+ .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 {
2768
3101
  border-radius: 4px;
2769
3102
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
2770
3103
  content: "";
@@ -2775,7 +3108,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
2775
3108
  width: 100%;
2776
3109
  }
2777
3110
 
2778
- .posts-list-page-preview-field__button {
3111
+ .edit-site-post-list__featured-image-button {
2779
3112
  box-shadow: none;
2780
3113
  border: none;
2781
3114
  padding: 0;
@@ -2787,22 +3120,22 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
2787
3120
  width: 100%;
2788
3121
  border-radius: 4px;
2789
3122
  }
2790
- .posts-list-page-preview-field__button:focus-visible {
3123
+ .edit-site-post-list__featured-image-button:focus-visible {
2791
3124
  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2792
3125
  outline: 2px solid transparent;
2793
3126
  }
2794
3127
 
2795
- .dataviews-view-grid__card.is-selected .posts-list-page-preview-field__button::after {
3128
+ .dataviews-view-grid__card.is-selected .edit-site-post-list__featured-image-button::after {
2796
3129
  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2797
3130
  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
2798
3131
  }
2799
3132
 
2800
- .posts-list-page-title span {
3133
+ .edit-site-post-list__title span {
2801
3134
  text-overflow: ellipsis;
2802
3135
  overflow: hidden;
2803
3136
  }
2804
3137
 
2805
- .posts-list-page-title-badge {
3138
+ .edit-site-post-list__title-badge {
2806
3139
  background: #f0f0f0;
2807
3140
  color: #757575;
2808
3141
  padding: 0 4px;
@@ -2810,13 +3143,16 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
2810
3143
  font-size: 12px;
2811
3144
  font-weight: 400;
2812
3145
  flex-shrink: 0;
3146
+ line-height: 20px;
2813
3147
  }
2814
3148
 
2815
- .posts-list-page-post-author-field__icon-container {
3149
+ .edit-site-post-list__status-icon {
2816
3150
  height: 24px;
3151
+ width: 24px;
2817
3152
  }
2818
- .posts-list-page-post-author-field__icon-container svg {
3153
+ .edit-site-post-list__status-icon svg {
2819
3154
  fill: currentColor;
3155
+ margin-right: -4px;
2820
3156
  }
2821
3157
 
2822
3158
  .edit-site-resizable-frame__inner {
@@ -3048,6 +3384,13 @@ button.font-library-modal__upload-area {
3048
3384
  justify-content: center;
3049
3385
  }
3050
3386
 
3387
+ .font-library-modal__select-all {
3388
+ padding: 16px 17px 16px 16px;
3389
+ }
3390
+ .font-library-modal__select-all .components-checkbox-control__label {
3391
+ padding-right: 16px;
3392
+ }
3393
+
3051
3394
  .edit-site-pagination .components-button.is-tertiary {
3052
3395
  width: 32px;
3053
3396
  height: 32px;