@wordpress/block-library 8.12.6 → 8.14.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 (305) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/build/archives/index.js +5 -1
  3. package/build/archives/index.js.map +1 -1
  4. package/build/audio/index.js +5 -1
  5. package/build/audio/index.js.map +1 -1
  6. package/build/block/edit.native.js +2 -2
  7. package/build/block/edit.native.js.map +1 -1
  8. package/build/categories/index.js +5 -1
  9. package/build/categories/index.js.map +1 -1
  10. package/build/code/index.js +5 -1
  11. package/build/code/index.js.map +1 -1
  12. package/build/column/index.js +1 -0
  13. package/build/column/index.js.map +1 -1
  14. package/build/comments/index.js +1 -0
  15. package/build/comments/index.js.map +1 -1
  16. package/build/cover/edit/inspector-controls.js +2 -1
  17. package/build/cover/edit/inspector-controls.js.map +1 -1
  18. package/build/cover/index.js +1 -0
  19. package/build/cover/index.js.map +1 -1
  20. package/build/details/index.js +5 -1
  21. package/build/details/index.js.map +1 -1
  22. package/build/embed/util.js +9 -8
  23. package/build/embed/util.js.map +1 -1
  24. package/build/file/index.js +2 -1
  25. package/build/file/index.js.map +1 -1
  26. package/build/file/view.js +15 -1
  27. package/build/file/view.js.map +1 -1
  28. package/build/gallery/index.js +3 -1
  29. package/build/gallery/index.js.map +1 -1
  30. package/build/group/index.js +1 -0
  31. package/build/group/index.js.map +1 -1
  32. package/build/heading/index.js +5 -1
  33. package/build/heading/index.js.map +1 -1
  34. package/build/heading/transforms.js +5 -1
  35. package/build/heading/transforms.js.map +1 -1
  36. package/build/image/deprecated.js +453 -175
  37. package/build/image/deprecated.js.map +1 -1
  38. package/build/image/image.js +1 -1
  39. package/build/image/image.js.map +1 -1
  40. package/build/image/save.js +3 -1
  41. package/build/image/save.js.map +1 -1
  42. package/build/image/{interactivity.js → view-interactivity.js} +86 -44
  43. package/build/image/view-interactivity.js.map +1 -0
  44. package/build/index.js +12 -3
  45. package/build/index.js.map +1 -1
  46. package/build/list/index.js +5 -1
  47. package/build/list/index.js.map +1 -1
  48. package/build/list-item/utils.js +6 -1
  49. package/build/list-item/utils.js.map +1 -1
  50. package/build/media-text/index.js +1 -0
  51. package/build/media-text/index.js.map +1 -1
  52. package/build/missing/edit.js +22 -8
  53. package/build/missing/edit.js.map +1 -1
  54. package/build/navigation/index.js +3 -2
  55. package/build/navigation/index.js.map +1 -1
  56. package/build/navigation/view.js +174 -50
  57. package/build/navigation/view.js.map +1 -1
  58. package/build/page-list/convert-to-links-modal.js +3 -3
  59. package/build/page-list/convert-to-links-modal.js.map +1 -1
  60. package/build/page-list/edit.js +34 -39
  61. package/build/page-list/edit.js.map +1 -1
  62. package/build/page-list/use-convert-to-navigation-links.js +2 -15
  63. package/build/page-list/use-convert-to-navigation-links.js.map +1 -1
  64. package/build/paragraph/index.js +1 -0
  65. package/build/paragraph/index.js.map +1 -1
  66. package/build/paragraph/transforms.js +1 -0
  67. package/build/paragraph/transforms.js.map +1 -1
  68. package/build/post-comments-form/index.js +1 -0
  69. package/build/post-comments-form/index.js.map +1 -1
  70. package/build/post-navigation-link/index.js +1 -0
  71. package/build/post-navigation-link/index.js.map +1 -1
  72. package/build/post-time-to-read/index.js +5 -1
  73. package/build/post-time-to-read/index.js.map +1 -1
  74. package/build/quote/index.js +1 -0
  75. package/build/quote/index.js.map +1 -1
  76. package/build/site-logo/index.js +5 -1
  77. package/build/site-logo/index.js.map +1 -1
  78. package/build/site-tagline/index.js +5 -1
  79. package/build/site-tagline/index.js.map +1 -1
  80. package/build/site-title/index.js +5 -1
  81. package/build/site-title/index.js.map +1 -1
  82. package/build/social-links/index.js +3 -1
  83. package/build/social-links/index.js.map +1 -1
  84. package/build/table/index.js +5 -1
  85. package/build/table/index.js.map +1 -1
  86. package/build/term-description/index.js +1 -0
  87. package/build/term-description/index.js.map +1 -1
  88. package/build/verse/index.js +5 -1
  89. package/build/verse/index.js.map +1 -1
  90. package/build/video/deprecated.js +5 -1
  91. package/build/video/deprecated.js.map +1 -1
  92. package/build/video/index.js +5 -1
  93. package/build/video/index.js.map +1 -1
  94. package/build-module/archives/index.js +5 -1
  95. package/build-module/archives/index.js.map +1 -1
  96. package/build-module/audio/index.js +5 -1
  97. package/build-module/audio/index.js.map +1 -1
  98. package/build-module/block/edit.native.js +2 -2
  99. package/build-module/block/edit.native.js.map +1 -1
  100. package/build-module/categories/index.js +5 -1
  101. package/build-module/categories/index.js.map +1 -1
  102. package/build-module/code/index.js +5 -1
  103. package/build-module/code/index.js.map +1 -1
  104. package/build-module/column/index.js +1 -0
  105. package/build-module/column/index.js.map +1 -1
  106. package/build-module/comments/index.js +1 -0
  107. package/build-module/comments/index.js.map +1 -1
  108. package/build-module/cover/edit/inspector-controls.js +2 -1
  109. package/build-module/cover/edit/inspector-controls.js.map +1 -1
  110. package/build-module/cover/index.js +1 -0
  111. package/build-module/cover/index.js.map +1 -1
  112. package/build-module/details/index.js +5 -1
  113. package/build-module/details/index.js.map +1 -1
  114. package/build-module/embed/util.js +6 -6
  115. package/build-module/embed/util.js.map +1 -1
  116. package/build-module/file/index.js +2 -1
  117. package/build-module/file/index.js.map +1 -1
  118. package/build-module/file/view.js +15 -2
  119. package/build-module/file/view.js.map +1 -1
  120. package/build-module/gallery/index.js +3 -1
  121. package/build-module/gallery/index.js.map +1 -1
  122. package/build-module/group/index.js +1 -0
  123. package/build-module/group/index.js.map +1 -1
  124. package/build-module/heading/index.js +5 -1
  125. package/build-module/heading/index.js.map +1 -1
  126. package/build-module/heading/transforms.js +5 -1
  127. package/build-module/heading/transforms.js.map +1 -1
  128. package/build-module/image/deprecated.js +454 -176
  129. package/build-module/image/deprecated.js.map +1 -1
  130. package/build-module/image/image.js +1 -1
  131. package/build-module/image/image.js.map +1 -1
  132. package/build-module/image/save.js +3 -1
  133. package/build-module/image/save.js.map +1 -1
  134. package/build-module/image/{interactivity.js → view-interactivity.js} +86 -44
  135. package/build-module/image/view-interactivity.js.map +1 -0
  136. package/build-module/index.js +12 -3
  137. package/build-module/index.js.map +1 -1
  138. package/build-module/list/index.js +5 -1
  139. package/build-module/list/index.js.map +1 -1
  140. package/build-module/list-item/utils.js +6 -1
  141. package/build-module/list-item/utils.js.map +1 -1
  142. package/build-module/media-text/index.js +1 -0
  143. package/build-module/media-text/index.js.map +1 -1
  144. package/build-module/missing/edit.js +22 -8
  145. package/build-module/missing/edit.js.map +1 -1
  146. package/build-module/navigation/index.js +3 -2
  147. package/build-module/navigation/index.js.map +1 -1
  148. package/build-module/navigation/view.js +173 -50
  149. package/build-module/navigation/view.js.map +1 -1
  150. package/build-module/page-list/convert-to-links-modal.js +3 -3
  151. package/build-module/page-list/convert-to-links-modal.js.map +1 -1
  152. package/build-module/page-list/edit.js +34 -39
  153. package/build-module/page-list/edit.js.map +1 -1
  154. package/build-module/page-list/use-convert-to-navigation-links.js +3 -16
  155. package/build-module/page-list/use-convert-to-navigation-links.js.map +1 -1
  156. package/build-module/paragraph/index.js +1 -0
  157. package/build-module/paragraph/index.js.map +1 -1
  158. package/build-module/paragraph/transforms.js +1 -0
  159. package/build-module/paragraph/transforms.js.map +1 -1
  160. package/build-module/post-comments-form/index.js +1 -0
  161. package/build-module/post-comments-form/index.js.map +1 -1
  162. package/build-module/post-navigation-link/index.js +1 -0
  163. package/build-module/post-navigation-link/index.js.map +1 -1
  164. package/build-module/post-time-to-read/index.js +5 -1
  165. package/build-module/post-time-to-read/index.js.map +1 -1
  166. package/build-module/quote/index.js +1 -0
  167. package/build-module/quote/index.js.map +1 -1
  168. package/build-module/site-logo/index.js +5 -1
  169. package/build-module/site-logo/index.js.map +1 -1
  170. package/build-module/site-tagline/index.js +5 -1
  171. package/build-module/site-tagline/index.js.map +1 -1
  172. package/build-module/site-title/index.js +5 -1
  173. package/build-module/site-title/index.js.map +1 -1
  174. package/build-module/social-links/index.js +3 -1
  175. package/build-module/social-links/index.js.map +1 -1
  176. package/build-module/table/index.js +5 -1
  177. package/build-module/table/index.js.map +1 -1
  178. package/build-module/term-description/index.js +1 -0
  179. package/build-module/term-description/index.js.map +1 -1
  180. package/build-module/verse/index.js +5 -1
  181. package/build-module/verse/index.js.map +1 -1
  182. package/build-module/video/deprecated.js +5 -1
  183. package/build-module/video/deprecated.js.map +1 -1
  184. package/build-module/video/index.js +5 -1
  185. package/build-module/video/index.js.map +1 -1
  186. package/build-style/image/style-rtl.css +16 -2
  187. package/build-style/image/style.css +16 -2
  188. package/build-style/style-rtl.css +16 -2
  189. package/build-style/style.css +16 -2
  190. package/package.json +33 -38
  191. package/src/archives/block.json +5 -1
  192. package/src/audio/block.json +5 -1
  193. package/src/block/edit.native.js +2 -2
  194. package/src/block/test/edit.native.js +4 -4
  195. package/src/categories/block.json +5 -1
  196. package/src/code/block.json +5 -1
  197. package/src/column/block.json +1 -0
  198. package/src/comments/block.json +1 -0
  199. package/src/cover/block.json +1 -0
  200. package/src/cover/edit/inspector-controls.js +1 -0
  201. package/src/details/block.json +5 -1
  202. package/src/embed/util.js +4 -6
  203. package/src/file/block.json +2 -1
  204. package/src/file/index.php +0 -17
  205. package/src/file/view.js +14 -5
  206. package/src/gallery/block.json +3 -1
  207. package/src/group/block.json +1 -0
  208. package/src/heading/block.json +5 -1
  209. package/src/heading/test/index.native.js +18 -0
  210. package/src/image/deprecated.js +597 -320
  211. package/src/image/image.js +2 -1
  212. package/src/image/save.js +2 -0
  213. package/src/image/style.scss +15 -2
  214. package/src/image/{interactivity.js → view-interactivity.js} +99 -50
  215. package/src/index.js +18 -1
  216. package/src/list/block.json +5 -1
  217. package/src/media-text/block.json +1 -0
  218. package/src/missing/edit.js +31 -11
  219. package/src/navigation/block.json +3 -2
  220. package/src/navigation/index.php +15 -20
  221. package/src/navigation/view.js +189 -67
  222. package/src/navigation-submenu/index.php +0 -10
  223. package/src/page-list/convert-to-links-modal.js +3 -3
  224. package/src/page-list/edit.js +65 -62
  225. package/src/page-list/use-convert-to-navigation-links.js +3 -20
  226. package/src/paragraph/block.json +1 -0
  227. package/src/post-comments-form/block.json +1 -0
  228. package/src/post-navigation-link/block.json +1 -0
  229. package/src/post-time-to-read/block.json +5 -1
  230. package/src/quote/block.json +1 -0
  231. package/src/site-logo/block.json +5 -1
  232. package/src/site-tagline/block.json +5 -1
  233. package/src/site-title/block.json +5 -1
  234. package/src/social-links/block.json +3 -1
  235. package/src/table/block.json +5 -1
  236. package/src/term-description/block.json +1 -0
  237. package/src/verse/block.json +5 -1
  238. package/src/video/block.json +5 -1
  239. package/build/file/interactivity.js +0 -19
  240. package/build/file/interactivity.js.map +0 -1
  241. package/build/heading/heading-level-icon.js +0 -61
  242. package/build/heading/heading-level-icon.js.map +0 -1
  243. package/build/image/interactivity.js.map +0 -1
  244. package/build/navigation/interactivity.js +0 -167
  245. package/build/navigation/interactivity.js.map +0 -1
  246. package/build/navigation/view-modal.js +0 -64
  247. package/build/navigation/view-modal.js.map +0 -1
  248. package/build/utils/interactivity/constants.js +0 -9
  249. package/build/utils/interactivity/constants.js.map +0 -1
  250. package/build/utils/interactivity/directives.js +0 -222
  251. package/build/utils/interactivity/directives.js.map +0 -1
  252. package/build/utils/interactivity/hooks.js +0 -159
  253. package/build/utils/interactivity/hooks.js.map +0 -1
  254. package/build/utils/interactivity/hydration.js +0 -34
  255. package/build/utils/interactivity/hydration.js.map +0 -1
  256. package/build/utils/interactivity/index.js +0 -32
  257. package/build/utils/interactivity/index.js.map +0 -1
  258. package/build/utils/interactivity/portals.js +0 -108
  259. package/build/utils/interactivity/portals.js.map +0 -1
  260. package/build/utils/interactivity/store.js +0 -66
  261. package/build/utils/interactivity/store.js.map +0 -1
  262. package/build/utils/interactivity/utils.js +0 -87
  263. package/build/utils/interactivity/utils.js.map +0 -1
  264. package/build/utils/interactivity/vdom.js +0 -119
  265. package/build/utils/interactivity/vdom.js.map +0 -1
  266. package/build-module/file/interactivity.js +0 -15
  267. package/build-module/file/interactivity.js.map +0 -1
  268. package/build-module/heading/heading-level-icon.js +0 -53
  269. package/build-module/heading/heading-level-icon.js.map +0 -1
  270. package/build-module/image/interactivity.js.map +0 -1
  271. package/build-module/navigation/interactivity.js +0 -164
  272. package/build-module/navigation/interactivity.js.map +0 -1
  273. package/build-module/navigation/view-modal.js +0 -58
  274. package/build-module/navigation/view-modal.js.map +0 -1
  275. package/build-module/utils/interactivity/constants.js +0 -2
  276. package/build-module/utils/interactivity/constants.js.map +0 -1
  277. package/build-module/utils/interactivity/directives.js +0 -209
  278. package/build-module/utils/interactivity/directives.js.map +0 -1
  279. package/build-module/utils/interactivity/hooks.js +0 -145
  280. package/build-module/utils/interactivity/hooks.js.map +0 -1
  281. package/build-module/utils/interactivity/hydration.js +0 -21
  282. package/build-module/utils/interactivity/hydration.js.map +0 -1
  283. package/build-module/utils/interactivity/index.js +0 -15
  284. package/build-module/utils/interactivity/index.js.map +0 -1
  285. package/build-module/utils/interactivity/portals.js +0 -100
  286. package/build-module/utils/interactivity/portals.js.map +0 -1
  287. package/build-module/utils/interactivity/store.js +0 -55
  288. package/build-module/utils/interactivity/store.js.map +0 -1
  289. package/build-module/utils/interactivity/utils.js +0 -75
  290. package/build-module/utils/interactivity/utils.js.map +0 -1
  291. package/build-module/utils/interactivity/vdom.js +0 -107
  292. package/build-module/utils/interactivity/vdom.js.map +0 -1
  293. package/src/file/interactivity.js +0 -15
  294. package/src/heading/heading-level-icon.js +0 -48
  295. package/src/navigation/interactivity.js +0 -169
  296. package/src/navigation/view-modal.js +0 -78
  297. package/src/utils/interactivity/constants.js +0 -1
  298. package/src/utils/interactivity/directives.js +0 -200
  299. package/src/utils/interactivity/hooks.js +0 -145
  300. package/src/utils/interactivity/hydration.js +0 -22
  301. package/src/utils/interactivity/index.js +0 -15
  302. package/src/utils/interactivity/portals.js +0 -98
  303. package/src/utils/interactivity/store.js +0 -45
  304. package/src/utils/interactivity/utils.js +0 -66
  305. package/src/utils/interactivity/vdom.js +0 -111
package/src/navigation/view.js CHANGED
@@ -1,74 +1,196 @@
1
- // Open on click functionality.
2
- function closeSubmenus( element ) {
3
- element
4
- .querySelectorAll( '[aria-expanded="true"]' )
5
- .forEach( function ( toggle ) {
6
- toggle.setAttribute( 'aria-expanded', 'false' );
7
- } );
8
- }
1
+ /**
2
+ * WordPress dependencies
3
+ */
4
+ import { store as wpStore } from '@wordpress/interactivity';
9
5
 
10
- function toggleSubmenuOnClick( event ) {
11
- const buttonToggle = event.target.closest( '[aria-expanded]' );
12
- const isSubmenuOpen = buttonToggle.getAttribute( 'aria-expanded' );
6
+ const focusableSelectors = [
7
+ 'a[href]',
8
+ 'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
9
+ 'select:not([disabled]):not([aria-hidden])',
10
+ 'textarea:not([disabled]):not([aria-hidden])',
11
+ 'button:not([disabled]):not([aria-hidden])',
12
+ '[contenteditable]',
13
+ '[tabindex]:not([tabindex^="-"])',
14
+ ];
13
15
 
14
- if ( isSubmenuOpen === 'true' ) {
15
- closeSubmenus( buttonToggle.closest( '.wp-block-navigation-item' ) );
16
- } else {
17
- // Close all sibling submenus.
18
- const parentElement = buttonToggle.closest(
19
- '.wp-block-navigation-item'
20
- );
21
- const navigationParent = buttonToggle.closest(
22
- '.wp-block-navigation__submenu-container, .wp-block-navigation__container, .wp-block-page-list'
23
- );
24
- navigationParent
25
- .querySelectorAll( '.wp-block-navigation-item' )
26
- .forEach( function ( child ) {
27
- if ( child !== parentElement ) {
28
- closeSubmenus( child );
29
- }
30
- } );
31
- // Open submenu.
32
- buttonToggle.setAttribute( 'aria-expanded', 'true' );
16
+ const openMenu = ( store, menuOpenedOn ) => {
17
+ const { context, ref, selectors } = store;
18
+ selectors.core.navigation.menuOpenedBy( store )[ menuOpenedOn ] = true;
19
+ context.core.navigation.previousFocus = ref;
20
+ if ( context.core.navigation.type === 'overlay' ) {
21
+ // Add a `has-modal-open` class to the <html> root.
22
+ document.documentElement.classList.add( 'has-modal-open' );
33
23
  }
34
- }
24
+ };
35
25
 
36
- // Necessary for some themes such as TT1 Blocks, where
37
- // scripts could be loaded before the body.
38
- window.addEventListener( 'load', () => {
39
- const submenuButtons = document.querySelectorAll(
40
- '.wp-block-navigation-submenu__toggle'
41
- );
26
+ const closeMenu = ( store, menuClosedOn ) => {
27
+ const { context, selectors } = store;
28
+ selectors.core.navigation.menuOpenedBy( store )[ menuClosedOn ] = false;
29
+ // Check if the menu is still open or not.
30
+ if ( ! selectors.core.navigation.isMenuOpen( store ) ) {
31
+ if (
32
+ context.core.navigation.modal?.contains(
33
+ window.document.activeElement
34
+ )
35
+ ) {
36
+ context.core.navigation.previousFocus.focus();
37
+ }
38
+ context.core.navigation.modal = null;
39
+ context.core.navigation.previousFocus = null;
40
+ if ( context.core.navigation.type === 'overlay' ) {
41
+ document.documentElement.classList.remove( 'has-modal-open' );
42
+ }
43
+ }
44
+ };
42
45
 
43
- submenuButtons.forEach( function ( button ) {
44
- button.addEventListener( 'click', toggleSubmenuOnClick );
45
- } );
46
+ wpStore( {
47
+ effects: {
48
+ core: {
49
+ navigation: {
50
+ initMenu: ( store ) => {
51
+ const { context, selectors, ref } = store;
52
+ if ( selectors.core.navigation.isMenuOpen( store ) ) {
53
+ const focusableElements =
54
+ ref.querySelectorAll( focusableSelectors );
55
+ context.core.navigation.modal = ref;
56
+ context.core.navigation.firstFocusableElement =
57
+ focusableElements[ 0 ];
58
+ context.core.navigation.lastFocusableElement =
59
+ focusableElements[ focusableElements.length - 1 ];
60
+ }
61
+ },
62
+ focusFirstElement: ( store ) => {
63
+ const { selectors, ref } = store;
64
+ if ( selectors.core.navigation.isMenuOpen( store ) ) {
65
+ ref.querySelector(
66
+ '.wp-block-navigation-item > *:first-child'
67
+ ).focus();
68
+ }
69
+ },
70
+ },
71
+ },
72
+ },
73
+ selectors: {
74
+ core: {
75
+ navigation: {
76
+ roleAttribute: ( store ) => {
77
+ const { context, selectors } = store;
78
+ return context.core.navigation.type === 'overlay' &&
79
+ selectors.core.navigation.isMenuOpen( store )
80
+ ? 'dialog'
81
+ : '';
82
+ },
83
+ isMenuOpen: ( { context } ) =>
84
+ // The menu is opened if either `click`, `hover` or `focus` is true.
85
+ Object.values(
86
+ context.core.navigation[
87
+ context.core.navigation.type === 'overlay'
88
+ ? 'overlayOpenedBy'
89
+ : 'submenuOpenedBy'
90
+ ]
91
+ ).filter( Boolean ).length > 0,
92
+ menuOpenedBy: ( { context } ) =>
93
+ context.core.navigation[
94
+ context.core.navigation.type === 'overlay'
95
+ ? 'overlayOpenedBy'
96
+ : 'submenuOpenedBy'
97
+ ],
98
+ },
99
+ },
100
+ },
101
+ actions: {
102
+ core: {
103
+ navigation: {
104
+ openMenuOnHover( store ) {
105
+ const { navigation } = store.context.core;
106
+ if (
107
+ navigation.type === 'submenu' &&
108
+ // Only open on hover if the overlay is closed.
109
+ Object.values(
110
+ navigation.overlayOpenedBy || {}
111
+ ).filter( Boolean ).length === 0
112
+ )
113
+ openMenu( store, 'hover' );
114
+ },
115
+ closeMenuOnHover( store ) {
116
+ closeMenu( store, 'hover' );
117
+ },
118
+ openMenuOnClick( store ) {
119
+ openMenu( store, 'click' );
120
+ },
121
+ closeMenuOnClick( store ) {
122
+ closeMenu( store, 'click' );
123
+ closeMenu( store, 'focus' );
124
+ },
125
+ openMenuOnFocus( store ) {
126
+ openMenu( store, 'focus' );
127
+ },
128
+ toggleMenuOnClick: ( store ) => {
129
+ const { selectors } = store;
130
+ const menuOpenedBy =
131
+ selectors.core.navigation.menuOpenedBy( store );
132
+ if ( menuOpenedBy.click || menuOpenedBy.focus ) {
133
+ closeMenu( store, 'click' );
134
+ closeMenu( store, 'focus' );
135
+ } else {
136
+ openMenu( store, 'click' );
137
+ }
138
+ },
139
+ handleMenuKeydown: ( store ) => {
140
+ const { context, selectors, event } = store;
141
+ if (
142
+ selectors.core.navigation.menuOpenedBy( store ).click
143
+ ) {
144
+ // If Escape close the menu.
145
+ if ( event?.key === 'Escape' ) {
146
+ closeMenu( store, 'click' );
147
+ closeMenu( store, 'focus' );
148
+ return;
149
+ }
46
150
 
47
- // Close on click outside.
48
- document.addEventListener( 'click', function ( event ) {
49
- const navigationBlocks = document.querySelectorAll(
50
- '.wp-block-navigation'
51
- );
52
- navigationBlocks.forEach( function ( block ) {
53
- if ( ! block.contains( event.target ) ) {
54
- closeSubmenus( block );
55
- }
56
- } );
57
- } );
58
- // Close on focus outside or escape key.
59
- document.addEventListener( 'keyup', function ( event ) {
60
- const submenuBlocks = document.querySelectorAll(
61
- '.wp-block-navigation-item.has-child'
62
- );
63
- submenuBlocks.forEach( function ( block ) {
64
- if ( ! block.contains( event.target ) ) {
65
- closeSubmenus( block );
66
- } else if ( event.key === 'Escape' ) {
67
- const toggle = block.querySelector( '[aria-expanded="true"]' );
68
- closeSubmenus( block );
69
- // Focus the submenu trigger so focus does not get trapped in the closed submenu.
70
- toggle?.focus();
71
- }
72
- } );
73
- } );
151
+ // Trap focus if it is an overlay (main menu).
152
+ if (
153
+ context.core.navigation.type === 'overlay' &&
154
+ event.key === 'Tab'
155
+ ) {
156
+ // If shift + tab it change the direction.
157
+ if (
158
+ event.shiftKey &&
159
+ window.document.activeElement ===
160
+ context.core.navigation
161
+ .firstFocusableElement
162
+ ) {
163
+ event.preventDefault();
164
+ context.core.navigation.lastFocusableElement.focus();
165
+ } else if (
166
+ ! event.shiftKey &&
167
+ window.document.activeElement ===
168
+ context.core.navigation.lastFocusableElement
169
+ ) {
170
+ event.preventDefault();
171
+ context.core.navigation.firstFocusableElement.focus();
172
+ }
173
+ }
174
+ }
175
+ },
176
+ handleMenuFocusout: ( store ) => {
177
+ const { context, event } = store;
178
+ // If focus is outside modal, and in the document, close menu
179
+ // event.target === The element losing focus
180
+ // event.relatedTarget === The element receiving focus (if any)
181
+ // When focusout is outsite the document,
182
+ // `window.document.activeElement` doesn't change.
183
+ if (
184
+ ! context.core.navigation.modal?.contains(
185
+ event.relatedTarget
186
+ ) &&
187
+ event.target !== window.document.activeElement
188
+ ) {
189
+ closeMenu( store, 'click' );
190
+ closeMenu( store, 'focus' );
191
+ }
192
+ },
193
+ },
194
+ },
195
+ },
74
196
  } );
package/src/navigation-submenu/index.php CHANGED
@@ -5,16 +5,6 @@
5
5
  * @package WordPress
6
6
  */
7
7
 
8
- /**
9
- * Build an array with CSS classes and inline styles defining the colors
10
- * which will be applied to the navigation markup in the front-end.
11
- *
12
- * @param array $context Navigation block context.
13
- * @param array $attributes Block attributes.
14
- * @param bool $is_sub_menu Whether the block is a sub-menu.
15
- * @return array Colors CSS classes and inline styles.
16
- */
17
-
18
8
  /**
19
9
  * Build an array with CSS classes and inline styles defining the font sizes
20
10
  * which will be applied to the navigation markup in the front-end.
package/src/page-list/convert-to-links-modal.js CHANGED
@@ -5,14 +5,14 @@ import { Button, Modal } from '@wordpress/components';
5
5
  import { __ } from '@wordpress/i18n';
6
6
 
7
7
  export const convertDescription = __(
8
- 'This menu is automatically kept in sync with pages on your site. You can manage the menu yourself by clicking "Edit" below.'
8
+ 'This page list is synced with the published pages on your site. Detach the page list to add, delete, or reorder pages yourself.'
9
9
  );
10
10
 
11
11
  export function ConvertToLinksModal( { onClick, onClose, disabled } ) {
12
12
  return (
13
13
  <Modal
14
14
  onRequestClose={ onClose }
15
- title={ __( 'Edit this menu' ) }
15
+ title={ __( 'Edit Page List' ) }
16
16
  className={ 'wp-block-page-list-modal' }
17
17
  aria={ {
18
18
  describedby: 'wp-block-page-list-modal__description',
@@ -30,7 +30,7 @@ export function ConvertToLinksModal( { onClick, onClose, disabled } ) {
30
30
  disabled={ disabled }
31
31
  onClick={ onClick }
32
32
  >
33
- { __( 'Edit' ) }
33
+ { __( 'Detach' ) }
34
34
  </Button>
35
35
  </div>
36
36
  </Modal>
package/src/page-list/edit.js CHANGED
@@ -169,12 +169,6 @@ export default function PageListEdit( {
169
169
  }, new Map() );
170
170
  }, [ pages ] );
171
171
 
172
- const convertToNavigationLinks = useConvertToNavigationLinks( {
173
- clientId,
174
- pages,
175
- parentPageID,
176
- } );
177
-
178
172
  const blockProps = useBlockProps( {
179
173
  className: classnames( 'wp-block-page-list', {
180
174
  'has-text-color': !! context.textColor,
@@ -189,68 +183,71 @@ export default function PageListEdit( {
189
183
  style: { ...context.style?.color },
190
184
  } );
191
185
 
192
- const getBlockList = ( parentId = parentPageID ) => {
193
- const childPages = pagesByParentId.get( parentId );
186
+ const pagesTree = useMemo(
187
+ function makePagesTree( parentId = 0, level = 0 ) {
188
+ const childPages = pagesByParentId.get( parentId );
194
189
 
195
- if ( ! childPages?.length ) {
196
- return [];
197
- }
198
-
199
- return childPages.reduce( ( template, page ) => {
200
- const hasChildren = pagesByParentId.has( page.id );
201
- const pageProps = {
202
- id: page.id,
203
- label:
204
- // translators: displayed when a page has an empty title.
205
- page.title?.rendered?.trim() !== ''
206
- ? page.title?.rendered
207
- : __( '(no title)' ),
208
- title: page.title?.rendered,
209
- link: page.url,
210
- hasChildren,
211
- };
212
- let item = null;
213
- const children = getBlockList( page.id );
214
- item = createBlock( 'core/page-list-item', pageProps, children );
215
- template.push( item );
216
-
217
- return template;
218
- }, [] );
219
- };
190
+ if ( ! childPages?.length ) {
191
+ return [];
192
+ }
220
193
 
221
- const makePagesTree = ( parentId = 0, level = 0 ) => {
222
- const childPages = pagesByParentId.get( parentId );
194
+ return childPages.reduce( ( tree, page ) => {
195
+ const hasChildren = pagesByParentId.has( page.id );
196
+ const item = {
197
+ value: page.id,
198
+ label: '— '.repeat( level ) + page.title.rendered,
199
+ rawName: page.title.rendered,
200
+ };
201
+ tree.push( item );
202
+ if ( hasChildren ) {
203
+ tree.push( ...makePagesTree( page.id, level + 1 ) );
204
+ }
205
+ return tree;
206
+ }, [] );
207
+ },
208
+ [ pagesByParentId ]
209
+ );
223
210
 
224
- if ( ! childPages?.length ) {
225
- return [];
226
- }
211
+ const blockList = useMemo(
212
+ function getBlockList( parentId = parentPageID ) {
213
+ const childPages = pagesByParentId.get( parentId );
227
214
 
228
- return childPages.reduce( ( tree, page ) => {
229
- const hasChildren = pagesByParentId.has( page.id );
230
- const item = {
231
- value: page.id,
232
- label: '— '.repeat( level ) + page.title.rendered,
233
- rawName: page.title.rendered,
234
- };
235
- tree.push( item );
236
- if ( hasChildren ) {
237
- tree.push( ...makePagesTree( page.id, level + 1 ) );
215
+ if ( ! childPages?.length ) {
216
+ return [];
238
217
  }
239
- return tree;
240
- }, [] );
241
- };
242
218
 
243
- const pagesTree = useMemo( makePagesTree, [ pagesByParentId ] );
244
-
245
- const blockList = useMemo( getBlockList, [
246
- pagesByParentId,
247
- parentPageID,
248
- ] );
219
+ return childPages.reduce( ( template, page ) => {
220
+ const hasChildren = pagesByParentId.has( page.id );
221
+ const pageProps = {
222
+ id: page.id,
223
+ label:
224
+ // translators: displayed when a page has an empty title.
225
+ page.title?.rendered?.trim() !== ''
226
+ ? page.title?.rendered
227
+ : __( '(no title)' ),
228
+ title: page.title?.rendered,
229
+ link: page.url,
230
+ hasChildren,
231
+ };
232
+ let item = null;
233
+ const children = getBlockList( page.id );
234
+ item = createBlock(
235
+ 'core/page-list-item',
236
+ pageProps,
237
+ children
238
+ );
239
+ template.push( item );
240
+
241
+ return template;
242
+ }, [] );
243
+ },
244
+ [ pagesByParentId, parentPageID ]
245
+ );
249
246
 
250
247
  const {
251
248
  isNested,
252
249
  hasSelectedChild,
253
- parentBlock,
250
+ parentClientId,
254
251
  hasDraggedChild,
255
252
  isChildOfNavigation,
256
253
  } = useSelect(
@@ -258,7 +255,6 @@ export default function PageListEdit( {
258
255
  const {
259
256
  getBlockParentsByBlockName,
260
257
  hasSelectedInnerBlock,
261
- getBlockRootClientId,
262
258
  hasDraggedInnerBlock,
263
259
  } = select( blockEditorStore );
264
260
  const blockParents = getBlockParentsByBlockName(
@@ -276,12 +272,19 @@ export default function PageListEdit( {
276
272
  isChildOfNavigation: navigationBlockParents.length > 0,
277
273
  hasSelectedChild: hasSelectedInnerBlock( clientId, true ),
278
274
  hasDraggedChild: hasDraggedInnerBlock( clientId, true ),
279
- parentBlock: getBlockRootClientId( clientId ),
275
+ parentClientId: navigationBlockParents[ 0 ],
280
276
  };
281
277
  },
282
278
  [ clientId ]
283
279
  );
284
280
 
281
+ const convertToNavigationLinks = useConvertToNavigationLinks( {
282
+ clientId,
283
+ pages,
284
+ parentClientId,
285
+ parentPageID,
286
+ } );
287
+
285
288
  const innerBlocksProps = useInnerBlocksProps( blockProps, {
286
289
  allowedBlocks: [ 'core/page-list-item' ],
287
290
  renderAppender: false,
@@ -297,12 +300,12 @@ export default function PageListEdit( {
297
300
  useEffect( () => {
298
301
  if ( hasSelectedChild || hasDraggedChild ) {
299
302
  openModal();
300
- selectBlock( parentBlock );
303
+ selectBlock( parentClientId );
301
304
  }
302
305
  }, [
303
306
  hasSelectedChild,
304
307
  hasDraggedChild,
305
- parentBlock,
308
+ parentClientId,
306
309
  selectBlock,
307
310
  openModal,
308
311
  ] );
package/src/page-list/use-convert-to-navigation-links.js CHANGED
@@ -2,7 +2,7 @@
2
2
  * WordPress dependencies
3
3
  */
4
4
  import { createBlock } from '@wordpress/blocks';
5
- import { useSelect, useDispatch } from '@wordpress/data';
5
+ import { useDispatch } from '@wordpress/data';
6
6
  import { store as blockEditorStore } from '@wordpress/block-editor';
7
7
 
8
8
  /**
@@ -116,28 +116,11 @@ export function convertToNavigationLinks( pages = [], parentPageID = null ) {
116
116
  export function useConvertToNavigationLinks( {
117
117
  clientId,
118
118
  pages,
119
+ parentClientId,
119
120
  parentPageID,
120
121
  } ) {
121
122
  const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
122
123
 
123
- const { parentNavBlockClientId } = useSelect(
124
- ( select ) => {
125
- const { getSelectedBlockClientId, getBlockParentsByBlockName } =
126
- select( blockEditorStore );
127
-
128
- const _selectedBlockClientId = getSelectedBlockClientId();
129
-
130
- return {
131
- parentNavBlockClientId: getBlockParentsByBlockName(
132
- _selectedBlockClientId,
133
- 'core/navigation',
134
- true
135
- )[ 0 ],
136
- };
137
- },
138
- [ clientId ]
139
- );
140
-
141
124
  return () => {
142
125
  const navigationLinks = convertToNavigationLinks( pages, parentPageID );
143
126
 
@@ -145,6 +128,6 @@ export function useConvertToNavigationLinks( {
145
128
  replaceBlock( clientId, navigationLinks );
146
129
 
147
130
  // Select the Navigation block to reveal the changes.
148
- selectBlock( parentNavBlockClientId );
131
+ selectBlock( parentClientId );
149
132
  };
150
133
  }
package/src/paragraph/block.json CHANGED
@@ -58,6 +58,7 @@
58
58
  "__experimentalFontWeight": true,
59
59
  "__experimentalLetterSpacing": true,
60
60
  "__experimentalTextTransform": true,
61
+ "__experimentalWritingMode": true,
61
62
  "__experimentalDefaultControls": {
62
63
  "fontSize": true
63
64
  }
package/src/post-comments-form/block.json CHANGED
@@ -16,6 +16,7 @@
16
16
  "html": false,
17
17
  "color": {
18
18
  "gradients": true,
19
+ "heading": true,
19
20
  "link": true,
20
21
  "__experimentalDefaultControls": {
21
22
  "background": true,
package/src/post-navigation-link/block.json CHANGED
@@ -45,6 +45,7 @@
45
45
  "__experimentalTextTransform": true,
46
46
  "__experimentalTextDecoration": true,
47
47
  "__experimentalLetterSpacing": true,
48
+ "__experimentalWritingMode": true,
48
49
  "__experimentalDefaultControls": {
49
50
  "fontSize": true
50
51
  }
package/src/post-time-to-read/block.json CHANGED
@@ -24,7 +24,11 @@
24
24
  "html": false,
25
25
  "spacing": {
26
26
  "margin": true,
27
- "padding": true
27
+ "padding": true,
28
+ "__experimentalDefaultControls": {
29
+ "margin": false,
30
+ "padding": false
31
+ }
28
32
  },
29
33
  "typography": {
30
34
  "fontSize": true,
package/src/quote/block.json CHANGED
@@ -47,6 +47,7 @@
47
47
  },
48
48
  "color": {
49
49
  "gradients": true,
50
+ "heading": true,
50
51
  "link": true,
51
52
  "__experimentalDefaultControls": {
52
53
  "background": true,
package/src/site-logo/block.json CHANGED
@@ -40,7 +40,11 @@
40
40
  },
41
41
  "spacing": {
42
42
  "margin": true,
43
- "padding": true
43
+ "padding": true,
44
+ "__experimentalDefaultControls": {
45
+ "margin": false,
46
+ "padding": false
47
+ }
44
48
  }
45
49
  },
46
50
  "styles": [
package/src/site-tagline/block.json CHANGED
@@ -25,7 +25,11 @@
25
25
  },
26
26
  "spacing": {
27
27
  "margin": true,
28
- "padding": true
28
+ "padding": true,
29
+ "__experimentalDefaultControls": {
30
+ "margin": false,
31
+ "padding": false
32
+ }
29
33
  },
30
34
  "typography": {
31
35
  "fontSize": true,
package/src/site-title/block.json CHANGED
@@ -40,7 +40,11 @@
40
40
  },
41
41
  "spacing": {
42
42
  "padding": true,
43
- "margin": true
43
+ "margin": true,
44
+ "__experimentalDefaultControls": {
45
+ "margin": false,
46
+ "padding": false
47
+ }
44
48
  },
45
49
  "typography": {
46
50
  "fontSize": true,
package/src/social-links/block.json CHANGED
@@ -73,7 +73,9 @@
73
73
  "padding": true,
74
74
  "units": [ "px", "em", "rem", "vh", "vw" ],
75
75
  "__experimentalDefaultControls": {
76
- "blockGap": true
76
+ "blockGap": true,
77
+ "margin": true,
78
+ "padding": false
77
79
  }
78
80
  }
79
81
  },
package/src/table/block.json CHANGED
@@ -166,7 +166,11 @@
166
166
  },
167
167
  "spacing": {
168
168
  "margin": true,
169
- "padding": true
169
+ "padding": true,
170
+ "__experimentalDefaultControls": {
171
+ "margin": false,
172
+ "padding": false
173
+ }
170
174
  },
171
175
  "typography": {
172
176
  "fontSize": true,
package/src/term-description/block.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "$schema": "https://schemas.wp.org/trunk/block.json",
3
3
  "apiVersion": 3,
4
+ "__experimental": "fse",
4
5
  "name": "core/term-description",
5
6
  "title": "Term Description",
6
7
  "category": "theme",
package/src/verse/block.json CHANGED
@@ -46,7 +46,11 @@
46
46
  },
47
47
  "spacing": {
48
48
  "margin": true,
49
- "padding": true
49
+ "padding": true,
50
+ "__experimentalDefaultControls": {
51
+ "margin": false,
52
+ "padding": false
53
+ }
50
54
  },
51
55
  "__experimentalBorder": {
52
56
  "radius": true,