diff --git a/packages/block-library/src/gallery/index.php b/packages/block-library/src/gallery/index.php index 5af6be16d39a2..d0ac13d40391a 100644 --- a/packages/block-library/src/gallery/index.php +++ b/packages/block-library/src/gallery/index.php @@ -43,7 +43,7 @@ function block_core_gallery_data_id_backcompatibility( $parsed_block ) { * @param string $content Content of the block being rendered. * @return string The content of the block being rendered. */ -function block_core_gallery_render( $attributes, $content ) { +function block_core_gallery_render( $attributes, $content, $block ) { // Adds a style tag for the --wp--style--unstable-gallery-gap var. // The Gallery block needs to recalculate Image block width based on // the current gap setting in order to maintain the number of flex columns @@ -121,6 +121,35 @@ function block_core_gallery_render( $attributes, $content ) { ) ); + $lightbox_settings = block_core_image_get_lightbox_settings( $block->parsed_block ); + + if ( + isset( $lightbox_settings ) && + // 'none' === $link_destination && + isset( $lightbox_settings['enabled'] ) && + true === $lightbox_settings['enabled'] + ) { + $processed_content->set_attribute( 'data-wp-interactive', 'core/gallery' ); + $processed_content->set_attribute( 'data-wp-context', '{"lightbox": true, "images": []}' ); + $processed_content->set_attribute( 'data-wp-init', 'callbacks.init' ); + $processed_content->set_attribute( 'data-wp-on-async--load', 'callbacks.init' ); + + $suffix = wp_scripts_get_suffix(); + if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) { + $module_url = gutenberg_url( '/build/interactivity/gallery.min.js' ); + } + + wp_register_script_module( + '@wordpress/block-library/gallery', + isset( $module_url ) ? $module_url : includes_url( "blocks/gallery/view{$suffix}.js" ), + array( '@wordpress/interactivity' ), + defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' ) + ); + + wp_enqueue_script_module( '@wordpress/block-library/gallery' ); + + } + // The WP_HTML_Tag_Processor class calls get_updated_html() internally // when the instance is treated as a string, but here we explicitly // convert it to a string. @@ -166,6 +195,33 @@ static function () use ( $image_blocks, &$i ) { return $content; } + +// NOTE: this setting isn't required for the gallery block. +// since lightbox implementation is done in the image block, it can totally be removed. +function block_core_gallery_get_lightbox_settings( $block ) { + // Gets the lightbox setting from the block attributes. + if ( isset( $block['attrs']['lightbox'] ) ) { + $lightbox_settings = $block['attrs']['lightbox']; + } + + if ( ! isset( $lightbox_settings ) ) { + // TODO: change it to gallery block name. + $lightbox_settings = wp_get_global_settings( array( 'lightbox' ), array( 'block_name' => 'core/image' ) ); + + // If not present in global settings, check the top-level global settings. + // + // NOTE: If no block-level settings are found, the previous call to + // `wp_get_global_settings` will return the whole `theme.json` structure in + // which case we can check if the "lightbox" key is present at the top-level + // of the global settings and use its value. + if ( isset( $lightbox_settings['lightbox'] ) ) { + $lightbox_settings = wp_get_global_settings( array( 'lightbox' ) ); + } + } + + return $lightbox_settings ?? null; +} + /** * Registers the `core/gallery` block on server. * diff --git a/packages/block-library/src/gallery/view.js b/packages/block-library/src/gallery/view.js new file mode 100644 index 0000000000000..010bc5b9b90b2 --- /dev/null +++ b/packages/block-library/src/gallery/view.js @@ -0,0 +1,20 @@ +/** + * WordPress dependencies + */ +import { store, getContext, getElement } from '@wordpress/interactivity'; + +store( + 'core/gallery', + { + callbacks: { + init() { + const { ref } = getElement(); + const ctx = getContext(); + ctx.galleryRef = ref; + }, + }, + }, + { + lock: false, + } +); diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index ec9bf673f5037..99919e6a0168e 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -219,6 +219,7 @@ function block_core_image_render_lightbox( $block_content, $block ) { JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP ) ); + $p->set_attribute( 'data-wp-init', 'callbacks.initImage' ); // Image. $p->next_tag( 'img' ); @@ -265,6 +266,8 @@ class="lightbox-trigger" */ function block_core_image_print_lightbox_overlay() { $close_button_label = esc_attr__( 'Close' ); + $prev_button_label = esc_attr__( 'Previous' ); + $next_button_label = esc_attr__( 'Next' ); // If the current theme does NOT have a `theme.json`, or the colors are not // defined, it needs to set the background color & close button color to some @@ -285,7 +288,7 @@ function block_core_image_print_lightbox_overlay() {
+ +
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 84c5a1f42de15..172ed3de209a3 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -215,6 +215,40 @@ } } + .prev-button, + .next-button { + position: absolute; + top: 50%; + transform: translateY(-50%); + padding: 0; + cursor: pointer; + z-index: 5000000; + min-width: 40px; // equivalent to $button-size-next-default-40px + min-height: 40px; // equivalent to $button-size-next-default-40px; + display: flex; + align-items: center; + justify-content: center; + + &[hidden] { + display: none; + } + + &:hover, + &:focus, + &:not(:hover):not(:active):not(.has-background) { + background: none; + border: none; + } + } + + .prev-button { + left: calc(env(safe-area-inset-left) + 16px); // equivalent to $grid-unit-20 + } + + .next-button { + right: calc(env(safe-area-inset-right) + 16px); // equivalent to $grid-unit-20 + } + .lightbox-image-container { position: absolute; overflow: hidden; diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js index 497f7dc94de0a..944a92e6f2f55 100644 --- a/packages/block-library/src/image/view.js +++ b/packages/block-library/src/image/view.js @@ -25,6 +25,8 @@ const { state, actions, callbacks } = store( state: { metadata: {}, currentImage: {}, + images: [], + isGallery: false, get overlayOpened() { return state.currentImage.currentSrc; }, @@ -59,18 +61,20 @@ const { state, actions, callbacks } = store( return; } - state.overlayEnabled = true; - // Stores the positions of the scroll to fix it until the overlay is // closed. state.scrollTopReset = document.documentElement.scrollTop; state.scrollLeftReset = document.documentElement.scrollLeft; - // Sets the information of the expanded image in the state. - state.currentImage = state.metadata[ ctx.imageId ]; + const { lightbox, images } = getContext( 'core/gallery' ) || {}; + state.isGallery = !! lightbox || false; + state.images = state.isGallery ? images || [] : [ ctx.imageId ]; - // Computes the styles of the overlay for the animation. - callbacks.setOverlayStyles(); + // Sets the current image index to the one that was clicked. + callbacks.setCurrentImageIndex( ctx.imageId ); + + // Sets the information of the expanded image in the state. + callbacks.setCurrentImage(); }, hideLightbox() { if ( state.overlayEnabled ) { @@ -97,6 +101,30 @@ const { state, actions, callbacks } = store( state.overlayEnabled = false; } }, + showPreviousImage( e ) { + if ( ! state.isGallery ) { + return; + } + + e.stopPropagation(); + if ( state.currentImageIndex - 1 < 0 ) { + return; + } + state.currentImageIndex = state.currentImageIndex - 1; + callbacks.setCurrentImage(); + }, + showNextImage( e ) { + if ( ! state.isGallery ) { + return; + } + + e.stopPropagation(); + if ( state.currentImageIndex + 1 >= state.images.length ) { + return; + } + state.currentImageIndex = state.currentImageIndex + 1; + callbacks.setCurrentImage(); + }, handleKeydown( event ) { if ( state.overlayEnabled ) { // Focuses the close button when the user presses the tab key. @@ -104,11 +132,19 @@ const { state, actions, callbacks } = store( event.preventDefault(); const { ref } = getElement(); ref.querySelector( 'button' ).focus(); + + // TODO: now that there are next and prev buttons, rotate the focus } // Closes the lightbox when the user presses the escape key. if ( event.key === 'Escape' ) { actions.hideLightbox(); } + + if ( event.key === 'ArrowLeft' ) { + actions.showPreviousImage( event ); + } else if ( event.key === 'ArrowRight' ) { + actions.showNextImage( event ); + } } }, handleTouchMove( event ) { @@ -156,6 +192,30 @@ const { state, actions, callbacks } = store( }, }, callbacks: { + initImage() { + const { lightbox, images } = getContext( 'core/gallery' ) || {}; + if ( ! lightbox ) { + return; + } + + const ctx = getContext(); + images.push( ctx.imageId ); + }, + setCurrentImageIndex( imageId ) { + const currentIndex = state.images.findIndex( + ( id ) => id === imageId + ); + state.currentImageIndex = currentIndex; + }, + setCurrentImage() { + const imageId = state.images[ state.currentImageIndex ]; + state.currentImage = state.metadata[ imageId ]; + + state.overlayEnabled = true; + + // Computes the styles of the overlay for the animation. + callbacks.setOverlayStyles(); + }, setOverlayStyles() { if ( ! state.currentImage.imageRef ) { return; @@ -198,12 +258,14 @@ const { state, actions, callbacks } = store( // size), the image's dimensions in the lightbox are the same // as those of the image in the content. let imgMaxWidth = parseFloat( - state.currentImage.targetWidth !== 'none' + state.currentImage.targetWidth && + state.currentImage.targetWidth !== 'none' ? state.currentImage.targetWidth : naturalWidth ); let imgMaxHeight = parseFloat( - state.currentImage.targetHeight !== 'none' + state.currentImage.targetHeight && + state.currentImage.targetHeight !== 'none' ? state.currentImage.targetHeight : naturalHeight ); diff --git a/tools/webpack/interactivity.js b/tools/webpack/interactivity.js index cbde31171fe26..2c3c12c236e1a 100644 --- a/tools/webpack/interactivity.js +++ b/tools/webpack/interactivity.js @@ -23,6 +23,7 @@ module.exports = { navigation: './packages/block-library/src/navigation/view.js', query: './packages/block-library/src/query/view.js', image: './packages/block-library/src/image/view.js', + gallery: './packages/block-library/src/gallery/view.js', file: './packages/block-library/src/file/view.js', search: './packages/block-library/src/search/view.js', },