Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug fix: Add duotone class to lightbox experiment #51064

Closed
wants to merge 4 commits into from
Closed

Bug fix: Add duotone class to lightbox experiment #51064

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
08b57eb
Put directives on <figure> element and insert lightbox as its child
artemiomorales May 30, 2023
dfd0efd
Fix PHP spacing
artemiomorales May 30, 2023
ee4e776
Add duotone class to nested figure elements
artemiomorales May 29, 2023
78b3967
Revert "Add duotone class to nested figure elements"
artemiomorales May 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 33 additions & 27 deletions packages/block-library/src/image/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,17 @@ function render_block_core_image( $attributes, $content ) {
}
$content = $processor->get_updated_html();

$w = new WP_HTML_Tag_Processor( $content );
$w->next_tag(
array(
'tag_name' => 'figure',
)
);
$w->add_class( 'wp-lightbox-container' );
$w->set_attribute( 'data-wp-island', '' );
$w->set_attribute( 'data-wp-context', '{ "core": { "image": { "initialized": false, "lightboxEnabled": false } } }' );
$content = $w->get_updated_html();

// Wrap the image in the body content with a button.
$img = null;
preg_match( '/<img[^>]+>/', $content, $img );
Expand All @@ -71,36 +82,31 @@ function render_block_core_image( $attributes, $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-island
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 preg_replace( '/<\/figure>/', $lightbox_html . '</figure>', $body_content );
}

return $processor->get_updated_html();
Expand Down