Carousel: add support for the new Tiled Gallery block. (#11060)

- Add a new filter to the output of the tiled gallery block, to allow us to inject the data needed by
Carousel.
- Add data to gallery container when using the Tiled Gallery block.
- Trigger Carousel modal on clicks on Tiled Gallery blocks

modules/blocks.php

@@ -43,7 +43,17 @@ function jetpack_tiled_gallery_load_block_assets( $attr, $content ) {
 			'wp-token-list',
 		);
 		Jetpack_Gutenberg::load_assets_as_required( 'tiled-gallery', $dependencies );
-		return $content;
+
+		/**
+		 * Filter the output of the Tiled Galleries content.
+		 *
+		 * @module tiled-gallery
+		 *
+		 * @since 6.9.0
+		 *
+		 * @param string $content Tiled Gallery block content.
+		 */
+		return apply_filters( 'jetpack_tiled_galleries_block_content', $content );
 	}
 }
 

modules/carousel/jetpack-carousel.js

@@ -1446,7 +1446,7 @@ jQuery(document).ready(function($) {
 	};
 
 	// register the event listener for starting the gallery
-	$( document.body ).on( 'click.jp-carousel', 'div.gallery, div.tiled-gallery, ul.wp-block-gallery, a.single-image-gallery', function( e ) {
+	$(document.body).on('click.jp-carousel', 'div.gallery, div.tiled-gallery, ul.wp-block-gallery, div.wp-block-jetpack-tiled-gallery, a.single-image-gallery', function( e ) {
 		if ( ! $(this).jp_carousel( 'testForData', e.currentTarget ) ) {
 			return;
 		}
@@ -1466,7 +1466,7 @@ jQuery(document).ready(function($) {
 		// Stopping propagation in case there are parent elements
 		// with .gallery or .tiled-gallery class
 		e.stopPropagation();
-		$(this).jp_carousel('open', { start_index: $(this).find('.gallery-item, .tiled-gallery-item, .blocks-gallery-item').index($(e.target).parents('.gallery-item, .tiled-gallery-item, .blocks-gallery-item'))});
+		$(this).jp_carousel('open', { start_index: $(this).find('.gallery-item, .tiled-gallery-item, .blocks-gallery-item, .tiled-gallery__item').index($(e.target).parents('.gallery-item, .tiled-gallery-item, .blocks-gallery-item, .tiled-gallery__item'))});
 	});
 
 	// handle lightbox (single image gallery) for images linking to 'Attachment Page'
@@ -1503,7 +1503,7 @@ jQuery(document).ready(function($) {
 		last_known_location_hash = window.location.hash;
 		matches = window.location.hash.match( hashRegExp );
 		attachmentId = parseInt( matches[1], 10 );
-		galleries = $( 'div.gallery, div.tiled-gallery, a.single-image-gallery, ul.wp-block-gallery' );
+		galleries = $( 'div.gallery, div.tiled-gallery, a.single-image-gallery, ul.wp-block-gallery, div.wp-block-jetpack-tiled-gallery' );
 
 		// Find the first thumbnail that matches the attachment ID in the location
 		// hash, then open the gallery that contains it.

modules/carousel/jetpack-carousel.php

@@ -78,6 +78,7 @@ function init() {
 			add_filter( 'gallery_style', array( $this, 'add_data_to_container' ) );
 			add_filter( 'wp_get_attachment_image_attributes', array( $this, 'add_data_to_images' ), 10, 2 );
 			add_filter( 'the_content', array( $this, 'check_content_for_blocks' ), 1 );
+			add_filter( 'jetpack_tiled_galleries_block_content', array( $this, 'add_data_img_tags_and_enqueue_assets' ) );
 			if ( $this->single_image_gallery_enabled ) {
 				add_filter( 'the_content', array( $this, 'add_data_img_tags_and_enqueue_assets' ) );
 			}
@@ -199,8 +200,20 @@ function check_if_shortcode_processed_and_enqueue_assets( $output ) {
 		return $output;
 	}
 
+	/**
+	 * Check if the content of a post uses gallery blocks. To be used by 'the_content' filter.
+	 *
+	 * @since 6.8.0
+	 *
+	 * @param string $content Post content.
+	 *
+	 * @return string $content Post content.
+	 */
 	function check_content_for_blocks( $content ) {
-		if ( function_exists( 'has_block' ) && has_block( 'gallery', $content ) ) {
+		if (
+			function_exists( 'has_block' )
+			&& ( has_block( 'gallery', $content ) || has_block( 'jetpack/tiled-gallery', $content ) )
+		) {
 			$this->enqueue_assets();
 			$content = $this->add_data_to_container( $content );
 		}
@@ -216,7 +229,7 @@ function enqueue_assets() {
 					'modules/carousel/jetpack-carousel.js'
 				),
 				array( 'jquery.spin' ),
-				$this->asset_version( '20181220' ),
+				$this->asset_version( '20190102' ),
 				true
 			);
 
@@ -365,11 +378,10 @@ function add_data_img_tags_and_enqueue_assets( $content ) {
 			return $content;
 		}
 		$selected_images = array();
-
 		foreach ( $matches[0] as $image_html ) {
-			if ( preg_match( '/wp-image-([0-9]+)/i', $image_html, $class_id ) &&
-				( $attachment_id = absint( $class_id[1] ) ) ) {
-				/*
+			if ( preg_match( '/(wp-image-|data-id=)\"?([0-9]+)\"?/i', $image_html, $class_id ) ) {
+				$attachment_id = absint( $class_id[2] );
+				/**
 				 * If exactly the same image tag is used more than once, overwrite it.
 				 * All identical tags will be replaced later with 'str_replace()'.
 				 */
@@ -423,7 +435,7 @@ function add_data_to_images( $attr, $attachment = null ) {
 		$img_meta        = ( ! empty( $meta['image_meta'] ) ) ? (array) $meta['image_meta'] : array();
 		$comments_opened = intval( comments_open( $attachment_id ) );
 
-		 /*
+		/**
 		 * Note: Cannot generate a filename from the width and height wp_get_attachment_image_src() returns because
 		 * it takes the $content_width global variable themes can set in consideration, therefore returning sizes
 		 * which when used to generate a filename will likely result in a 404 on the image.