Editor: Bugfixes npm packages updates for 6.4 RC1.

Updates for needed bugfixes in RC1:

* [https://github.com/WordPress/gutenberg/pull/55212 Image: Reimplement lightbox trigger as a minimal button in corner of image]

* [https://github.com/WordPress/gutenberg/pull/55403 [Edit Widgets] Only suppress admin notices when JS enabled.]

Follow-up to [56849], [56818], [56816].

Props artemiosans, jameskoster, SantosGuillamot, aristath, czapla, joen, afercia, richtabor, peterwilsoncc, andraganescu, hellofromTonya, siobhyb.
See #59411.
Built from https://develop.svn.wordpress.org/trunk@56961


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

wp-includes/blocks/image.php

@@ -218,13 +218,17 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 		)
 	);
 	$w->next_tag( 'img' );
-	$w->set_attribute( 'data-wp-init', 'effects.core.image.setCurrentSrc' );
+	$w->set_attribute( 'data-wp-init', 'effects.core.image.initOriginImage' );
 	$w->set_attribute( 'data-wp-on--load', 'actions.core.image.handleLoad' );
 	$w->set_attribute( 'data-wp-effect', 'effects.core.image.setButtonStyles' );
+	// We need to set an event callback on the `img` specifically
+	// because the `figure` element can also contain a caption, and
+	// we don't want to trigger the lightbox when the caption is clicked.
+	$w->set_attribute( 'data-wp-on--click', 'actions.core.image.showLightbox' );
 	$w->set_attribute( 'data-wp-effect--setStylesOnResize', 'effects.core.image.setStylesOnResize' );
 	$body_content = $w->get_updated_html();
 
-	// Wrap the image in the body content with a button.
+	// Add a button alongside image in the body content.
 	$img = null;
 	preg_match( '/<img[^>]+>/', $body_content, $img );
 
@@ -235,11 +239,17 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			aria-haspopup="dialog"
 			aria-label="' . esc_attr( $aria_label ) . '"
 			data-wp-on--click="actions.core.image.showLightbox"
-			data-wp-style--width="context.core.image.imageButtonWidth"
-			data-wp-style--height="context.core.image.imageButtonHeight"
-			data-wp-style--left="context.core.image.imageButtonLeft"
+			data-wp-style--right="context.core.image.imageButtonRight"
 			data-wp-style--top="context.core.image.imageButtonTop"
-		></button>';
+			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>
+		</button>';
 
 	$body_content = preg_replace( '/<img[^>]+>/', $button, $body_content );
 

wp-includes/blocks/image/style-rtl.css

@@ -97,13 +97,25 @@
   flex-direction:column;
   position:relative;
 }
-.wp-lightbox-container button{
-  background:none;
-  border:none;
+.wp-lightbox-container img{
   cursor:zoom-in;
-  height:100%;
+}
+.wp-lightbox-container img:hover+button{
+  opacity:1;
+}
+.wp-lightbox-container button{
+  background:#000;
+  border:none;
+  border-radius:10%;
+  cursor:zoom-in;
+  height:24px;
+  left:10px;
+  opacity:0;
+  padding:0;
   position:absolute;
-  width:100%;
+  text-align:center;
+  top:10px;
+  width:24px;
   z-index:100;
 }
 .wp-lightbox-container button:focus-visible{
@@ -111,8 +123,15 @@
   outline:5px auto -webkit-focus-ring-color;
   outline-offset:5px;
 }
+.wp-lightbox-container button:hover{
+  cursor:pointer;
+  opacity:1;
+}
+.wp-lightbox-container button:focus{
+  opacity:1;
+}
 .wp-lightbox-container button:focus,.wp-lightbox-container button:hover,.wp-lightbox-container button:not(:hover):not(:active):not(.has-background){
-  background:none;
+  background:#000;
   border:none;
 }
 

wp-includes/blocks/image/style.css

@@ -97,13 +97,25 @@
   flex-direction:column;
   position:relative;
 }
-.wp-lightbox-container button{
-  background:none;
-  border:none;
+.wp-lightbox-container img{
   cursor:zoom-in;
-  height:100%;
+}
+.wp-lightbox-container img:hover+button{
+  opacity:1;
+}
+.wp-lightbox-container button{
+  background:#000;
+  border:none;
+  border-radius:10%;
+  cursor:zoom-in;
+  height:24px;
+  opacity:0;
+  padding:0;
   position:absolute;
-  width:100%;
+  right:10px;
+  text-align:center;
+  top:10px;
+  width:24px;
   z-index:100;
 }
 .wp-lightbox-container button:focus-visible{
@@ -111,8 +123,15 @@
   outline:5px auto -webkit-focus-ring-color;
   outline-offset:5px;
 }
+.wp-lightbox-container button:hover{
+  cursor:pointer;
+  opacity:1;
+}
+.wp-lightbox-container button:focus{
+  opacity:1;
+}
 .wp-lightbox-container button:focus,.wp-lightbox-container button:hover,.wp-lightbox-container button:not(:hover):not(:active):not(.has-background){
-  background:none;
+  background:#000;
   border:none;
 }
 

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

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

wp-includes/blocks/image/view.js

@@ -94,8 +94,9 @@ function handleScroll(context) {
           context.core.image.initialized = true;
           context.core.image.lastFocusedElement = window.document.activeElement;
           context.core.image.scrollDelta = 0;
+          context.core.image.pointerType = event.pointerType;
           context.core.image.lightboxEnabled = true;
-          setStyles(context, event.target.previousElementSibling);
+          setStyles(context, context.core.image.imageRef);
           context.core.image.scrollTopReset = window.pageYOffset || document.documentElement.scrollTop;
 
           // In most cases, this value will be 0, but this is included
@@ -116,7 +117,8 @@ function handleScroll(context) {
           window.addEventListener('scroll', scrollCallback, false);
         },
         hideLightbox: async ({
-          context
+          context,
+          event
         }) => {
           context.core.image.hideAnimationEnabled = true;
           if (context.core.image.lightboxEnabled) {
@@ -130,9 +132,16 @@ function handleScroll(context) {
               window.removeEventListener('scroll', scrollCallback);
             }, 450);
             context.core.image.lightboxEnabled = false;
-            context.core.image.lastFocusedElement.focus({
-              preventScroll: true
-            });
+
+            // 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({
+                preventScroll: true
+              });
+            }
           }
         },
         handleKeydown: ({
@@ -159,8 +168,9 @@ function handleScroll(context) {
             }
           }
         },
+        // This is fired just by lazily loaded
+        // images on the page, not all images.
         handleLoad: ({
-          state,
           context,
           effects,
           ref
@@ -168,7 +178,6 @@ function handleScroll(context) {
           context.core.image.imageLoaded = true;
           context.core.image.imageCurrentSrc = ref.currentSrc;
           effects.core.image.setButtonStyles({
-            state,
             context,
             ref
           });
@@ -236,10 +245,11 @@ function handleScroll(context) {
   effects: {
     core: {
       image: {
-        setCurrentSrc: ({
+        initOriginImage: ({
           context,
           ref
         }) => {
+          context.core.image.imageRef = ref;
           if (ref.complete) {
             context.core.image.imageLoaded = true;
             context.core.image.imageCurrentSrc = ref.currentSrc;
@@ -249,17 +259,22 @@ function handleScroll(context) {
           context,
           ref
         }) => {
-          context.core.image.figureRef = ref.querySelector('figure');
-          context.core.image.imageRef = ref.querySelector('img');
           if (context.core.image.lightboxEnabled) {
             const focusableElements = ref.querySelectorAll(focusableSelectors);
             context.core.image.firstFocusableElement = focusableElements[0];
             context.core.image.lastFocusableElement = focusableElements[focusableElements.length - 1];
-            ref.querySelector('.close-button').focus();
+
+            // 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();
+            }
           }
         },
         setButtonStyles: ({
-          state,
           context,
           ref
         }) => {
@@ -271,43 +286,51 @@ function handleScroll(context) {
           } = ref;
 
           // If the image isn't loaded yet, we can't
-          // calculate how big the button should be.
+          // calculate where the button should be.
           if (naturalWidth === 0 || naturalHeight === 0) {
             return;
           }
+          const figure = ref.parentElement;
+          const figureWidth = ref.parentElement.clientWidth;
 
-          // Subscribe to the window dimensions so we can
-          // recalculate the styles if the window is resized.
-          if ((state.core.image.windowWidth || state.core.image.windowHeight) && context.core.image.scaleAttr === 'contain') {
-            // In the case of an image with object-fit: contain, the
-            // size of the img element can be larger than the image itself,
-            // so we need to calculate the size of the button to match.
+          // We need special handling for the height because
+          // a caption will cause the figure to be taller than
+          // the image, which means we need to account for that
+          // when calculating the placement of the button in the
+          // top right corner of the image.
+          let figureHeight = ref.parentElement.clientHeight;
+          const caption = figure.querySelector('figcaption');
+          if (caption) {
+            const captionComputedStyle = window.getComputedStyle(caption);
+            figureHeight = figureHeight - caption.offsetHeight - parseFloat(captionComputedStyle.marginTop) - parseFloat(captionComputedStyle.marginBottom);
+          }
+          const buttonOffsetTop = figureHeight - offsetHeight;
+          const buttonOffsetRight = figureWidth - offsetWidth;
 
+          // In the case of an image with object-fit: contain, the
+          // size of the <img> element can be larger than the image itself,
+          // so we need to calculate where to place the button.
+          if (context.core.image.scaleAttr === 'contain') {
             // Natural ratio of the image.
             const naturalRatio = naturalWidth / naturalHeight;
             // Offset ratio of the image.
             const offsetRatio = offsetWidth / offsetHeight;
-            if (naturalRatio > offsetRatio) {
+            if (naturalRatio >= offsetRatio) {
               // If it reaches the width first, keep
-              // the width and recalculate the height.
-              context.core.image.imageButtonWidth = offsetWidth;
-              const buttonHeight = offsetWidth / naturalRatio;
-              context.core.image.imageButtonHeight = buttonHeight;
-              context.core.image.imageButtonTop = (offsetHeight - buttonHeight) / 2;
+              // the width and compute the height.
+              const referenceHeight = offsetWidth / naturalRatio;
+              context.core.image.imageButtonTop = (offsetHeight - referenceHeight) / 2 + buttonOffsetTop + 10;
+              context.core.image.imageButtonRight = buttonOffsetRight + 10;
             } else {
               // If it reaches the height first, keep
-              // the height and recalculate the width.
-              context.core.image.imageButtonHeight = offsetHeight;
-              const buttonWidth = offsetHeight * naturalRatio;
-              context.core.image.imageButtonWidth = buttonWidth;
-              context.core.image.imageButtonLeft = (offsetWidth - buttonWidth) / 2;
+              // the height and compute the width.
+              const referenceWidth = offsetHeight * naturalRatio;
+              context.core.image.imageButtonTop = buttonOffsetTop + 10;
+              context.core.image.imageButtonRight = (offsetWidth - referenceWidth) / 2 + buttonOffsetRight + 10;
             }
           } else {
-            // In all other cases, we can trust that the size of
-            // the image is the right size for the button as well.
-
-            context.core.image.imageButtonWidth = offsetWidth;
-            context.core.image.imageButtonHeight = offsetHeight;
+            context.core.image.imageButtonTop = buttonOffsetTop + 10;
+            context.core.image.imageButtonRight = buttonOffsetRight + 10;
           }
         },
         setStylesOnResize: ({

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

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

wp-includes/css/dist/block-library/style-rtl.css

@@ -1174,13 +1174,25 @@ h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h1.has-t
   flex-direction:column;
   position:relative;
 }
-.wp-lightbox-container button{
-  background:none;
-  border:none;
+.wp-lightbox-container img{
   cursor:zoom-in;
-  height:100%;
+}
+.wp-lightbox-container img:hover+button{
+  opacity:1;
+}
+.wp-lightbox-container button{
+  background:#000;
+  border:none;
+  border-radius:10%;
+  cursor:zoom-in;
+  height:24px;
+  left:10px;
+  opacity:0;
+  padding:0;
   position:absolute;
-  width:100%;
+  text-align:center;
+  top:10px;
+  width:24px;
   z-index:100;
 }
 .wp-lightbox-container button:focus-visible{
@@ -1188,8 +1200,15 @@ h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h1.has-t
   outline:5px auto -webkit-focus-ring-color;
   outline-offset:5px;
 }
+.wp-lightbox-container button:hover{
+  cursor:pointer;
+  opacity:1;
+}
+.wp-lightbox-container button:focus{
+  opacity:1;
+}
 .wp-lightbox-container button:focus,.wp-lightbox-container button:hover,.wp-lightbox-container button:not(:hover):not(:active):not(.has-background){
-  background:none;
+  background:#000;
   border:none;
 }
 

wp-includes/css/dist/block-library/style.css

@@ -1174,13 +1174,25 @@ h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h1.has-t
   flex-direction:column;
   position:relative;
 }
-.wp-lightbox-container button{
-  background:none;
-  border:none;
+.wp-lightbox-container img{
   cursor:zoom-in;
-  height:100%;
+}
+.wp-lightbox-container img:hover+button{
+  opacity:1;
+}
+.wp-lightbox-container button{
+  background:#000;
+  border:none;
+  border-radius:10%;
+  cursor:zoom-in;
+  height:24px;
+  opacity:0;
+  padding:0;
   position:absolute;
-  width:100%;
+  right:10px;
+  text-align:center;
+  top:10px;
+  width:24px;
   z-index:100;
 }
 .wp-lightbox-container button:focus-visible{
@@ -1188,8 +1200,15 @@ h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h1.has-t
   outline:5px auto -webkit-focus-ring-color;
   outline-offset:5px;
 }
+.wp-lightbox-container button:hover{
+  cursor:pointer;
+  opacity:1;
+}
+.wp-lightbox-container button:focus{
+  opacity:1;
+}
 .wp-lightbox-container button:focus,.wp-lightbox-container button:hover,.wp-lightbox-container button:not(:hover):not(:active):not(.has-background){
-  background:none;
+  background:#000;
   border:none;
 }
 

wp-includes/css/dist/edit-widgets/style-rtl.css

@@ -1037,7 +1037,7 @@ body.js.appearance_page_gutenberg-widgets .media-frame select.attachment-filters
   display:none;
 }
 
-.widgets-php .notice{
+.js .widgets-php .notice{
   display:none !important;
 }
 

wp-includes/css/dist/edit-widgets/style.css

@@ -1037,7 +1037,7 @@ body.js.appearance_page_gutenberg-widgets .media-frame select.attachment-filters
   display:none;
 }
 
-.widgets-php .notice{
+.js .widgets-php .notice{
   display:none !important;
 }
 

wp-includes/version.php

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