diff --git a/extensions/blocks/tiled-gallery/tiled-gallery.php b/extensions/blocks/tiled-gallery/tiled-gallery.php
index bb5bcdb3d0a43..bcfdaf1f2784e 100644
--- a/extensions/blocks/tiled-gallery/tiled-gallery.php
+++ b/extensions/blocks/tiled-gallery/tiled-gallery.php
@@ -1,4 +1,5 @@
- 'jetpack_tiled_gallery_load_block_assets',
- )
- );
+/**
+ * Jetpack Tiled Gallery Block class
+ *
+ * @since 7.3
+ */
+class Jetpack_Tiled_Gallery_Block {
+ /* Values for building srcsets */
+ const IMG_SRCSET_WIDTH_MAX = 2000;
+ const IMG_SRCSET_WIDTH_MIN = 600;
+ const IMG_SRCSET_WIDTH_STEP = 300;
+
+ /**
+ * Register the block
+ */
+ public static function register() {
+ jetpack_register_block(
+ 'jetpack/tiled-gallery',
+ array(
+ 'render_callback' => array( __CLASS__, 'render' ),
+ )
+ );
+ }
/**
- * Tiled gallery block registration/dependency declaration.
+ * Tiled gallery block registration
*
* @param array $attr Array containing the block attributes.
* @param string $content String containing the block content.
*
* @return string
*/
- function jetpack_tiled_gallery_load_block_assets( $attr, $content ) {
+ public static function render( $attr, $content ) {
Jetpack_Gutenberg::load_assets_as_required( 'tiled-gallery' );
+ $is_squareish_layout = self::is_squareish_layout( $attr );
+
+ if ( preg_match_all( '/]+>/', $content, $images ) ) {
+ /**
+ * This block processes all of the images that are found and builds $find and $replace.
+ *
+ * The original img is added to the $find array and the replacement is made and added
+ * to the $replace array. This is so that the same find and replace operations can be
+ * made on the entire $content.
+ */
+ $find = array();
+ $replace = array();
+
+ foreach ( $images[0] as $image_html ) {
+ if (
+ preg_match( '/data-width="([0-9]+)"/', $image_html, $img_height )
+ && preg_match( '/data-height="([0-9]+)"/', $image_html, $img_width )
+ && preg_match( '/src="([^"]+)"/', $image_html, $img_src )
+ ) {
+ // Drop img src query string so it can be used as a base to add photon params
+ // for the srcset.
+ $src_parts = explode( '?', $img_src[1], 2 );
+ $orig_src = $src_parts[0];
+ $orig_height = absint( $img_height[1] );
+ $orig_width = absint( $img_width[1] );
+
+ // Because URLs are already "photon", the photon function used short-circuits
+ // before ssl is added. Detect ssl and add is if necessary.
+ $is_ssl = ! empty( $src_parts[1] ) && false !== strpos( $src_parts[1], 'ssl=1' );
+
+ if ( ! $orig_width || ! $orig_height || ! $orig_src ) {
+ continue;
+ }
+
+ $srcset_parts = array();
+ if ( $is_squareish_layout ) {
+ $min_width = min( self::IMG_SRCSET_WIDTH_MIN, $orig_width, $orig_height );
+ $max_width = min( self::IMG_SRCSET_WIDTH_MAX, $orig_width, $orig_height );
+
+ for ( $w = $min_width; $w <= $max_width; $w = min( $max_width, $w + self::IMG_SRCSET_WIDTH_STEP ) ) {
+ $srcset_src = add_query_arg(
+ array(
+ 'resize' => $w . ',' . $w,
+ 'strip' => 'all',
+ ),
+ $orig_src
+ );
+ if ( $is_ssl ) {
+ $srcset_src = add_query_arg( 'ssl', '1', $srcset_src );
+ }
+ $srcset_parts[] = esc_url( $srcset_src ) . ' ' . $w . 'w';
+ if ( $w >= $max_width ) {
+ break;
+ }
+ }
+ } else {
+ $min_width = min( self::IMG_SRCSET_WIDTH_MIN, $orig_width );
+ $max_width = min( self::IMG_SRCSET_WIDTH_MAX, $orig_width );
+
+ for ( $w = $min_width; $w <= $max_width; $w = min( $max_width, $w + self::IMG_SRCSET_WIDTH_STEP ) ) {
+ $srcset_src = add_query_arg(
+ array(
+ 'strip' => 'all',
+ 'w' => $w,
+ ),
+ $orig_src
+ );
+ if ( $is_ssl ) {
+ $srcset_src = add_query_arg( 'ssl', '1', $srcset_src );
+ }
+ $srcset_parts[] = esc_url( $srcset_src ) . ' ' . $w . 'w';
+ if ( $w >= $max_width ) {
+ break;
+ }
+ }
+ }
+
+ if ( ! empty( $srcset_parts ) ) {
+ $srcset = 'srcset="' . esc_attr( implode( ',', $srcset_parts ) ) . '"';
+
+ $find[] = $image_html;
+ $replace[] = str_replace( '