From 2007217eb8db78dbb0d54c598b25371c8a0d00cf Mon Sep 17 00:00:00 2001 From: inwerpsel Date: Mon, 25 Apr 2022 12:36:10 +0200 Subject: [PATCH 1/7] Improve core Query Loop sizes attributes * Makes the assumption that the only images inside the block are post featured images spanning the full width of the container. * A similar fix can be done for media and text, and possibly columns. * It gets hard when multiple blocks that force a width are nested in each other. In that case it might be possible to access block context, at least for a few cases. --- planet4-gutenberg-blocks.php | 60 ++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/planet4-gutenberg-blocks.php b/planet4-gutenberg-blocks.php index fdde1ce6a..39ff8d428 100644 --- a/planet4-gutenberg-blocks.php +++ b/planet4-gutenberg-blocks.php @@ -410,3 +410,63 @@ 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' => 600, + 'width' => '540px', + ], + [ + 'screen' => 576, + 'width' => '540px', + 'collapse' => true, + ], +]; + +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']; + $column_count = isset( $breakpoint['collapse'] ) ? 1 : $column_count; + + return "(min-width: ${screen}px) calc(($container / $column_count) - 1.25em + (1.25em / $column_count))"; + }, + $breakpoints + ); + + $sizes_attr = 'sizes="' . implode( ', ', $sizes ) . ', 100vw"'; + + // Assume all images are full width in a container. + $block_content = preg_replace( '/sizes=".*"/', $sizes_attr, $block_content ); + } + + return $block_content; + }, + 10, + 3 +); From bff47191279ebbe836f69769d1c3a2a30ef128b7 Mon Sep 17 00:00:00 2001 From: inwerpsel Date: Mon, 25 Apr 2022 14:02:52 +0200 Subject: [PATCH 2/7] Add right sizes for Media and Text block image * It's a different case from the Query Loop block, which already has sizes and srcset attribute. Media and Text relies and a filter running after it to add the right things. However if the filter already finds both attributes, it leaves them in place. * Support media width attribute, as it's always a percentage of the viewport width. --- planet4-gutenberg-blocks.php | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/planet4-gutenberg-blocks.php b/planet4-gutenberg-blocks.php index 39ff8d428..60f62a892 100644 --- a/planet4-gutenberg-blocks.php +++ b/planet4-gutenberg-blocks.php @@ -465,6 +465,25 @@ function ( $breakpoint ) use ( $column_count ) { $block_content = preg_replace( '/sizes=".*"/', $sizes_attr, $block_content ); } + if ( 'core/media-text' === $block['blockName'] && $instance->attributes['mediaId'] ) { + $media_id = $instance->attributes['mediaId']; + $width = $instance->attributes['mediaWidth'] ?? 50; + + $srcset = wp_get_attachment_image_srcset( $media_id, 'full' ); + + $stack_mobile = ! $instance->attributes['isStackedOnMobile'] ? '' : '(max-width: 600px) 100vw, '; + + $sizes_attr = "sizes=\"{$stack_mobile}{$width}vw\""; + + $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, From 98221ae52528c6d5e7ec93ba0e082fd4b804b82a Mon Sep 17 00:00:00 2001 From: inwerpsel Date: Mon, 25 Apr 2022 14:54:34 +0200 Subject: [PATCH 3/7] Fix width logic * Didn't properly calculate paddings. --- planet4-gutenberg-blocks.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/planet4-gutenberg-blocks.php b/planet4-gutenberg-blocks.php index 60f62a892..ef08f4bcb 100644 --- a/planet4-gutenberg-blocks.php +++ b/planet4-gutenberg-blocks.php @@ -454,7 +454,7 @@ function ( $breakpoint ) use ( $column_count ) { $container = $breakpoint['width']; $column_count = isset( $breakpoint['collapse'] ) ? 1 : $column_count; - return "(min-width: ${screen}px) calc(($container / $column_count) - 1.25em + (1.25em / $column_count))"; + return "(min-width: ${screen}px) calc(($container / $column_count) - 1.25em * ($column_count - 1)"; }, $breakpoints ); From 162701efdef8250357f2ae0dd389b0ceaef7855d Mon Sep 17 00:00:00 2001 From: inwerpsel Date: Mon, 25 Apr 2022 15:37:35 +0200 Subject: [PATCH 4/7] Subtract padding on full width * The padding is there if the whole Query Loop block isn't set as full width. If it is set as full width, the image size calculation is very different. --- planet4-gutenberg-blocks.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/planet4-gutenberg-blocks.php b/planet4-gutenberg-blocks.php index ef08f4bcb..59318852c 100644 --- a/planet4-gutenberg-blocks.php +++ b/planet4-gutenberg-blocks.php @@ -459,7 +459,7 @@ function ( $breakpoint ) use ( $column_count ) { $breakpoints ); - $sizes_attr = 'sizes="' . implode( ', ', $sizes ) . ', 100vw"'; + $sizes_attr = 'sizes="' . implode( ', ', $sizes ) . ', calc(100vw - 24px)"'; // Assume all images are full width in a container. $block_content = preg_replace( '/sizes=".*"/', $sizes_attr, $block_content ); From 737c603d54e930a0094a850203b152c875bf7129 Mon Sep 17 00:00:00 2001 From: inwerpsel Date: Mon, 25 Apr 2022 16:53:09 +0200 Subject: [PATCH 5/7] Fix syntax closing parens * Ugh. --- planet4-gutenberg-blocks.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/planet4-gutenberg-blocks.php b/planet4-gutenberg-blocks.php index 59318852c..d57f5ef90 100644 --- a/planet4-gutenberg-blocks.php +++ b/planet4-gutenberg-blocks.php @@ -454,7 +454,7 @@ function ( $breakpoint ) use ( $column_count ) { $container = $breakpoint['width']; $column_count = isset( $breakpoint['collapse'] ) ? 1 : $column_count; - return "(min-width: ${screen}px) calc(($container / $column_count) - 1.25em * ($column_count - 1)"; + return "(min-width: ${screen}px) calc(($container / $column_count) - 1.25em * ($column_count - 1))"; }, $breakpoints ); From cbe676d3265bf6c4af869e2dc1a2859aced37055 Mon Sep 17 00:00:00 2001 From: inwerpsel Date: Mon, 25 Apr 2022 17:07:06 +0200 Subject: [PATCH 6/7] Avoid mobile breakpoint * Already handled by default case. --- planet4-gutenberg-blocks.php | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/planet4-gutenberg-blocks.php b/planet4-gutenberg-blocks.php index d57f5ef90..cacbcd62e 100644 --- a/planet4-gutenberg-blocks.php +++ b/planet4-gutenberg-blocks.php @@ -432,11 +432,6 @@ function ( $std_class_object ) { 'screen' => 600, 'width' => '540px', ], - [ - 'screen' => 576, - 'width' => '540px', - 'collapse' => true, - ], ]; add_filter( @@ -450,16 +445,16 @@ function ( $block_content, $block, WP_Block $instance ) use ( $breakpoints ) { $sizes = array_map( function ( $breakpoint ) use ( $column_count ) { - $screen = $breakpoint['screen']; - $container = $breakpoint['width']; - $column_count = isset( $breakpoint['collapse'] ) ? 1 : $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 * ($column_count - 1))"; + return "(min-width: ${screen}px) calc($container / $column_count - 1.25em * $cols_minus_one)"; }, $breakpoints ); - $sizes_attr = 'sizes="' . implode( ', ', $sizes ) . ', calc(100vw - 24px)"'; + $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 ); From 993c44852fc8f2641f78dff824a34bf8688dfbb7 Mon Sep 17 00:00:00 2001 From: inwerpsel Date: Tue, 26 Apr 2022 11:54:49 +0200 Subject: [PATCH 7/7] Make normal alignment work * Now it gives right sizes for both. * Improve breakpoint for change from full width to not full width. --- planet4-gutenberg-blocks.php | 45 ++++++++++++++++++++++++++++-------- 1 file changed, 36 insertions(+), 9 deletions(-) diff --git a/planet4-gutenberg-blocks.php b/planet4-gutenberg-blocks.php index cacbcd62e..dddf9bde4 100644 --- a/planet4-gutenberg-blocks.php +++ b/planet4-gutenberg-blocks.php @@ -429,7 +429,11 @@ function ( $std_class_object ) { 'width' => '720px', ], [ - 'screen' => 600, + 'screen' => 601, + 'width' => '540px', + ], + [ + 'screen' => 577, 'width' => '540px', ], ]; @@ -445,8 +449,8 @@ function ( $block_content, $block, WP_Block $instance ) use ( $breakpoints ) { $sizes = array_map( function ( $breakpoint ) use ( $column_count ) { - $screen = $breakpoint['screen']; - $container = $breakpoint['width']; + $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)"; @@ -454,21 +458,44 @@ function ( $breakpoint ) use ( $column_count ) { $breakpoints ); - $sizes_attr = 'sizes="' . implode( ', ', array_merge($sizes, ['calc(100vw - 24px)']) ) . '"'; + $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']; - $width = $instance->attributes['mediaWidth'] ?? 50; + $media_id = $instance->attributes['mediaId']; + $media_width = $instance->attributes['mediaWidth'] ?? 50; $srcset = wp_get_attachment_image_srcset( $media_id, 'full' ); - $stack_mobile = ! $instance->attributes['isStackedOnMobile'] ? '' : '(max-width: 600px) 100vw, '; - - $sizes_attr = "sizes=\"{$stack_mobile}{$width}vw\""; + 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 ";