@wordpress/block-library 8.14.0 → 8.15.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 (260) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/build/avatar/edit.js +1 -0
  3. package/build/avatar/edit.js.map +1 -1
  4. package/build/block/index.js +2 -1
  5. package/build/block/index.js.map +1 -1
  6. package/build/buttons/edit.js +2 -2
  7. package/build/buttons/edit.js.map +1 -1
  8. package/build/column/edit.native.js +1 -4
  9. package/build/column/edit.native.js.map +1 -1
  10. package/build/columns/edit.js +1 -0
  11. package/build/columns/edit.js.map +1 -1
  12. package/build/comment-author-avatar/edit.js +1 -0
  13. package/build/comment-author-avatar/edit.js.map +1 -1
  14. package/build/cover/deprecated.js +4 -2
  15. package/build/cover/deprecated.js.map +1 -1
  16. package/build/embed/embed-placeholder.native.js +37 -13
  17. package/build/embed/embed-placeholder.native.js.map +1 -1
  18. package/build/file/index.js +1 -2
  19. package/build/file/index.js.map +1 -1
  20. package/build/file/inspector.js +1 -0
  21. package/build/file/inspector.js.map +1 -1
  22. package/build/file/view-interactivity.js +23 -0
  23. package/build/file/view-interactivity.js.map +1 -0
  24. package/build/file/view.js +1 -15
  25. package/build/file/view.js.map +1 -1
  26. package/build/footnotes/edit.js +20 -1
  27. package/build/footnotes/edit.js.map +1 -1
  28. package/build/footnotes/format.js +19 -16
  29. package/build/footnotes/format.js.map +1 -1
  30. package/build/footnotes/index.js +0 -1
  31. package/build/footnotes/index.js.map +1 -1
  32. package/build/gallery/edit.js +1 -1
  33. package/build/gallery/edit.js.map +1 -1
  34. package/build/latest-comments/edit.js +1 -0
  35. package/build/latest-comments/edit.js.map +1 -1
  36. package/build/latest-posts/edit.js +2 -0
  37. package/build/latest-posts/edit.js.map +1 -1
  38. package/build/list/edit.js +4 -4
  39. package/build/list/edit.js.map +1 -1
  40. package/build/media-text/media-container.native.js +2 -1
  41. package/build/media-text/media-container.native.js.map +1 -1
  42. package/build/missing/edit.native.js +7 -5
  43. package/build/missing/edit.native.js.map +1 -1
  44. package/build/navigation/constants.js +10 -4
  45. package/build/navigation/constants.js.map +1 -1
  46. package/build/navigation/edit/index.js +16 -2
  47. package/build/navigation/edit/index.js.map +1 -1
  48. package/build/navigation/edit/inner-blocks.js +2 -2
  49. package/build/navigation/edit/inner-blocks.js.map +1 -1
  50. package/build/navigation/edit/unsaved-inner-blocks.js +2 -2
  51. package/build/navigation/edit/unsaved-inner-blocks.js.map +1 -1
  52. package/build/navigation/edit/use-convert-classic-menu-to-block-menu.js +10 -15
  53. package/build/navigation/edit/use-convert-classic-menu-to-block-menu.js.map +1 -1
  54. package/build/navigation/index.js +2 -3
  55. package/build/navigation/index.js.map +1 -1
  56. package/build/navigation/use-navigation-menu.js +33 -45
  57. package/build/navigation/use-navigation-menu.js.map +1 -1
  58. package/build/navigation/view-interactivity.js +185 -0
  59. package/build/navigation/view-interactivity.js.map +1 -0
  60. package/build/navigation/view-modal.js +64 -0
  61. package/build/navigation/view-modal.js.map +1 -0
  62. package/build/navigation/view.js +50 -174
  63. package/build/navigation/view.js.map +1 -1
  64. package/build/navigation-link/edit.js +12 -7
  65. package/build/navigation-link/edit.js.map +1 -1
  66. package/build/navigation-submenu/edit.js +2 -2
  67. package/build/navigation-submenu/edit.js.map +1 -1
  68. package/build/query-pagination/edit.js +1 -1
  69. package/build/query-pagination/edit.js.map +1 -1
  70. package/build/query-title/edit.js +43 -1
  71. package/build/query-title/edit.js.map +1 -1
  72. package/build/quote/transforms.js +8 -0
  73. package/build/quote/transforms.js.map +1 -1
  74. package/build/rss/edit.js +3 -0
  75. package/build/rss/edit.js.map +1 -1
  76. package/build/search/edit.js +4 -3
  77. package/build/search/edit.js.map +1 -1
  78. package/build/search/index.js +1 -0
  79. package/build/search/index.js.map +1 -1
  80. package/build/site-logo/edit.js +1 -0
  81. package/build/site-logo/edit.js.map +1 -1
  82. package/build/tag-cloud/edit.js +1 -0
  83. package/build/tag-cloud/edit.js.map +1 -1
  84. package/build/template-part/edit/index.js +1 -1
  85. package/build/template-part/edit/index.js.map +1 -1
  86. package/build/text-columns/edit.js +1 -0
  87. package/build/text-columns/edit.js.map +1 -1
  88. package/build-module/avatar/edit.js +1 -0
  89. package/build-module/avatar/edit.js.map +1 -1
  90. package/build-module/block/index.js +2 -1
  91. package/build-module/block/index.js.map +1 -1
  92. package/build-module/buttons/edit.js +2 -2
  93. package/build-module/buttons/edit.js.map +1 -1
  94. package/build-module/column/edit.native.js +1 -4
  95. package/build-module/column/edit.native.js.map +1 -1
  96. package/build-module/columns/edit.js +1 -0
  97. package/build-module/columns/edit.js.map +1 -1
  98. package/build-module/comment-author-avatar/edit.js +1 -0
  99. package/build-module/comment-author-avatar/edit.js.map +1 -1
  100. package/build-module/cover/deprecated.js +4 -2
  101. package/build-module/cover/deprecated.js.map +1 -1
  102. package/build-module/embed/embed-placeholder.native.js +37 -14
  103. package/build-module/embed/embed-placeholder.native.js.map +1 -1
  104. package/build-module/file/index.js +1 -2
  105. package/build-module/file/index.js.map +1 -1
  106. package/build-module/file/inspector.js +1 -0
  107. package/build-module/file/inspector.js.map +1 -1
  108. package/build-module/file/view-interactivity.js +19 -0
  109. package/build-module/file/view-interactivity.js.map +1 -0
  110. package/build-module/file/view.js +2 -15
  111. package/build-module/file/view.js.map +1 -1
  112. package/build-module/footnotes/edit.js +18 -2
  113. package/build-module/footnotes/edit.js.map +1 -1
  114. package/build-module/footnotes/format.js +19 -16
  115. package/build-module/footnotes/format.js.map +1 -1
  116. package/build-module/footnotes/index.js +0 -1
  117. package/build-module/footnotes/index.js.map +1 -1
  118. package/build-module/gallery/edit.js +1 -1
  119. package/build-module/gallery/edit.js.map +1 -1
  120. package/build-module/latest-comments/edit.js +1 -0
  121. package/build-module/latest-comments/edit.js.map +1 -1
  122. package/build-module/latest-posts/edit.js +2 -0
  123. package/build-module/latest-posts/edit.js.map +1 -1
  124. package/build-module/list/edit.js +4 -4
  125. package/build-module/list/edit.js.map +1 -1
  126. package/build-module/media-text/media-container.native.js +2 -1
  127. package/build-module/media-text/media-container.native.js.map +1 -1
  128. package/build-module/missing/edit.native.js +8 -6
  129. package/build-module/missing/edit.native.js.map +1 -1
  130. package/build-module/navigation/constants.js +8 -3
  131. package/build-module/navigation/constants.js.map +1 -1
  132. package/build-module/navigation/edit/index.js +17 -3
  133. package/build-module/navigation/edit/index.js.map +1 -1
  134. package/build-module/navigation/edit/inner-blocks.js +2 -2
  135. package/build-module/navigation/edit/inner-blocks.js.map +1 -1
  136. package/build-module/navigation/edit/unsaved-inner-blocks.js +2 -2
  137. package/build-module/navigation/edit/unsaved-inner-blocks.js.map +1 -1
  138. package/build-module/navigation/edit/use-convert-classic-menu-to-block-menu.js +10 -14
  139. package/build-module/navigation/edit/use-convert-classic-menu-to-block-menu.js.map +1 -1
  140. package/build-module/navigation/index.js +2 -3
  141. package/build-module/navigation/index.js.map +1 -1
  142. package/build-module/navigation/use-navigation-menu.js +35 -47
  143. package/build-module/navigation/use-navigation-menu.js.map +1 -1
  144. package/build-module/navigation/view-interactivity.js +182 -0
  145. package/build-module/navigation/view-interactivity.js.map +1 -0
  146. package/build-module/navigation/view-modal.js +58 -0
  147. package/build-module/navigation/view-modal.js.map +1 -0
  148. package/build-module/navigation/view.js +50 -173
  149. package/build-module/navigation/view.js.map +1 -1
  150. package/build-module/navigation-link/edit.js +12 -7
  151. package/build-module/navigation-link/edit.js.map +1 -1
  152. package/build-module/navigation-submenu/edit.js +2 -2
  153. package/build-module/navigation-submenu/edit.js.map +1 -1
  154. package/build-module/query-pagination/edit.js +1 -1
  155. package/build-module/query-pagination/edit.js.map +1 -1
  156. package/build-module/query-title/edit.js +44 -3
  157. package/build-module/query-title/edit.js.map +1 -1
  158. package/build-module/quote/transforms.js +8 -0
  159. package/build-module/quote/transforms.js.map +1 -1
  160. package/build-module/rss/edit.js +3 -0
  161. package/build-module/rss/edit.js.map +1 -1
  162. package/build-module/search/edit.js +4 -3
  163. package/build-module/search/edit.js.map +1 -1
  164. package/build-module/search/index.js +1 -0
  165. package/build-module/search/index.js.map +1 -1
  166. package/build-module/site-logo/edit.js +1 -0
  167. package/build-module/site-logo/edit.js.map +1 -1
  168. package/build-module/tag-cloud/edit.js +1 -0
  169. package/build-module/tag-cloud/edit.js.map +1 -1
  170. package/build-module/template-part/edit/index.js +1 -1
  171. package/build-module/template-part/edit/index.js.map +1 -1
  172. package/build-module/text-columns/edit.js +1 -0
  173. package/build-module/text-columns/edit.js.map +1 -1
  174. package/build-style/details/style-rtl.css +4 -2
  175. package/build-style/details/style.css +4 -2
  176. package/build-style/footnotes/style-rtl.css +4 -3
  177. package/build-style/footnotes/style.css +4 -3
  178. package/build-style/navigation/style-rtl.css +14 -2
  179. package/build-style/navigation/style.css +14 -2
  180. package/build-style/query-pagination/style-rtl.css +4 -2
  181. package/build-style/query-pagination/style.css +4 -2
  182. package/build-style/style-rtl.css +26 -9
  183. package/build-style/style.css +26 -9
  184. package/package.json +33 -32
  185. package/src/audio/test/__snapshots__/edit.native.js.snap +58 -33
  186. package/src/avatar/edit.js +1 -0
  187. package/src/block/block.json +2 -1
  188. package/src/block/editor.native.scss +2 -2
  189. package/src/buttons/edit.js +2 -2
  190. package/src/column/edit.native.js +4 -10
  191. package/src/column/editor.native.scss +0 -4
  192. package/src/columns/edit.js +1 -0
  193. package/src/comment-author-avatar/edit.js +1 -0
  194. package/src/comment-template/index.php +5 -2
  195. package/src/cover/deprecated.js +2 -0
  196. package/src/embed/embed-placeholder.native.js +80 -47
  197. package/src/embed/styles.native.scss +54 -18
  198. package/src/embed/test/index.native.js +5 -5
  199. package/src/file/block.json +1 -2
  200. package/src/file/index.php +19 -1
  201. package/src/file/inspector.js +1 -0
  202. package/src/file/test/__snapshots__/edit.native.js.snap +58 -33
  203. package/src/file/view-interactivity.js +18 -0
  204. package/src/file/view.js +5 -14
  205. package/src/footnotes/block.json +0 -1
  206. package/src/footnotes/edit.js +21 -2
  207. package/src/footnotes/format.js +22 -20
  208. package/src/footnotes/style.scss +6 -3
  209. package/src/gallery/edit.js +1 -1
  210. package/src/gallery/test/index.native.js +17 -16
  211. package/src/home-link/index.php +15 -2
  212. package/src/image/index.php +47 -8
  213. package/src/image/test/edit.native.js +1 -1
  214. package/src/latest-comments/edit.js +1 -0
  215. package/src/latest-posts/edit.js +2 -0
  216. package/src/list/edit.js +6 -4
  217. package/src/list/test/edit.native.js +129 -33
  218. package/src/media-text/media-container.native.js +1 -0
  219. package/src/missing/edit.native.js +12 -10
  220. package/src/missing/style.native.scss +19 -12
  221. package/src/missing/test/__snapshots__/edit.native.js.snap +21 -13
  222. package/src/navigation/block.json +2 -3
  223. package/src/navigation/constants.js +12 -6
  224. package/src/navigation/edit/index.js +29 -1
  225. package/src/navigation/edit/inner-blocks.js +2 -2
  226. package/src/navigation/edit/unsaved-inner-blocks.js +2 -2
  227. package/src/navigation/edit/use-convert-classic-menu-to-block-menu.js +17 -21
  228. package/src/navigation/index.php +24 -6
  229. package/src/navigation/style.scss +27 -8
  230. package/src/navigation/use-navigation-menu.js +39 -63
  231. package/src/navigation/view-interactivity.js +196 -0
  232. package/src/navigation/view-modal.js +78 -0
  233. package/src/navigation/view.js +67 -189
  234. package/src/navigation-link/edit.js +61 -47
  235. package/src/navigation-submenu/edit.js +2 -2
  236. package/src/paragraph/test/__snapshots__/edit.native.js.snap +1 -0
  237. package/src/paragraph/test/edit.native.js +26 -0
  238. package/src/post-template/index.php +4 -2
  239. package/src/post-title/index.php +6 -3
  240. package/src/preformatted/test/__snapshots__/edit.native.js.snap +2 -0
  241. package/src/query-pagination/edit.js +17 -14
  242. package/src/query-title/edit.js +48 -6
  243. package/src/quote/test/__snapshots__/transforms.native.js.snap +10 -0
  244. package/src/quote/test/transforms.native.js +5 -1
  245. package/src/quote/transforms.js +13 -0
  246. package/src/rss/edit.js +3 -0
  247. package/src/search/block.json +1 -0
  248. package/src/search/edit.js +4 -3
  249. package/src/search/index.php +22 -4
  250. package/src/search/test/__snapshots__/edit.native.js.snap +7 -0
  251. package/src/site-logo/edit.js +1 -0
  252. package/src/tag-cloud/edit.js +1 -0
  253. package/src/template-part/edit/index.js +1 -1
  254. package/src/template-part/index.php +9 -15
  255. package/src/text-columns/edit.js +1 -0
  256. package/build/gallery/shared-icon.native.js +0 -38
  257. package/build/gallery/shared-icon.native.js.map +0 -1
  258. package/build-module/gallery/shared-icon.native.js +0 -24
  259. package/build-module/gallery/shared-icon.native.js.map +0 -1
  260. package/src/gallery/shared-icon.native.js +0 -23
package/src/navigation/view.js CHANGED
@@ -1,196 +1,74 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { store as wpStore } from '@wordpress/interactivity';
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
+ }
5
9
 
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
- ];
10
+ function toggleSubmenuOnClick( event ) {
11
+ const buttonToggle = event.target.closest( '[aria-expanded]' );
12
+ const isSubmenuOpen = buttonToggle.getAttribute( 'aria-expanded' );
15
13
 
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' );
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' );
23
33
  }
24
- };
34
+ }
25
35
 
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
- };
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
+ );
45
42
 
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
- }
43
+ submenuButtons.forEach( function ( button ) {
44
+ button.addEventListener( 'click', toggleSubmenuOnClick );
45
+ } );
150
46
 
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
- },
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
+ } );
196
74
  } );
package/src/navigation-link/edit.js CHANGED
@@ -181,6 +181,10 @@ export default function NavigationLinkEdit( {
181
181
  const itemLabelPlaceholder = __( 'Add label…' );
182
182
  const ref = useRef();
183
183
 
184
+ // Change the label using inspector causes rich text to change focus on firefox.
185
+ // This is a workaround to keep the focus on the label field when label filed is focused we don't render the rich text.
186
+ const [ isLabelFieldFocused, setIsLabelFieldFocused ] = useState( false );
187
+
184
188
  const {
185
189
  innerBlocks,
186
190
  isAtMaxNesting,
@@ -368,8 +372,8 @@ export default function NavigationLinkEdit( {
368
372
  },
369
373
  {
370
374
  allowedBlocks: ALLOWED_BLOCKS,
371
- __experimentalDefaultBlock: DEFAULT_BLOCK,
372
- __experimentalDirectInsert: true,
375
+ defaultBlock: DEFAULT_BLOCK,
376
+ directInsert: true,
373
377
  renderAppender: false,
374
378
  }
375
379
  );
@@ -424,6 +428,8 @@ export default function NavigationLinkEdit( {
424
428
  } }
425
429
  label={ __( 'Label' ) }
426
430
  autoComplete="off"
431
+ onFocus={ () => setIsLabelFieldFocused( true ) }
432
+ onBlur={ () => setIsLabelFieldFocused( false ) }
427
433
  />
428
434
  <TextControl
429
435
  __nextHasNoMarginBottom
@@ -492,52 +498,56 @@ export default function NavigationLinkEdit( {
492
498
  </div>
493
499
  ) : (
494
500
  <>
495
- { ! isInvalid && ! isDraft && (
496
- <>
497
- <RichText
498
- ref={ ref }
499
- identifier="label"
500
- className="wp-block-navigation-item__label"
501
- value={ label }
502
- onChange={ ( labelValue ) =>
503
- setAttributes( {
504
- label: labelValue,
505
- } )
506
- }
507
- onMerge={ mergeBlocks }
508
- onReplace={ onReplace }
509
- __unstableOnSplitAtEnd={ () =>
510
- insertBlocksAfter(
511
- createBlock(
512
- 'core/navigation-link'
501
+ { ! isInvalid &&
502
+ ! isDraft &&
503
+ ! isLabelFieldFocused && (
504
+ <>
505
+ <RichText
506
+ ref={ ref }
507
+ identifier="label"
508
+ className="wp-block-navigation-item__label"
509
+ value={ label }
510
+ onChange={ ( labelValue ) =>
511
+ setAttributes( {
512
+ label: labelValue,
513
+ } )
514
+ }
515
+ onMerge={ mergeBlocks }
516
+ onReplace={ onReplace }
517
+ __unstableOnSplitAtEnd={ () =>
518
+ insertBlocksAfter(
519
+ createBlock(
520
+ 'core/navigation-link'
521
+ )
513
522
  )
514
- )
515
- }
516
- aria-label={ __(
517
- 'Navigation link text'
518
- ) }
519
- placeholder={ itemLabelPlaceholder }
520
- withoutInteractiveFormatting
521
- allowedFormats={ [
522
- 'core/bold',
523
- 'core/italic',
524
- 'core/image',
525
- 'core/strikethrough',
526
- ] }
527
- onClick={ () => {
528
- if ( ! url ) {
529
- setIsLinkOpen( true );
530
523
  }
531
- } }
532
- />
533
- { description && (
534
- <span className="wp-block-navigation-item__description">
535
- { description }
536
- </span>
537
- ) }
538
- </>
539
- ) }
540
- { ( isInvalid || isDraft ) && (
524
+ aria-label={ __(
525
+ 'Navigation link text'
526
+ ) }
527
+ placeholder={ itemLabelPlaceholder }
528
+ withoutInteractiveFormatting
529
+ allowedFormats={ [
530
+ 'core/bold',
531
+ 'core/italic',
532
+ 'core/image',
533
+ 'core/strikethrough',
534
+ ] }
535
+ onClick={ () => {
536
+ if ( ! url ) {
537
+ setIsLinkOpen( true );
538
+ }
539
+ } }
540
+ />
541
+ { description && (
542
+ <span className="wp-block-navigation-item__description">
543
+ { description }
544
+ </span>
545
+ ) }
546
+ </>
547
+ ) }
548
+ { ( isInvalid ||
549
+ isDraft ||
550
+ isLabelFieldFocused ) && (
541
551
  <div className="wp-block-navigation-link__placeholder-text wp-block-navigation-link__label">
542
552
  <Tooltip
543
553
  position="top center"
@@ -557,7 +567,11 @@ export default function NavigationLinkEdit( {
557
567
  // See `updateAttributes` for more details.
558
568
  `${ decodeEntities(
559
569
  label
560
- ) } ${ placeholderText }`.trim()
570
+ ) } ${
571
+ isInvalid || isDraft
572
+ ? placeholderText
573
+ : ''
574
+ }`.trim()
561
575
  }
562
576
  </span>
563
577
  <span className="wp-block-navigation-link__missing_text-tooltip">
package/src/navigation-submenu/edit.js CHANGED
@@ -320,8 +320,8 @@ export default function NavigationSubmenuEdit( {
320
320
  getNavigationChildBlockProps( innerBlocksColors );
321
321
  const innerBlocksProps = useInnerBlocksProps( navigationChildBlockProps, {
322
322
  allowedBlocks,
323
- __experimentalDefaultBlock: DEFAULT_BLOCK,
324
- __experimentalDirectInsert: true,
323
+ defaultBlock: DEFAULT_BLOCK,
324
+ directInsert: true,
325
325
 
326
326
  // Ensure block toolbar is not too far removed from item
327
327
  // being edited.
package/src/paragraph/test/__snapshots__/edit.native.js.snap CHANGED
@@ -32,6 +32,7 @@ exports[`Paragraph block should render without crashing and match snapshot 1`] =
32
32
  onSelectionChange={[Function]}
33
33
  placeholder="Start writing…"
34
34
  placeholderTextColor="gray"
35
+ selectionColor="black"
35
36
  triggerKeyCodes={[]}
36
37
  value=""
37
38
  />
package/src/paragraph/test/edit.native.js CHANGED
@@ -639,4 +639,30 @@ describe( 'Paragraph block', () => {
639
639
  );
640
640
  expect( contrastCheckElement ).toBeDefined();
641
641
  } );
642
+
643
+ it( 'should highlight text with selection', async () => {
644
+ // Arrange
645
+ const screen = await initializeEditor( { withGlobalStyles: true } );
646
+ await addBlock( screen, 'Paragraph' );
647
+
648
+ // Act
649
+ const paragraphBlock = getBlock( screen, 'Paragraph' );
650
+ fireEvent.press( paragraphBlock );
651
+ const paragraphTextInput =
652
+ within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
653
+ typeInRichText(
654
+ paragraphTextInput,
655
+ 'A quick brown fox jumps over the lazy dog.',
656
+ { finalSelectionStart: 2, finalSelectionEnd: 7 }
657
+ );
658
+ fireEvent.press( screen.getByLabelText( 'Text color' ) );
659
+ fireEvent.press( await screen.findByLabelText( 'Tertiary' ) );
660
+
661
+ // Assert
662
+ expect( getEditorHtml() ).toMatchInlineSnapshot( `
663
+ "<!-- wp:paragraph -->
664
+ <p>A <mark style="background-color:rgba(0, 0, 0, 0);color:#2411a4" class="has-inline-color has-tertiary-color">quick</mark> brown fox jumps over the lazy dog.</p>
665
+ <!-- /wp:paragraph -->"
666
+ ` );
667
+ } );
642
668
  } );
package/src/post-template/index.php CHANGED
@@ -97,11 +97,13 @@ function render_block_core_post_template( $attributes, $content, $block ) {
97
97
  $context['postId'] = $post_id;
98
98
  return $context;
99
99
  };
100
- add_filter( 'render_block_context', $filter_block_context );
100
+
101
+ // Use an early priority to so that other 'render_block_context' filters have access to the values.
102
+ add_filter( 'render_block_context', $filter_block_context, 1 );
101
103
  // Render the inner blocks of the Post Template block with `dynamic` set to `false` to prevent calling
102
104
  // `render_callback` and ensure that no wrapper markup is included.
103
105
  $block_content = ( new WP_Block( $block_instance ) )->render( array( 'dynamic' => false ) );
104
- remove_filter( 'render_block_context', $filter_block_context );
106
+ remove_filter( 'render_block_context', $filter_block_context, 1 );
105
107
 
106
108
  // Wrap the render inner blocks in a `li` element with the appropriate post classes.
107
109
  $post_classes = implode( ' ', get_post_class( 'wp-block-post' ) );
package/src/post-title/index.php CHANGED
@@ -19,8 +19,11 @@ function render_block_core_post_title( $attributes, $content, $block ) {
19
19
  return '';
20
20
  }
21
21
 
22
- $post = get_post( $block->context['postId'] );
23
- $title = get_the_title( $post );
22
+ /**
23
+ * The `$post` argument is intentionally omitted so that changes are reflected when previewing a post.
24
+ * See: https://github.com/WordPress/gutenberg/pull/37622#issuecomment-1000932816.
25
+ */
26
+ $title = get_the_title();
24
27
 
25
28
  if ( ! $title ) {
26
29
  return '';
@@ -33,7 +36,7 @@ function render_block_core_post_title( $attributes, $content, $block ) {
33
36
 
34
37
  if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
35
38
  $rel = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
36
- $title = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', get_the_permalink( $post ), esc_attr( $attributes['linkTarget'] ), $rel, $title );
39
+ $title = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', get_the_permalink( $block->context['postId'] ), esc_attr( $attributes['linkTarget'] ), $rel, $title );
37
40
  }
38
41
 
39
42
  $classes = array();
package/src/preformatted/test/__snapshots__/edit.native.js.snap CHANGED
@@ -39,6 +39,7 @@ exports[`Preformatted should match snapshot when content is empty 1`] = `
39
39
  onSelectionChange={[Function]}
40
40
  placeholder="Write preformatted text…"
41
41
  placeholderTextColor="gray"
42
+ selectionColor="black"
42
43
  triggerKeyCodes={[]}
43
44
  value=""
44
45
  />
@@ -85,6 +86,7 @@ exports[`Preformatted should match snapshot when content is not empty 1`] = `
85
86
  onSelectionChange={[Function]}
86
87
  placeholder="Write preformatted text…"
87
88
  placeholderTextColor="gray"
89
+ selectionColor="black"
88
90
  triggerKeyCodes={[]}
89
91
  value="<pre>Hello World!</pre>"
90
92
  />
package/src/query-pagination/edit.js CHANGED
@@ -34,20 +34,23 @@ export default function QueryPaginationEdit( {
34
34
  setAttributes,
35
35
  clientId,
36
36
  } ) {
37
- const hasNextPreviousBlocks = useSelect( ( select ) => {
38
- const { getBlocks } = select( blockEditorStore );
39
- const innerBlocks = getBlocks( clientId );
40
- /**
41
- * Show the `paginationArrow` and `showLabel` controls only if a
42
- * `QueryPaginationNext/Previous` block exists.
43
- */
44
- return innerBlocks?.find( ( innerBlock ) => {
45
- return [
46
- 'core/query-pagination-next',
47
- 'core/query-pagination-previous',
48
- ].includes( innerBlock.name );
49
- } );
50
- }, [] );
37
+ const hasNextPreviousBlocks = useSelect(
38
+ ( select ) => {
39
+ const { getBlocks } = select( blockEditorStore );
40
+ const innerBlocks = getBlocks( clientId );
41
+ /**
42
+ * Show the `paginationArrow` and `showLabel` controls only if a
43
+ * `QueryPaginationNext/Previous` block exists.
44
+ */
45
+ return innerBlocks?.find( ( innerBlock ) => {
46
+ return [
47
+ 'core/query-pagination-next',
48
+ 'core/query-pagination-previous',
49
+ ].includes( innerBlock.name );
50
+ } );
51
+ },
52
+ [ clientId ]
53
+ );
51
54
  const blockProps = useBlockProps();
52
55
  const innerBlocksProps = useInnerBlocksProps( blockProps, {
53
56
  template: TEMPLATE,
package/src/query-title/edit.js CHANGED
@@ -13,9 +13,11 @@ import {
13
13
  useBlockProps,
14
14
  Warning,
15
15
  HeadingLevelDropdown,
16
+ store as blockEditorStore,
16
17
  } from '@wordpress/block-editor';
17
18
  import { ToggleControl, PanelBody } from '@wordpress/components';
18
- import { __ } from '@wordpress/i18n';
19
+ import { __, sprintf } from '@wordpress/i18n';
20
+ import { useSelect } from '@wordpress/data';
19
21
 
20
22
  const SUPPORTED_TYPES = [ 'archive', 'search' ];
21
23
 
@@ -23,6 +25,18 @@ export default function QueryTitleEdit( {
23
25
  attributes: { type, level, textAlign, showPrefix, showSearchTerm },
24
26
  setAttributes,
25
27
  } ) {
28
+ const { archiveTypeTitle, archiveNameLabel } = useSelect( ( select ) => {
29
+ const { getSettings } = select( blockEditorStore );
30
+ const {
31
+ __experimentalArchiveTitleNameLabel,
32
+ __experimentalArchiveTitleTypeLabel,
33
+ } = getSettings();
34
+ return {
35
+ archiveTypeTitle: __experimentalArchiveTitleTypeLabel,
36
+ archiveNameLabel: __experimentalArchiveTitleNameLabel,
37
+ };
38
+ } );
39
+
26
40
  const TagName = `h${ level }`;
27
41
  const blockProps = useBlockProps( {
28
42
  className: classnames( 'wp-block-query-title__placeholder', {
@@ -40,6 +54,38 @@ export default function QueryTitleEdit( {
40
54
 
41
55
  let titleElement;
42
56
  if ( type === 'archive' ) {
57
+ let title;
58
+ if ( archiveTypeTitle ) {
59
+ if ( showPrefix ) {
60
+ if ( archiveNameLabel ) {
61
+ title = sprintf(
62
+ /* translators: 1: Archive type title e.g: "Category", 2: Label of the archive e.g: "Shoes" */
63
+ __( '%1$s: %2$s' ),
64
+ archiveTypeTitle,
65
+ archiveNameLabel
66
+ );
67
+ } else {
68
+ title = sprintf(
69
+ /* translators: %s: Archive type title e.g: "Category", "Tag"... */
70
+ __( '%s: Name' ),
71
+ archiveTypeTitle
72
+ );
73
+ }
74
+ } else if ( archiveNameLabel ) {
75
+ title = archiveNameLabel;
76
+ } else {
77
+ title = sprintf(
78
+ /* translators: %s: Archive type title e.g: "Category", "Tag"... */
79
+ __( '%s name' ),
80
+ archiveTypeTitle
81
+ );
82
+ }
83
+ } else {
84
+ title = showPrefix
85
+ ? __( 'Archive type: Name' )
86
+ : __( 'Archive title' );
87
+ }
88
+
43
89
  titleElement = (
44
90
  <>
45
91
  <InspectorControls>
@@ -54,11 +100,7 @@ export default function QueryTitleEdit( {
54
100
  />
55
101
  </PanelBody>
56
102
  </InspectorControls>
57
- <TagName { ...blockProps }>
58
- { showPrefix
59
- ? __( 'Archive type: Name' )
60
- : __( 'Archive title' ) }
61
- </TagName>
103
+ <TagName { ...blockProps }>{ title }</TagName>
62
104
  </>
63
105
  );
64
106
  }
package/src/quote/test/__snapshots__/transforms.native.js.snap CHANGED
@@ -22,6 +22,16 @@ exports[`Quote block transforms to Group block 1`] = `
22
22
  <!-- /wp:group -->"
23
23
  `;
24
24
 
25
+ exports[`Quote block transforms to Paragraph block 1`] = `
26
+ "<!-- wp:paragraph -->
27
+ <p>"This will make running your own blog a viable alternative again."</p>
28
+ <!-- /wp:paragraph -->
29
+
30
+ <!-- wp:paragraph -->
31
+ <p>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></p>
32
+ <!-- /wp:paragraph -->"
33
+ `;
34
+
25
35
  exports[`Quote block transforms to Pullquote block 1`] = `
26
36
  "<!-- wp:pullquote -->
27
37
  <figure class="wp-block-pullquote"><blockquote><p>"This will make running your own blog a viable alternative again."</p><cite>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></cite></blockquote></figure>
package/src/quote/test/transforms.native.js CHANGED
@@ -21,7 +21,11 @@ const initialHtml = `
21
21
  <!-- /wp:quote -->`;
22
22
 
23
23
  const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
24
- const blockTransforms = [ 'Pullquote', ...transformsWithInnerBlocks ];
24
+ const blockTransforms = [
25
+ 'Pullquote',
26
+ 'Paragraph',
27
+ ...transformsWithInnerBlocks,
28
+ ];
25
29
 
26
30
  setupCoreBlocks();
27
31