Changeset 56961 for trunk/src/wp-includes/blocks/image.php

Timestamp:

10/17/2023 04:06:01 PM (14 months ago)

Author:

hellofromTonya

Message:

Editor: Bugfixes npm packages updates for 6.4 RC1.

Updates for needed bugfixes in RC1:

• ​Image: Reimplement lightbox trigger as a minimal button in corner of image

• ​[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.

File:

• trunk/src/wp-includes/blocks/image.php (modified) (2 diffs)

trunk/src/wp-includes/blocks/image.php

@@ -219 +219 @@
     );
     $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 );
@@ -236 +240 @@
             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 );