@wordpress/block-library 8.14.0 → 8.16.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 (365) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/build/avatar/edit.js +1 -0
  3. package/build/avatar/edit.js.map +1 -1
  4. package/build/avatar/index.js +3 -0
  5. package/build/avatar/index.js.map +1 -1
  6. package/build/block/edit.js +2 -30
  7. package/build/block/edit.js.map +1 -1
  8. package/build/block/index.js +2 -1
  9. package/build/block/index.js.map +1 -1
  10. package/build/buttons/edit.js +2 -2
  11. package/build/buttons/edit.js.map +1 -1
  12. package/build/column/edit.native.js +1 -4
  13. package/build/column/edit.native.js.map +1 -1
  14. package/build/columns/edit.js +1 -0
  15. package/build/columns/edit.js.map +1 -1
  16. package/build/comment-author-avatar/edit.js +1 -0
  17. package/build/comment-author-avatar/edit.js.map +1 -1
  18. package/build/cover/deprecated.js +4 -2
  19. package/build/cover/deprecated.js.map +1 -1
  20. package/build/cover/index.js +2 -1
  21. package/build/cover/index.js.map +1 -1
  22. package/build/embed/embed-placeholder.native.js +37 -13
  23. package/build/embed/embed-placeholder.native.js.map +1 -1
  24. package/build/file/index.js +1 -2
  25. package/build/file/index.js.map +1 -1
  26. package/build/file/inspector.js +1 -0
  27. package/build/file/inspector.js.map +1 -1
  28. package/build/file/view-interactivity.js +23 -0
  29. package/build/file/view-interactivity.js.map +1 -0
  30. package/build/file/view.js +1 -15
  31. package/build/file/view.js.map +1 -1
  32. package/build/footnotes/edit.js +31 -1
  33. package/build/footnotes/edit.js.map +1 -1
  34. package/build/footnotes/format.js +119 -23
  35. package/build/footnotes/format.js.map +1 -1
  36. package/build/footnotes/index.js +45 -4
  37. package/build/footnotes/index.js.map +1 -1
  38. package/build/gallery/edit.js +8 -6
  39. package/build/gallery/edit.js.map +1 -1
  40. package/build/image/deprecated.js +106 -2
  41. package/build/image/deprecated.js.map +1 -1
  42. package/build/image/image.js +2 -2
  43. package/build/image/image.js.map +1 -1
  44. package/build/image/index.js +2 -1
  45. package/build/image/index.js.map +1 -1
  46. package/build/index.js +3 -1
  47. package/build/index.js.map +1 -1
  48. package/build/latest-comments/edit.js +1 -0
  49. package/build/latest-comments/edit.js.map +1 -1
  50. package/build/latest-posts/edit.js +2 -0
  51. package/build/latest-posts/edit.js.map +1 -1
  52. package/build/list/edit.js +4 -4
  53. package/build/list/edit.js.map +1 -1
  54. package/build/list-item/hooks/use-merge.js +10 -1
  55. package/build/list-item/hooks/use-merge.js.map +1 -1
  56. package/build/media-text/media-container.native.js +2 -1
  57. package/build/media-text/media-container.native.js.map +1 -1
  58. package/build/missing/edit.native.js +7 -5
  59. package/build/missing/edit.native.js.map +1 -1
  60. package/build/navigation/constants.js +10 -4
  61. package/build/navigation/constants.js.map +1 -1
  62. package/build/navigation/edit/index.js +16 -2
  63. package/build/navigation/edit/index.js.map +1 -1
  64. package/build/navigation/edit/inner-blocks.js +2 -2
  65. package/build/navigation/edit/inner-blocks.js.map +1 -1
  66. package/build/navigation/edit/menu-inspector-controls.js +1 -1
  67. package/build/navigation/edit/menu-inspector-controls.js.map +1 -1
  68. package/build/navigation/edit/navigation-menu-selector.js +4 -4
  69. package/build/navigation/edit/navigation-menu-selector.js.map +1 -1
  70. package/build/navigation/edit/unsaved-inner-blocks.js +2 -2
  71. package/build/navigation/edit/unsaved-inner-blocks.js.map +1 -1
  72. package/build/navigation/edit/use-convert-classic-menu-to-block-menu.js +10 -15
  73. package/build/navigation/edit/use-convert-classic-menu-to-block-menu.js.map +1 -1
  74. package/build/navigation/index.js +2 -3
  75. package/build/navigation/index.js.map +1 -1
  76. package/build/navigation/use-navigation-menu.js +33 -45
  77. package/build/navigation/use-navigation-menu.js.map +1 -1
  78. package/build/navigation/view-interactivity.js +185 -0
  79. package/build/navigation/view-interactivity.js.map +1 -0
  80. package/build/navigation/view-modal.js +125 -0
  81. package/build/navigation/view-modal.js.map +1 -0
  82. package/build/navigation/view.js +71 -163
  83. package/build/navigation/view.js.map +1 -1
  84. package/build/navigation-link/edit.js +12 -7
  85. package/build/navigation-link/edit.js.map +1 -1
  86. package/build/navigation-submenu/edit.js +2 -2
  87. package/build/navigation-submenu/edit.js.map +1 -1
  88. package/build/pattern/edit.js +28 -4
  89. package/build/pattern/edit.js.map +1 -1
  90. package/build/preformatted/index.js +4 -0
  91. package/build/preformatted/index.js.map +1 -1
  92. package/build/query-pagination/edit.js +1 -1
  93. package/build/query-pagination/edit.js.map +1 -1
  94. package/build/query-title/edit.js +43 -1
  95. package/build/query-title/edit.js.map +1 -1
  96. package/build/quote/transforms.js +8 -0
  97. package/build/quote/transforms.js.map +1 -1
  98. package/build/rss/edit.js +3 -0
  99. package/build/rss/edit.js.map +1 -1
  100. package/build/search/edit.js +4 -3
  101. package/build/search/edit.js.map +1 -1
  102. package/build/search/index.js +1 -0
  103. package/build/search/index.js.map +1 -1
  104. package/build/search/view.js +166 -62
  105. package/build/search/view.js.map +1 -1
  106. package/build/site-logo/edit.js +1 -0
  107. package/build/site-logo/edit.js.map +1 -1
  108. package/build/social-link/icons/index.js +13 -0
  109. package/build/social-link/icons/index.js.map +1 -1
  110. package/build/social-link/icons/threads.js +25 -0
  111. package/build/social-link/icons/threads.js.map +1 -0
  112. package/build/social-link/variations.js +7 -0
  113. package/build/social-link/variations.js.map +1 -1
  114. package/build/tag-cloud/edit.js +1 -0
  115. package/build/tag-cloud/edit.js.map +1 -1
  116. package/build/template-part/edit/import-controls.js +1 -1
  117. package/build/template-part/edit/import-controls.js.map +1 -1
  118. package/build/template-part/edit/index.js +1 -1
  119. package/build/template-part/edit/index.js.map +1 -1
  120. package/build/text-columns/edit.js +1 -0
  121. package/build/text-columns/edit.js.map +1 -1
  122. package/build-module/avatar/edit.js +1 -0
  123. package/build-module/avatar/edit.js.map +1 -1
  124. package/build-module/avatar/index.js +3 -0
  125. package/build-module/avatar/index.js.map +1 -1
  126. package/build-module/block/edit.js +4 -29
  127. package/build-module/block/edit.js.map +1 -1
  128. package/build-module/block/index.js +2 -1
  129. package/build-module/block/index.js.map +1 -1
  130. package/build-module/buttons/edit.js +2 -2
  131. package/build-module/buttons/edit.js.map +1 -1
  132. package/build-module/column/edit.native.js +1 -4
  133. package/build-module/column/edit.native.js.map +1 -1
  134. package/build-module/columns/edit.js +1 -0
  135. package/build-module/columns/edit.js.map +1 -1
  136. package/build-module/comment-author-avatar/edit.js +1 -0
  137. package/build-module/comment-author-avatar/edit.js.map +1 -1
  138. package/build-module/cover/deprecated.js +4 -2
  139. package/build-module/cover/deprecated.js.map +1 -1
  140. package/build-module/cover/index.js +2 -1
  141. package/build-module/cover/index.js.map +1 -1
  142. package/build-module/embed/embed-placeholder.native.js +37 -14
  143. package/build-module/embed/embed-placeholder.native.js.map +1 -1
  144. package/build-module/file/index.js +1 -2
  145. package/build-module/file/index.js.map +1 -1
  146. package/build-module/file/inspector.js +1 -0
  147. package/build-module/file/inspector.js.map +1 -1
  148. package/build-module/file/view-interactivity.js +19 -0
  149. package/build-module/file/view-interactivity.js.map +1 -0
  150. package/build-module/file/view.js +2 -15
  151. package/build-module/file/view.js.map +1 -1
  152. package/build-module/footnotes/edit.js +29 -2
  153. package/build-module/footnotes/edit.js.map +1 -1
  154. package/build-module/footnotes/format.js +120 -25
  155. package/build-module/footnotes/format.js.map +1 -1
  156. package/build-module/footnotes/index.js +45 -4
  157. package/build-module/footnotes/index.js.map +1 -1
  158. package/build-module/gallery/edit.js +8 -6
  159. package/build-module/gallery/edit.js.map +1 -1
  160. package/build-module/image/deprecated.js +107 -3
  161. package/build-module/image/deprecated.js.map +1 -1
  162. package/build-module/image/image.js +2 -2
  163. package/build-module/image/image.js.map +1 -1
  164. package/build-module/image/index.js +2 -1
  165. package/build-module/image/index.js.map +1 -1
  166. package/build-module/index.js +3 -1
  167. package/build-module/index.js.map +1 -1
  168. package/build-module/latest-comments/edit.js +1 -0
  169. package/build-module/latest-comments/edit.js.map +1 -1
  170. package/build-module/latest-posts/edit.js +2 -0
  171. package/build-module/latest-posts/edit.js.map +1 -1
  172. package/build-module/list/edit.js +4 -4
  173. package/build-module/list/edit.js.map +1 -1
  174. package/build-module/list-item/hooks/use-merge.js +10 -1
  175. package/build-module/list-item/hooks/use-merge.js.map +1 -1
  176. package/build-module/media-text/media-container.native.js +2 -1
  177. package/build-module/media-text/media-container.native.js.map +1 -1
  178. package/build-module/missing/edit.native.js +8 -6
  179. package/build-module/missing/edit.native.js.map +1 -1
  180. package/build-module/navigation/constants.js +8 -3
  181. package/build-module/navigation/constants.js.map +1 -1
  182. package/build-module/navigation/edit/index.js +17 -3
  183. package/build-module/navigation/edit/index.js.map +1 -1
  184. package/build-module/navigation/edit/inner-blocks.js +2 -2
  185. package/build-module/navigation/edit/inner-blocks.js.map +1 -1
  186. package/build-module/navigation/edit/menu-inspector-controls.js +1 -1
  187. package/build-module/navigation/edit/menu-inspector-controls.js.map +1 -1
  188. package/build-module/navigation/edit/navigation-menu-selector.js +4 -4
  189. package/build-module/navigation/edit/navigation-menu-selector.js.map +1 -1
  190. package/build-module/navigation/edit/unsaved-inner-blocks.js +2 -2
  191. package/build-module/navigation/edit/unsaved-inner-blocks.js.map +1 -1
  192. package/build-module/navigation/edit/use-convert-classic-menu-to-block-menu.js +10 -14
  193. package/build-module/navigation/edit/use-convert-classic-menu-to-block-menu.js.map +1 -1
  194. package/build-module/navigation/index.js +2 -3
  195. package/build-module/navigation/index.js.map +1 -1
  196. package/build-module/navigation/use-navigation-menu.js +35 -47
  197. package/build-module/navigation/use-navigation-menu.js.map +1 -1
  198. package/build-module/navigation/view-interactivity.js +182 -0
  199. package/build-module/navigation/view-interactivity.js.map +1 -0
  200. package/build-module/navigation/view-modal.js +120 -0
  201. package/build-module/navigation/view-modal.js.map +1 -0
  202. package/build-module/navigation/view.js +72 -163
  203. package/build-module/navigation/view.js.map +1 -1
  204. package/build-module/navigation-link/edit.js +12 -7
  205. package/build-module/navigation-link/edit.js.map +1 -1
  206. package/build-module/navigation-submenu/edit.js +2 -2
  207. package/build-module/navigation-submenu/edit.js.map +1 -1
  208. package/build-module/pattern/edit.js +27 -4
  209. package/build-module/pattern/edit.js.map +1 -1
  210. package/build-module/preformatted/index.js +4 -0
  211. package/build-module/preformatted/index.js.map +1 -1
  212. package/build-module/query-pagination/edit.js +1 -1
  213. package/build-module/query-pagination/edit.js.map +1 -1
  214. package/build-module/query-title/edit.js +44 -3
  215. package/build-module/query-title/edit.js.map +1 -1
  216. package/build-module/quote/transforms.js +8 -0
  217. package/build-module/quote/transforms.js.map +1 -1
  218. package/build-module/rss/edit.js +3 -0
  219. package/build-module/rss/edit.js.map +1 -1
  220. package/build-module/search/edit.js +4 -3
  221. package/build-module/search/edit.js.map +1 -1
  222. package/build-module/search/index.js +1 -0
  223. package/build-module/search/index.js.map +1 -1
  224. package/build-module/search/view.js +166 -62
  225. package/build-module/search/view.js.map +1 -1
  226. package/build-module/site-logo/edit.js +1 -0
  227. package/build-module/site-logo/edit.js.map +1 -1
  228. package/build-module/social-link/icons/index.js +1 -0
  229. package/build-module/social-link/icons/index.js.map +1 -1
  230. package/build-module/social-link/icons/threads.js +15 -0
  231. package/build-module/social-link/icons/threads.js.map +1 -0
  232. package/build-module/social-link/variations.js +8 -1
  233. package/build-module/social-link/variations.js.map +1 -1
  234. package/build-module/tag-cloud/edit.js +1 -0
  235. package/build-module/tag-cloud/edit.js.map +1 -1
  236. package/build-module/template-part/edit/import-controls.js +2 -2
  237. package/build-module/template-part/edit/import-controls.js.map +1 -1
  238. package/build-module/template-part/edit/index.js +1 -1
  239. package/build-module/template-part/edit/index.js.map +1 -1
  240. package/build-module/text-columns/edit.js +1 -0
  241. package/build-module/text-columns/edit.js.map +1 -1
  242. package/build-style/details/style-rtl.css +4 -2
  243. package/build-style/details/style.css +4 -2
  244. package/build-style/footnotes/style-rtl.css +4 -3
  245. package/build-style/footnotes/style.css +4 -3
  246. package/build-style/navigation/style-rtl.css +14 -2
  247. package/build-style/navigation/style.css +14 -2
  248. package/build-style/preformatted/style-rtl.css +2 -1
  249. package/build-style/preformatted/style.css +2 -1
  250. package/build-style/query-pagination/style-rtl.css +4 -2
  251. package/build-style/query-pagination/style.css +4 -2
  252. package/build-style/social-links/style-rtl.css +7 -0
  253. package/build-style/social-links/style.css +7 -0
  254. package/build-style/style-rtl.css +36 -10
  255. package/build-style/style.css +36 -10
  256. package/build-style/video/style-rtl.css +1 -0
  257. package/build-style/video/style.css +1 -0
  258. package/package.json +33 -32
  259. package/src/audio/test/__snapshots__/edit.native.js.snap +118 -33
  260. package/src/avatar/block.json +3 -0
  261. package/src/avatar/edit.js +1 -0
  262. package/src/block/block.json +2 -1
  263. package/src/block/edit.js +1 -39
  264. package/src/block/editor.native.scss +2 -2
  265. package/src/buttons/edit.js +2 -2
  266. package/src/buttons/test/edit.native.js +4 -0
  267. package/src/column/edit.native.js +4 -10
  268. package/src/column/editor.native.scss +0 -4
  269. package/src/columns/edit.js +1 -0
  270. package/src/columns/test/edit.native.js +5 -0
  271. package/src/comment-author-avatar/edit.js +1 -0
  272. package/src/comment-template/index.php +7 -2
  273. package/src/cover/block.json +2 -1
  274. package/src/cover/deprecated.js +2 -0
  275. package/src/cover/test/edit.native.js +8 -0
  276. package/src/embed/embed-placeholder.native.js +80 -47
  277. package/src/embed/styles.native.scss +54 -18
  278. package/src/embed/test/index.native.js +13 -5
  279. package/src/file/block.json +1 -2
  280. package/src/file/index.php +20 -2
  281. package/src/file/inspector.js +1 -0
  282. package/src/file/test/__snapshots__/edit.native.js.snap +119 -33
  283. package/src/file/view-interactivity.js +18 -0
  284. package/src/file/view.js +5 -14
  285. package/src/footnotes/block.json +44 -2
  286. package/src/footnotes/edit.js +33 -2
  287. package/src/footnotes/format.js +90 -25
  288. package/src/footnotes/index.js +0 -1
  289. package/src/footnotes/index.php +207 -0
  290. package/src/footnotes/style.scss +6 -3
  291. package/src/gallery/edit.js +42 -38
  292. package/src/gallery/test/index.native.js +31 -18
  293. package/src/heading/test/index.native.js +4 -0
  294. package/src/home-link/index.php +15 -2
  295. package/src/image/block.json +2 -1
  296. package/src/image/deprecated.js +109 -3
  297. package/src/image/image.js +2 -2
  298. package/src/image/index.php +45 -8
  299. package/src/image/test/edit.native.js +1 -2
  300. package/src/index.js +5 -1
  301. package/src/latest-comments/edit.js +1 -0
  302. package/src/latest-posts/edit.js +2 -0
  303. package/src/list/edit.js +6 -4
  304. package/src/list/test/edit.native.js +134 -33
  305. package/src/list-item/hooks/use-merge.js +12 -5
  306. package/src/media-text/media-container.native.js +1 -0
  307. package/src/missing/edit.native.js +12 -10
  308. package/src/missing/style.native.scss +19 -12
  309. package/src/missing/test/__snapshots__/edit.native.js.snap +42 -13
  310. package/src/navigation/block.json +2 -3
  311. package/src/navigation/constants.js +12 -6
  312. package/src/navigation/edit/index.js +29 -1
  313. package/src/navigation/edit/inner-blocks.js +2 -2
  314. package/src/navigation/edit/menu-inspector-controls.js +1 -1
  315. package/src/navigation/edit/navigation-menu-selector.js +8 -4
  316. package/src/navigation/edit/unsaved-inner-blocks.js +2 -2
  317. package/src/navigation/edit/use-convert-classic-menu-to-block-menu.js +17 -21
  318. package/src/navigation/index.php +50 -18
  319. package/src/navigation/style.scss +27 -8
  320. package/src/navigation/use-navigation-menu.js +39 -63
  321. package/src/navigation/view-interactivity.js +196 -0
  322. package/src/navigation/view-modal.js +127 -0
  323. package/src/navigation/view.js +96 -185
  324. package/src/navigation-link/edit.js +61 -47
  325. package/src/navigation-submenu/edit.js +2 -2
  326. package/src/paragraph/test/__snapshots__/edit.native.js.snap +1 -0
  327. package/src/paragraph/test/edit.native.js +81 -35
  328. package/src/pattern/edit.js +21 -0
  329. package/src/pattern/index.php +13 -1
  330. package/src/post-template/index.php +6 -2
  331. package/src/post-title/index.php +8 -3
  332. package/src/preformatted/block.json +4 -0
  333. package/src/preformatted/style.scss +4 -1
  334. package/src/preformatted/test/__snapshots__/edit.native.js.snap +2 -0
  335. package/src/pullquote/test/edit.native.js +12 -4
  336. package/src/query-pagination/edit.js +17 -14
  337. package/src/query-title/edit.js +48 -6
  338. package/src/quote/test/__snapshots__/transforms.native.js.snap +10 -0
  339. package/src/quote/test/edit.native.js +12 -4
  340. package/src/quote/test/transforms.native.js +5 -1
  341. package/src/quote/transforms.js +13 -0
  342. package/src/rss/edit.js +3 -0
  343. package/src/search/block.json +1 -0
  344. package/src/search/edit.js +4 -3
  345. package/src/search/index.php +26 -4
  346. package/src/search/test/__snapshots__/edit.native.js.snap +70 -0
  347. package/src/search/view.js +171 -67
  348. package/src/site-logo/edit.js +1 -0
  349. package/src/social-link/icons/index.js +1 -0
  350. package/src/social-link/icons/threads.js +10 -0
  351. package/src/social-link/index.php +4 -0
  352. package/src/social-link/socials-with-bg.scss +5 -0
  353. package/src/social-link/socials-without-bg.scss +4 -0
  354. package/src/social-link/variations.js +7 -0
  355. package/src/tag-cloud/edit.js +1 -0
  356. package/src/template-part/edit/import-controls.js +2 -2
  357. package/src/template-part/edit/index.js +1 -1
  358. package/src/template-part/index.php +7 -16
  359. package/src/text-columns/edit.js +1 -0
  360. package/src/video/style.scss +1 -0
  361. package/build/gallery/shared-icon.native.js +0 -38
  362. package/build/gallery/shared-icon.native.js.map +0 -1
  363. package/build-module/gallery/shared-icon.native.js +0 -24
  364. package/build-module/gallery/shared-icon.native.js.map +0 -1
  365. package/src/gallery/shared-icon.native.js +0 -23
package/src/navigation/view.js CHANGED
@@ -1,196 +1,107 @@
1
+ /*eslint-env browser*/
2
+ // Open on click functionality.
3
+
4
+ /**
5
+ * Keep track of whether a submenu is open to short-circuit delegated event listeners.
6
+ *
7
+ * @type {boolean}
8
+ */
9
+ let hasOpenSubmenu = false;
10
+
11
+ /**
12
+ * Close submenu items for a navigation item.
13
+ *
14
+ * @param {HTMLElement} navigationItem - Either a NAV or LI element.
15
+ */
16
+ function closeSubmenus( navigationItem ) {
17
+ navigationItem
18
+ .querySelectorAll( '[aria-expanded="true"]' )
19
+ .forEach( function ( toggle ) {
20
+ toggle.setAttribute( 'aria-expanded', 'false' );
21
+ } );
22
+ hasOpenSubmenu = false;
23
+ }
24
+
1
25
  /**
2
- * WordPress dependencies
26
+ * Toggle submenu on click.
27
+ *
28
+ * @param {HTMLButtonElement} buttonToggle
3
29
  */
4
- import { store as wpStore } from '@wordpress/interactivity';
30
+ function toggleSubmenuOnClick( buttonToggle ) {
31
+ const isSubmenuOpen =
32
+ buttonToggle.getAttribute( 'aria-expanded' ) === 'true';
33
+ const navigationItem = buttonToggle.closest( '.wp-block-navigation-item' );
5
34
 
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
- ];
35
+ if ( isSubmenuOpen ) {
36
+ closeSubmenus( navigationItem );
37
+ } else {
38
+ // Close all sibling submenus.
39
+ const navigationParent = buttonToggle.closest(
40
+ '.wp-block-navigation__submenu-container, .wp-block-navigation__container, .wp-block-page-list'
41
+ );
42
+ navigationParent
43
+ .querySelectorAll( '.wp-block-navigation-item' )
44
+ .forEach( ( child ) => {
45
+ if ( child !== navigationItem ) {
46
+ closeSubmenus( child );
47
+ }
48
+ } );
15
49
 
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' );
50
+ // Open submenu.
51
+ buttonToggle.setAttribute( 'aria-expanded', 'true' );
52
+ hasOpenSubmenu = true;
23
53
  }
24
- };
54
+ }
25
55
 
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' );
56
+ // Open on button click or close on click outside.
57
+ document.addEventListener(
58
+ 'click',
59
+ function ( event ) {
60
+ const target = event.target;
61
+ const button = target.closest( '.wp-block-navigation-submenu__toggle' );
62
+
63
+ // Close any other open submenus.
64
+ if ( hasOpenSubmenu ) {
65
+ const navigationBlocks = document.querySelectorAll(
66
+ '.wp-block-navigation'
67
+ );
68
+ navigationBlocks.forEach( function ( block ) {
69
+ if ( ! block.contains( target ) ) {
70
+ closeSubmenus( block );
71
+ }
72
+ } );
42
73
  }
43
- }
44
- };
45
74
 
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
- },
75
+ // Now open the submenu if one was clicked.
76
+ if ( button instanceof HTMLButtonElement ) {
77
+ toggleSubmenuOnClick( button );
78
+ }
100
79
  },
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
- }
80
+ { passive: true }
81
+ );
82
+
83
+ // Close on focus outside or escape key.
84
+ document.addEventListener(
85
+ 'keyup',
86
+ function ( event ) {
87
+ // Abort if there aren't any submenus open anyway.
88
+ if ( ! hasOpenSubmenu ) {
89
+ return;
90
+ }
150
91
 
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
- },
92
+ const submenuBlocks = document.querySelectorAll(
93
+ '.wp-block-navigation-item.has-child'
94
+ );
95
+ submenuBlocks.forEach( function ( block ) {
96
+ if ( ! block.contains( event.target ) ) {
97
+ closeSubmenus( block );
98
+ } else if ( event.key === 'Escape' ) {
99
+ const toggle = block.querySelector( '[aria-expanded="true"]' );
100
+ closeSubmenus( block );
101
+ // Focus the submenu trigger so focus does not get trapped in the closed submenu.
102
+ toggle?.focus();
103
+ }
104
+ } );
195
105
  },
196
- } );
106
+ { passive: true }
107
+ );
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
@@ -13,6 +13,8 @@ import {
13
13
  setupCoreBlocks,
14
14
  waitFor,
15
15
  within,
16
+ withFakeTimers,
17
+ waitForElementToBeRemoved,
16
18
  } from 'test/helpers';
17
19
  import Clipboard from '@react-native-clipboard/clipboard';
18
20
 
@@ -26,6 +28,19 @@ import { ENTER } from '@wordpress/keycodes';
26
28
  */
27
29
  import Paragraph from '../edit';
28
30
 
31
+ // Mock debounce to prevent potentially belated state updates.
32
+ jest.mock( '@wordpress/compose/src/utils/debounce', () => ( {
33
+ debounce: ( fn ) => {
34
+ fn.cancel = jest.fn();
35
+ return fn;
36
+ },
37
+ } ) );
38
+ // Mock link suggestions that are fetched by the link picker
39
+ // when typing a search query.
40
+ jest.mock( '@wordpress/core-data/src/fetch', () => ( {
41
+ __experimentalFetchLinkSuggestions: jest.fn().mockResolvedValue( [ {} ] ),
42
+ } ) );
43
+
29
44
  setupCoreBlocks();
30
45
 
31
46
  const getTestComponentWithContent = ( content ) => {
@@ -238,26 +253,27 @@ describe( 'Paragraph block', () => {
238
253
  // Act
239
254
  const paragraphBlock = getBlock( screen, 'Paragraph' );
240
255
  fireEvent.press( paragraphBlock );
241
- // Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
242
- await act( () => fireEvent.press( screen.getByLabelText( 'Link' ) ) );
243
- // Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
244
- await act( () =>
245
- fireEvent.press(
246
- screen.getByLabelText( 'Link to, Search or type URL' )
247
- )
248
- );
249
- fireEvent.changeText(
250
- screen.getByPlaceholderText( 'Search or type URL' ),
251
- 'wordpress.org'
252
- );
256
+ fireEvent.press( screen.getByLabelText( 'Link' ) );
257
+
253
258
  fireEvent.changeText(
254
- screen.getByPlaceholderText( 'Add link text', { hidden: true } ),
259
+ screen.getByPlaceholderText( 'Add link text' ),
255
260
  'WordPress'
256
261
  );
257
- jest.useFakeTimers();
258
- fireEvent.press( screen.getByLabelText( 'Apply' ) );
259
- // Await link picker navigation delay
260
- act( () => jest.runOnlyPendingTimers() );
262
+ fireEvent.press(
263
+ screen.getByLabelText( 'Link to, Search or type URL' )
264
+ );
265
+ const typeURLInput = await waitFor( () =>
266
+ screen.getByPlaceholderText( 'Search or type URL' )
267
+ );
268
+ fireEvent.changeText( typeURLInput, 'wordpress.org' );
269
+ await waitForElementToBeRemoved( () =>
270
+ screen.getByTestId( 'link-picker-loading' )
271
+ );
272
+ // Back navigation from link picker uses `setTimeout`
273
+ await withFakeTimers( () => {
274
+ fireEvent.press( screen.getByLabelText( 'Apply' ) );
275
+ act( () => jest.runOnlyPendingTimers() );
276
+ } );
261
277
 
262
278
  // Assert
263
279
  expect( getEditorHtml() ).toMatchInlineSnapshot( `
@@ -265,8 +281,6 @@ describe( 'Paragraph block', () => {
265
281
  <p><a href="http://wordpress.org">WordPress</a></p>
266
282
  <!-- /wp:paragraph -->"
267
283
  ` );
268
-
269
- jest.useRealTimers();
270
284
  } );
271
285
 
272
286
  it( 'should link text with selection', async () => {
@@ -287,22 +301,22 @@ describe( 'Paragraph block', () => {
287
301
  finalSelectionEnd: 7,
288
302
  }
289
303
  );
290
- // Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
291
- await act( () => fireEvent.press( screen.getByLabelText( 'Link' ) ) );
292
- // Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
293
- await act( () =>
294
- fireEvent.press(
295
- screen.getByLabelText( 'Link to, Search or type URL' )
296
- )
304
+ fireEvent.press( screen.getByLabelText( 'Link' ) );
305
+ fireEvent.press(
306
+ screen.getByLabelText( 'Link to, Search or type URL' )
297
307
  );
298
- fireEvent.changeText(
299
- screen.getByPlaceholderText( 'Search or type URL' ),
300
- 'wordpress.org'
308
+ const typeURLInput = await waitFor( () =>
309
+ screen.getByPlaceholderText( 'Search or type URL' )
310
+ );
311
+ fireEvent.changeText( typeURLInput, 'wordpress.org' );
312
+ await waitForElementToBeRemoved( () =>
313
+ screen.getByTestId( 'link-picker-loading' )
301
314
  );
302
- jest.useFakeTimers();
303
- fireEvent.press( screen.getByLabelText( 'Apply' ) );
304
- // Await link picker navigation delay
305
- act( () => jest.runOnlyPendingTimers() );
315
+ // Back navigation from link picker uses `setTimeout`
316
+ await withFakeTimers( () => {
317
+ fireEvent.press( screen.getByLabelText( 'Apply' ) );
318
+ act( () => jest.runOnlyPendingTimers() );
319
+ } );
306
320
 
307
321
  // Assert
308
322
  expect( getEditorHtml() ).toMatchInlineSnapshot( `
@@ -310,8 +324,6 @@ describe( 'Paragraph block', () => {
310
324
  <p>A <a href="http://wordpress.org">quick</a> brown fox jumps over the lazy dog.</p>
311
325
  <!-- /wp:paragraph -->"
312
326
  ` );
313
-
314
- jest.useRealTimers();
315
327
  } );
316
328
 
317
329
  it( 'should link text with clipboard contents', async () => {
@@ -402,6 +414,10 @@ describe( 'Paragraph block', () => {
402
414
 
403
415
  // Tap one color
404
416
  fireEvent.press( screen.getByLabelText( 'Pale pink' ) );
417
+ // TODO(jest-console): Fix the warning and remove the expect below.
418
+ expect( console ).toHaveWarnedWith(
419
+ `Non-serializable values were found in the navigation state. Check:\n\nColor > params.onColorChange (Function)\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`
420
+ );
405
421
 
406
422
  // Dismiss the Block Settings modal.
407
423
  fireEvent( blockSettingsModal, 'backdropPress' );
@@ -639,4 +655,34 @@ describe( 'Paragraph block', () => {
639
655
  );
640
656
  expect( contrastCheckElement ).toBeDefined();
641
657
  } );
658
+
659
+ it( 'should highlight text with selection', async () => {
660
+ // Arrange
661
+ const screen = await initializeEditor( { withGlobalStyles: true } );
662
+ await addBlock( screen, 'Paragraph' );
663
+
664
+ // Act
665
+ const paragraphBlock = getBlock( screen, 'Paragraph' );
666
+ fireEvent.press( paragraphBlock );
667
+ const paragraphTextInput =
668
+ within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
669
+ typeInRichText(
670
+ paragraphTextInput,
671
+ 'A quick brown fox jumps over the lazy dog.',
672
+ { finalSelectionStart: 2, finalSelectionEnd: 7 }
673
+ );
674
+ fireEvent.press( screen.getByLabelText( 'Text color' ) );
675
+ fireEvent.press( await screen.findByLabelText( 'Tertiary' ) );
676
+ // TODO(jest-console): Fix the warning and remove the expect below.
677
+ expect( console ).toHaveWarnedWith(
678
+ `Non-serializable values were found in the navigation state. Check:\n\ntext-color > Palette > params.onColorChange (Function)\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`
679
+ );
680
+
681
+ // Assert
682
+ expect( getEditorHtml() ).toMatchInlineSnapshot( `
683
+ "<!-- wp:paragraph -->
684
+ <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>
685
+ <!-- /wp:paragraph -->"
686
+ ` );
687
+ } );
642
688
  } );