diff --git a/planet4-gutenberg-blocks.php b/planet4-gutenberg-blocks.php index dc47a9976a..9a26120dfd 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', ], ]; @@ -467,13 +471,37 @@ function ( $breakpoint ) use ( $column_count ) { if ( 'core/media-text' === $block['blockName'] && $instance->attributes['mediaId'] ) { $media_id = $instance->attributes['mediaId']; - $width = $instance->attributes['mediaWidth'] ?? 50; + $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 ( $instance->attributes['align'] === 'full' ) { + $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 ";