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.

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

Gallery: Add lightbox support #62906

Open
wants to merge 15 commits into
base: trunk
Choose a base branch
from
Open
Changes from 1 commit
Commits
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 view.js from gallery
madhusudhand committed Sep 6, 2024
commit cc48519ddce8aaf0df6c97d0da2326b43141af1b
58 changes: 3 additions & 55 deletions packages/block-library/src/gallery/index.php
Original file line number Diff line number Diff line change
@@ -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, $block ) {
function block_core_gallery_render( $attributes, $content ) {
// 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,34 +121,8 @@ function block_core_gallery_render( $attributes, $content, $block ) {
)
);

$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' );

}
$processed_content->set_attribute( 'data-wp-interactive', 'core/gallery' );
$processed_content->set_attribute( 'data-wp-context', '{"lightbox": true, "images": []}' );

// The WP_HTML_Tag_Processor class calls get_updated_html() internally
// when the instance is treated as a string, but here we explicitly
@@ -196,32 +170,6 @@ 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.
*
16 changes: 0 additions & 16 deletions packages/block-library/src/gallery/view.js

This file was deleted.

2 changes: 1 addition & 1 deletion packages/block-library/src/image/index.php
Original file line number Diff line number Diff line change
@@ -291,7 +291,7 @@ function block_core_image_print_lightbox_overlay() {
<div
class="wp-lightbox-overlay zoom"
data-wp-interactive="core/image"
data-wp-context='{ "carousel": "true" }'
data-wp-context='{}'
data-wp-bind--role="state.roleAttribute"
data-wp-bind--aria-label="state.currentImage.ariaLabel"
data-wp-bind--aria-modal="state.ariaModal"
1 change: 0 additions & 1 deletion tools/webpack/interactivity.js
Original file line number Diff line number Diff line change
@@ -23,7 +23,6 @@ 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',
},