@wordpress/block-editor 12.19.5 → 12.21.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 (443) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/build/components/block-canvas/index.js +2 -0
  3. package/build/components/block-canvas/index.js.map +1 -1
  4. package/build/components/block-heading-level-dropdown/index.js +14 -17
  5. package/build/components/block-heading-level-dropdown/index.js.map +1 -1
  6. package/build/components/block-inspector/index.js +0 -3
  7. package/build/components/block-inspector/index.js.map +1 -1
  8. package/build/components/block-list/block-invalid-warning.native.js.map +1 -1
  9. package/build/components/block-list/block-list-item.native.js +1 -1
  10. package/build/components/block-list/block-list-item.native.js.map +1 -1
  11. package/build/components/block-list/block-outline.native.js +23 -7
  12. package/build/components/block-list/block-outline.native.js.map +1 -1
  13. package/build/components/block-list/block-selection-button.native.js.map +1 -1
  14. package/build/components/block-list/block.native.js +0 -3
  15. package/build/components/block-list/block.native.js.map +1 -1
  16. package/build/components/block-list/index.js +9 -9
  17. package/build/components/block-list/index.js.map +1 -1
  18. package/build/components/block-mover/index.native.js.map +1 -1
  19. package/build/components/block-popover/cover.js +68 -0
  20. package/build/components/block-popover/cover.js.map +1 -0
  21. package/build/components/block-popover/drop-zone.js +2 -3
  22. package/build/components/block-popover/drop-zone.js.map +1 -1
  23. package/build/components/block-popover/index.js +1 -19
  24. package/build/components/block-popover/index.js.map +1 -1
  25. package/build/components/block-preview/index.js +2 -1
  26. package/build/components/block-preview/index.js.map +1 -1
  27. package/build/components/block-removal-warning-modal/index.js +2 -4
  28. package/build/components/block-removal-warning-modal/index.js.map +1 -1
  29. package/build/components/block-rename/modal.js.map +1 -1
  30. package/build/components/block-settings-menu/block-parent-selector-menu-item.js +54 -0
  31. package/build/components/block-settings-menu/block-parent-selector-menu-item.js.map +1 -0
  32. package/build/components/block-settings-menu/block-settings-dropdown.js +9 -37
  33. package/build/components/block-settings-menu/block-settings-dropdown.js.map +1 -1
  34. package/build/components/block-switcher/block-transformations-menu.native.js.map +1 -1
  35. package/build/components/block-toolbar/block-toolbar-menu.native.js.map +1 -1
  36. package/build/components/block-toolbar/index.js +7 -5
  37. package/build/components/block-toolbar/index.js.map +1 -1
  38. package/build/components/block-toolbar/shuffle.js +89 -0
  39. package/build/components/block-toolbar/shuffle.js.map +1 -0
  40. package/build/components/block-toolbar/use-has-block-toolbar.js +43 -0
  41. package/build/components/block-toolbar/use-has-block-toolbar.js.map +1 -0
  42. package/build/components/block-tools/block-selection-button.js +5 -1
  43. package/build/components/block-tools/block-selection-button.js.map +1 -1
  44. package/build/components/block-tools/empty-block-inserter.js +2 -5
  45. package/build/components/block-tools/empty-block-inserter.js.map +1 -1
  46. package/build/components/block-tools/index.js +9 -26
  47. package/build/components/block-tools/index.js.map +1 -1
  48. package/build/components/block-tools/use-show-block-tools.js +60 -0
  49. package/build/components/block-tools/use-show-block-tools.js.map +1 -0
  50. package/build/components/caption/index.native.js.map +1 -1
  51. package/build/components/child-layout-control/index.js +37 -5
  52. package/build/components/child-layout-control/index.js.map +1 -1
  53. package/build/components/color-palette/control.js.map +1 -1
  54. package/build/components/colors-gradients/control.js +1 -1
  55. package/build/components/colors-gradients/control.js.map +1 -1
  56. package/build/components/date-format-picker/index.js +0 -1
  57. package/build/components/date-format-picker/index.js.map +1 -1
  58. package/build/components/font-appearance-control/index.js +1 -2
  59. package/build/components/font-appearance-control/index.js.map +1 -1
  60. package/build/components/global-styles/border-panel.js.map +1 -1
  61. package/build/components/global-styles/color-panel.js +1 -1
  62. package/build/components/global-styles/color-panel.js.map +1 -1
  63. package/build/components/global-styles/dimensions-panel.js +30 -19
  64. package/build/components/global-styles/dimensions-panel.js.map +1 -1
  65. package/build/components/global-styles/image-settings-panel.js.map +1 -1
  66. package/build/components/global-styles/typography-utils.js +7 -5
  67. package/build/components/global-styles/typography-utils.js.map +1 -1
  68. package/build/components/global-styles/use-global-styles-output.js +15 -15
  69. package/build/components/global-styles/use-global-styles-output.js.map +1 -1
  70. package/build/components/global-styles/utils.js +1 -1
  71. package/build/components/global-styles/utils.js.map +1 -1
  72. package/build/components/grid-visualizer/grid-item-resizer.js +77 -0
  73. package/build/components/grid-visualizer/grid-item-resizer.js.map +1 -0
  74. package/build/components/grid-visualizer/grid-visualizer.js +81 -0
  75. package/build/components/grid-visualizer/grid-visualizer.js.map +1 -0
  76. package/build/components/grid-visualizer/index.js +20 -0
  77. package/build/components/grid-visualizer/index.js.map +1 -0
  78. package/build/components/grid-visualizer/utils.js +10 -0
  79. package/build/components/grid-visualizer/utils.js.map +1 -0
  80. package/build/components/iframe/index.js +61 -16
  81. package/build/components/iframe/index.js.map +1 -1
  82. package/build/components/index.native.js +7 -0
  83. package/build/components/index.native.js.map +1 -1
  84. package/build/components/inner-blocks/use-nested-settings-update.js +8 -2
  85. package/build/components/inner-blocks/use-nested-settings-update.js.map +1 -1
  86. package/build/components/inserter/media-tab/media-preview.js.map +1 -1
  87. package/build/components/inserter/menu.js +9 -3
  88. package/build/components/inserter/menu.js.map +1 -1
  89. package/build/components/inserter/menu.native.js.map +1 -1
  90. package/build/components/inserter/mobile-tab-navigation.js +1 -1
  91. package/build/components/inserter/mobile-tab-navigation.js.map +1 -1
  92. package/build/components/inserter/search-results.js +3 -2
  93. package/build/components/inserter/search-results.js.map +1 -1
  94. package/build/components/inserter/tabs.js +2 -1
  95. package/build/components/inserter/tabs.js.map +1 -1
  96. package/build/components/inspector-controls/block-support-tools-panel.js.map +1 -1
  97. package/build/components/inspector-controls-tabs/index.js +1 -1
  98. package/build/components/inspector-controls-tabs/index.js.map +1 -1
  99. package/build/components/inspector-controls-tabs/styles-tab.js +0 -4
  100. package/build/components/inspector-controls-tabs/styles-tab.js.map +1 -1
  101. package/build/components/link-control/search-input.js.map +1 -1
  102. package/build/components/list-view/branch.js.map +1 -1
  103. package/build/components/list-view/drop-indicator.js.map +1 -1
  104. package/build/components/list-view/index.js.map +1 -1
  105. package/build/components/observe-typing/index.js +5 -10
  106. package/build/components/observe-typing/index.js.map +1 -1
  107. package/build/components/panel-color-settings/index.js.map +1 -1
  108. package/build/components/provider/index.js.map +1 -1
  109. package/build/components/resizable-box-popover/index.js +3 -5
  110. package/build/components/resizable-box-popover/index.js.map +1 -1
  111. package/build/components/responsive-block-control/index.js +1 -1
  112. package/build/components/responsive-block-control/index.js.map +1 -1
  113. package/build/components/rich-text/format-toolbar-container.js +1 -31
  114. package/build/components/rich-text/format-toolbar-container.js.map +1 -1
  115. package/build/components/rich-text/index.js +1 -2
  116. package/build/components/rich-text/index.js.map +1 -1
  117. package/build/components/skip-to-selected-block/index.js +7 -14
  118. package/build/components/skip-to-selected-block/index.js.map +1 -1
  119. package/build/components/spacing-sizes-control/input-controls/spacing-input-control.js +0 -1
  120. package/build/components/spacing-sizes-control/input-controls/spacing-input-control.js.map +1 -1
  121. package/build/components/url-input/index.js +5 -8
  122. package/build/components/url-input/index.js.map +1 -1
  123. package/build/hooks/background.js.map +1 -1
  124. package/build/hooks/block-hooks.js.map +1 -1
  125. package/build/hooks/dimensions.js +3 -4
  126. package/build/hooks/dimensions.js.map +1 -1
  127. package/build/hooks/font-size.js +6 -7
  128. package/build/hooks/font-size.js.map +1 -1
  129. package/build/hooks/index.js +1 -1
  130. package/build/hooks/index.js.map +1 -1
  131. package/build/hooks/layout-child.js +89 -1
  132. package/build/hooks/layout-child.js.map +1 -1
  133. package/build/hooks/layout.js +11 -4
  134. package/build/hooks/layout.js.map +1 -1
  135. package/build/hooks/line-height.js.map +1 -1
  136. package/build/hooks/position.js +0 -1
  137. package/build/hooks/position.js.map +1 -1
  138. package/build/hooks/spacing-visualizer.js +115 -0
  139. package/build/hooks/spacing-visualizer.js.map +1 -0
  140. package/build/hooks/use-typography-props.js +1 -2
  141. package/build/hooks/use-typography-props.js.map +1 -1
  142. package/build/layouts/grid.js +111 -14
  143. package/build/layouts/grid.js.map +1 -1
  144. package/build/private-apis.js +2 -2
  145. package/build/private-apis.js.map +1 -1
  146. package/build/store/actions.js +4 -36
  147. package/build/store/actions.js.map +1 -1
  148. package/build/store/private-actions.js +29 -45
  149. package/build/store/private-actions.js.map +1 -1
  150. package/build/store/reducer.js +2 -4
  151. package/build/store/reducer.js.map +1 -1
  152. package/build/store/selectors.js +27 -15
  153. package/build/store/selectors.js.map +1 -1
  154. package/build/utils/calculate-scale.js +17 -0
  155. package/build/utils/calculate-scale.js.map +1 -0
  156. package/build-module/components/block-canvas/index.js +2 -0
  157. package/build-module/components/block-canvas/index.js.map +1 -1
  158. package/build-module/components/block-heading-level-dropdown/index.js +14 -17
  159. package/build-module/components/block-heading-level-dropdown/index.js.map +1 -1
  160. package/build-module/components/block-inspector/index.js +1 -4
  161. package/build-module/components/block-inspector/index.js.map +1 -1
  162. package/build-module/components/block-list/block-invalid-warning.native.js.map +1 -1
  163. package/build-module/components/block-list/block-list-item.native.js +1 -1
  164. package/build-module/components/block-list/block-list-item.native.js.map +1 -1
  165. package/build-module/components/block-list/block-outline.native.js +23 -7
  166. package/build-module/components/block-list/block-outline.native.js.map +1 -1
  167. package/build-module/components/block-list/block-selection-button.native.js.map +1 -1
  168. package/build-module/components/block-list/block.native.js +0 -3
  169. package/build-module/components/block-list/block.native.js.map +1 -1
  170. package/build-module/components/block-list/index.js +9 -9
  171. package/build-module/components/block-list/index.js.map +1 -1
  172. package/build-module/components/block-mover/index.native.js.map +1 -1
  173. package/build-module/components/block-popover/cover.js +60 -0
  174. package/build-module/components/block-popover/cover.js.map +1 -0
  175. package/build-module/components/block-popover/drop-zone.js +2 -3
  176. package/build-module/components/block-popover/drop-zone.js.map +1 -1
  177. package/build-module/components/block-popover/index.js +1 -19
  178. package/build-module/components/block-popover/index.js.map +1 -1
  179. package/build-module/components/block-preview/index.js +2 -1
  180. package/build-module/components/block-preview/index.js.map +1 -1
  181. package/build-module/components/block-removal-warning-modal/index.js +3 -5
  182. package/build-module/components/block-removal-warning-modal/index.js.map +1 -1
  183. package/build-module/components/block-rename/modal.js.map +1 -1
  184. package/build-module/components/block-settings-menu/block-parent-selector-menu-item.js +46 -0
  185. package/build-module/components/block-settings-menu/block-parent-selector-menu-item.js.map +1 -0
  186. package/build-module/components/block-settings-menu/block-settings-dropdown.js +12 -40
  187. package/build-module/components/block-settings-menu/block-settings-dropdown.js.map +1 -1
  188. package/build-module/components/block-switcher/block-transformations-menu.native.js.map +1 -1
  189. package/build-module/components/block-toolbar/block-toolbar-menu.native.js.map +1 -1
  190. package/build-module/components/block-toolbar/index.js +7 -6
  191. package/build-module/components/block-toolbar/index.js.map +1 -1
  192. package/build-module/components/block-toolbar/shuffle.js +82 -0
  193. package/build-module/components/block-toolbar/shuffle.js.map +1 -0
  194. package/build-module/components/block-toolbar/use-has-block-toolbar.js +36 -0
  195. package/build-module/components/block-toolbar/use-has-block-toolbar.js.map +1 -0
  196. package/build-module/components/block-tools/block-selection-button.js +5 -1
  197. package/build-module/components/block-tools/block-selection-button.js.map +1 -1
  198. package/build-module/components/block-tools/empty-block-inserter.js +2 -5
  199. package/build-module/components/block-tools/empty-block-inserter.js.map +1 -1
  200. package/build-module/components/block-tools/index.js +9 -26
  201. package/build-module/components/block-tools/index.js.map +1 -1
  202. package/build-module/components/block-tools/use-show-block-tools.js +54 -0
  203. package/build-module/components/block-tools/use-show-block-tools.js.map +1 -0
  204. package/build-module/components/caption/index.native.js.map +1 -1
  205. package/build-module/components/child-layout-control/index.js +38 -6
  206. package/build-module/components/child-layout-control/index.js.map +1 -1
  207. package/build-module/components/color-palette/control.js.map +1 -1
  208. package/build-module/components/colors-gradients/control.js +1 -1
  209. package/build-module/components/colors-gradients/control.js.map +1 -1
  210. package/build-module/components/date-format-picker/index.js +0 -1
  211. package/build-module/components/date-format-picker/index.js.map +1 -1
  212. package/build-module/components/font-appearance-control/index.js +1 -2
  213. package/build-module/components/font-appearance-control/index.js.map +1 -1
  214. package/build-module/components/global-styles/border-panel.js.map +1 -1
  215. package/build-module/components/global-styles/color-panel.js +1 -1
  216. package/build-module/components/global-styles/color-panel.js.map +1 -1
  217. package/build-module/components/global-styles/dimensions-panel.js +30 -19
  218. package/build-module/components/global-styles/dimensions-panel.js.map +1 -1
  219. package/build-module/components/global-styles/image-settings-panel.js.map +1 -1
  220. package/build-module/components/global-styles/typography-utils.js +7 -5
  221. package/build-module/components/global-styles/typography-utils.js.map +1 -1
  222. package/build-module/components/global-styles/use-global-styles-output.js +16 -16
  223. package/build-module/components/global-styles/use-global-styles-output.js.map +1 -1
  224. package/build-module/components/global-styles/utils.js +2 -2
  225. package/build-module/components/global-styles/utils.js.map +1 -1
  226. package/build-module/components/grid-visualizer/grid-item-resizer.js +69 -0
  227. package/build-module/components/grid-visualizer/grid-item-resizer.js.map +1 -0
  228. package/build-module/components/grid-visualizer/grid-visualizer.js +73 -0
  229. package/build-module/components/grid-visualizer/grid-visualizer.js.map +1 -0
  230. package/build-module/components/grid-visualizer/index.js +3 -0
  231. package/build-module/components/grid-visualizer/index.js.map +1 -0
  232. package/build-module/components/grid-visualizer/utils.js +4 -0
  233. package/build-module/components/grid-visualizer/utils.js.map +1 -0
  234. package/build-module/components/iframe/index.js +61 -16
  235. package/build-module/components/iframe/index.js.map +1 -1
  236. package/build-module/components/index.native.js +1 -1
  237. package/build-module/components/index.native.js.map +1 -1
  238. package/build-module/components/inner-blocks/use-nested-settings-update.js +8 -2
  239. package/build-module/components/inner-blocks/use-nested-settings-update.js.map +1 -1
  240. package/build-module/components/inserter/media-tab/media-preview.js.map +1 -1
  241. package/build-module/components/inserter/menu.js +9 -3
  242. package/build-module/components/inserter/menu.js.map +1 -1
  243. package/build-module/components/inserter/menu.native.js.map +1 -1
  244. package/build-module/components/inserter/mobile-tab-navigation.js +1 -1
  245. package/build-module/components/inserter/mobile-tab-navigation.js.map +1 -1
  246. package/build-module/components/inserter/search-results.js +3 -2
  247. package/build-module/components/inserter/search-results.js.map +1 -1
  248. package/build-module/components/inserter/tabs.js +2 -1
  249. package/build-module/components/inserter/tabs.js.map +1 -1
  250. package/build-module/components/inspector-controls/block-support-tools-panel.js.map +1 -1
  251. package/build-module/components/inspector-controls-tabs/index.js +1 -1
  252. package/build-module/components/inspector-controls-tabs/index.js.map +1 -1
  253. package/build-module/components/inspector-controls-tabs/styles-tab.js +0 -4
  254. package/build-module/components/inspector-controls-tabs/styles-tab.js.map +1 -1
  255. package/build-module/components/link-control/search-input.js.map +1 -1
  256. package/build-module/components/list-view/branch.js.map +1 -1
  257. package/build-module/components/list-view/drop-indicator.js.map +1 -1
  258. package/build-module/components/list-view/index.js.map +1 -1
  259. package/build-module/components/observe-typing/index.js +5 -10
  260. package/build-module/components/observe-typing/index.js.map +1 -1
  261. package/build-module/components/panel-color-settings/index.js.map +1 -1
  262. package/build-module/components/provider/index.js.map +1 -1
  263. package/build-module/components/resizable-box-popover/index.js +3 -5
  264. package/build-module/components/resizable-box-popover/index.js.map +1 -1
  265. package/build-module/components/responsive-block-control/index.js +1 -1
  266. package/build-module/components/responsive-block-control/index.js.map +1 -1
  267. package/build-module/components/rich-text/format-toolbar-container.js +1 -31
  268. package/build-module/components/rich-text/format-toolbar-container.js.map +1 -1
  269. package/build-module/components/rich-text/index.js +1 -2
  270. package/build-module/components/rich-text/index.js.map +1 -1
  271. package/build-module/components/skip-to-selected-block/index.js +8 -14
  272. package/build-module/components/skip-to-selected-block/index.js.map +1 -1
  273. package/build-module/components/spacing-sizes-control/input-controls/spacing-input-control.js +0 -1
  274. package/build-module/components/spacing-sizes-control/input-controls/spacing-input-control.js.map +1 -1
  275. package/build-module/components/url-input/index.js +5 -8
  276. package/build-module/components/url-input/index.js.map +1 -1
  277. package/build-module/hooks/background.js.map +1 -1
  278. package/build-module/hooks/block-hooks.js.map +1 -1
  279. package/build-module/hooks/dimensions.js +1 -2
  280. package/build-module/hooks/dimensions.js.map +1 -1
  281. package/build-module/hooks/font-size.js +7 -8
  282. package/build-module/hooks/font-size.js.map +1 -1
  283. package/build-module/hooks/index.js +1 -1
  284. package/build-module/hooks/index.js.map +1 -1
  285. package/build-module/hooks/layout-child.js +89 -1
  286. package/build-module/hooks/layout-child.js.map +1 -1
  287. package/build-module/hooks/layout.js +11 -4
  288. package/build-module/hooks/layout.js.map +1 -1
  289. package/build-module/hooks/line-height.js.map +1 -1
  290. package/build-module/hooks/position.js +0 -1
  291. package/build-module/hooks/position.js.map +1 -1
  292. package/build-module/hooks/spacing-visualizer.js +106 -0
  293. package/build-module/hooks/spacing-visualizer.js.map +1 -0
  294. package/build-module/hooks/use-typography-props.js +2 -3
  295. package/build-module/hooks/use-typography-props.js.map +1 -1
  296. package/build-module/layouts/grid.js +113 -16
  297. package/build-module/layouts/grid.js.map +1 -1
  298. package/build-module/private-apis.js +2 -2
  299. package/build-module/private-apis.js.map +1 -1
  300. package/build-module/store/actions.js +4 -36
  301. package/build-module/store/actions.js.map +1 -1
  302. package/build-module/store/private-actions.js +29 -45
  303. package/build-module/store/private-actions.js.map +1 -1
  304. package/build-module/store/reducer.js +2 -4
  305. package/build-module/store/reducer.js.map +1 -1
  306. package/build-module/store/selectors.js +23 -13
  307. package/build-module/store/selectors.js.map +1 -1
  308. package/build-module/utils/calculate-scale.js +11 -0
  309. package/build-module/utils/calculate-scale.js.map +1 -0
  310. package/build-style/content-rtl.css +7 -2
  311. package/build-style/content.css +7 -2
  312. package/build-style/style-rtl.css +55 -25
  313. package/build-style/style.css +55 -25
  314. package/package.json +31 -32
  315. package/src/components/block-canvas/index.js +2 -0
  316. package/src/components/block-draggable/test/index.native.js +2 -2
  317. package/src/components/block-heading-level-dropdown/index.js +17 -25
  318. package/src/components/block-inspector/index.js +0 -11
  319. package/src/components/block-list/block-invalid-warning.native.js +1 -1
  320. package/src/components/block-list/block-list-item.native.js +1 -1
  321. package/src/components/block-list/block-outline.native.js +36 -21
  322. package/src/components/block-list/block-selection-button.native.js +1 -3
  323. package/src/components/block-list/block.native.js +0 -3
  324. package/src/components/block-list/content.scss +5 -1
  325. package/src/components/block-list/index.js +55 -55
  326. package/src/components/block-list/test/block-outline.native.js +255 -0
  327. package/src/components/block-mover/index.native.js +1 -1
  328. package/src/components/block-popover/cover.js +63 -0
  329. package/src/components/block-popover/drop-zone.js +3 -4
  330. package/src/components/block-popover/index.js +1 -28
  331. package/src/components/block-preview/index.js +3 -1
  332. package/src/components/block-removal-warning-modal/index.js +5 -19
  333. package/src/components/block-rename/modal.js +1 -1
  334. package/src/components/block-settings-menu/block-parent-selector-menu-item.js +50 -0
  335. package/src/components/block-settings-menu/block-settings-dropdown.js +9 -50
  336. package/src/components/block-styles/style.scss +0 -4
  337. package/src/components/block-switcher/block-transformations-menu.native.js +1 -1
  338. package/src/components/block-toolbar/block-toolbar-menu.native.js +2 -2
  339. package/src/components/block-toolbar/index.js +5 -11
  340. package/src/components/block-toolbar/shuffle.js +93 -0
  341. package/src/components/block-toolbar/use-has-block-toolbar.js +49 -0
  342. package/src/components/block-tools/block-selection-button.js +4 -0
  343. package/src/components/block-tools/empty-block-inserter.js +3 -6
  344. package/src/components/block-tools/index.js +13 -36
  345. package/src/components/block-tools/use-show-block-tools.js +73 -0
  346. package/src/components/caption/index.native.js +1 -1
  347. package/src/components/child-layout-control/index.js +85 -44
  348. package/src/components/color-palette/control.js +1 -1
  349. package/src/components/colors-gradients/control.js +1 -1
  350. package/src/components/colors-gradients/test/control.js +2 -2
  351. package/src/components/contrast-checker/test/index.js +10 -10
  352. package/src/components/date-format-picker/index.js +0 -1
  353. package/src/components/default-block-appender/content.scss +5 -2
  354. package/src/components/font-appearance-control/index.js +0 -1
  355. package/src/components/global-styles/border-panel.js +2 -2
  356. package/src/components/global-styles/color-panel.js +1 -1
  357. package/src/components/global-styles/dimensions-panel.js +36 -24
  358. package/src/components/global-styles/image-settings-panel.js +1 -1
  359. package/src/components/global-styles/test/typography-utils.js +231 -81
  360. package/src/components/global-styles/test/use-global-styles-output.js +3 -2
  361. package/src/components/global-styles/typography-utils.js +10 -7
  362. package/src/components/global-styles/use-global-styles-output.js +14 -16
  363. package/src/components/global-styles/utils.js +2 -8
  364. package/src/components/grid-visualizer/grid-item-resizer.js +100 -0
  365. package/src/components/grid-visualizer/grid-visualizer.js +81 -0
  366. package/src/components/grid-visualizer/index.js +2 -0
  367. package/src/components/grid-visualizer/style.scss +33 -0
  368. package/src/components/grid-visualizer/utils.js +5 -0
  369. package/src/components/iframe/index.js +78 -31
  370. package/src/components/index.native.js +1 -0
  371. package/src/components/inner-blocks/use-nested-settings-update.js +12 -2
  372. package/src/components/inserter/media-tab/media-preview.js +1 -1
  373. package/src/components/inserter/menu.js +10 -4
  374. package/src/components/inserter/menu.native.js +3 -3
  375. package/src/components/inserter/mobile-tab-navigation.js +1 -1
  376. package/src/components/inserter/search-results.js +2 -1
  377. package/src/components/inserter/style.scss +10 -0
  378. package/src/components/inserter/tabs.js +2 -1
  379. package/src/components/inspector-controls/block-support-tools-panel.js +2 -2
  380. package/src/components/inspector-controls-tabs/index.js +1 -1
  381. package/src/components/inspector-controls-tabs/styles-tab.js +0 -7
  382. package/src/components/line-height-control/test/index.js +1 -1
  383. package/src/components/link-control/search-input.js +1 -1
  384. package/src/components/list-view/branch.js +1 -1
  385. package/src/components/list-view/drop-indicator.js +1 -1
  386. package/src/components/list-view/index.js +1 -1
  387. package/src/components/observe-typing/index.js +7 -10
  388. package/src/components/panel-color-settings/index.js +1 -1
  389. package/src/components/panel-color-settings/test/index.js +3 -3
  390. package/src/components/provider/index.js +1 -4
  391. package/src/components/resizable-box-popover/index.js +4 -6
  392. package/src/components/responsive-block-control/README.md +4 -4
  393. package/src/components/responsive-block-control/index.js +1 -1
  394. package/src/components/responsive-block-control/test/index.js +5 -5
  395. package/src/components/rich-text/format-toolbar-container.js +1 -48
  396. package/src/components/rich-text/index.js +1 -2
  397. package/src/components/skip-to-selected-block/index.js +10 -13
  398. package/src/components/spacing-sizes-control/input-controls/spacing-input-control.js +4 -5
  399. package/src/components/url-input/index.js +6 -15
  400. package/src/hooks/anchor.scss +1 -1
  401. package/src/hooks/background.js +1 -1
  402. package/src/hooks/block-hooks.js +1 -1
  403. package/src/hooks/dimensions.js +1 -2
  404. package/src/hooks/font-size.js +7 -12
  405. package/src/hooks/index.js +1 -0
  406. package/src/hooks/layout-child.js +91 -1
  407. package/src/hooks/layout.js +12 -1
  408. package/src/hooks/line-height.js +1 -1
  409. package/src/hooks/position.js +0 -1
  410. package/src/hooks/spacing-visualizer.js +126 -0
  411. package/src/hooks/{padding.scss → spacing.scss} +1 -1
  412. package/src/hooks/use-typography-props.js +2 -8
  413. package/src/layouts/grid.js +137 -53
  414. package/src/layouts/test/grid.js +16 -2
  415. package/src/private-apis.js +2 -2
  416. package/src/store/actions.js +4 -42
  417. package/src/store/private-actions.js +34 -69
  418. package/src/store/reducer.js +2 -8
  419. package/src/store/selectors.js +41 -46
  420. package/src/store/test/actions.js +0 -105
  421. package/src/style.scss +2 -2
  422. package/src/utils/calculate-scale.js +20 -0
  423. package/build/components/default-style-picker/index.js +0 -70
  424. package/build/components/default-style-picker/index.js.map +0 -1
  425. package/build/hooks/margin.js +0 -86
  426. package/build/hooks/margin.js.map +0 -1
  427. package/build/hooks/padding.js +0 -78
  428. package/build/hooks/padding.js.map +0 -1
  429. package/build/utils/use-can-block-toolbar-be-focused.js +0 -46
  430. package/build/utils/use-can-block-toolbar-be-focused.js.map +0 -1
  431. package/build-module/components/default-style-picker/index.js +0 -63
  432. package/build-module/components/default-style-picker/index.js.map +0 -1
  433. package/build-module/hooks/margin.js +0 -78
  434. package/build-module/hooks/margin.js.map +0 -1
  435. package/build-module/hooks/padding.js +0 -70
  436. package/build-module/hooks/padding.js.map +0 -1
  437. package/build-module/utils/use-can-block-toolbar-be-focused.js +0 -40
  438. package/build-module/utils/use-can-block-toolbar-be-focused.js.map +0 -1
  439. package/src/components/block-settings-menu/style.scss +0 -3
  440. package/src/components/default-style-picker/index.js +0 -70
  441. package/src/hooks/margin.js +0 -91
  442. package/src/hooks/padding.js +0 -82
  443. package/src/utils/use-can-block-toolbar-be-focused.js +0 -48
@@ -1 +0,0 @@
1
- {"version":3,"names":["_element","require","_isShallowEqual","_interopRequireDefault","_blockPopover","_useBlockRefs","getComputedCSS","element","property","ownerDocument","defaultView","getComputedStyle","getPropertyValue","MarginVisualizer","clientId","attributes","forceShow","blockElement","useBlockElement","style","setStyle","useState","margin","spacing","useEffect","top","right","bottom","left","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","isActive","setIsActive","valueRef","useRef","timeoutRef","clearTimer","current","window","clearTimeout","isShallowEqual","setTimeout","_react","createElement","default","__unstableCoverTarget","__unstableRefreshSize","__unstablePopoverSlot","shift","className"],"sources":["@wordpress/block-editor/src/hooks/margin.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport BlockPopover from '../components/block-popover';\nimport { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';\n\nfunction getComputedCSS( element, property ) {\n\treturn element.ownerDocument.defaultView\n\t\t.getComputedStyle( element )\n\t\t.getPropertyValue( property );\n}\n\nexport function MarginVisualizer( { clientId, attributes, forceShow } ) {\n\tconst blockElement = useBlockElement( clientId );\n\tconst [ style, setStyle ] = useState();\n\n\tconst margin = attributes?.style?.spacing?.margin;\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\t! blockElement ||\n\t\t\tnull === blockElement.ownerDocument.defaultView\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst top = getComputedCSS( blockElement, 'margin-top' );\n\t\tconst right = getComputedCSS( blockElement, 'margin-right' );\n\t\tconst bottom = getComputedCSS( blockElement, 'margin-bottom' );\n\t\tconst left = getComputedCSS( blockElement, 'margin-left' );\n\n\t\tsetStyle( {\n\t\t\tborderTopWidth: top,\n\t\t\tborderRightWidth: right,\n\t\t\tborderBottomWidth: bottom,\n\t\t\tborderLeftWidth: left,\n\t\t\ttop: top ? `-${ top }` : 0,\n\t\t\tright: right ? `-${ right }` : 0,\n\t\t\tbottom: bottom ? `-${ bottom }` : 0,\n\t\t\tleft: left ? `-${ left }` : 0,\n\t\t} );\n\t}, [ blockElement, margin ] );\n\n\tconst [ isActive, setIsActive ] = useState( false );\n\tconst valueRef = useRef( margin );\n\tconst timeoutRef = useRef();\n\n\tconst clearTimer = () => {\n\t\tif ( timeoutRef.current ) {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t}\n\t};\n\n\tuseEffect( () => {\n\t\tif ( ! isShallowEqual( margin, valueRef.current ) && ! forceShow ) {\n\t\t\tsetIsActive( true );\n\t\t\tvalueRef.current = margin;\n\n\t\t\ttimeoutRef.current = setTimeout( () => {\n\t\t\t\tsetIsActive( false );\n\t\t\t}, 400 );\n\t\t}\n\n\t\treturn () => {\n\t\t\tsetIsActive( false );\n\t\t\tclearTimer();\n\t\t};\n\t}, [ margin, forceShow ] );\n\n\tif ( ! isActive && ! forceShow ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BlockPopover\n\t\t\tclientId={ clientId }\n\t\t\t__unstableCoverTarget\n\t\t\t__unstableRefreshSize={ margin }\n\t\t\t__unstablePopoverSlot=\"block-toolbar\"\n\t\t\tshift={ false }\n\t\t>\n\t\t\t<div className=\"block-editor__padding-visualizer\" style={ style } />\n\t\t</BlockPopover>\n\t);\n}\n"],"mappings":"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"}
@@ -1,78 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.PaddingVisualizer = PaddingVisualizer;
8
- var _react = require("react");
9
- var _element = require("@wordpress/element");
10
- var _isShallowEqual = _interopRequireDefault(require("@wordpress/is-shallow-equal"));
11
- var _blockPopover = _interopRequireDefault(require("../components/block-popover"));
12
- var _useBlockRefs = require("../components/block-list/use-block-props/use-block-refs");
13
- /**
14
- * WordPress dependencies
15
- */
16
-
17
- /**
18
- * Internal dependencies
19
- */
20
-
21
- function getComputedCSS(element, property) {
22
- return element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property);
23
- }
24
- function PaddingVisualizer({
25
- clientId,
26
- value,
27
- forceShow
28
- }) {
29
- const blockElement = (0, _useBlockRefs.__unstableUseBlockElement)(clientId);
30
- const [style, setStyle] = (0, _element.useState)();
31
- const padding = value?.spacing?.padding;
32
- (0, _element.useEffect)(() => {
33
- if (!blockElement || null === blockElement.ownerDocument.defaultView) {
34
- return;
35
- }
36
- setStyle({
37
- borderTopWidth: getComputedCSS(blockElement, 'padding-top'),
38
- borderRightWidth: getComputedCSS(blockElement, 'padding-right'),
39
- borderBottomWidth: getComputedCSS(blockElement, 'padding-bottom'),
40
- borderLeftWidth: getComputedCSS(blockElement, 'padding-left')
41
- });
42
- }, [blockElement, padding]);
43
- const [isActive, setIsActive] = (0, _element.useState)(false);
44
- const valueRef = (0, _element.useRef)(padding);
45
- const timeoutRef = (0, _element.useRef)();
46
- const clearTimer = () => {
47
- if (timeoutRef.current) {
48
- window.clearTimeout(timeoutRef.current);
49
- }
50
- };
51
- (0, _element.useEffect)(() => {
52
- if (!(0, _isShallowEqual.default)(padding, valueRef.current) && !forceShow) {
53
- setIsActive(true);
54
- valueRef.current = padding;
55
- timeoutRef.current = setTimeout(() => {
56
- setIsActive(false);
57
- }, 400);
58
- }
59
- return () => {
60
- setIsActive(false);
61
- clearTimer();
62
- };
63
- }, [padding, forceShow]);
64
- if (!isActive && !forceShow) {
65
- return null;
66
- }
67
- return (0, _react.createElement)(_blockPopover.default, {
68
- clientId: clientId,
69
- __unstableCoverTarget: true,
70
- __unstableRefreshSize: padding,
71
- __unstablePopoverSlot: "block-toolbar",
72
- shift: false
73
- }, (0, _react.createElement)("div", {
74
- className: "block-editor__padding-visualizer",
75
- style: style
76
- }));
77
- }
78
- //# sourceMappingURL=padding.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["_element","require","_isShallowEqual","_interopRequireDefault","_blockPopover","_useBlockRefs","getComputedCSS","element","property","ownerDocument","defaultView","getComputedStyle","getPropertyValue","PaddingVisualizer","clientId","value","forceShow","blockElement","useBlockElement","style","setStyle","useState","padding","spacing","useEffect","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","isActive","setIsActive","valueRef","useRef","timeoutRef","clearTimer","current","window","clearTimeout","isShallowEqual","setTimeout","_react","createElement","default","__unstableCoverTarget","__unstableRefreshSize","__unstablePopoverSlot","shift","className"],"sources":["@wordpress/block-editor/src/hooks/padding.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport BlockPopover from '../components/block-popover';\nimport { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';\n\nfunction getComputedCSS( element, property ) {\n\treturn element.ownerDocument.defaultView\n\t\t.getComputedStyle( element )\n\t\t.getPropertyValue( property );\n}\n\nexport function PaddingVisualizer( { clientId, value, forceShow } ) {\n\tconst blockElement = useBlockElement( clientId );\n\tconst [ style, setStyle ] = useState();\n\n\tconst padding = value?.spacing?.padding;\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\t! blockElement ||\n\t\t\tnull === blockElement.ownerDocument.defaultView\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetStyle( {\n\t\t\tborderTopWidth: getComputedCSS( blockElement, 'padding-top' ),\n\t\t\tborderRightWidth: getComputedCSS( blockElement, 'padding-right' ),\n\t\t\tborderBottomWidth: getComputedCSS( blockElement, 'padding-bottom' ),\n\t\t\tborderLeftWidth: getComputedCSS( blockElement, 'padding-left' ),\n\t\t} );\n\t}, [ blockElement, padding ] );\n\n\tconst [ isActive, setIsActive ] = useState( false );\n\tconst valueRef = useRef( padding );\n\tconst timeoutRef = useRef();\n\n\tconst clearTimer = () => {\n\t\tif ( timeoutRef.current ) {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t}\n\t};\n\n\tuseEffect( () => {\n\t\tif ( ! isShallowEqual( padding, valueRef.current ) && ! forceShow ) {\n\t\t\tsetIsActive( true );\n\t\t\tvalueRef.current = padding;\n\n\t\t\ttimeoutRef.current = setTimeout( () => {\n\t\t\t\tsetIsActive( false );\n\t\t\t}, 400 );\n\t\t}\n\n\t\treturn () => {\n\t\t\tsetIsActive( false );\n\t\t\tclearTimer();\n\t\t};\n\t}, [ padding, forceShow ] );\n\n\tif ( ! isActive && ! forceShow ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BlockPopover\n\t\t\tclientId={ clientId }\n\t\t\t__unstableCoverTarget\n\t\t\t__unstableRefreshSize={ padding }\n\t\t\t__unstablePopoverSlot=\"block-toolbar\"\n\t\t\tshift={ false }\n\t\t>\n\t\t\t<div className=\"block-editor__padding-visualizer\" style={ style } />\n\t\t</BlockPopover>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,eAAA,GAAAC,sBAAA,CAAAF,OAAA;AAKA,IAAAG,aAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,SAASK,cAAcA,CAAEC,OAAO,EAAEC,QAAQ,EAAG;EAC5C,OAAOD,OAAO,CAACE,aAAa,CAACC,WAAW,CACtCC,gBAAgB,CAAEJ,OAAQ,CAAC,CAC3BK,gBAAgB,CAAEJ,QAAS,CAAC;AAC/B;AAEO,SAASK,iBAAiBA,CAAE;EAAEC,QAAQ;EAAEC,KAAK;EAAEC;AAAU,CAAC,EAAG;EACnE,MAAMC,YAAY,GAAG,IAAAC,uCAAe,EAAEJ,QAAS,CAAC;EAChD,MAAM,CAAEK,KAAK,EAAEC,QAAQ,CAAE,GAAG,IAAAC,iBAAQ,EAAC,CAAC;EAEtC,MAAMC,OAAO,GAAGP,KAAK,EAAEQ,OAAO,EAAED,OAAO;EAEvC,IAAAE,kBAAS,EAAE,MAAM;IAChB,IACC,CAAEP,YAAY,IACd,IAAI,KAAKA,YAAY,CAACR,aAAa,CAACC,WAAW,EAC9C;MACD;IACD;IAEAU,QAAQ,CAAE;MACTK,cAAc,EAAEnB,cAAc,CAAEW,YAAY,EAAE,aAAc,CAAC;MAC7DS,gBAAgB,EAAEpB,cAAc,CAAEW,YAAY,EAAE,eAAgB,CAAC;MACjEU,iBAAiB,EAAErB,cAAc,CAAEW,YAAY,EAAE,gBAAiB,CAAC;MACnEW,eAAe,EAAEtB,cAAc,CAAEW,YAAY,EAAE,cAAe;IAC/D,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEA,YAAY,EAAEK,OAAO,CAAG,CAAC;EAE9B,MAAM,CAAEO,QAAQ,EAAEC,WAAW,CAAE,GAAG,IAAAT,iBAAQ,EAAE,KAAM,CAAC;EACnD,MAAMU,QAAQ,GAAG,IAAAC,eAAM,EAAEV,OAAQ,CAAC;EAClC,MAAMW,UAAU,GAAG,IAAAD,eAAM,EAAC,CAAC;EAE3B,MAAME,UAAU,GAAGA,CAAA,KAAM;IACxB,IAAKD,UAAU,CAACE,OAAO,EAAG;MACzBC,MAAM,CAACC,YAAY,CAAEJ,UAAU,CAACE,OAAQ,CAAC;IAC1C;EACD,CAAC;EAED,IAAAX,kBAAS,EAAE,MAAM;IAChB,IAAK,CAAE,IAAAc,uBAAc,EAAEhB,OAAO,EAAES,QAAQ,CAACI,OAAQ,CAAC,IAAI,CAAEnB,SAAS,EAAG;MACnEc,WAAW,CAAE,IAAK,CAAC;MACnBC,QAAQ,CAACI,OAAO,GAAGb,OAAO;MAE1BW,UAAU,CAACE,OAAO,GAAGI,UAAU,CAAE,MAAM;QACtCT,WAAW,CAAE,KAAM,CAAC;MACrB,CAAC,EAAE,GAAI,CAAC;IACT;IAEA,OAAO,MAAM;MACZA,WAAW,CAAE,KAAM,CAAC;MACpBI,UAAU,CAAC,CAAC;IACb,CAAC;EACF,CAAC,EAAE,CAAEZ,OAAO,EAAEN,SAAS,CAAG,CAAC;EAE3B,IAAK,CAAEa,QAAQ,IAAI,CAAEb,SAAS,EAAG;IAChC,OAAO,IAAI;EACZ;EAEA,OACC,IAAAwB,MAAA,CAAAC,aAAA,EAACrC,aAAA,CAAAsC,OAAY;IACZ5B,QAAQ,EAAGA,QAAU;IACrB6B,qBAAqB;IACrBC,qBAAqB,EAAGtB,OAAS;IACjCuB,qBAAqB,EAAC,eAAe;IACrCC,KAAK,EAAG;EAAO,GAEf,IAAAN,MAAA,CAAAC,aAAA;IAAKM,SAAS,EAAC,kCAAkC;IAAC5B,KAAK,EAAGA;EAAO,CAAE,CACtD,CAAC;AAEjB"}
@@ -1,46 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.useCanBlockToolbarBeFocused = useCanBlockToolbarBeFocused;
7
- var _data = require("@wordpress/data");
8
- var _blocks = require("@wordpress/blocks");
9
- var _store = require("../store");
10
- var _lockUnlock = require("../lock-unlock");
11
- /**
12
- * WordPress dependencies
13
- */
14
-
15
- /**
16
- * Internal dependencies
17
- */
18
-
19
- /**
20
- * Returns true if the block toolbar should be able to receive focus.
21
- *
22
- * @return {boolean} Whether the block toolbar should be able to receive focus
23
- */
24
- function useCanBlockToolbarBeFocused() {
25
- return (0, _data.useSelect)(select => {
26
- const {
27
- __unstableGetEditorMode,
28
- getBlock,
29
- getSettings,
30
- getSelectedBlockClientId,
31
- getFirstMultiSelectedBlockClientId
32
- } = (0, _lockUnlock.unlock)(select(_store.store));
33
- const selectedBlockId = getFirstMultiSelectedBlockClientId() || getSelectedBlockClientId();
34
- const isEmptyDefaultBlock = (0, _blocks.isUnmodifiedDefaultBlock)(getBlock(selectedBlockId) || {});
35
-
36
- // Fixed Toolbar can be focused when:
37
- // - a block is selected
38
- // - fixed toolbar is on
39
- // Block Toolbar Popover can be focused when:
40
- // - a block is selected
41
- // - we are in edit mode
42
- // - it is not an empty default block
43
- return !!selectedBlockId && (getSettings().hasFixedToolbar || __unstableGetEditorMode() === 'edit' && !isEmptyDefaultBlock);
44
- }, []);
45
- }
46
- //# sourceMappingURL=use-can-block-toolbar-be-focused.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["_data","require","_blocks","_store","_lockUnlock","useCanBlockToolbarBeFocused","useSelect","select","__unstableGetEditorMode","getBlock","getSettings","getSelectedBlockClientId","getFirstMultiSelectedBlockClientId","unlock","blockEditorStore","selectedBlockId","isEmptyDefaultBlock","isUnmodifiedDefaultBlock","hasFixedToolbar"],"sources":["@wordpress/block-editor/src/utils/use-can-block-toolbar-be-focused.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { isUnmodifiedDefaultBlock } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../store';\nimport { unlock } from '../lock-unlock';\n\n/**\n * Returns true if the block toolbar should be able to receive focus.\n *\n * @return {boolean} Whether the block toolbar should be able to receive focus\n */\nexport function useCanBlockToolbarBeFocused() {\n\treturn useSelect( ( select ) => {\n\t\tconst {\n\t\t\t__unstableGetEditorMode,\n\t\t\tgetBlock,\n\t\t\tgetSettings,\n\t\t\tgetSelectedBlockClientId,\n\t\t\tgetFirstMultiSelectedBlockClientId,\n\t\t} = unlock( select( blockEditorStore ) );\n\n\t\tconst selectedBlockId =\n\t\t\tgetFirstMultiSelectedBlockClientId() || getSelectedBlockClientId();\n\t\tconst isEmptyDefaultBlock = isUnmodifiedDefaultBlock(\n\t\t\tgetBlock( selectedBlockId ) || {}\n\t\t);\n\n\t\t// Fixed Toolbar can be focused when:\n\t\t// - a block is selected\n\t\t// - fixed toolbar is on\n\t\t// Block Toolbar Popover can be focused when:\n\t\t// - a block is selected\n\t\t// - we are in edit mode\n\t\t// - it is not an empty default block\n\t\treturn (\n\t\t\t!! selectedBlockId &&\n\t\t\t( getSettings().hasFixedToolbar ||\n\t\t\t\t( __unstableGetEditorMode() === 'edit' &&\n\t\t\t\t\t! isEmptyDefaultBlock ) )\n\t\t);\n\t}, [] );\n}\n"],"mappings":";;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAKA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACO,SAASI,2BAA2BA,CAAA,EAAG;EAC7C,OAAO,IAAAC,eAAS,EAAIC,MAAM,IAAM;IAC/B,MAAM;MACLC,uBAAuB;MACvBC,QAAQ;MACRC,WAAW;MACXC,wBAAwB;MACxBC;IACD,CAAC,GAAG,IAAAC,kBAAM,EAAEN,MAAM,CAAEO,YAAiB,CAAE,CAAC;IAExC,MAAMC,eAAe,GACpBH,kCAAkC,CAAC,CAAC,IAAID,wBAAwB,CAAC,CAAC;IACnE,MAAMK,mBAAmB,GAAG,IAAAC,gCAAwB,EACnDR,QAAQ,CAAEM,eAAgB,CAAC,IAAI,CAAC,CACjC,CAAC;;IAED;IACA;IACA;IACA;IACA;IACA;IACA;IACA,OACC,CAAC,CAAEA,eAAe,KAChBL,WAAW,CAAC,CAAC,CAACQ,eAAe,IAC5BV,uBAAuB,CAAC,CAAC,KAAK,MAAM,IACrC,CAAEQ,mBAAqB,CAAE;EAE7B,CAAC,EAAE,EAAG,CAAC;AACR"}
@@ -1,63 +0,0 @@
1
- import { createElement } from "react";
2
- /**
3
- * WordPress dependencies
4
- */
5
- import { store as blocksStore } from '@wordpress/blocks';
6
- import { useMemo, useCallback } from '@wordpress/element';
7
- import { __ } from '@wordpress/i18n';
8
- import { SelectControl } from '@wordpress/components';
9
- import { useSelect } from '@wordpress/data';
10
-
11
- /**
12
- * Internal dependencies
13
- */
14
- import { store as blockEditorStore } from '../../store';
15
- import { getDefaultStyle } from '../block-styles/utils';
16
- export default function DefaultStylePicker({
17
- blockName
18
- }) {
19
- const {
20
- preferredStyle,
21
- onUpdatePreferredStyleVariations,
22
- styles
23
- } = useSelect(select => {
24
- var _preferredStyleVariat;
25
- const settings = select(blockEditorStore).getSettings();
26
- const preferredStyleVariations = settings.__experimentalPreferredStyleVariations;
27
- return {
28
- preferredStyle: preferredStyleVariations?.value?.[blockName],
29
- onUpdatePreferredStyleVariations: (_preferredStyleVariat = preferredStyleVariations?.onChange) !== null && _preferredStyleVariat !== void 0 ? _preferredStyleVariat : null,
30
- styles: select(blocksStore).getBlockStyles(blockName)
31
- };
32
- }, [blockName]);
33
- const selectOptions = useMemo(() => [{
34
- label: __('Not set'),
35
- value: ''
36
- }, ...styles.map(({
37
- label,
38
- name
39
- }) => ({
40
- label,
41
- value: name
42
- }))], [styles]);
43
- const defaultStyleName = useMemo(() => getDefaultStyle(styles)?.name, [styles]);
44
- const selectOnChange = useCallback(blockStyle => {
45
- onUpdatePreferredStyleVariations(blockName, blockStyle);
46
- }, [blockName, onUpdatePreferredStyleVariations]);
47
-
48
- // Until the functionality is migrated to global styles,
49
- // only show the default style picker if a non-default style has already been selected.
50
- if (!preferredStyle || preferredStyle === defaultStyleName) {
51
- return null;
52
- }
53
- return onUpdatePreferredStyleVariations && createElement("div", {
54
- className: "default-style-picker__default-switcher"
55
- }, createElement(SelectControl, {
56
- __nextHasNoMarginBottom: true,
57
- options: selectOptions,
58
- value: preferredStyle || '',
59
- label: __('Default Style'),
60
- onChange: selectOnChange
61
- }));
62
- }
63
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["store","blocksStore","useMemo","useCallback","__","SelectControl","useSelect","blockEditorStore","getDefaultStyle","DefaultStylePicker","blockName","preferredStyle","onUpdatePreferredStyleVariations","styles","select","_preferredStyleVariat","settings","getSettings","preferredStyleVariations","__experimentalPreferredStyleVariations","value","onChange","getBlockStyles","selectOptions","label","map","name","defaultStyleName","selectOnChange","blockStyle","createElement","className","__nextHasNoMarginBottom","options"],"sources":["@wordpress/block-editor/src/components/default-style-picker/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { useMemo, useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { SelectControl } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { getDefaultStyle } from '../block-styles/utils';\n\nexport default function DefaultStylePicker( { blockName } ) {\n\tconst { preferredStyle, onUpdatePreferredStyleVariations, styles } =\n\t\tuseSelect(\n\t\t\t( select ) => {\n\t\t\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\t\t\tconst preferredStyleVariations =\n\t\t\t\t\tsettings.__experimentalPreferredStyleVariations;\n\t\t\t\treturn {\n\t\t\t\t\tpreferredStyle:\n\t\t\t\t\t\tpreferredStyleVariations?.value?.[ blockName ],\n\t\t\t\t\tonUpdatePreferredStyleVariations:\n\t\t\t\t\t\tpreferredStyleVariations?.onChange ?? null,\n\t\t\t\t\tstyles: select( blocksStore ).getBlockStyles( blockName ),\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ blockName ]\n\t\t);\n\tconst selectOptions = useMemo(\n\t\t() => [\n\t\t\t{ label: __( 'Not set' ), value: '' },\n\t\t\t...styles.map( ( { label, name } ) => ( { label, value: name } ) ),\n\t\t],\n\t\t[ styles ]\n\t);\n\tconst defaultStyleName = useMemo(\n\t\t() => getDefaultStyle( styles )?.name,\n\t\t[ styles ]\n\t);\n\tconst selectOnChange = useCallback(\n\t\t( blockStyle ) => {\n\t\t\tonUpdatePreferredStyleVariations( blockName, blockStyle );\n\t\t},\n\t\t[ blockName, onUpdatePreferredStyleVariations ]\n\t);\n\n\t// Until the functionality is migrated to global styles,\n\t// only show the default style picker if a non-default style has already been selected.\n\tif ( ! preferredStyle || preferredStyle === defaultStyleName ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\tonUpdatePreferredStyleVariations && (\n\t\t\t<div className=\"default-style-picker__default-switcher\">\n\t\t\t\t<SelectControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\toptions={ selectOptions }\n\t\t\t\t\tvalue={ preferredStyle || '' }\n\t\t\t\t\tlabel={ __( 'Default Style' ) }\n\t\t\t\t\tonChange={ selectOnChange }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t)\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,KAAK,IAAIC,WAAW,QAAQ,mBAAmB;AACxD,SAASC,OAAO,EAAEC,WAAW,QAAQ,oBAAoB;AACzD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,aAAa,QAAQ,uBAAuB;AACrD,SAASC,SAAS,QAAQ,iBAAiB;;AAE3C;AACA;AACA;AACA,SAASN,KAAK,IAAIO,gBAAgB,QAAQ,aAAa;AACvD,SAASC,eAAe,QAAQ,uBAAuB;AAEvD,eAAe,SAASC,kBAAkBA,CAAE;EAAEC;AAAU,CAAC,EAAG;EAC3D,MAAM;IAAEC,cAAc;IAAEC,gCAAgC;IAAEC;EAAO,CAAC,GACjEP,SAAS,CACNQ,MAAM,IAAM;IAAA,IAAAC,qBAAA;IACb,MAAMC,QAAQ,GAAGF,MAAM,CAAEP,gBAAiB,CAAC,CAACU,WAAW,CAAC,CAAC;IACzD,MAAMC,wBAAwB,GAC7BF,QAAQ,CAACG,sCAAsC;IAChD,OAAO;MACNR,cAAc,EACbO,wBAAwB,EAAEE,KAAK,GAAIV,SAAS,CAAE;MAC/CE,gCAAgC,GAAAG,qBAAA,GAC/BG,wBAAwB,EAAEG,QAAQ,cAAAN,qBAAA,cAAAA,qBAAA,GAAI,IAAI;MAC3CF,MAAM,EAAEC,MAAM,CAAEb,WAAY,CAAC,CAACqB,cAAc,CAAEZ,SAAU;IACzD,CAAC;EACF,CAAC,EACD,CAAEA,SAAS,CACZ,CAAC;EACF,MAAMa,aAAa,GAAGrB,OAAO,CAC5B,MAAM,CACL;IAAEsB,KAAK,EAAEpB,EAAE,CAAE,SAAU,CAAC;IAAEgB,KAAK,EAAE;EAAG,CAAC,EACrC,GAAGP,MAAM,CAACY,GAAG,CAAE,CAAE;IAAED,KAAK;IAAEE;EAAK,CAAC,MAAQ;IAAEF,KAAK;IAAEJ,KAAK,EAAEM;EAAK,CAAC,CAAG,CAAC,CAClE,EACD,CAAEb,MAAM,CACT,CAAC;EACD,MAAMc,gBAAgB,GAAGzB,OAAO,CAC/B,MAAMM,eAAe,CAAEK,MAAO,CAAC,EAAEa,IAAI,EACrC,CAAEb,MAAM,CACT,CAAC;EACD,MAAMe,cAAc,GAAGzB,WAAW,CAC/B0B,UAAU,IAAM;IACjBjB,gCAAgC,CAAEF,SAAS,EAAEmB,UAAW,CAAC;EAC1D,CAAC,EACD,CAAEnB,SAAS,EAAEE,gCAAgC,CAC9C,CAAC;;EAED;EACA;EACA,IAAK,CAAED,cAAc,IAAIA,cAAc,KAAKgB,gBAAgB,EAAG;IAC9D,OAAO,IAAI;EACZ;EAEA,OACCf,gCAAgC,IAC/BkB,aAAA;IAAKC,SAAS,EAAC;EAAwC,GACtDD,aAAA,CAACzB,aAAa;IACb2B,uBAAuB;IACvBC,OAAO,EAAGV,aAAe;IACzBH,KAAK,EAAGT,cAAc,IAAI,EAAI;IAC9Ba,KAAK,EAAGpB,EAAE,CAAE,eAAgB,CAAG;IAC/BiB,QAAQ,EAAGO;EAAgB,CAC3B,CACG,CACL;AAEH"}
@@ -1,78 +0,0 @@
1
- import { createElement } from "react";
2
- /**
3
- * WordPress dependencies
4
- */
5
- import { useState, useRef, useEffect } from '@wordpress/element';
6
- import isShallowEqual from '@wordpress/is-shallow-equal';
7
-
8
- /**
9
- * Internal dependencies
10
- */
11
- import BlockPopover from '../components/block-popover';
12
- import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
13
- function getComputedCSS(element, property) {
14
- return element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property);
15
- }
16
- export function MarginVisualizer({
17
- clientId,
18
- attributes,
19
- forceShow
20
- }) {
21
- const blockElement = useBlockElement(clientId);
22
- const [style, setStyle] = useState();
23
- const margin = attributes?.style?.spacing?.margin;
24
- useEffect(() => {
25
- if (!blockElement || null === blockElement.ownerDocument.defaultView) {
26
- return;
27
- }
28
- const top = getComputedCSS(blockElement, 'margin-top');
29
- const right = getComputedCSS(blockElement, 'margin-right');
30
- const bottom = getComputedCSS(blockElement, 'margin-bottom');
31
- const left = getComputedCSS(blockElement, 'margin-left');
32
- setStyle({
33
- borderTopWidth: top,
34
- borderRightWidth: right,
35
- borderBottomWidth: bottom,
36
- borderLeftWidth: left,
37
- top: top ? `-${top}` : 0,
38
- right: right ? `-${right}` : 0,
39
- bottom: bottom ? `-${bottom}` : 0,
40
- left: left ? `-${left}` : 0
41
- });
42
- }, [blockElement, margin]);
43
- const [isActive, setIsActive] = useState(false);
44
- const valueRef = useRef(margin);
45
- const timeoutRef = useRef();
46
- const clearTimer = () => {
47
- if (timeoutRef.current) {
48
- window.clearTimeout(timeoutRef.current);
49
- }
50
- };
51
- useEffect(() => {
52
- if (!isShallowEqual(margin, valueRef.current) && !forceShow) {
53
- setIsActive(true);
54
- valueRef.current = margin;
55
- timeoutRef.current = setTimeout(() => {
56
- setIsActive(false);
57
- }, 400);
58
- }
59
- return () => {
60
- setIsActive(false);
61
- clearTimer();
62
- };
63
- }, [margin, forceShow]);
64
- if (!isActive && !forceShow) {
65
- return null;
66
- }
67
- return createElement(BlockPopover, {
68
- clientId: clientId,
69
- __unstableCoverTarget: true,
70
- __unstableRefreshSize: margin,
71
- __unstablePopoverSlot: "block-toolbar",
72
- shift: false
73
- }, createElement("div", {
74
- className: "block-editor__padding-visualizer",
75
- style: style
76
- }));
77
- }
78
- //# sourceMappingURL=margin.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["useState","useRef","useEffect","isShallowEqual","BlockPopover","__unstableUseBlockElement","useBlockElement","getComputedCSS","element","property","ownerDocument","defaultView","getComputedStyle","getPropertyValue","MarginVisualizer","clientId","attributes","forceShow","blockElement","style","setStyle","margin","spacing","top","right","bottom","left","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","isActive","setIsActive","valueRef","timeoutRef","clearTimer","current","window","clearTimeout","setTimeout","createElement","__unstableCoverTarget","__unstableRefreshSize","__unstablePopoverSlot","shift","className"],"sources":["@wordpress/block-editor/src/hooks/margin.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport BlockPopover from '../components/block-popover';\nimport { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';\n\nfunction getComputedCSS( element, property ) {\n\treturn element.ownerDocument.defaultView\n\t\t.getComputedStyle( element )\n\t\t.getPropertyValue( property );\n}\n\nexport function MarginVisualizer( { clientId, attributes, forceShow } ) {\n\tconst blockElement = useBlockElement( clientId );\n\tconst [ style, setStyle ] = useState();\n\n\tconst margin = attributes?.style?.spacing?.margin;\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\t! blockElement ||\n\t\t\tnull === blockElement.ownerDocument.defaultView\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst top = getComputedCSS( blockElement, 'margin-top' );\n\t\tconst right = getComputedCSS( blockElement, 'margin-right' );\n\t\tconst bottom = getComputedCSS( blockElement, 'margin-bottom' );\n\t\tconst left = getComputedCSS( blockElement, 'margin-left' );\n\n\t\tsetStyle( {\n\t\t\tborderTopWidth: top,\n\t\t\tborderRightWidth: right,\n\t\t\tborderBottomWidth: bottom,\n\t\t\tborderLeftWidth: left,\n\t\t\ttop: top ? `-${ top }` : 0,\n\t\t\tright: right ? `-${ right }` : 0,\n\t\t\tbottom: bottom ? `-${ bottom }` : 0,\n\t\t\tleft: left ? `-${ left }` : 0,\n\t\t} );\n\t}, [ blockElement, margin ] );\n\n\tconst [ isActive, setIsActive ] = useState( false );\n\tconst valueRef = useRef( margin );\n\tconst timeoutRef = useRef();\n\n\tconst clearTimer = () => {\n\t\tif ( timeoutRef.current ) {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t}\n\t};\n\n\tuseEffect( () => {\n\t\tif ( ! isShallowEqual( margin, valueRef.current ) && ! forceShow ) {\n\t\t\tsetIsActive( true );\n\t\t\tvalueRef.current = margin;\n\n\t\t\ttimeoutRef.current = setTimeout( () => {\n\t\t\t\tsetIsActive( false );\n\t\t\t}, 400 );\n\t\t}\n\n\t\treturn () => {\n\t\t\tsetIsActive( false );\n\t\t\tclearTimer();\n\t\t};\n\t}, [ margin, forceShow ] );\n\n\tif ( ! isActive && ! forceShow ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BlockPopover\n\t\t\tclientId={ clientId }\n\t\t\t__unstableCoverTarget\n\t\t\t__unstableRefreshSize={ margin }\n\t\t\t__unstablePopoverSlot=\"block-toolbar\"\n\t\t\tshift={ false }\n\t\t>\n\t\t\t<div className=\"block-editor__padding-visualizer\" style={ style } />\n\t\t</BlockPopover>\n\t);\n}\n"],"mappings":"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"}
@@ -1,70 +0,0 @@
1
- import { createElement } from "react";
2
- /**
3
- * WordPress dependencies
4
- */
5
- import { useState, useRef, useEffect } from '@wordpress/element';
6
- import isShallowEqual from '@wordpress/is-shallow-equal';
7
-
8
- /**
9
- * Internal dependencies
10
- */
11
- import BlockPopover from '../components/block-popover';
12
- import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
13
- function getComputedCSS(element, property) {
14
- return element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property);
15
- }
16
- export function PaddingVisualizer({
17
- clientId,
18
- value,
19
- forceShow
20
- }) {
21
- const blockElement = useBlockElement(clientId);
22
- const [style, setStyle] = useState();
23
- const padding = value?.spacing?.padding;
24
- useEffect(() => {
25
- if (!blockElement || null === blockElement.ownerDocument.defaultView) {
26
- return;
27
- }
28
- setStyle({
29
- borderTopWidth: getComputedCSS(blockElement, 'padding-top'),
30
- borderRightWidth: getComputedCSS(blockElement, 'padding-right'),
31
- borderBottomWidth: getComputedCSS(blockElement, 'padding-bottom'),
32
- borderLeftWidth: getComputedCSS(blockElement, 'padding-left')
33
- });
34
- }, [blockElement, padding]);
35
- const [isActive, setIsActive] = useState(false);
36
- const valueRef = useRef(padding);
37
- const timeoutRef = useRef();
38
- const clearTimer = () => {
39
- if (timeoutRef.current) {
40
- window.clearTimeout(timeoutRef.current);
41
- }
42
- };
43
- useEffect(() => {
44
- if (!isShallowEqual(padding, valueRef.current) && !forceShow) {
45
- setIsActive(true);
46
- valueRef.current = padding;
47
- timeoutRef.current = setTimeout(() => {
48
- setIsActive(false);
49
- }, 400);
50
- }
51
- return () => {
52
- setIsActive(false);
53
- clearTimer();
54
- };
55
- }, [padding, forceShow]);
56
- if (!isActive && !forceShow) {
57
- return null;
58
- }
59
- return createElement(BlockPopover, {
60
- clientId: clientId,
61
- __unstableCoverTarget: true,
62
- __unstableRefreshSize: padding,
63
- __unstablePopoverSlot: "block-toolbar",
64
- shift: false
65
- }, createElement("div", {
66
- className: "block-editor__padding-visualizer",
67
- style: style
68
- }));
69
- }
70
- //# sourceMappingURL=padding.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["useState","useRef","useEffect","isShallowEqual","BlockPopover","__unstableUseBlockElement","useBlockElement","getComputedCSS","element","property","ownerDocument","defaultView","getComputedStyle","getPropertyValue","PaddingVisualizer","clientId","value","forceShow","blockElement","style","setStyle","padding","spacing","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","isActive","setIsActive","valueRef","timeoutRef","clearTimer","current","window","clearTimeout","setTimeout","createElement","__unstableCoverTarget","__unstableRefreshSize","__unstablePopoverSlot","shift","className"],"sources":["@wordpress/block-editor/src/hooks/padding.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport BlockPopover from '../components/block-popover';\nimport { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';\n\nfunction getComputedCSS( element, property ) {\n\treturn element.ownerDocument.defaultView\n\t\t.getComputedStyle( element )\n\t\t.getPropertyValue( property );\n}\n\nexport function PaddingVisualizer( { clientId, value, forceShow } ) {\n\tconst blockElement = useBlockElement( clientId );\n\tconst [ style, setStyle ] = useState();\n\n\tconst padding = value?.spacing?.padding;\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\t! blockElement ||\n\t\t\tnull === blockElement.ownerDocument.defaultView\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetStyle( {\n\t\t\tborderTopWidth: getComputedCSS( blockElement, 'padding-top' ),\n\t\t\tborderRightWidth: getComputedCSS( blockElement, 'padding-right' ),\n\t\t\tborderBottomWidth: getComputedCSS( blockElement, 'padding-bottom' ),\n\t\t\tborderLeftWidth: getComputedCSS( blockElement, 'padding-left' ),\n\t\t} );\n\t}, [ blockElement, padding ] );\n\n\tconst [ isActive, setIsActive ] = useState( false );\n\tconst valueRef = useRef( padding );\n\tconst timeoutRef = useRef();\n\n\tconst clearTimer = () => {\n\t\tif ( timeoutRef.current ) {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t}\n\t};\n\n\tuseEffect( () => {\n\t\tif ( ! isShallowEqual( padding, valueRef.current ) && ! forceShow ) {\n\t\t\tsetIsActive( true );\n\t\t\tvalueRef.current = padding;\n\n\t\t\ttimeoutRef.current = setTimeout( () => {\n\t\t\t\tsetIsActive( false );\n\t\t\t}, 400 );\n\t\t}\n\n\t\treturn () => {\n\t\t\tsetIsActive( false );\n\t\t\tclearTimer();\n\t\t};\n\t}, [ padding, forceShow ] );\n\n\tif ( ! isActive && ! forceShow ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BlockPopover\n\t\t\tclientId={ clientId }\n\t\t\t__unstableCoverTarget\n\t\t\t__unstableRefreshSize={ padding }\n\t\t\t__unstablePopoverSlot=\"block-toolbar\"\n\t\t\tshift={ false }\n\t\t>\n\t\t\t<div className=\"block-editor__padding-visualizer\" style={ style } />\n\t\t</BlockPopover>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,MAAM,EAAEC,SAAS,QAAQ,oBAAoB;AAChE,OAAOC,cAAc,MAAM,6BAA6B;;AAExD;AACA;AACA;AACA,OAAOC,YAAY,MAAM,6BAA6B;AACtD,SAASC,yBAAyB,IAAIC,eAAe,QAAQ,yDAAyD;AAEtH,SAASC,cAAcA,CAAEC,OAAO,EAAEC,QAAQ,EAAG;EAC5C,OAAOD,OAAO,CAACE,aAAa,CAACC,WAAW,CACtCC,gBAAgB,CAAEJ,OAAQ,CAAC,CAC3BK,gBAAgB,CAAEJ,QAAS,CAAC;AAC/B;AAEA,OAAO,SAASK,iBAAiBA,CAAE;EAAEC,QAAQ;EAAEC,KAAK;EAAEC;AAAU,CAAC,EAAG;EACnE,MAAMC,YAAY,GAAGZ,eAAe,CAAES,QAAS,CAAC;EAChD,MAAM,CAAEI,KAAK,EAAEC,QAAQ,CAAE,GAAGpB,QAAQ,CAAC,CAAC;EAEtC,MAAMqB,OAAO,GAAGL,KAAK,EAAEM,OAAO,EAAED,OAAO;EAEvCnB,SAAS,CAAE,MAAM;IAChB,IACC,CAAEgB,YAAY,IACd,IAAI,KAAKA,YAAY,CAACR,aAAa,CAACC,WAAW,EAC9C;MACD;IACD;IAEAS,QAAQ,CAAE;MACTG,cAAc,EAAEhB,cAAc,CAAEW,YAAY,EAAE,aAAc,CAAC;MAC7DM,gBAAgB,EAAEjB,cAAc,CAAEW,YAAY,EAAE,eAAgB,CAAC;MACjEO,iBAAiB,EAAElB,cAAc,CAAEW,YAAY,EAAE,gBAAiB,CAAC;MACnEQ,eAAe,EAAEnB,cAAc,CAAEW,YAAY,EAAE,cAAe;IAC/D,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEA,YAAY,EAAEG,OAAO,CAAG,CAAC;EAE9B,MAAM,CAAEM,QAAQ,EAAEC,WAAW,CAAE,GAAG5B,QAAQ,CAAE,KAAM,CAAC;EACnD,MAAM6B,QAAQ,GAAG5B,MAAM,CAAEoB,OAAQ,CAAC;EAClC,MAAMS,UAAU,GAAG7B,MAAM,CAAC,CAAC;EAE3B,MAAM8B,UAAU,GAAGA,CAAA,KAAM;IACxB,IAAKD,UAAU,CAACE,OAAO,EAAG;MACzBC,MAAM,CAACC,YAAY,CAAEJ,UAAU,CAACE,OAAQ,CAAC;IAC1C;EACD,CAAC;EAED9B,SAAS,CAAE,MAAM;IAChB,IAAK,CAAEC,cAAc,CAAEkB,OAAO,EAAEQ,QAAQ,CAACG,OAAQ,CAAC,IAAI,CAAEf,SAAS,EAAG;MACnEW,WAAW,CAAE,IAAK,CAAC;MACnBC,QAAQ,CAACG,OAAO,GAAGX,OAAO;MAE1BS,UAAU,CAACE,OAAO,GAAGG,UAAU,CAAE,MAAM;QACtCP,WAAW,CAAE,KAAM,CAAC;MACrB,CAAC,EAAE,GAAI,CAAC;IACT;IAEA,OAAO,MAAM;MACZA,WAAW,CAAE,KAAM,CAAC;MACpBG,UAAU,CAAC,CAAC;IACb,CAAC;EACF,CAAC,EAAE,CAAEV,OAAO,EAAEJ,SAAS,CAAG,CAAC;EAE3B,IAAK,CAAEU,QAAQ,IAAI,CAAEV,SAAS,EAAG;IAChC,OAAO,IAAI;EACZ;EAEA,OACCmB,aAAA,CAAChC,YAAY;IACZW,QAAQ,EAAGA,QAAU;IACrBsB,qBAAqB;IACrBC,qBAAqB,EAAGjB,OAAS;IACjCkB,qBAAqB,EAAC,eAAe;IACrCC,KAAK,EAAG;EAAO,GAEfJ,aAAA;IAAKK,SAAS,EAAC,kCAAkC;IAACtB,KAAK,EAAGA;EAAO,CAAE,CACtD,CAAC;AAEjB"}
@@ -1,40 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { useSelect } from '@wordpress/data';
5
- import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
6
-
7
- /**
8
- * Internal dependencies
9
- */
10
- import { store as blockEditorStore } from '../store';
11
- import { unlock } from '../lock-unlock';
12
-
13
- /**
14
- * Returns true if the block toolbar should be able to receive focus.
15
- *
16
- * @return {boolean} Whether the block toolbar should be able to receive focus
17
- */
18
- export function useCanBlockToolbarBeFocused() {
19
- return useSelect(select => {
20
- const {
21
- __unstableGetEditorMode,
22
- getBlock,
23
- getSettings,
24
- getSelectedBlockClientId,
25
- getFirstMultiSelectedBlockClientId
26
- } = unlock(select(blockEditorStore));
27
- const selectedBlockId = getFirstMultiSelectedBlockClientId() || getSelectedBlockClientId();
28
- const isEmptyDefaultBlock = isUnmodifiedDefaultBlock(getBlock(selectedBlockId) || {});
29
-
30
- // Fixed Toolbar can be focused when:
31
- // - a block is selected
32
- // - fixed toolbar is on
33
- // Block Toolbar Popover can be focused when:
34
- // - a block is selected
35
- // - we are in edit mode
36
- // - it is not an empty default block
37
- return !!selectedBlockId && (getSettings().hasFixedToolbar || __unstableGetEditorMode() === 'edit' && !isEmptyDefaultBlock);
38
- }, []);
39
- }
40
- //# sourceMappingURL=use-can-block-toolbar-be-focused.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["useSelect","isUnmodifiedDefaultBlock","store","blockEditorStore","unlock","useCanBlockToolbarBeFocused","select","__unstableGetEditorMode","getBlock","getSettings","getSelectedBlockClientId","getFirstMultiSelectedBlockClientId","selectedBlockId","isEmptyDefaultBlock","hasFixedToolbar"],"sources":["@wordpress/block-editor/src/utils/use-can-block-toolbar-be-focused.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { isUnmodifiedDefaultBlock } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../store';\nimport { unlock } from '../lock-unlock';\n\n/**\n * Returns true if the block toolbar should be able to receive focus.\n *\n * @return {boolean} Whether the block toolbar should be able to receive focus\n */\nexport function useCanBlockToolbarBeFocused() {\n\treturn useSelect( ( select ) => {\n\t\tconst {\n\t\t\t__unstableGetEditorMode,\n\t\t\tgetBlock,\n\t\t\tgetSettings,\n\t\t\tgetSelectedBlockClientId,\n\t\t\tgetFirstMultiSelectedBlockClientId,\n\t\t} = unlock( select( blockEditorStore ) );\n\n\t\tconst selectedBlockId =\n\t\t\tgetFirstMultiSelectedBlockClientId() || getSelectedBlockClientId();\n\t\tconst isEmptyDefaultBlock = isUnmodifiedDefaultBlock(\n\t\t\tgetBlock( selectedBlockId ) || {}\n\t\t);\n\n\t\t// Fixed Toolbar can be focused when:\n\t\t// - a block is selected\n\t\t// - fixed toolbar is on\n\t\t// Block Toolbar Popover can be focused when:\n\t\t// - a block is selected\n\t\t// - we are in edit mode\n\t\t// - it is not an empty default block\n\t\treturn (\n\t\t\t!! selectedBlockId &&\n\t\t\t( getSettings().hasFixedToolbar ||\n\t\t\t\t( __unstableGetEditorMode() === 'edit' &&\n\t\t\t\t\t! isEmptyDefaultBlock ) )\n\t\t);\n\t}, [] );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,wBAAwB,QAAQ,mBAAmB;;AAE5D;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,UAAU;AACpD,SAASC,MAAM,QAAQ,gBAAgB;;AAEvC;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,2BAA2BA,CAAA,EAAG;EAC7C,OAAOL,SAAS,CAAIM,MAAM,IAAM;IAC/B,MAAM;MACLC,uBAAuB;MACvBC,QAAQ;MACRC,WAAW;MACXC,wBAAwB;MACxBC;IACD,CAAC,GAAGP,MAAM,CAAEE,MAAM,CAAEH,gBAAiB,CAAE,CAAC;IAExC,MAAMS,eAAe,GACpBD,kCAAkC,CAAC,CAAC,IAAID,wBAAwB,CAAC,CAAC;IACnE,MAAMG,mBAAmB,GAAGZ,wBAAwB,CACnDO,QAAQ,CAAEI,eAAgB,CAAC,IAAI,CAAC,CACjC,CAAC;;IAED;IACA;IACA;IACA;IACA;IACA;IACA;IACA,OACC,CAAC,CAAEA,eAAe,KAChBH,WAAW,CAAC,CAAC,CAACK,eAAe,IAC5BP,uBAAuB,CAAC,CAAC,KAAK,MAAM,IACrC,CAAEM,mBAAqB,CAAE;EAE7B,CAAC,EAAE,EAAG,CAAC;AACR"}
@@ -1,3 +0,0 @@
1
- .block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
2
- padding: 0;
3
- }
@@ -1,70 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { store as blocksStore } from '@wordpress/blocks';
5
- import { useMemo, useCallback } from '@wordpress/element';
6
- import { __ } from '@wordpress/i18n';
7
- import { SelectControl } from '@wordpress/components';
8
- import { useSelect } from '@wordpress/data';
9
-
10
- /**
11
- * Internal dependencies
12
- */
13
- import { store as blockEditorStore } from '../../store';
14
- import { getDefaultStyle } from '../block-styles/utils';
15
-
16
- export default function DefaultStylePicker( { blockName } ) {
17
- const { preferredStyle, onUpdatePreferredStyleVariations, styles } =
18
- useSelect(
19
- ( select ) => {
20
- const settings = select( blockEditorStore ).getSettings();
21
- const preferredStyleVariations =
22
- settings.__experimentalPreferredStyleVariations;
23
- return {
24
- preferredStyle:
25
- preferredStyleVariations?.value?.[ blockName ],
26
- onUpdatePreferredStyleVariations:
27
- preferredStyleVariations?.onChange ?? null,
28
- styles: select( blocksStore ).getBlockStyles( blockName ),
29
- };
30
- },
31
- [ blockName ]
32
- );
33
- const selectOptions = useMemo(
34
- () => [
35
- { label: __( 'Not set' ), value: '' },
36
- ...styles.map( ( { label, name } ) => ( { label, value: name } ) ),
37
- ],
38
- [ styles ]
39
- );
40
- const defaultStyleName = useMemo(
41
- () => getDefaultStyle( styles )?.name,
42
- [ styles ]
43
- );
44
- const selectOnChange = useCallback(
45
- ( blockStyle ) => {
46
- onUpdatePreferredStyleVariations( blockName, blockStyle );
47
- },
48
- [ blockName, onUpdatePreferredStyleVariations ]
49
- );
50
-
51
- // Until the functionality is migrated to global styles,
52
- // only show the default style picker if a non-default style has already been selected.
53
- if ( ! preferredStyle || preferredStyle === defaultStyleName ) {
54
- return null;
55
- }
56
-
57
- return (
58
- onUpdatePreferredStyleVariations && (
59
- <div className="default-style-picker__default-switcher">
60
- <SelectControl
61
- __nextHasNoMarginBottom
62
- options={ selectOptions }
63
- value={ preferredStyle || '' }
64
- label={ __( 'Default Style' ) }
65
- onChange={ selectOnChange }
66
- />
67
- </div>
68
- )
69
- );
70
- }
@@ -1,91 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { useState, useRef, useEffect } from '@wordpress/element';
5
- import isShallowEqual from '@wordpress/is-shallow-equal';
6
-
7
- /**
8
- * Internal dependencies
9
- */
10
- import BlockPopover from '../components/block-popover';
11
- import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
12
-
13
- function getComputedCSS( element, property ) {
14
- return element.ownerDocument.defaultView
15
- .getComputedStyle( element )
16
- .getPropertyValue( property );
17
- }
18
-
19
- export function MarginVisualizer( { clientId, attributes, forceShow } ) {
20
- const blockElement = useBlockElement( clientId );
21
- const [ style, setStyle ] = useState();
22
-
23
- const margin = attributes?.style?.spacing?.margin;
24
-
25
- useEffect( () => {
26
- if (
27
- ! blockElement ||
28
- null === blockElement.ownerDocument.defaultView
29
- ) {
30
- return;
31
- }
32
-
33
- const top = getComputedCSS( blockElement, 'margin-top' );
34
- const right = getComputedCSS( blockElement, 'margin-right' );
35
- const bottom = getComputedCSS( blockElement, 'margin-bottom' );
36
- const left = getComputedCSS( blockElement, 'margin-left' );
37
-
38
- setStyle( {
39
- borderTopWidth: top,
40
- borderRightWidth: right,
41
- borderBottomWidth: bottom,
42
- borderLeftWidth: left,
43
- top: top ? `-${ top }` : 0,
44
- right: right ? `-${ right }` : 0,
45
- bottom: bottom ? `-${ bottom }` : 0,
46
- left: left ? `-${ left }` : 0,
47
- } );
48
- }, [ blockElement, margin ] );
49
-
50
- const [ isActive, setIsActive ] = useState( false );
51
- const valueRef = useRef( margin );
52
- const timeoutRef = useRef();
53
-
54
- const clearTimer = () => {
55
- if ( timeoutRef.current ) {
56
- window.clearTimeout( timeoutRef.current );
57
- }
58
- };
59
-
60
- useEffect( () => {
61
- if ( ! isShallowEqual( margin, valueRef.current ) && ! forceShow ) {
62
- setIsActive( true );
63
- valueRef.current = margin;
64
-
65
- timeoutRef.current = setTimeout( () => {
66
- setIsActive( false );
67
- }, 400 );
68
- }
69
-
70
- return () => {
71
- setIsActive( false );
72
- clearTimer();
73
- };
74
- }, [ margin, forceShow ] );
75
-
76
- if ( ! isActive && ! forceShow ) {
77
- return null;
78
- }
79
-
80
- return (
81
- <BlockPopover
82
- clientId={ clientId }
83
- __unstableCoverTarget
84
- __unstableRefreshSize={ margin }
85
- __unstablePopoverSlot="block-toolbar"
86
- shift={ false }
87
- >
88
- <div className="block-editor__padding-visualizer" style={ style } />
89
- </BlockPopover>
90
- );
91
- }