Merge pull request #837 from greenpeace/core-images-sizes

PLANET-6742 Add right sizes attributes for some core blocks
greenpeace · Apr 26, 2022 · ef9cb0e · ef9cb0e
2 parents 4ca86d1 + 993c448
commit ef9cb0e
Showing 1 changed file with 101 additions and 0 deletions.
diff --git a/planet4-gutenberg-blocks.php b/planet4-gutenberg-blocks.php
@@ -410,3 +410,104 @@ function ( $std_class_object ) {
 };
 $remove_rtl_fix();
 add_action( 'wpml_after_startup', $remove_rtl_fix, 10, 0 );
+
+$breakpoints = [
+	[
+		'screen' => 1600,
+		'width'  => '1320px',
+	],
+	[
+		'screen' => 1200,
+		'width'  => '1140px',
+	],
+	[
+		'screen' => 992,
+		'width'  => '960px',
+	],
+	[
+		'screen' => 768,
+		'width'  => '720px',
+	],
+	[
+		'screen' => 601,
+		'width'  => '540px',
+	],
+	[
+		'screen' => 577,
+		'width'  => '540px',
+	],
+];
+
+add_filter(
+	'render_block',
+	function ( $block_content, $block, WP_Block $instance ) use ( $breakpoints ) {
+		if ( 'core/query' === $block['blockName'] ) {
+			$column_count = $instance->attributes['displayLayout']['columns'] ?? null;
+			if ( ! $column_count || 1 === $column_count ) {
+				return $block_content;
+			}
+
+			$sizes = array_map(
+				function ( $breakpoint ) use ( $column_count ) {
+					$screen         = $breakpoint['screen'];
+					$container      = $breakpoint['width'];
+					$cols_minus_one = $column_count - 1;
+
+					return "(min-width: ${screen}px) calc($container / $column_count - 1.25em * $cols_minus_one)";
+				},
+				$breakpoints
+			);
+
+			$sizes_attr = 'sizes="' . implode( ', ', array_merge( $sizes, [ 'calc(100vw - 24px)' ] ) ) . '"';
+
+			// Assume all images are full width in a container.
+			$block_content = preg_replace( '/sizes=".*"/', $sizes_attr, $block_content );
+		}
+
+		if ( 'core/media-text' === $block['blockName'] && $instance->attributes['mediaId'] ) {
+			$media_id    = $instance->attributes['mediaId'];
+			$media_width = $instance->attributes['mediaWidth'] ?? 50;
+
+			$srcset = wp_get_attachment_image_srcset( $media_id, 'full' );
+
+			if ( 'full' === $instance->attributes['align'] ) {
+				$sizes = ! $instance->attributes['isStackedOnMobile'] ? "${media_width}vw"
+					: "(min-width: 601px) {$media_width}vw, 100vw";
+
+				$sizes_attr = "sizes=\"{$sizes}\"";
+			} else {
+				$default = ! $instance->attributes['isStackedOnMobile'] ? "calc((100vw - 24px) * $media_width / 100)"
+					: 'calc(100vw - 24px)';
+				$sizes   = implode(
+					',',
+					array_map(
+						function ( $breakpoint ) use ( $instance, $media_width ) {
+							$screen       = $breakpoint['screen'];
+							$container    = $breakpoint['width'];
+							$should_stack = $screen < 600 && $instance->attributes['isStackedOnMobile'];
+							$fraction     = $should_stack ? 1 : round( 100 / $media_width, 4 );
+
+							// Currently, we need to subtract 24px for Bootstrap container.
+							return "(min-width: ${screen}px) calc(($container - 24px) / $fraction)";
+						},
+						$breakpoints
+					)
+				);
+
+				$sizes_attr = "sizes=\"{$sizes}, {$default}\"";
+			}
+
+			$image_class_start = "class=\"wp-image-$media_id ";
+
+			$block_content = str_replace(
+				$image_class_start,
+				"$sizes_attr srcset=\"$srcset\" $image_class_start",
+				$block_content
+			);
+		}
+
+		return $block_content;
+	},
+	10,
+	3
+);