Skip to content

Experiment: Add lightbox to Image block using directives #49621

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

Closed
artemiomorales wants to merge 38 commits into from
Closed

Experiment: Add lightbox to Image block using directives #49621

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
ebba7b4
Add interactivity runtime
luisherranz Apr 21, 2023
af59781
Add it to the image block
luisherranz Apr 21, 2023
cca3d60
Add a separate webpack config
luisherranz Apr 21, 2023
160a029
Make sure the runtime is imported only once
luisherranz Apr 21, 2023
7f16f27
Use sideEffects instead of init
luisherranz Apr 21, 2023
f4b2ee8
Move script registration to a general file
luisherranz Apr 21, 2023
378b041
Add `defer` to the interactivity scripts
luisherranz Apr 21, 2023
409d161
Revert changes of the image block
luisherranz Apr 21, 2023
29e11ab
Fix init import name
luisherranz Apr 21, 2023
f4b6c0a
Move and refactor the interactive scritps registration
gziolo Apr 28, 2023
3d94473
Fix code style violations
gziolo Apr 28, 2023
6ae760f
Use `wp-interactivity-` prefix for script handles
gziolo Apr 28, 2023
9d6869e
Improve the matcher for side effects in `package.json`
gziolo Apr 28, 2023
c6d02d8
Add custom useSignalEffect
DAreRodz May 4, 2023
af55917
Call `init` after `store` has been initialized
DAreRodz May 4, 2023
7c1f2d1
Add lightbox to image block
artemiomorales Apr 3, 2023
9507199
Add logic for hiding lightbox on esc key press and overlay click
artemiomorales Apr 3, 2023
3f89d9b
Improve styles and add note to add conditional for lightbox markup
artemiomorales Apr 5, 2023
cb7f89a
Add editor UI and attribute for toggling lightbox
artemiomorales Apr 13, 2023
437d873
Remove image translation animation and add fade instead
artemiomorales Apr 19, 2023
7bd6b25
Add accessibility; clean up styles; fix bug regarding ref in directives
artemiomorales Apr 21, 2023
109344c
Configure image to use new Interactivity API runtime included in Gute…
artemiomorales Apr 26, 2023
f95a2cd
Remove viewScript from image config
artemiomorales Apr 26, 2023
e37e228
Add Portal directive to Interactivity API runtime
artemiomorales Apr 26, 2023
e17e564
Set scrim to site background color
artemiomorales Apr 26, 2023
f481a35
Remove extraneous image CSS declaration
artemiomorales Apr 26, 2023
848a8fa
Improve aria labeling
artemiomorales May 2, 2023
2204a50
Code cleanup; simplify syntax, consolidate code
artemiomorales May 3, 2023
6244e14
Refactor code, remove event listeners, consolidate logic
artemiomorales May 3, 2023
c388721
Fix formatting in SCSS file
artemiomorales May 3, 2023
9754edb
Change CheckboxControl to a ToggleControl; update API docs
artemiomorales May 3, 2023
b337272
Update wp_enqueue_script to correctly add interactivity runtime
artemiomorales May 3, 2023
ee679e6
Fix linter errors
artemiomorales May 4, 2023
ddbf32c
Update to use core.image namespace
artemiomorales May 4, 2023
f82d8f5
Pause closing of lightbox slightly when using the mousewheel
artemiomorales May 4, 2023
8ce00cd
Rename portal directive to 'wp-body' and remove unused reference
artemiomorales May 4, 2023
1427e8a
Add internal dependencies flag; update comment
artemiomorales May 4, 2023
58b0ef5
Remove extraneous code
artemiomorales May 4, 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
Prev Previous commit
Next Next commit
Remove image translation animation and add fade instead
  • Loading branch information
@artemiomorales
artemiomorales committed May 5, 2023
commit 437d8736618882a9bd32da1549522b2db60c6d80
77 changes: 50 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 @@ -5,6 +5,24 @@
* @package WordPress
*/


function processor_img_src_is_null( $processor ) {
return $processor->get_attribute( 'src' ) === null;
}

function process_img_data_id( $processor, $attributes ) {

if ( isset( $attributes['data-id'] ) ) {
// Add the data-id="$id" attribute to the img element
// to provide backwards compatibility for the Gallery Block,
// which now wraps Image Blocks within innerBlocks.
// The data-id attribute is added in a core/gallery `render_block_data` hook.
$processor->set_attribute( 'data-id', $attributes['data-id'] );
}

return $processor;
}

/**
* Renders the `core/image` block on the server,
* adding a data-id attribute to the element if core/gallery has added on pre-render.
Expand All @@ -14,44 +32,49 @@
* @return string Returns the block content with the data-id attribute added.
*/
function render_block_core_image( $attributes, $content ) {
$processor = new WP_HTML_Tag_Processor( $content );

if( isset( $attributes['enableLightbox'] ) && $attributes['enableLightbox'] === true ) {
$processor->next_tag( 'figure' );
$processor->set_attribute( 'data-wp-class.isZoomed', 'context.core.isZoomed');
$processor->set_attribute( 'data-wp-init.closeZoomOnEsc', 'actions.core.closeZoomOnEsc');
}
$body_content = new WP_HTML_Tag_Processor( $content );

$processor->next_tag( 'img' );
$body_content->next_tag( 'figure' );
$body_content->set_attribute( 'data-wp-class.isZoomed', 'context.core.isZoomed');
$body_content->set_attribute( 'data-wp-init.closeZoomOnEsc', 'actions.core.closeZoomOnEsc');

if ( $processor->get_attribute( 'src' ) === null ) {
return '';
}
$body_content->next_tag( 'img' );

if ( isset( $attributes['data-id'] ) ) {
// Add the data-id="$id" attribute to the img element
// to provide backwards compatibility for the Gallery Block,
// which now wraps Image Blocks within innerBlocks.
// The data-id attribute is added in a core/gallery `render_block_data` hook.
$processor->set_attribute( 'data-id', $attributes['data-id'] );
$content = $processor->get_updated_html();
}
if ( processor_img_src_is_null( $body_content ) ) {
return '';
}

$body_content = process_img_data_id($body_content, $attributes);
Copy link
Member

@dmsnell dmsnell Apr 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is a good place to serve as an example of where I get a bit anxious seeing the processor passed around. we're setting $body_content to the return, which is the tag processor, but it was already still the processor without the assignment. being stateful, it does stuff while hidden inside of process_img_data_id, and it's not obvious from reading this code that the $body_content Tag Processor in line 57 could be "different" from the one in line 56

$body_content->set_attribute( 'data-wp-on.click', 'actions.core.imageZoom');
$body_content = $body_content->get_updated_html();

$modal_content = new WP_HTML_Tag_Processor( $content );
$modal_content->next_tag( 'img' );
$modal_content = process_img_data_id($modal_content, $attributes);
$modal_content = $modal_content->get_updated_html();
Copy link
Member

@dmsnell dmsnell Apr 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what's supposed to be different here between $body_content and $modal_content?

it seems like they will be the same, except if the IMG src is missing then $body_content will be empty but the modal won't be.

Copy link
Contributor Author

@artemiomorales artemiomorales May 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a distinction left over from an earlier commit. Will remove the duplication!


if( isset( $attributes['enableLightbox'] ) && $attributes['enableLightbox'] === true ) {
/// Include conditional to detect if user has activated lightbox in settings #2
$processor->set_attribute( 'data-wp-on.click', 'actions.core.imageZoom');
$content = $processor->get_updated_html();
return <<<HTML
<div class="lightbox-container" data-wp-context='{ "core": { "isZoomed": false } }'>
$content
<div data-wp-portal="body" data-wp-class.overlay="context.core.isZoomed">
<div data-wp-on.click="actions.core.closeZoom"></div>
<div class="lightbox-container" data-wp-context='{ "core": { "initialized": false, "isZoomed": false } }'>
$body_content
<div data-wp-portal="body" class="overlay" data-wp-class.initialized="context.core.initialized" data-wp-class.active="context.core.isZoomed">
$modal_content
<div class="hide" data-wp-on.click="actions.core.closeZoom"></div>
</div>
</div>
HTML;
}

return $content;
$processor = new WP_HTML_Tag_Processor( $content );
$processor->next_tag( 'img' );

if ( processor_img_src_is_null( $processor ) ) {
return '';
}

$processor = process_img_data_id($processor, $attributes);

return $processor->get_updated_html();
}


Expand Down
91 changes: 77 additions & 14 deletions packages/block-library/src/image/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,16 +160,6 @@

img {
cursor: zoom-in;
transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1);
z-index: 200000;
}

&.iszoomed {
img {
cursor: zoom-out;
position: relative;
transform: scale(150%, 150%);
}
}
}
}
Expand All @@ -178,12 +168,85 @@
position: fixed;
top: 0;
left: 0;
background: rgba(255, 255, 255, .95);
z-index: 100000;
overflow: hidden;
width: 100vw;
height: 100vh;
background: rgba(255, 255, 255, .9);
visibility: hidden;

.hide {
width: 100%;
height: 100%;
position: absolute;
z-index: 3000000;
top: 0;
left: 0;
}

figure {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
z-index: 2000000;
position: absolute;
}

img {
opacity: 0;
}

&.initialized {
animation: 1ms turn-off-visibility both 300ms, 300ms both fade-out-opacity;

img {
animation: 300ms both fade-out-opacity;
}

&.active {
animation: 1ms both turn-on-visibility, 300ms both fade-in-opacity;

div {
width: 100vw;
height: 100vh;
img {
animation: 300ms both fade-in-opacity;
}
}
}
}

@keyframes fade-in-opacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes fade-out-opacity {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

@keyframes turn-on-visibility {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}

@keyframes turn-off-visibility {
from {
visibility: visible;
}
to {
visibility: hidden;
}
}
3 changes: 2 additions & 1 deletion packages/block-library/src/image/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ store( {
actions: {
core: {
imageZoom: ( { context } ) => {
context.core.initialized = true;
context.core.isZoomed = ! context.core.isZoomed;

context.core.handleScroll = () => {
context.core.isZoomed = false;
window.removeEventListener(
Expand Down Expand Up @@ -33,7 +35,6 @@ store( {
// Function to handle the ESC key press
function handleEscKey( event ) {
if ( event.key === 'Escape' || event.keyCode === 27 ) {
console.log( 'ESC key pressed' );
// Add any custom logic you want to execute when the ESC key is pressed
context.core.isZoomed = false;
}
Expand Down