Skip to content

Commit

Permalink
Experiment: Put directives on <figure> element and insert lightbox as…
Browse files Browse the repository at this point in the history 
… its child (WordPress#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>
  • Loading branch information
@artemiomorales @SantosGuillamot @sethrubenstein
2 people authored and sethrubenstein committed Jul 13, 2023
1 parent 3fd025c commit 43bc49d
Showing 1 changed file with 30 additions and 28 deletions.
58 changes: 30 additions & 28 deletions packages/block-library/src/image/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down

0 comments on commit 43bc49d

Please sign in to comment.