Tiled Gallery block: Adding styles to squareish tiled gallery images …

…on WoA sites (#27858)

projects/plugins/jetpack/changelog/fix-woa-squarish-tiled-galleries

@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+Tiled Gallery block: Ensuring localhost and WoA sites with squareish gallery images display those images with correct aspect ratios.

projects/plugins/jetpack/extensions/blocks/tiled-gallery/tiled-gallery.php

@@ -12,6 +12,7 @@
 
 use Automattic\Jetpack\Blocks;
 use Automattic\Jetpack\Status;
+use Automattic\Jetpack\Status\Host;
 use Jetpack;
 use Jetpack_Gutenberg;
 use Jetpack_Plan;
@@ -184,6 +185,21 @@ private static function is_squareish_layout( $attr ) {
 				|| 'is-style-circle' === $attr['className']
 			);
 	}
+
+	/**
+	 * Adds an equal aspect ratio to squareish (square and circular) tiled gallery images on WoA sites.
+	 *
+	 * Without this, these images in newly added tiled galleries on private WoA sites
+	 * (and public if broken on the private sites) have un-equal spect ratios.
+	 */
+	public static function add_woa_squareish_styles() {
+		$is_atomic_site = ( new Host() )->is_woa_site();
+		$status         = new Status();
+		if ( $is_atomic_site || $status->is_local_site() ) {
+			wp_enqueue_style( 'jetpack-squareish-tiled-gallery-styles', plugins_url( 'modules/tiled-gallery/tiled-gallery/squareish.css', JETPACK__PLUGIN_FILE ), array(), JETPACK__VERSION );
+		}
+	}
 }
 
 Tiled_Gallery::register();
+Tiled_Gallery::add_woa_squareish_styles();

projects/plugins/jetpack/modules/tiled-gallery/tiled-gallery/squareish.css

@@ -0,0 +1,3 @@
+.wp-block-jetpack-tiled-gallery.is-style-square img, .wp-block-jetpack-tiled-gallery.is-style-circle img {
+	aspect-ratio: 1/1;
+}