Experiment: Put directives on <figure> element and insert lightbox as…

… its child (#51089) * Put directives on <figure> element and insert lightbox as its child * Fix PHP spacing * Ensure <figure> directives are only rendered in body content The <figure> directives were rendering not only in the body content, but also the lightbox. This ensures the directives do not appear in the lightbox. * Improve syntax * Change directives suffix and `data-wp-island` --------- Co-authored-by: Mario Santos <santosguillamot@gmail.com>
WordPress · Jun 1, 2023 · 60144f6 · 60144f6
1 parent fde9a40
commit 60144f6
Showing 1 changed file with 30 additions and 28 deletions.
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
@@ -59,48 +59,50 @@ function render_block_core_image( $attributes, $content ) {
 		}
 		$content = $processor->get_updated_html();
 
+		$w = new WP_HTML_Tag_Processor( $content );
+		$w->next_tag( 'figure' );
+		$w->add_class( 'wp-lightbox-container' );
+		$w->set_attribute( 'data-wp-interactive', true );
+		$w->set_attribute( 'data-wp-context', '{ "core": { "image": { "initialized": false, "lightboxEnabled": false } } }' );
+		$body_content = $w->get_updated_html();
+
 		// Wrap the image in the body content with a button.
 		$img = null;
 		preg_match( '/<img[^>]+>/', $content, $img );
 		$button       = '<div class="img-container">
 			 					<button type="button" aria-haspopup="dialog" aria-label="' . esc_attr( $aria_label ) . '" data-wp-on--click="actions.core.image.showLightbox"></button>'
 									. $img[0] .
 								'</div>';
-		$body_content = preg_replace( '/<img[^>]+>/', $button, $content );
+		$body_content = preg_replace( '/<img[^>]+>/', $button, $body_content );
 
 		$background_color  = esc_attr( wp_get_global_styles( array( 'color', 'background' ) ) );
 		$close_button_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
 
-		$dialog_label = $alt_attribute ? esc_attr( $alt_attribute ) : esc_attr__( 'Image' );
-
+		$dialog_label       = $alt_attribute ? esc_attr( $alt_attribute ) : esc_attr__( 'Image' );
 		$close_button_label = esc_attr__( 'Close' );
 
-		return
-			<<<HTML
-				<div class="wp-lightbox-container"
-					data-wp-interactive
-					data-wp-context='{ "core": { "image": { "initialized": false, "lightboxEnabled": false } } }'>
-						$body_content
-						<div data-wp-body="" class="wp-lightbox-overlay"
-							data-wp-bind--role="selectors.core.image.roleAttribute"
-							aria-label="$dialog_label"
-							data-wp-class--initialized="context.core.image.initialized"
-							data-wp-class--active="context.core.image.lightboxEnabled"
-							data-wp-bind--aria-hidden="!context.core.image.lightboxEnabled"
-							data-wp-bind--aria-modal="context.core.image.lightboxEnabled"
-							data-wp-effect="effects.core.image.initLightbox"
-							data-wp-on--keydown="actions.core.image.handleKeydown"
-							data-wp-on--mousewheel="actions.core.image.hideLightbox"
-							data-wp-on--click="actions.core.image.hideLightbox"
-							>
-								<button type="button" aria-label="$close_button_label" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
-									$close_button_icon
-								</button>
-								$content
-								<div class="scrim" style="background-color: $background_color"></div>
-						</div>
-				</div>
+		$lightbox_html = <<<HTML
+			<div data-wp-body="" class="wp-lightbox-overlay"
+				data-wp-bind--role="selectors.core.image.roleAttribute"
+				aria-label="$dialog_label"
+				data-wp-class--initialized="context.core.image.initialized"
+				data-wp-class--active="context.core.image.lightboxEnabled"
+				data-wp-bind--aria-hidden="!context.core.image.lightboxEnabled"
+				data-wp-bind--aria-modal="context.core.image.lightboxEnabled"
+				data-wp-effect="effects.core.image.initLightbox"
+				data-wp-on--keydown="actions.core.image.handleKeydown"
+				data-wp-on--mousewheel="actions.core.image.hideLightbox"
+				data-wp-on--click="actions.core.image.hideLightbox"
+				>
+					<button type="button" aria-label="$close_button_label" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
+						$close_button_icon
+					</button>
+					$content
+					<div class="scrim" style="background-color: $background_color"></div>
+			</div>
 HTML;
+
+		return str_replace( '</figure>', $lightbox_html . '</figure>', $body_content );
 	}
 
 	return $processor->get_updated_html();