Skip to content

Commit 60144f6

Browse files
artemiomoralesSantosGuillamot
artemiomorales
and
SantosGuillamot
authored
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 <[email protected]>
1 parent fde9a40 commit 60144f6

File tree

1 file changed

+30
-28
lines changed

1 file changed

+30
-28
lines changed

‎packages/block-library/src/image/index.php‎

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -59,48 +59,50 @@ function render_block_core_image( $attributes, $content ) {
5959
}
6060
$content = $processor->get_updated_html();
6161

62+
$w = new WP_HTML_Tag_Processor( $content );
63+
$w->next_tag( 'figure' );
64+
$w->add_class( 'wp-lightbox-container' );
65+
$w->set_attribute( 'data-wp-interactive', true );
66+
$w->set_attribute( 'data-wp-context', '{ "core": { "image": { "initialized": false, "lightboxEnabled": false } } }' );
67+
$body_content = $w->get_updated_html();
68+
6269
// Wrap the image in the body content with a button.
6370
$img = null;
6471
preg_match( '/<img[^>]+>/', $content, $img );
6572
$button = '<div class="img-container">
6673
<button type="button" aria-haspopup="dialog" aria-label="' . esc_attr( $aria_label ) . '" data-wp-on--click="actions.core.image.showLightbox"></button>'
6774
. $img[0] .
6875
'</div>';
69-
$body_content = preg_replace( '/<img[^>]+>/', $button, $content );
76+
$body_content = preg_replace( '/<img[^>]+>/', $button, $body_content );
7077

7178
$background_color = esc_attr( wp_get_global_styles( array( 'color', 'background' ) ) );
7279
$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>';
7380

74-
$dialog_label = $alt_attribute ? esc_attr( $alt_attribute ) : esc_attr__( 'Image' );
75-
81+
$dialog_label = $alt_attribute ? esc_attr( $alt_attribute ) : esc_attr__( 'Image' );
7682
$close_button_label = esc_attr__( 'Close' );
7783

78-
return
79-
<<<HTML
80-
<div class="wp-lightbox-container"
81-
data-wp-interactive
82-
data-wp-context='{ "core": { "image": { "initialized": false, "lightboxEnabled": false } } }'>
83-
$body_content
84-
<div data-wp-body="" class="wp-lightbox-overlay"
85-
data-wp-bind--role="selectors.core.image.roleAttribute"
86-
aria-label="$dialog_label"
87-
data-wp-class--initialized="context.core.image.initialized"
88-
data-wp-class--active="context.core.image.lightboxEnabled"
89-
data-wp-bind--aria-hidden="!context.core.image.lightboxEnabled"
90-
data-wp-bind--aria-modal="context.core.image.lightboxEnabled"
91-
data-wp-effect="effects.core.image.initLightbox"
92-
data-wp-on--keydown="actions.core.image.handleKeydown"
93-
data-wp-on--mousewheel="actions.core.image.hideLightbox"
94-
data-wp-on--click="actions.core.image.hideLightbox"
95-
>
96-
<button type="button" aria-label="$close_button_label" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
97-
$close_button_icon
98-
</button>
99-
$content
100-
<div class="scrim" style="background-color: $background_color"></div>
101-
</div>
102-
</div>
84+
$lightbox_html = <<<HTML
85+
<div data-wp-body="" class="wp-lightbox-overlay"
86+
data-wp-bind--role="selectors.core.image.roleAttribute"
87+
aria-label="$dialog_label"
88+
data-wp-class--initialized="context.core.image.initialized"
89+
data-wp-class--active="context.core.image.lightboxEnabled"
90+
data-wp-bind--aria-hidden="!context.core.image.lightboxEnabled"
91+
data-wp-bind--aria-modal="context.core.image.lightboxEnabled"
92+
data-wp-effect="effects.core.image.initLightbox"
93+
data-wp-on--keydown="actions.core.image.handleKeydown"
94+
data-wp-on--mousewheel="actions.core.image.hideLightbox"
95+
data-wp-on--click="actions.core.image.hideLightbox"
96+
>
97+
<button type="button" aria-label="$close_button_label" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
98+
$close_button_icon
99+
</button>
100+
$content
101+
<div class="scrim" style="background-color: $background_color"></div>
102+
</div>
103103
HTML;
104+
105+
return str_replace( '</figure>', $lightbox_html . '</figure>', $body_content );
104106
}
105107

106108
return $processor->get_updated_html();

0 commit comments

Comments
 (0)