Skip to content

Commit 9677bca

Browse files
joemcgilljoemcgill
committed
Simplify passing of context for sizes calculation
This removes the need to pass whether there is a parent block by comparing the constraints of the parent block prior to calling `auto_sizes_calculate_width()`.
1 parent 25d95ea commit 9677bca

File tree

2 files changed

+88
-61
lines changed

2 files changed

+88
-61
lines changed

‎plugins/auto-sizes/includes/improve-calculate-sizes.php

Lines changed: 80 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -99,14 +99,17 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
9999
* @param string $sizes The image sizes attribute value.
100100
* @param string $size The image size data.
101101
*/
102-
$filter = static function ( $sizes, $size ) use ( $block, $parsed_block ) {
102+
$filter = static function ( $sizes, $size ) use ( $block ) {
103+
103104
$id = $block->attributes['id'] ?? 0;
104105
$alignment = $block->attributes['align'] ?? '';
105106
$width = $block->attributes['width'] ?? '';
106-
$has_parent_block = isset( $parsed_block['parentLayout'] );
107-
$ancestor_block_align = $block->context['ancestor_block_align'] ?? '';
107+
$ancestor_block_align = $block->context['ancestor_block_align'] ?? 'full';
108+
109+
$better_sizes = auto_sizes_calculate_better_sizes( (int) $id, (string) $size, (string) $alignment, (string) $width, (string) $ancestor_block_align );
108110

109-
return auto_sizes_calculate_better_sizes( (int) $id, (string) $size, (string) $alignment, (string) $width, $has_parent_block, (string) $ancestor_block_align );
111+
// If better sizes can't be calculated, use the default sizes.
112+
return false !== $better_sizes ? $better_sizes : $sizes;
110113
};
111114

112115
// Hook this filter early, before default filters are run.
@@ -144,93 +147,113 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
144147
* @param string $size The image size data.
145148
* @param string $align The image alignment.
146149
* @param string $resize_width Resize image width.
147-
* @param bool $has_parent_block Check if image block has parent block.
148150
* @param string $ancestor_block_align The ancestor block alignment.
149-
* @return string The sizes attribute value.
151+
* @return string|false An improved sizes attribute or false if a better size cannot be calculated.
150152
*/
151-
function auto_sizes_calculate_better_sizes( int $id, string $size, string $align, string $resize_width, bool $has_parent_block, string $ancestor_block_align ): string {
152-
$image = wp_get_attachment_image_src( $id, $size );
153+
function auto_sizes_calculate_better_sizes( int $id, string $size, string $align, string $resize_width, string $ancestor_block_align ) {
154+
// Without an image ID or a resize width, we cannot calculate a better size.
155+
if ( ! (bool) $id && ! (bool) $resize_width ) {
156+
return false;
157+
}
153158

154-
if ( false === $image ) {
155-
return '';
159+
$image_data = wp_get_attachment_image_src( $id, $size );
160+
161+
$resize_width = (int) $resize_width;
162+
$image_width = false !== $image_data ? $image_data[1] : 0;
163+
164+
// If we don't have an image width or a resize width, we cannot calculate a better size.
165+
if ( ! ( (bool) $image_width || (bool) $resize_width ) ) {
166+
return false;
156167
}
157168

158-
// Retrieve width from the image tag itself.
159-
$image_width = '' !== $resize_width ? (int) $resize_width : $image[1];
160-
161-
if ( $has_parent_block ) {
162-
if ( 'full' === $ancestor_block_align && 'full' === $align ) {
163-
$width = auto_sizes_calculate_width( $align, $image_width );
164-
return auto_sizes_format_sizes_attribute( $align, $width );
165-
} elseif ( 'full' !== $ancestor_block_align && 'full' === $align ) {
166-
$width = auto_sizes_calculate_width( $ancestor_block_align, $image_width );
167-
return auto_sizes_format_sizes_attribute( $ancestor_block_align, $width );
168-
} elseif ( 'full' !== $ancestor_block_align ) {
169-
$parent_block_alignment_width = auto_sizes_calculate_width( $ancestor_block_align, $image_width );
170-
$block_alignment_width = auto_sizes_calculate_width( $align, $image_width );
171-
if ( (int) $parent_block_alignment_width < (int) $block_alignment_width ) {
172-
return auto_sizes_format_sizes_attribute( $ancestor_block_align, $parent_block_alignment_width );
173-
} else {
174-
return auto_sizes_format_sizes_attribute( $align, $block_alignment_width );
175-
}
176-
}
169+
/*
170+
* If we don't have an image width, use the resize width.
171+
* If we have both an image width and a resize width, use the smaller of the two.
172+
*/
173+
if ( ! (bool) $image_width ) {
174+
$image_width = $resize_width;
175+
} elseif ( (bool) $resize_width ) {
176+
$image_width = min( $image_width, $resize_width );
177177
}
178178

179-
$width = auto_sizes_calculate_width( $align, $image_width );
180-
return auto_sizes_format_sizes_attribute( $align, $width );
179+
// Normalize default alignment values.
180+
$align = '' !== $align ? $align : 'default';
181+
$ancestor_block_align = '' !== $ancestor_block_align ? $ancestor_block_align : 'default';
182+
183+
// We'll choose which alignment to use, based on which is more constraining.
184+
$constraint = array(
185+
'full' => 0,
186+
'wide' => 1,
187+
'left' => 2,
188+
'right' => 2,
189+
'center' => 2,
190+
'default' => 3,
191+
);
192+
193+
$alignment = $constraint[ $align ] > $constraint[ $ancestor_block_align ] ? $align : $ancestor_block_align;
194+
195+
return auto_sizes_calculate_width( $alignment, $image_width, $ancestor_block_align );
196+
}
197+
198+
/**
199+
* Retrieves the layout width for an alignment defined in theme.json.
200+
*
201+
* @since n.e.x.t
202+
*
203+
* @param string $alignment The alignment value.
204+
* @return string The alignment width based.
205+
*/
206+
function auto_sizes_get_layout_width( string $alignment ): string {
207+
$layout = auto_sizes_get_layout_settings();
208+
209+
$layout_widths = array(
210+
'full' => '100vw',
211+
'wide' => array_key_exists( 'wideSize', $layout ) ? $layout['wideSize'] : '',
212+
'default' => array_key_exists( 'contentSize', $layout ) ? $layout['contentSize'] : '',
213+
);
214+
215+
return $layout_widths[ $alignment ] ?? '';
181216
}
182217

183218
/**
184219
* Calculates the width value for the `sizes` attribute based on block information.
185220
*
186221
* @since n.e.x.t
187222
*
188-
* @param string $alignment The alignment.
189-
* @param int $image_width The image width.
223+
* @param string $alignment The alignment.
224+
* @param int $image_width The image width.
225+
* @param string $ancestor_alignment The ancestor alignment.
190226
* @return string The calculated width value.
191227
*/
192-
function auto_sizes_calculate_width( string $alignment, int $image_width ): string {
193-
$sizes = '';
194-
$layout = auto_sizes_get_layout_settings();
228+
function auto_sizes_calculate_width( string $alignment, int $image_width, string $ancestor_alignment ): string {
229+
$sizes = '';
195230

196231
// Handle different alignment use cases.
197232
switch ( $alignment ) {
198233
case 'full':
199-
$sizes = '100vw';
234+
$layout_width = auto_sizes_get_layout_width( 'full' );
200235
break;
201236

202237
case 'wide':
203-
$sizes = array_key_exists( 'wideSize', $layout ) ? $layout['wideSize'] : '';
238+
$layout_width = auto_sizes_get_layout_width( 'wide' );
204239
break;
205240

206241
case 'left':
207242
case 'right':
208243
case 'center':
209-
$sizes = auto_sizes_get_width( '', $image_width );
244+
// Todo: use smaller fo the two values.
245+
$content_width = auto_sizes_get_layout_width( $ancestor_alignment );
246+
$layout_width = sprintf( '%1$spx', $image_width );
210247
break;
211248

212249
default:
213-
$sizes = array_key_exists( 'contentSize', $layout )
214-
? auto_sizes_get_width( $layout['contentSize'], $image_width )
215-
: '';
250+
// Todo: use smaller fo the two values.
251+
$content_width = auto_sizes_get_layout_width( 'default' );
252+
$layout_width = min( (int) $content_width, $image_width ) . 'px';
216253
break;
217254
}
218-
return $sizes;
219-
}
220255

221-
/**
222-
* Formats the `sizes` attribute value.
223-
*
224-
* @since n.e.x.t
225-
*
226-
* @param string $alignment The alignment.
227-
* @param string $width The calculated width value.
228-
* @return string The formatted sizes attribute value.
229-
*/
230-
function auto_sizes_format_sizes_attribute( string $alignment, string $width ): string {
231-
return 'full' === $alignment
232-
? $width
233-
: sprintf( '(max-width: %1$s) 100vw, %1$s', $width );
256+
return 'full' === $alignment ? $layout_width : sprintf( '(max-width: %1$s) 100vw, %1$s', $layout_width );
234257
}
235258

236259
/**

‎plugins/auto-sizes/tests/test-improve-calculate-sizes.php

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ public function test_that_if_disable_responsive_image_then_it_will_not_add_sizes
6262
* @param string $image_size Image size.
6363
*/
6464
public function test_image_block_with_full_alignment( string $image_size ): void {
65-
$block_content = '<!-- wp:image {"id":' . self::$image_id . ',"sizeSlug":"' . $image_size . '","linkDestination":"none","align":"full"} --><figure class="wp-block-image size-' . $image_size . '"><img src="' . wp_get_attachment_image_url( self::$image_id, $image_size ) . '" alt="" class="wp-image-' . self::$image_id . '"/></figure><!-- /wp:image -->';
65+
$block_content = $this->get_image_block_markup( self::$image_id, $image_size, 'full' );
6666

6767
$result = apply_filters( 'the_content', $block_content );
6868

@@ -93,7 +93,7 @@ public function test_cover_block_with_full_alignment(): void {
9393
* @param string $image_size Image size.
9494
*/
9595
public function test_image_block_with_wide_alignment( string $image_size ): void {
96-
$block_content = '<!-- wp:image {"id":' . self::$image_id . ',"sizeSlug":"' . $image_size . '","linkDestination":"none","align":"wide"} --><figure class="wp-block-image size-' . $image_size . '"><img src="' . wp_get_attachment_image_url( self::$image_id, $image_size ) . '" alt="" class="wp-image-' . self::$image_id . '"/></figure><!-- /wp:image -->';
96+
$block_content = $this->get_image_block_markup( self::$image_id, $image_size, 'wide' );
9797

9898
$result = apply_filters( 'the_content', $block_content );
9999

@@ -531,7 +531,9 @@ public function get_image_block_markup( int $attachment_id, string $size = 'full
531531
'linkDestination' => 'none',
532532
);
533533

534-
return '<!-- wp:image ' . wp_json_encode( $atts ) . ' --><figure class="wp-block-image size-' . $size . '"><img src="' . $image_url . '" alt="" class="wp-image-' . $attachment_id . '"/></figure><!-- /wp:image -->';
534+
$align_class = null !== $align ? ' align' . $align : '';
535+
536+
return '<!-- wp:image ' . wp_json_encode( $atts ) . ' --><figure class="wp-block-image size-' . $size . $align_class . '"><img src="' . $image_url . '" alt="" class="wp-image-' . $attachment_id . '"/></figure><!-- /wp:image -->';
535537
}
536538

537539
/**
@@ -551,8 +553,10 @@ public function get_group_block_markup( string $content, array $atts = array() )
551553
)
552554
);
553555

556+
$align_class = isset( $atts['align'] ) ? ' align' . $atts['align'] : '';
557+
554558
return '<!-- wp:group ' . wp_json_encode( $atts ) . ' -->
555-
<div class="wp-block-group">' . $content . '</div>
559+
<div class="wp-block-group' . $align_class . '">' . $content . '</div>
556560
<!-- /wp:group -->';
557561
}
558562
}

0 commit comments

Comments
 (0)