Update editor related npm packages for 6.4 RC2.

The npm packages needed update for 6.4 RC2.

Props siobhyb, cbravobernal, DAreRodz, luisherranz, artemiosans, afercia, jameskoster, czapla, alexstine, SantosGuillamot, ramonopoly, isabel_brison, andrewserong, jeryj, joedolson.

Merges [56987] to the 6.4 branch
See #59411.

Built from https://develop.svn.wordpress.org/branches/6.4@56988


git-svn-id: http://core.svn.wordpress.org/branches/6.4@56499 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/blocks/image.php

@@ -235,6 +235,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$button =
 		$img[0]
 		. '<button
+			class="lightbox-trigger"
 			type="button"
 			aria-haspopup="dialog"
 			aria-label="' . esc_attr( $aria_label ) . '"
@@ -243,11 +244,8 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			data-wp-style--top="context.core.image.imageButtonTop"
 			style="background: #000"
 		>
-			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-				<path d="M9 5H5V9" stroke="#FFFFFF" stroke-width="1.5"/>
-				<path d="M15 19L19 19L19 15" stroke="#FFFFFF" stroke-width="1.5"/>
-				<path d="M15 5H19V9" stroke="#FFFFFF" stroke-width="1.5"/>
-				<path d="M9 19L5 19L5 15" stroke="#FFFFFF" stroke-width="1.5"/>
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
+				<Path stroke="#FFFFFF" d="M6 4a2 2 0 0 0-2 2v3h1.5V6a.5.5 0 0 1 .5-.5h3V4H6Zm3 14.5H6a.5.5 0 0 1-.5-.5v-3H4v3a2 2 0 0 0 2 2h3v-1.5Zm6 1.5v-1.5h3a.5.5 0 0 0 .5-.5v-3H20v3a2 2 0 0 1-2 2h-3Zm3-16a2 2 0 0 1 2 2v3h-1.5V6a.5.5 0 0 0-.5-.5h-3V4h3Z" />
 			</svg>
 		</button>';
 
@@ -322,12 +320,13 @@ function block_core_image_render_lightbox( $block_content, $block ) {
             data-wp-on--touchmove="actions.core.image.handleTouchMove"
             data-wp-on--touchend="actions.core.image.handleTouchEnd"
             data-wp-on--click="actions.core.image.hideLightbox"
+            tabindex="-1"
             >
                 <button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
                     $close_button_icon
                 </button>
                 <div class="lightbox-image-container">$initial_image_content</div>
-				<div class="lightbox-image-container">$enlarged_image_content</div>
+                <div class="lightbox-image-container">$enlarged_image_content</div>
                 <div class="scrim" style="background-color: $background_color" aria-hidden="true"></div>
         </div>
 HTML;

wp-includes/blocks/image/view.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'ddf37210a569166e2570');
+<?php return array('dependencies' => array(), 'version' => 'f7ae3ae73f0b1d8e9467');

wp-includes/blocks/image/view.js

@@ -117,8 +117,7 @@ function handleScroll(context) {
           window.addEventListener('scroll', scrollCallback, false);
         },
         hideLightbox: async ({
-          context,
-          event
+          context
         }) => {
           context.core.image.hideAnimationEnabled = true;
           if (context.core.image.lightboxEnabled) {
@@ -130,18 +129,14 @@ function handleScroll(context) {
             // may scroll too soon and cause the animation to look sloppy.
             setTimeout(function () {
               window.removeEventListener('scroll', scrollCallback);
-            }, 450);
-            context.core.image.lightboxEnabled = false;
-
-            // We want to avoid drawing attention to the button
-            // after the lightbox closes for mouse and touch users.
-            // Note that the `event.pointerType` property returns
-            // as an empty string if a keyboard fired the event.
-            if (event.pointerType === '') {
-              context.core.image.lastFocusedElement.focus({
+              // If we don't delay before changing the focus,
+              // the focus ring will appear on Firefox before
+              // the image has finished animating, which looks broken.
+              context.core.image.lightboxTriggerRef.focus({
                 preventScroll: true
               });
-            }
+            }, 450);
+            context.core.image.lightboxEnabled = false;
           }
         },
         handleKeydown: ({
@@ -250,6 +245,7 @@ function handleScroll(context) {
           ref
         }) => {
           context.core.image.imageRef = ref;
+          context.core.image.lightboxTriggerRef = ref.parentElement.querySelector('.lightbox-trigger');
           if (ref.complete) {
             context.core.image.imageLoaded = true;
             context.core.image.imageCurrentSrc = ref.currentSrc;
@@ -264,14 +260,8 @@ function handleScroll(context) {
             context.core.image.firstFocusableElement = focusableElements[0];
             context.core.image.lastFocusableElement = focusableElements[focusableElements.length - 1];
 
-            // We want to avoid drawing unnecessary attention to the close
-            // button for mouse and touch users. Note that even if opening
-            // the lightbox via keyboard, the event fired is of type
-            // `pointerEvent`, so we need to rely on the `event.pointerType`
-            // property, which returns an empty string for keyboard events.
-            if (context.core.image.pointerType === '') {
-              ref.querySelector('.close-button').focus();
-            }
+            // Move focus to the dialog when opening it.
+            ref.focus();
           }
         },
         setButtonStyles: ({

wp-includes/blocks/image/view.min.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'f889b00627bef81443e0');
+<?php return array('dependencies' => array(), 'version' => '1617ea85b28841341ef7');

wp-includes/blocks/navigation.php

@@ -90,6 +90,13 @@ function block_core_navigation_add_directives_to_submenu( $w, $block_attributes
 		$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initMenu' );
 		$w->set_attribute( 'data-wp-on--focusout', 'actions.core.navigation.handleMenuFocusout' );
 		$w->set_attribute( 'data-wp-on--keydown', 'actions.core.navigation.handleMenuKeydown' );
+
+		// This is a fix for Safari. Without it, Safari doesn't change the active
+		// element when the user clicks on a button. It can be removed once we add
+		// an overlay to capture the clicks, instead of relying on the focusout
+		// event.
+		$w->set_attribute( 'tabindex', '-1' );
+
 		if ( ! isset( $block_attributes['openSubmenusOnClick'] ) || false === $block_attributes['openSubmenusOnClick'] ) {
 			$w->set_attribute( 'data-wp-on--mouseenter', 'actions.core.navigation.openMenuOnHover' );
 			$w->set_attribute( 'data-wp-on--mouseleave', 'actions.core.navigation.closeMenuOnHover' );

wp-includes/blocks/navigation/view.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '90985864bc4f9b55787d');
+<?php return array('dependencies' => array(), 'version' => 'b3eba25769c9fe5ec0fa');

wp-includes/blocks/navigation/view.js

@@ -10,14 +10,17 @@
  */
 
 const focusableSelectors = ['a[href]', 'input:not([disabled]):not([type="hidden"]):not([aria-hidden])', 'select:not([disabled]):not([aria-hidden])', 'textarea:not([disabled]):not([aria-hidden])', 'button:not([disabled]):not([aria-hidden])', '[contenteditable]', '[tabindex]:not([tabindex^="-"])'];
+
+// This is a fix for Safari in iOS/iPadOS. Without it, Safari doesn't focus out
+// when the user taps in the body. It can be removed once we add an overlay to
+// capture the clicks, instead of relying on the focusout event.
+document.addEventListener('click', () => {});
 const openMenu = (store, menuOpenedOn) => {
   const {
     context,
-    ref,
     selectors
   } = store;
   selectors.core.navigation.menuOpenedBy(store)[menuOpenedOn] = true;
-  context.core.navigation.previousFocus = ref;
   if (context.core.navigation.type === 'overlay') {
     // Add a `has-modal-open` class to the <html> root.
     document.documentElement.classList.add('has-modal-open');
@@ -32,7 +35,7 @@ const closeMenu = (store, menuClosedOn) => {
   // Check if the menu is still open or not.
   if (!selectors.core.navigation.isMenuOpen(store)) {
     if (context.core.navigation.modal?.contains(window.document.activeElement)) {
-      context.core.navigation.previousFocus.focus();
+      context.core.navigation.previousFocus?.focus();
     }
     context.core.navigation.modal = null;
     context.core.navigation.previousFocus = null;
@@ -120,6 +123,11 @@ const closeMenu = (store, menuClosedOn) => {
           closeMenu(store, 'hover');
         },
         openMenuOnClick(store) {
+          const {
+            context,
+            ref
+          } = store;
+          context.core.navigation.previousFocus = ref;
           openMenu(store, 'click');
         },
         closeMenuOnClick(store) {
@@ -131,13 +139,18 @@ const closeMenu = (store, menuClosedOn) => {
         },
         toggleMenuOnClick: store => {
           const {
-            selectors
+            selectors,
+            context,
+            ref
           } = store;
+          // Safari won't send focus to the clicked element, so we need to manually place it: https://bugs.webkit.org/show_bug.cgi?id=22261
+          if (window.document.activeElement !== ref) ref.focus();
           const menuOpenedBy = selectors.core.navigation.menuOpenedBy(store);
           if (menuOpenedBy.click || menuOpenedBy.focus) {
             closeMenu(store, 'click');
             closeMenu(store, 'focus');
           } else {
+            context.core.navigation.previousFocus = ref;
             openMenu(store, 'click');
           }
         },
@@ -178,7 +191,9 @@ const closeMenu = (store, menuClosedOn) => {
           // event.relatedTarget === The element receiving focus (if any)
           // When focusout is outsite the document,
           // `window.document.activeElement` doesn't change.
-          if (!context.core.navigation.modal?.contains(event.relatedTarget) && event.target !== window.document.activeElement) {
+
+          // The event.relatedTarget is null when something outside the navigation menu is clicked. This is only necessary for Safari.
+          if (event.relatedTarget === null || !context.core.navigation.modal?.contains(event.relatedTarget) && event.target !== window.document.activeElement) {
             closeMenu(store, 'click');
             closeMenu(store, 'focus');
           }

wp-includes/blocks/navigation/view.min.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'a5ffa1bdbe6aee7a5c54');
+<?php return array('dependencies' => array(), 'version' => 'e3d6f3216904b5b42831');

wp-includes/blocks/navigation/view.min.js

@@ -1 +1 @@
-"use strict";(self.__WordPressPrivateInteractivityAPI__=self.__WordPressPrivateInteractivityAPI__||[]).push([[3],{932:function(e,n,o){var t=o(754);const a=["a[href]",'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',"select:not([disabled]):not([aria-hidden])","textarea:not([disabled]):not([aria-hidden])","button:not([disabled]):not([aria-hidden])","[contenteditable]",'[tabindex]:not([tabindex^="-"])'],i=(e,n)=>{const{context:o,ref:t,selectors:a}=e;a.core.navigation.menuOpenedBy(e)[n]=!0,o.core.navigation.previousFocus=t,"overlay"===o.core.navigation.type&&document.documentElement.classList.add("has-modal-open")},c=(e,n)=>{const{context:o,selectors:t}=e;t.core.navigation.menuOpenedBy(e)[n]=!1,t.core.navigation.isMenuOpen(e)||(o.core.navigation.modal?.contains(window.document.activeElement)&&o.core.navigation.previousFocus.focus(),o.core.navigation.modal=null,o.core.navigation.previousFocus=null,"overlay"===o.core.navigation.type&&document.documentElement.classList.remove("has-modal-open"))};(0,t.h)({effects:{core:{navigation:{initMenu:e=>{const{context:n,selectors:o,ref:t}=e;if(o.core.navigation.isMenuOpen(e)){const e=t.querySelectorAll(a);n.core.navigation.modal=t,n.core.navigation.firstFocusableElement=e[0],n.core.navigation.lastFocusableElement=e[e.length-1]}},focusFirstElement:e=>{const{selectors:n,ref:o}=e;n.core.navigation.isMenuOpen(e)&&o.querySelector(".wp-block-navigation-item > *:first-child").focus()}}}},selectors:{core:{navigation:{roleAttribute:e=>{const{context:n,selectors:o}=e;return"overlay"===n.core.navigation.type&&o.core.navigation.isMenuOpen(e)?"dialog":null},ariaModal:e=>{const{context:n,selectors:o}=e;return"overlay"===n.core.navigation.type&&o.core.navigation.isMenuOpen(e)?"true":null},ariaLabel:e=>{const{context:n,selectors:o}=e;return"overlay"===n.core.navigation.type&&o.core.navigation.isMenuOpen(e)?n.core.navigation.ariaLabel:null},isMenuOpen:({context:e})=>Object.values(e.core.navigation["overlay"===e.core.navigation.type?"overlayOpenedBy":"submenuOpenedBy"]).filter(Boolean).length>0,menuOpenedBy:({context:e})=>e.core.navigation["overlay"===e.core.navigation.type?"overlayOpenedBy":"submenuOpenedBy"]}}},actions:{core:{navigation:{openMenuOnHover(e){const{navigation:n}=e.context.core;"submenu"===n.type&&0===Object.values(n.overlayOpenedBy||{}).filter(Boolean).length&&i(e,"hover")},closeMenuOnHover(e){c(e,"hover")},openMenuOnClick(e){i(e,"click")},closeMenuOnClick(e){c(e,"click"),c(e,"focus")},openMenuOnFocus(e){i(e,"focus")},toggleMenuOnClick:e=>{const{selectors:n}=e,o=n.core.navigation.menuOpenedBy(e);o.click||o.focus?(c(e,"click"),c(e,"focus")):i(e,"click")},handleMenuKeydown:e=>{const{context:n,selectors:o,event:t}=e;if(o.core.navigation.menuOpenedBy(e).click){if("Escape"===t?.key)return c(e,"click"),void c(e,"focus");"overlay"===n.core.navigation.type&&"Tab"===t.key&&(t.shiftKey&&window.document.activeElement===n.core.navigation.firstFocusableElement?(t.preventDefault(),n.core.navigation.lastFocusableElement.focus()):t.shiftKey||window.document.activeElement!==n.core.navigation.lastFocusableElement||(t.preventDefault(),n.core.navigation.firstFocusableElement.focus()))}},handleMenuFocusout:e=>{const{context:n,event:o}=e;n.core.navigation.modal?.contains(o.relatedTarget)||o.target===window.document.activeElement||(c(e,"click"),c(e,"focus"))}}}}})}},function(e){var n;n=932,e(e.s=n)}]);
+"use strict";(self.__WordPressPrivateInteractivityAPI__=self.__WordPressPrivateInteractivityAPI__||[]).push([[3],{932:function(e,n,o){var t=o(754);const a=["a[href]",'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',"select:not([disabled]):not([aria-hidden])","textarea:not([disabled]):not([aria-hidden])","button:not([disabled]):not([aria-hidden])","[contenteditable]",'[tabindex]:not([tabindex^="-"])'];document.addEventListener("click",(()=>{}));const i=(e,n)=>{const{context:o,selectors:t}=e;t.core.navigation.menuOpenedBy(e)[n]=!0,"overlay"===o.core.navigation.type&&document.documentElement.classList.add("has-modal-open")},c=(e,n)=>{const{context:o,selectors:t}=e;t.core.navigation.menuOpenedBy(e)[n]=!1,t.core.navigation.isMenuOpen(e)||(o.core.navigation.modal?.contains(window.document.activeElement)&&o.core.navigation.previousFocus?.focus(),o.core.navigation.modal=null,o.core.navigation.previousFocus=null,"overlay"===o.core.navigation.type&&document.documentElement.classList.remove("has-modal-open"))};(0,t.h)({effects:{core:{navigation:{initMenu:e=>{const{context:n,selectors:o,ref:t}=e;if(o.core.navigation.isMenuOpen(e)){const e=t.querySelectorAll(a);n.core.navigation.modal=t,n.core.navigation.firstFocusableElement=e[0],n.core.navigation.lastFocusableElement=e[e.length-1]}},focusFirstElement:e=>{const{selectors:n,ref:o}=e;n.core.navigation.isMenuOpen(e)&&o.querySelector(".wp-block-navigation-item > *:first-child").focus()}}}},selectors:{core:{navigation:{roleAttribute:e=>{const{context:n,selectors:o}=e;return"overlay"===n.core.navigation.type&&o.core.navigation.isMenuOpen(e)?"dialog":null},ariaModal:e=>{const{context:n,selectors:o}=e;return"overlay"===n.core.navigation.type&&o.core.navigation.isMenuOpen(e)?"true":null},ariaLabel:e=>{const{context:n,selectors:o}=e;return"overlay"===n.core.navigation.type&&o.core.navigation.isMenuOpen(e)?n.core.navigation.ariaLabel:null},isMenuOpen:({context:e})=>Object.values(e.core.navigation["overlay"===e.core.navigation.type?"overlayOpenedBy":"submenuOpenedBy"]).filter(Boolean).length>0,menuOpenedBy:({context:e})=>e.core.navigation["overlay"===e.core.navigation.type?"overlayOpenedBy":"submenuOpenedBy"]}}},actions:{core:{navigation:{openMenuOnHover(e){const{navigation:n}=e.context.core;"submenu"===n.type&&0===Object.values(n.overlayOpenedBy||{}).filter(Boolean).length&&i(e,"hover")},closeMenuOnHover(e){c(e,"hover")},openMenuOnClick(e){const{context:n,ref:o}=e;n.core.navigation.previousFocus=o,i(e,"click")},closeMenuOnClick(e){c(e,"click"),c(e,"focus")},openMenuOnFocus(e){i(e,"focus")},toggleMenuOnClick:e=>{const{selectors:n,context:o,ref:t}=e;window.document.activeElement!==t&&t.focus();const a=n.core.navigation.menuOpenedBy(e);a.click||a.focus?(c(e,"click"),c(e,"focus")):(o.core.navigation.previousFocus=t,i(e,"click"))},handleMenuKeydown:e=>{const{context:n,selectors:o,event:t}=e;if(o.core.navigation.menuOpenedBy(e).click){if("Escape"===t?.key)return c(e,"click"),void c(e,"focus");"overlay"===n.core.navigation.type&&"Tab"===t.key&&(t.shiftKey&&window.document.activeElement===n.core.navigation.firstFocusableElement?(t.preventDefault(),n.core.navigation.lastFocusableElement.focus()):t.shiftKey||window.document.activeElement!==n.core.navigation.lastFocusableElement||(t.preventDefault(),n.core.navigation.firstFocusableElement.focus()))}},handleMenuFocusout:e=>{const{context:n,event:o}=e;(null===o.relatedTarget||!n.core.navigation.modal?.contains(o.relatedTarget)&&o.target!==window.document.activeElement)&&(c(e,"click"),c(e,"focus"))}}}}})}},function(e){var n;n=932,e(e.s=n)}]);

wp-includes/js/dist/block-library.js

@@ -23861,6 +23861,10 @@ const scaleOptions = [{
   label: (0,external_wp_i18n_namespaceObject._x)('Contain', 'Scale option for dimensions control'),
   help: (0,external_wp_i18n_namespaceObject.__)('Image is contained without distortion.')
 }];
+const disabledClickProps = {
+  onClick: event => event.preventDefault(),
+  'aria-disabled': true
+};
 function image_Image({
   temporaryURL,
   attributes,
@@ -24381,7 +24385,6 @@ function image_Image({
       }
     }
     /* eslint-enable no-lonely-if */
-
     img = (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.ResizableBox, {
       style: {
         display: 'block',
@@ -24423,7 +24426,10 @@ function image_Image({
   if (!url && !temporaryURL) {
     return sizeControls;
   }
-  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, !temporaryURL && controls, img, showCaption && (!external_wp_blockEditor_namespaceObject.RichText.isEmpty(caption) || isSelected) && (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.RichText, {
+  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, !temporaryURL && controls, !!href ? (0,external_wp_element_namespaceObject.createElement)("a", {
+    href: href,
+    ...disabledClickProps
+  }, img) : img, showCaption && (!external_wp_blockEditor_namespaceObject.RichText.isEmpty(caption) || isSelected) && (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.RichText, {
     identifier: "caption",
     className: (0,external_wp_blockEditor_namespaceObject.__experimentalGetElementClassName)('caption'),
     ref: captionRef,

wp-includes/js/dist/interactivity.js

@@ -2357,8 +2357,10 @@ const regionsToVdom = dom => {
     const id = region.getAttribute(attrName);
     regions[id] = toVdom(region);
   });
+  const title = dom.querySelector('title')?.innerText;
   return {
-    regions
+    regions,
+    title
   };
 };
 
@@ -2379,6 +2381,9 @@ const renderRegions = page => {
     const fragment = getRegionRootFragment(region);
     B(page.regions[id], fragment);
   });
+  if (page.title) {
+    document.title = page.title;
+  }
 };
 
 // Variable to store the current navigation.

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.4-RC1-56986';
+$wp_version = '6.4-RC1-56988';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.