Editor: Bugfixes npm packages updates for 6.4 RC1.

Updates for needed bugfixes in RC1:

* [WordPress/gutenberg#55212 Image: Reimplement lightbox trigger as a minimal button in corner of image]

* [WordPress/gutenberg#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: https://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,22 +97,41 @@
   flex-direction:column;
   position:relative;
 }
+.wp-lightbox-container img{
+  cursor:zoom-in;
+}
+.wp-lightbox-container img:hover+button{
+  opacity:1;
+}
 .wp-lightbox-container button{
-  background:none;
+  background:#000;
   border:none;
+  border-radius:10%;
   cursor:zoom-in;
-  height:100%;
+  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{
   outline:5px auto #212121;
   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,22 +97,41 @@
   flex-direction:column;
   position:relative;
 }
+.wp-lightbox-container img{
+  cursor:zoom-in;
+}
+.wp-lightbox-container img:hover+button{
+  opacity:1;
+}
 .wp-lightbox-container button{
-  background:none;
+  background:#000;
   border:none;
+  border-radius:10%;
   cursor:zoom-in;
-  height:100%;
+  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{
   outline:5px auto #212121;
   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;
 }