Initial concept for supporting relative alingment widths

Author: joemcgill

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

@@ -194,13 +194,21 @@ function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $
 
 		case 'left':
 		case 'right':
-			$layout_width = sprintf( '%1$spx', $image_width );
-			break;
-
 		case 'center':
 		default:
-			$alignment    = auto_sizes_get_layout_width( 'default' );
-			$layout_width = sprintf( '%1$spx', min( (int) $alignment, $image_width ) );
+			$layout_alignment = in_array( $alignment, array( 'left', 'right' ), true ) ? 'wide' : 'default';
+			$layout_width     = auto_sizes_get_layout_width( $layout_alignment );
+
+			/*
+			 * If the layout width is in pixels, we can compare against the image width
+			 * on the server. Otherwise, we need to rely on CSS functions.
+			 */
+			if ( str_ends_with( $layout_width, 'px' ) ) {
+				$layout_width = sprintf( '%1$spx', min( (int) $layout_width, $image_width ) );
+			} else {
+				$layout_width = sprintf( 'min(%1$s, %2$spx)', $layout_width, $image_width );
+			}
+
 			break;
 	}
 
@@ -212,14 +220,14 @@ function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $
 	return $layout_width;
 }
 
-/**
- * Retrieves the layout width for an alignment defined in theme.json.
- *
- * @since n.e.x.t
- *
- * @param string $alignment The alignment value.
- * @return string The alignment width based.
- */
+	/**
+	 * Retrieves the layout width for an alignment defined in theme.json.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @param string $alignment The alignment value.
+	 * @return string The alignment width based.
+	 */
 function auto_sizes_get_layout_width( string $alignment ): string {
 	$layout = auto_sizes_get_layout_settings();
 
@@ -232,15 +240,15 @@ function auto_sizes_get_layout_width( string $alignment ): string {
 	return $layout_widths[ $alignment ] ?? '';
 }
 
-/**
- * Filters the context keys that a block type uses.
- *
- * @since n.e.x.t
- *
- * @param string[]      $uses_context Array of registered uses context for a block type.
- * @param WP_Block_Type $block_type   The full block type object.
- * @return string[] The filtered context keys used by the block type.
- */
+	/**
+	 * Filters the context keys that a block type uses.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @param string[]      $uses_context Array of registered uses context for a block type.
+	 * @param WP_Block_Type $block_type   The full block type object.
+	 * @return string[] The filtered context keys used by the block type.
+	 */
 function auto_sizes_filter_uses_context( array $uses_context, WP_Block_Type $block_type ): array {
 	// The list of blocks that can consume outer layout context.
 	$consumer_blocks = array(
@@ -255,15 +263,15 @@ function auto_sizes_filter_uses_context( array $uses_context, WP_Block_Type $blo
 	return $uses_context;
 }
 
-/**
- * Modifies the block context during rendering to blocks.
- *
- * @since n.e.x.t
- *
- * @param array<string, mixed> $context Current block context.
- * @param array<string, mixed> $block   The block being rendered.
- * @return array<string, mixed> Modified block context.
- */
+	/**
+	 * Modifies the block context during rendering to blocks.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @param array<string, mixed> $context Current block context.
+	 * @param array<string, mixed> $block   The block being rendered.
+	 * @return array<string, mixed> Modified block context.
+	 */
 function auto_sizes_filter_render_block_context( array $context, array $block ): array {
 	// When no max alignment is set, the maximum is assumed to be 'full'.
 	$context['max_alignment'] = $context['max_alignment'] ?? 'full';
@@ -288,13 +296,13 @@ function auto_sizes_filter_render_block_context( array $context, array $block ):
 	return $context;
 }
 
-/**
- * Retrieves the layout settings defined in theme.json.
- *
- * @since n.e.x.t
- *
- * @return array<string, mixed> Associative array of layout settings.
- */
+	/**
+	 * Retrieves the layout settings defined in theme.json.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @return array<string, mixed> Associative array of layout settings.
+	 */
 function auto_sizes_get_layout_settings(): array {
 	static $layout = array();
 	if ( count( $layout ) === 0 ) {