Merge pull request #848 from Automattic/fix/847-css-recognition-cascade

Improve generic image crop recognition

Author: chubes4

.github/workflows/php-transformer.yml

@@ -107,7 +107,8 @@ jobs:
           WORDPRESS_TEST_DB: wordpress_site_plan_test
         run: |
           git clone --depth=1 --branch 6.7.4 https://github.com/WordPress/wordpress-develop.git "$WORDPRESS_DEVELOP_DIR"
-          composer config --working-dir="$WORDPRESS_DEVELOP_DIR" --json policy.advisories.ignore-id '{"PKSA-mh9b-91zm-m1gy":{"on-audit":false,"reason":"Pinned WordPress 6.7.4 test runtime; WPCS is not loaded by the integration test."},"PKSA-rdkp-vv9z-mjkg":{"on-audit":false,"reason":"Pinned WordPress 6.7.4 test runtime; affected build tooling is not loaded by the integration test."},"PKSA-6vdd-n4sx-knhy":{"on-audit":false,"reason":"Pinned WordPress 6.7.4 test runtime; affected build tooling is not loaded by the integration test."}}'
+          composer config --working-dir="$WORDPRESS_DEVELOP_DIR" --json policy.advisories.ignore-id '{"PKSA-mh9b-91zm-m1gy":{"on-audit":false,"reason":"Pinned WordPress 6.7.4 test runtime; WPCS is not loaded by the integration test."},"PKSA-kh6k-gs3g-dgr6":{"on-audit":false,"reason":"Pinned WordPress 6.7.4 test runtime; PHPCSUtils is not loaded by the integration test."},"PKSA-rdkp-vv9z-mjkg":{"on-audit":false,"reason":"Pinned WordPress 6.7.4 test runtime; affected build tooling is not loaded by the integration test."},"PKSA-6vdd-n4sx-knhy":{"on-audit":false,"reason":"Pinned WordPress 6.7.4 test runtime; affected build tooling is not loaded by the integration test."}}'
+          composer require --working-dir="$WORDPRESS_DEVELOP_DIR" --dev phpcsstandards/phpcsutils:1.0.12 --no-update
           composer install --working-dir="$WORDPRESS_DEVELOP_DIR" --no-interaction --prefer-dist --no-progress
           for attempt in $(seq 1 30); do
             if mysql --host=127.0.0.1 --port=3306 --user=root --execute='SELECT 1'; then break; fi

php-transformer/src/HtmlToBlocks/HtmlTransformer.php

@@ -364,6 +364,9 @@ final class HtmlTransformer
      */
     private array $conditionalStyleRules = array();
 
+    /** @var list<array{selector: string, property: string, value: string, conditions: list<string>, order: int}> Ordered crop declarations, including duplicates. */
+    private array $imageShapeStyleRules = array();
+
     /**
      * @var array<int, array{selector: string, pseudo: string, declarations: array<string, string>}>
      */
@@ -634,6 +637,7 @@ public function transform(string $html, array $options = array()): TransformerRe
         $this->staticClassPromotions = $this->detectStaticClassPromotions($html);
         $this->staticStyleRules = $this->staticStyleRules($html, (string) ($options['static_css'] ?? ''));
         $this->conditionalStyleRules = $this->conditionalStyleRules($html, (string) ($options['static_css'] ?? ''));
+        $this->imageShapeStyleRules = $this->imageShapeStyleRules($html, (string) ($options['static_css'] ?? ''));
         $this->staticPseudoElementStyleRules = $this->staticPseudoElementStyleRules($html, (string) ($options['static_css'] ?? ''));
         $this->cssCustomProperties = $this->cssCustomProperties($html, (string) ($options['static_css'] ?? ''));
         $this->resetPresentationResolutionCache();
@@ -11800,16 +11804,19 @@ private function imagePresentationAttributes(DOMElement $image, ?DOMElement $fig
      */
     private function imageShapeConstraintAttributes(DOMElement $image): array
     {
-        $declarations = $this->structuralPresentationDeclarations($image);
+        $declarations = array(
+            'aspect-ratio' => $this->imageShapeDeclaration($image, 'aspect-ratio'),
+            'object-fit' => $this->imageShapeDeclaration($image, 'object-fit'),
+        );
         $aspectRatio  = $this->normalizedAspectRatio(
-            $this->desktopViewportDeclaration($image, 'aspect-ratio', (string) ($declarations['aspect-ratio'] ?? ''))
+            (string) $declarations['aspect-ratio']
         );
         // `object-fit:cover !important` is a common defence against core's
         // `.wp-block-image img` rules. Strip importance symmetrically with
         // normalizedAspectRatio, or the keyword never matches the allowlist below
         // and the whole promotion silently declines.
         $scale        = strtolower($this->cssValueWithoutImportant(
-            $this->desktopViewportDeclaration($image, 'object-fit', (string) ($declarations['object-fit'] ?? ''))
+            (string) $declarations['object-fit']
         ));
 
         if ( '' === $aspectRatio || ! in_array($scale, array( 'cover', 'contain' ), true) ) {
@@ -11822,57 +11829,65 @@ private function imageShapeConstraintAttributes(DOMElement $image): array
         );
     }
 
-    /**
-     * WordPress `core/image` carries a SINGLE aspectRatio/scale, but authored CSS
-     * often makes these responsive: a base rule plus `@media (min-width: N)`
-     * overrides. The block must reflect what renders at the primary/desktop
-     * viewport, so among the base value and every matching min-width override we
-     * pick the value from the widest min-width breakpoint (<= the desktop
-     * reference width). max-width-bounded (mobile) media rules are ignored; the
-     * base value wins only when no qualifying min-width override declares it.
-     * Ties at one breakpoint go to the last rule, as the cascade decides them.
-     */
-    private function desktopViewportDeclaration(DOMElement $element, string $property, string $baseValue): string
+    /** Resolve one crop declaration at the desktop viewport using the CSS cascade. */
+    private function imageShapeDeclaration(DOMElement $element, string $property): string
     {
-        $winningWidth = -1;
-        $winningValue = $baseValue;
-        // A declaration in the element's own `style` attribute outranks every
-        // matched stylesheet rule at normal importance, whatever viewport that
-        // rule is bound to. $baseValue already carries it.
-        $inlineValue     = (string) ($this->cssDeclarations($this->attr($element, 'style'))[$property] ?? '');
-        $inlineOwns      = '' !== trim($inlineValue);
-        $inlineImportant = $inlineOwns && $this->cssValueIsImportant($inlineValue);
-
-        foreach ( $this->conditionalStyleRules as $rule ) {
-            if ( ! isset($rule['declarations'][$property]) || ! isset($rule['conditions']) ) {
+        $winner = null;
+        foreach ($this->imageShapeStyleRules as $rule) {
+            if ($property !== $rule['property'] || ! $this->matchesCssSelector($element, $rule['selector'])) {
                 continue;
             }
-            if ( $inlineOwns && ( $inlineImportant || ! $this->cssValueIsImportant((string) $rule['declarations'][$property]) ) ) {
-                continue;
+            if (array() !== $rule['conditions']) {
+                $minWidth = $this->conditionsDesktopMinWidth($rule['conditions']);
+                if (null === $minWidth || $minWidth > self::DESKTOP_REFERENCE_WIDTH) {
+                    continue;
+                }
             }
-            if ( ! $this->matchesCssSelector($element, $rule['selector']) ) {
-                continue;
+            $candidate = array(
+                'value' => $rule['value'],
+                'specificity' => $this->mediaTextSelectorSpecificity($rule['selector']),
+                'order' => $rule['order'],
+                'inline' => false,
+            );
+            if ($this->imageShapeDeclarationWins($candidate, $winner)) {
+                $winner = $candidate;
             }
-
-            $minWidth = $this->conditionsDesktopMinWidth($rule['conditions']);
-            if ( null === $minWidth || $minWidth > self::DESKTOP_REFERENCE_WIDTH ) {
+        }
+        $inlineEntries = $this->imageShapeDeclarationEntries($this->attr($element, 'style'));
+        foreach ($inlineEntries as $index => $entry) {
+            if ($property !== $entry['property']) {
                 continue;
             }
-            if ( $minWidth >= $winningWidth ) {
-                $winningWidth = $minWidth;
-                $winningValue = (string) $rule['declarations'][$property];
+            $candidate = array('value' => $entry['value'], 'specificity' => array(PHP_INT_MAX, PHP_INT_MAX, PHP_INT_MAX), 'order' => PHP_INT_MAX - count($inlineEntries) + $index, 'inline' => true);
+            if ($this->imageShapeDeclarationWins($candidate, $winner)) {
+                $winner = $candidate;
             }
         }
 
-        return $winningValue;
+        return is_array($winner) ? $winner['value'] : '';
+    }
+
+    /** @param array{value:string,specificity:array{int,int,int},order:int,inline:bool} $candidate @param array{value:string,specificity:array{int,int,int},order:int,inline:bool}|null $current */
+    private function imageShapeDeclarationWins(array $candidate, ?array $current): bool
+    {
+        if (null === $current) {
+            return true;
+        }
+        $candidateImportant = $this->cssValueIsImportant($candidate['value']);
+        $currentImportant = $this->cssValueIsImportant($current['value']);
+        if ($candidateImportant !== $currentImportant) {
+            return $candidateImportant;
+        }
+        $specificity = $this->compareMediaTextSpecificity($candidate['specificity'], $current['specificity']);
+        return 0 < $specificity || (0 === $specificity && $candidate['order'] >= $current['order']);
     }
 
     /**
      * The min-width (px) at which a conditional rule's `@media` prelude(s) begin
-     * to apply, or null when the rule is not a pure min-width desktop override:
-     * a non-`@media` condition, a negated query, a media type that is not the
-     * rendered screen, any `max-width` bound (mobile-capped range), or a media
-     * feature without a usable px min-width all disqualify it. Nested conditions
+     * to apply, or null when a condition cannot be positively evaluated at the
+     * desktop viewport. `@layer` is an unconditional grouping wrapper. A bounded
+     * set of modern crop-relevant `@supports` tests is accepted; unknown feature
+     * queries remain unresolved rather than being flattened. Nested conditions
      * must all qualify; the effective breakpoint is the widest.
      *
      * @param list<string> $conditions
@@ -11883,6 +11898,15 @@ private function conditionsDesktopMinWidth(array $conditions): ?int
 
         foreach ( $conditions as $condition ) {
             $condition = trim($condition);
+            if ( 1 === preg_match('/^@layer\b/i', $condition) ) {
+                continue;
+            }
+            if ( 1 === preg_match('/^@supports\b/i', $condition) ) {
+                if ($this->supportsDesktopImageCropCondition($condition)) {
+                    continue;
+                }
+                return null;
+            }
             if ( 1 !== preg_match('/^@media\b/i', $condition) ) {
                 return null;
             }
@@ -11917,6 +11941,26 @@ private function conditionsDesktopMinWidth(array $conditions): ?int
         return $minWidth;
     }
 
+    /** Bounded browser-capability facts used for crop rules under @supports. */
+    private function supportsDesktopImageCropCondition(string $condition): bool
+    {
+        $query = strtolower(trim(preg_replace('/^@supports\s*/i', '', $condition) ?? ''));
+        $query = preg_replace('/^\((.*)\)$/s', '$1', $query) ?? $query;
+        [$property, $value] = array_pad(array_map('trim', explode(':', $query, 2)), 2, '');
+
+        if ('display' === $property) {
+            return in_array($value, array('flex', 'grid', 'inline-flex', 'inline-grid'), true);
+        }
+        if ('aspect-ratio' === $property) {
+            return '' !== $this->normalizedAspectRatio($value);
+        }
+        if ('object-fit' === $property) {
+            return in_array($value, array('cover', 'contain'), true);
+        }
+
+        return false;
+    }
+
     private function cssValueWithoutImportant(string $value): string
     {
         return trim(preg_replace('/\s*!\s*important\s*$/i', '', $value) ?? $value);

php-transformer/src/HtmlToBlocks/Style/StyleResolutionTrait.php

@@ -1065,7 +1065,7 @@ private function mergedPresentationStyle(DOMElement $element): string
         }
 
         $inlineStyle = $this->attr($element, 'style');
-        if ( array() === $this->staticStyleRules || ! $this->isHighValueStyledElement($element) ) {
+        if ( array() === $this->staticStyleRules || (! $this->isHighValueStyledElement($element) && ! $this->hasGenericRecognitionDemand($element)) ) {
             $this->mergedPresentationStyleCache[$cacheKey] = $inlineStyle;
             return $inlineStyle;
         }
@@ -1135,6 +1135,25 @@ private function isHighValueStyledElement(DOMElement $element): bool
         return $this->highValueStyleBoundaryPolicy()->matches($element);
     }
 
+    /** Image crop recognition is structural and selector-driven, not name-driven. */
+    private function hasGenericRecognitionDemand(DOMElement $element): bool
+    {
+        if ('img' !== strtolower($element->tagName)) {
+            return false;
+        }
+
+        foreach (array_merge($this->staticStyleRules, $this->conditionalStyleRules) as $rule) {
+            if (! $this->matchesCssSelector($element, $rule['selector'])) {
+                continue;
+            }
+            if (array_intersect(array('aspect-ratio', 'object-fit', 'object-position'), array_keys($rule['declarations']))) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
     /**
      * @return array<int, array{selector: string, declarations: array<string, string>, mediaTextDeclarations: list<array{property: string, value: string, important: bool}>, mediaTextSpecificity: array{int, int, int}}>
      */
@@ -1192,6 +1211,96 @@ private function staticStyleRules(string $html, string $linkedCss): array
         return $rules;
     }
 
+    /**
+     * Preserve source order and duplicate declarations for image crop cascade
+     * resolution. General presentation maps intentionally collapse duplicates.
+     *
+     * @return list<array{selector: string, property: string, value: string, conditions: list<string>, order: int}>
+     */
+    private function imageShapeStyleRules(string $html, string $linkedCss): array
+    {
+        $css = trim($linkedCss);
+        if (preg_match_all('@<style\b[^>]*>(.*?)</style>@is', $html, $matches)) {
+            $css .= ('' === $css ? '' : "\n") . implode("\n", array_map('trim', $matches[1]));
+        }
+        $rules = array();
+        $order = 0;
+        $this->collectImageShapeStyleRules(preg_replace('@/\*.*?\*/@s', '', $css) ?? $css, array(), $rules, $order);
+
+        return $rules;
+    }
+
+    /** @param list<string> $conditions @param list<array{selector: string, property: string, value: string, conditions: list<string>, order: int}> $rules */
+    private function collectImageShapeStyleRules(string $css, array $conditions, array &$rules, int &$order): void
+    {
+        $directCss = $css;
+        $events = array();
+        for ($offset = 0, $length = strlen($css); $offset < $length; ++$offset) {
+            if ('@' !== $css[$offset]) {
+                continue;
+            }
+            $blockStart = $this->findCssToken($css, '{', $offset);
+            $statementEnd = $this->findCssToken($css, ';', $offset);
+            if (null === $blockStart || (null !== $statementEnd && $statementEnd < $blockStart)) {
+                continue;
+            }
+            $end = $this->findMatchingCssBrace($css, $blockStart);
+            if (null === $end) {
+                continue;
+            }
+            $prelude = trim(substr($css, $offset, $blockStart - $offset));
+            $directCss = substr_replace($directCss, str_repeat(' ', $end - $offset + 1), $offset, $end - $offset + 1);
+            if (preg_match('/^@(media|container|supports|layer|scope|starting-style)\b/i', $prelude)) {
+                $events[] = array('offset' => $offset, 'css' => substr($css, $blockStart + 1, $end - $blockStart - 1), 'conditions' => array_merge($conditions, array($prelude)));
+            }
+            $offset = $end;
+        }
+        if (preg_match_all('/([^{}]+)\{([^{}]+)\}/', $directCss, $matches, PREG_SET_ORDER | PREG_OFFSET_CAPTURE)) {
+            foreach ($matches as $match) {
+                $events[] = array('offset' => $match[0][1], 'prelude' => $match[1][0], 'body' => $match[2][0], 'conditions' => $conditions);
+            }
+        }
+        usort($events, static fn (array $left, array $right): int => $left['offset'] <=> $right['offset']);
+        foreach ($events as $event) {
+            if (isset($event['css'])) {
+                $this->collectImageShapeStyleRules($event['css'], $event['conditions'], $rules, $order);
+                continue;
+            }
+            $entries = $this->imageShapeDeclarationEntries((string) $event['body']);
+            if (array() === $entries) {
+                continue;
+            }
+            foreach (explode(',', (string) $event['prelude']) as $selector) {
+                $selector = trim($selector);
+                if ('' === $selector || str_starts_with($selector, '@') || $this->selectorCarriesPseudoState($selector) || ! $this->isSupportedCssSelector($selector)) {
+                    continue;
+                }
+                foreach ($entries as $entry) {
+                    $rules[] = array('selector' => $selector, 'property' => $entry['property'], 'value' => $entry['value'], 'conditions' => $event['conditions'], 'order' => $order++);
+                }
+            }
+        }
+    }
+
+    /** @return list<array{property: string, value: string}> */
+    private function imageShapeDeclarationEntries(string $style): array
+    {
+        $entries = array();
+        foreach (CssValueSplitter::splitTopLevel($style, array(';')) as $declaration) {
+            if (! str_contains($declaration, ':')) {
+                continue;
+            }
+            [$property, $value] = array_map('trim', explode(':', $declaration, 2));
+            $property = strtolower($property);
+            $value = preg_replace('/\s+/', ' ', $value) ?? $value;
+            if (in_array($property, array('aspect-ratio', 'object-fit'), true) && '' !== $value) {
+                $entries[] = array('property' => $property, 'value' => $value);
+            }
+        }
+
+        return $entries;
+    }
+
     /**
      * Collect author rules nested in conditional at-rules. Their declarations
      * must remain class-owned even though only the base cascade is available to