Skip to content

Commit 7cbb7ae

Browse files
mukeshpanchal27mukeshpanchal27
committed
Fix sizes for center alignment
1 parent 0ad91f6 commit 7cbb7ae

File tree

2 files changed

+69
-23
lines changed

2 files changed

+69
-23
lines changed

‎plugins/auto-sizes/hooks.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,7 @@ function auto_sizes_improve_image_sizes_attribute( string $content, array $parse
160160

161161
case 'left':
162162
case 'right':
163+
case 'center':
163164
$width = auto_sizes_get_width( '', $image_width );
164165
$sizes = sprintf( '(max-width: %1$s) 100vw, %1$s', $width );
165166
break;

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

Lines changed: 68 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -216,16 +216,16 @@ public function test_cover_block_with_default_alignment(): void {
216216
}
217217

218218
/**
219-
* Test the image block with different image sizes and left and right alignment.
219+
* Test the image block with different image sizes and left, right and center alignment.
220220
*
221-
* @dataProvider data_image_sizes_for_left_right_alignment
221+
* @dataProvider data_image_sizes_for_left_right_center_alignment
222222
*
223223
* @param string $image_size Image size.
224224
* @param string $expected Expected output.
225225
* @param string $alignment Alignment of the image.
226226
* @param string $is_resize Whether resize or not.
227227
*/
228-
public function test_image_block_with_alignment( string $image_size, string $expected, string $alignment, string $is_resize = '' ): void {
228+
public function test_image_block_with_left_right_center_alignment( string $image_size, string $expected, string $alignment, string $is_resize = '' ): void {
229229
if ( $is_resize ) {
230230
$block_content = '<!-- wp:image {"id":' . self::$image_id . ',"width":"100px","sizeSlug":"' . $image_size . '","linkDestination":"none","align":"' . $alignment . '"} --><figure class="wp-block-image size-' . $image_size . '"><img src="' . wp_get_attachment_image_url( self::$image_id, $image_size ) . '" style="width:100px" /></figure><!-- /wp:image -->';
231231
} else {
@@ -243,107 +243,151 @@ public function test_image_block_with_alignment( string $image_size, string $exp
243243
*
244244
* @return array<array<string>> The image sizes and alignments.
245245
*/
246-
public function data_image_sizes_for_left_right_alignment(): array {
246+
public function data_image_sizes_for_left_right_center_alignment(): array {
247247
return array(
248-
'Return thumbnail image size 150px with left alignment' => array(
248+
'Return thumbnail image size 150px with left alignment' => array(
249249
'thumbnail',
250250
'sizes="(max-width: 150px) 100vw, 150px" ',
251251
'left',
252252
),
253-
'Return medium image size 300px with left alignment' => array(
253+
'Return medium image size 300px with left alignment' => array(
254254
'medium',
255255
'sizes="(max-width: 300px) 100vw, 300px" ',
256256
'left',
257257
),
258-
'Return large image size 1024px with left alignment' => array(
258+
'Return large image size 1024px with left alignment' => array(
259259
'large',
260260
'sizes="(max-width: 1024px) 100vw, 1024px" ',
261261
'left',
262262
),
263-
'Return full image size 1080px with left alignment' => array(
263+
'Return full image size 1080px with left alignment' => array(
264264
'full',
265265
'sizes="(max-width: 1080px) 100vw, 1080px" ',
266266
'left',
267267
),
268-
'Return thumbnail image size 150px with right alignment' => array(
268+
'Return thumbnail image size 150px with right alignment' => array(
269269
'thumbnail',
270270
'sizes="(max-width: 150px) 100vw, 150px" ',
271271
'right',
272272
),
273-
'Return medium image size 300px with right alignment' => array(
273+
'Return medium image size 300px with right alignment' => array(
274274
'medium',
275275
'sizes="(max-width: 300px) 100vw, 300px" ',
276276
'right',
277277
),
278-
'Return large image size 1024px with right alignment' => array(
278+
'Return large image size 1024px with right alignment' => array(
279279
'large',
280280
'sizes="(max-width: 1024px) 100vw, 1024px" ',
281281
'right',
282282
),
283-
'Return full image size 1080px with right alignment' => array(
283+
'Return full image size 1080px with right alignment' => array(
284284
'full',
285285
'sizes="(max-width: 1080px) 100vw, 1080px" ',
286286
'right',
287287
),
288-
'Return resized size 100px instead of thumbnail image size 150px with left alignment' => array(
288+
'Return thumbnail image size 150px with center alignment' => array(
289+
'thumbnail',
290+
'sizes="(max-width: 150px) 100vw, 150px" ',
291+
'center',
292+
),
293+
'Return medium image size 300px with center alignment' => array(
294+
'medium',
295+
'sizes="(max-width: 300px) 100vw, 300px" ',
296+
'center',
297+
),
298+
'Return large image size 1024px with center alignment' => array(
299+
'large',
300+
'sizes="(max-width: 1024px) 100vw, 1024px" ',
301+
'center',
302+
),
303+
'Return full image size 1080px with center alignment' => array(
304+
'full',
305+
'sizes="(max-width: 1080px) 100vw, 1080px" ',
306+
'center',
307+
),
308+
'Return resized size 100px instead of thumbnail image size 150px with left alignment' => array(
289309
'thumbnail',
290310
'sizes="(max-width: 100px) 100vw, 100px" ',
291311
'left',
292312
'yes',
293313
),
294-
'Return resized size 100px instead of medium image size 300px with left alignment' => array(
314+
'Return resized size 100px instead of medium image size 300px with left alignment' => array(
295315
'medium',
296316
'sizes="(max-width: 100px) 100vw, 100px" ',
297317
'left',
298318
'yes',
299319
),
300-
'Return resized size 100px instead of large image size 1024px with left alignment' => array(
320+
'Return resized size 100px instead of large image size 1024px with left alignment' => array(
301321
'large',
302322
'sizes="(max-width: 100px) 100vw, 100px" ',
303323
'left',
304324
'yes',
305325
),
306-
'Return resized size 100px instead of full image size 1080px with left alignment' => array(
326+
'Return resized size 100px instead of full image size 1080px with left alignment' => array(
307327
'full',
308328
'sizes="(max-width: 100px) 100vw, 100px" ',
309329
'left',
310330
'yes',
311331
),
312-
'Return resized size 100px instead of thumbnail image size 150px with right alignment' => array(
332+
'Return resized size 100px instead of thumbnail image size 150px with right alignment' => array(
313333
'thumbnail',
314334
'sizes="(max-width: 100px) 100vw, 100px" ',
315335
'right',
316336
'yes',
317337
),
318-
'Return resized size 100px instead of medium image size 300px with right alignment' => array(
338+
'Return resized size 100px instead of medium image size 300px with right alignment' => array(
319339
'medium',
320340
'sizes="(max-width: 100px) 100vw, 100px" ',
321341
'right',
322342
'yes',
323343
),
324-
'Return resized size 100px instead of large image size 1024px with right alignment' => array(
344+
'Return resized size 100px instead of large image size 1024px with right alignment' => array(
325345
'large',
326346
'sizes="(max-width: 100px) 100vw, 100px" ',
327347
'right',
328348
'yes',
329349
),
330-
'Return resized size 100px instead of full image size 1080px with right alignment' => array(
350+
'Return resized size 100px instead of full image size 1080px with right alignment' => array(
331351
'full',
332352
'sizes="(max-width: 100px) 100vw, 100px" ',
333353
'right',
334354
'yes',
335355
),
356+
'Return resized size 100px instead of thumbnail image size 150px with center alignment' => array(
357+
'thumbnail',
358+
'sizes="(max-width: 100px) 100vw, 100px" ',
359+
'center',
360+
'yes',
361+
),
362+
'Return resized size 100px instead of medium image size 300px with center alignment' => array(
363+
'medium',
364+
'sizes="(max-width: 100px) 100vw, 100px" ',
365+
'center',
366+
'yes',
367+
),
368+
'Return resized size 100px instead of large image size 1024px with center alignment' => array(
369+
'large',
370+
'sizes="(max-width: 100px) 100vw, 100px" ',
371+
'center',
372+
'yes',
373+
),
374+
'Return resized size 100px instead of full image size 1080px with center alignment' => array(
375+
'full',
376+
'sizes="(max-width: 100px) 100vw, 100px" ',
377+
'center',
378+
'yes',
379+
),
336380
);
337381
}
338382

339383
/**
340384
* Test the cover block with left and right alignment.
341385
*
342-
* @dataProvider data_image_left_right_alignment
386+
* @dataProvider data_image_left_right_center_alignment
343387
*
344388
* @param string $alignment Alignment of the image.
345389
*/
346-
public function test_cover_block_with_left_right_alignment( string $alignment ): void {
390+
public function test_cover_block_with_left_right_center_alignment( string $alignment ): void {
347391
$image_url = wp_get_attachment_image_url( self::$image_id, 'full' );
348392
$block_content = '<!-- wp:cover {"url":"' . $image_url . '","id":' . self::$image_id . ',"dimRatio":50,"align":"' . $alignment . '","style":{"color":{}}} -->
349393
<div class="wp-block-cover align' . $alignment . '"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-' . self::$image_id . '" alt="" src="' . $image_url . '" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
@@ -361,10 +405,11 @@ public function test_cover_block_with_left_right_alignment( string $alignment ):
361405
*
362406
* @return array<array<string>> The image sizes.
363407
*/
364-
public function data_image_left_right_alignment(): array {
408+
public function data_image_left_right_center_alignment(): array {
365409
return array(
366410
array( 'left' ),
367411
array( 'right' ),
412+
array( 'center' ),
368413
);
369414
}
370415

0 commit comments

Comments
 (0)