Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PLANET-6742 Add right sizes attributes for some core blocks #837

Merged
merged 7 commits into from
Apr 26, 2022
Merged

PLANET-6742 Add right sizes attributes for some core blocks #837

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2007217
Improve core Query Loop sizes attributes
Inwerpsel Apr 25, 2022
bff4719
Add right sizes for Media and Text block image
Inwerpsel Apr 25, 2022
98221ae
Fix width logic
Inwerpsel Apr 25, 2022
162701e
Subtract padding on full width
Inwerpsel Apr 25, 2022
737c603
Fix syntax closing parens
Inwerpsel Apr 25, 2022
cbe676d
Avoid mobile breakpoint
Inwerpsel Apr 25, 2022
993c448
Make normal alignment work
Inwerpsel Apr 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 101 additions & 0 deletions planet4-gutenberg-blocks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Copy link
Contributor

@GP-Dan-Tovbein GP-Dan-Tovbein Apr 26, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct me if I'm wrong, but if this value refers to min-width, because of this, which is the value for lower screens?

Copy link
Contributor Author

@Inwerpsel Inwerpsel Apr 26, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For lower screens it goes to full width of the screen - padding (or no padding for full width blocks). I didn't add it here yet because the default is a "special case" where the width is not specified.

'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 );
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is safe to do as long as the Query Loop block has no other images than the post featured image. This is the case for now, and the result shouldn't be that bad if other image are affected.

Perhaps we can make assumptions about the sizes attributes we're matching to get more certainty. e.g. match only those that default to 100vw.

}

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}\"";
Inwerpsel marked this conversation as resolved.
Show resolved Hide resolved
} 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 ";
Inwerpsel marked this conversation as resolved.
Show resolved Hide resolved

$block_content = str_replace(
$image_class_start,
"$sizes_attr srcset=\"$srcset\" $image_class_start",
$block_content
);
}

return $block_content;
},
10,
3
);