From bd419a8625c73a025648d700f3941dd4dd74653f Mon Sep 17 00:00:00 2001 From: Matthew Batchelder Date: Fri, 31 Jul 2026 11:47:23 -0400 Subject: [PATCH 01/11] refactor(php-transformer): freeze media-text contracts --- .../HtmlToBlocks/Patterns/ColumnsPattern.php | 16 +----- .../HtmlToBlocks/Patterns/CoverPattern.php | 27 +--------- .../Patterns/MediaTextPattern.php | 52 +++++++++++++++++++ .../Patterns/PatternGateHelpersTrait.php | 47 +++++++++++++++++ 4 files changed, 102 insertions(+), 40 deletions(-) create mode 100644 php-transformer/src/HtmlToBlocks/Patterns/MediaTextPattern.php create mode 100644 php-transformer/src/HtmlToBlocks/Patterns/PatternGateHelpersTrait.php diff --git a/php-transformer/src/HtmlToBlocks/Patterns/ColumnsPattern.php b/php-transformer/src/HtmlToBlocks/Patterns/ColumnsPattern.php index 7c120311..fd09de41 100644 --- a/php-transformer/src/HtmlToBlocks/Patterns/ColumnsPattern.php +++ b/php-transformer/src/HtmlToBlocks/Patterns/ColumnsPattern.php @@ -28,6 +28,7 @@ final class ColumnsPattern { use PatternDomHelpersTrait; + use PatternGateHelpersTrait; /** * @param array> $fallbacks @@ -148,21 +149,6 @@ private function looksLikeColumnsContainer(DOMElement $element, string $resolved || preg_match('/(?:^|;)\s*display\s*:\s*(?:inline-)?flex/', $inlineStyle); } - /** - * True when the resolved style declares a flex container whose main axis is - * vertical (flex-direction: column / column-reverse). flex-direction only has - * meaning on a flex container, so both display:flex and the column direction - * are required before redirecting away from horizontal columns. - */ - private function isVerticalFlexContainer(string $style): bool - { - if ( ! preg_match('/(?:^|;)\s*display\s*:\s*(?:inline-)?flex\b/', $style) ) { - return false; - } - - return (bool) preg_match('/(?:^|;)\s*flex-direction\s*:\s*column(?:-reverse)?\b/', $style); - } - private function looksLikeSplitLayout(DOMElement $element): bool { $name = strtolower(trim($this->attr($element, 'class') . ' ' . $this->attr($element, 'id'))); diff --git a/php-transformer/src/HtmlToBlocks/Patterns/CoverPattern.php b/php-transformer/src/HtmlToBlocks/Patterns/CoverPattern.php index 7179173a..70057d7e 100644 --- a/php-transformer/src/HtmlToBlocks/Patterns/CoverPattern.php +++ b/php-transformer/src/HtmlToBlocks/Patterns/CoverPattern.php @@ -29,6 +29,8 @@ */ final class CoverPattern { + use PatternGateHelpersTrait; + private CoverStyleResolver $styleResolver; private BackgroundImageExtractor $backgroundImageExtractor; @@ -245,31 +247,6 @@ private function directElementChildCount(DOMElement $element): int return $count; } - /** - * @param array> $blocks - */ - private function containsTextBearingBlock(array $blocks): bool - { - $textBearingNames = array( 'core/heading', 'core/paragraph', 'core/list', 'core/buttons', 'core/quote' ); - - foreach ( $blocks as $block ) { - if ( ! is_array($block) ) { - continue; - } - - if ( in_array($block['blockName'] ?? null, $textBearingNames, true) ) { - return true; - } - - $innerBlocks = $block['innerBlocks'] ?? array(); - if ( is_array($innerBlocks) && $this->containsTextBearingBlock($innerBlocks) ) { - return true; - } - } - - return false; - } - /** * @param array> $blocks */ diff --git a/php-transformer/src/HtmlToBlocks/Patterns/MediaTextPattern.php b/php-transformer/src/HtmlToBlocks/Patterns/MediaTextPattern.php new file mode 100644 index 00000000..c0078b80 --- /dev/null +++ b/php-transformer/src/HtmlToBlocks/Patterns/MediaTextPattern.php @@ -0,0 +1,52 @@ + null + * | + * +-- exactly one pure img/video side? -- no --> null + * | + * +-- convert text child once + * | + * +-- text-bearing block? -------------- no --> null + * | + * +-- vertical flex container? --------- yes -> null + * | + * `-- core/media-text + */ +final class MediaTextPattern +{ + use PatternDomHelpersTrait; + use PatternGateHelpersTrait; + + /** + * @param array> $fallbacks + * @param callable(DOMElement, array>&, bool): array> $convertChildren + * @param callable(DOMElement, array): array $presentationAttributes + * @param callable(DOMElement): string $mergedPresentationStyle + * @param callable(DOMElement): array $htmlAttributes + * @param callable(string): string $resolveAssetUrl + * @param callable(string, array, array>, DOMElement|null): array $createBlock + * @return array|null + */ + public function match( + DOMElement $element, + array &$fallbacks, + callable $convertChildren, + callable $presentationAttributes, + callable $mergedPresentationStyle, + callable $htmlAttributes, + callable $resolveAssetUrl, + callable $createBlock + ): ?array { + return null; + } +} diff --git a/php-transformer/src/HtmlToBlocks/Patterns/PatternGateHelpersTrait.php b/php-transformer/src/HtmlToBlocks/Patterns/PatternGateHelpersTrait.php new file mode 100644 index 00000000..31ad34f1 --- /dev/null +++ b/php-transformer/src/HtmlToBlocks/Patterns/PatternGateHelpersTrait.php @@ -0,0 +1,47 @@ +> $blocks + */ + private function containsTextBearingBlock(array $blocks): bool + { + $textBearingNames = array( 'core/heading', 'core/paragraph', 'core/list', 'core/buttons', 'core/quote' ); + + foreach ( $blocks as $block ) { + if ( ! is_array($block) ) { + continue; + } + + if ( in_array($block['blockName'] ?? null, $textBearingNames, true) ) { + return true; + } + + $innerBlocks = $block['innerBlocks'] ?? array(); + if ( is_array($innerBlocks) && $this->containsTextBearingBlock($innerBlocks) ) { + return true; + } + } + + return false; + } + + /** + * True when the resolved style declares a flex container whose main axis is + * vertical (flex-direction: column / column-reverse). flex-direction only has + * meaning on a flex container, so both display:flex and the column direction + * are required before redirecting away from horizontal columns. + */ + private function isVerticalFlexContainer(string $style): bool + { + if ( ! preg_match('/(?:^|;)\s*display\s*:\s*(?:inline-)?flex\b/', $style) ) { + return false; + } + + return (bool) preg_match('/(?:^|;)\s*flex-direction\s*:\s*column(?:-reverse)?\b/', $style); + } +} From 38be07f8e9d014c638749b4942695b65cd0b5fb2 Mon Sep 17 00:00:00 2001 From: Matthew Batchelder Date: Fri, 31 Jul 2026 12:07:56 -0400 Subject: [PATCH 02/11] feat(php-transformer): add media-text block serialization --- .../src/HtmlToBlocks/BlockFactory.php | 109 ++++++++++++++- .../WordPress/CanonicalSaveShapeValidator.php | 14 +- .../GeneratedGutenbergClassPolicy.php | 1 + php-transformer/src/WordPress/Runtime.php | 1 + .../tests/unit/media-text-block-factory.php | 124 ++++++++++++++++++ 5 files changed, 246 insertions(+), 3 deletions(-) create mode 100644 php-transformer/tests/unit/media-text-block-factory.php diff --git a/php-transformer/src/HtmlToBlocks/BlockFactory.php b/php-transformer/src/HtmlToBlocks/BlockFactory.php index 4e67c8c7..16e05128 100644 --- a/php-transformer/src/HtmlToBlocks/BlockFactory.php +++ b/php-transformer/src/HtmlToBlocks/BlockFactory.php @@ -89,7 +89,7 @@ private function normalizeAttrsForBlock(string $name, array $attrs): array } } - if ( in_array($name, array( 'core/buttons', 'core/column', 'core/columns', 'core/group', 'core/heading', 'core/list', 'core/list-item', 'core/paragraph' ), true) ) { + if ( in_array($name, array( 'core/buttons', 'core/column', 'core/columns', 'core/group', 'core/heading', 'core/list', 'core/list-item', 'core/media-text', 'core/paragraph' ), true) ) { unset($attrs['style']['spacing']['blockGap']); if ( empty($attrs['style']['spacing']) ) { unset($attrs['style']['spacing']); @@ -142,6 +142,17 @@ private function commentAttrs(string $name, array $attrs): array if ( 'core/cover' === $name && 'px' === ($attrs['minHeightUnit'] ?? null) ) { unset($attrs['minHeightUnit']); } + if ( 'core/media-text' === $name ) { + if ( 'left' === ($attrs['mediaPosition'] ?? null) ) { + unset($attrs['mediaPosition']); + } + if ( is_numeric($attrs['mediaWidth'] ?? null) && 50.0 === (float) $attrs['mediaWidth'] ) { + unset($attrs['mediaWidth']); + } + if ( true === ($attrs['isStackedOnMobile'] ?? null) ) { + unset($attrs['isStackedOnMobile']); + } + } return $attrs; } @@ -338,6 +349,10 @@ private function blockHtml(string $name, array $attrs, array $innerBlocks): stri return $this->coverHtml($attrs, $innerBlocks); } + if ( 'core/media-text' === $name ) { + return $this->mediaTextHtml($attrs, $innerBlocks); + } + if ( 'core/group' === $name ) { $tag = $this->groupTagName($attrs['tagName'] ?? null); return array( 'opening' => '<' . $tag . $this->blockSupportAttrs($attrs, 'wp-block-group') . '>', 'closing' => '' ); @@ -424,6 +439,98 @@ private function coverHtml(array $attrs, array $innerBlocks): array ); } + /** + * @param array $attrs + * @param array> $innerBlocks + * @return array{opening: string, closing: string} + */ + private function mediaTextHtml(array $attrs, array $innerBlocks): array + { + unset($innerBlocks); + + $mediaOnRight = 'right' === ($attrs['mediaPosition'] ?? 'left'); + $verticalAlignment = (string) ($attrs['verticalAlignment'] ?? ''); + if ( ! in_array($verticalAlignment, array( 'top', 'center', 'bottom' ), true) ) { + $verticalAlignment = ''; + } + + $wrapperClasses = array( 'wp-block-media-text' ); + if ( $mediaOnRight ) { + $wrapperClasses[] = 'has-media-on-the-right'; + } + if ( ! array_key_exists('isStackedOnMobile', $attrs) || false !== $attrs['isStackedOnMobile'] ) { + $wrapperClasses[] = 'is-stacked-on-mobile'; + } + if ( '' !== $verticalAlignment ) { + $wrapperClasses[] = 'is-vertically-aligned-' . $verticalAlignment; + } + + $wrapperAttrs = $attrs; + if ( is_numeric($attrs['mediaWidth'] ?? null) ) { + $mediaWidth = (int) round((float) $attrs['mediaWidth']); + if ( 50 !== $mediaWidth ) { + $gridTemplateColumns = $mediaOnRight + ? 'auto ' . (string) $mediaWidth . '%' + : (string) $mediaWidth . '% auto'; + $wrapperAttrs['inlineGeometryStyle'] = trim( + (string) ($wrapperAttrs['inlineGeometryStyle'] ?? '') . ';grid-template-columns:' . $gridTemplateColumns, + ';' + ); + } + } + + $wrapperOpening = 'blockSupportAttrs($wrapperAttrs, implode(' ', $wrapperClasses)) . '>'; + $contentOpening = '
'; + $figure = '
' . $this->mediaTextMediaHtml($attrs) . '
'; + + if ( $mediaOnRight ) { + return array( + 'opening' => $wrapperOpening . $contentOpening, + 'closing' => '
' . $figure . '', + ); + } + + return array( + 'opening' => $wrapperOpening . $figure . $contentOpening, + 'closing' => '', + ); + } + + /** + * @param array $attrs + */ + private function mediaTextMediaHtml(array $attrs): string + { + $mediaUrl = (string) ($attrs['mediaUrl'] ?? ''); + if ( 'video' === ($attrs['mediaType'] ?? '') ) { + return ''; + } + + if ( 'image' !== ($attrs['mediaType'] ?? '') ) { + return ''; + } + + $image = ''; + if ( '' !== $mediaUrl ) { + $image = 'htmlAttrs(array( + 'src' => $mediaUrl, + 'alt' => (string) ($attrs['mediaAlt'] ?? ''), + ), array( 'alt' )) . '/>'; + } + + $href = (string) ($attrs['href'] ?? ''); + if ( '' === $href ) { + return $image; + } + + return 'htmlAttrs(array( + 'class' => (string) ($attrs['linkClass'] ?? ''), + 'href' => $href, + 'target' => (string) ($attrs['linkTarget'] ?? ''), + 'rel' => (string) ($attrs['rel'] ?? ''), + )) . '>' . $image . ''; + } + /** * Resolve the wrapper tag for a `core/group`. Core's group `save()` renders * `` from the `tagName` attribute, defaulting to `div`. Only the diff --git a/php-transformer/src/WordPress/CanonicalSaveShapeValidator.php b/php-transformer/src/WordPress/CanonicalSaveShapeValidator.php index f1bf2aed..f3a0ed43 100644 --- a/php-transformer/src/WordPress/CanonicalSaveShapeValidator.php +++ b/php-transformer/src/WordPress/CanonicalSaveShapeValidator.php @@ -59,6 +59,7 @@ final class CanonicalSaveShapeValidator private const TARGET_BLOCKS = array( 'core/group', 'core/cover', + 'core/media-text', 'core/columns', 'core/column', 'core/buttons', @@ -166,7 +167,7 @@ private function validateWrapper(array $block, string $blockName, string $path, // token core would reproduce from the className attribute. A leftover // source class core's save() never regenerates breaks the round-trip. foreach ( $wrapperClasses as $class ) { - if ( $this->isStructuralClass($class) || in_array($class, $classNameTokens, true) ) { + if ( $this->isStructuralClass($class, $blockName) || in_array($class, $classNameTokens, true) ) { continue; } @@ -276,8 +277,17 @@ private function validateNoDuplicateClassTokens(array $block, ?string $blockName * input: the block base class, element classes, and attribute-derived * support classes (alignment, color/border has-*, and is-* state/style). */ - private function isStructuralClass(string $class): bool + private function isStructuralClass(string $class, string $blockName): bool { + if ( 'core/media-text' === $blockName && in_array($class, array( + 'is-stacked-on-mobile', + 'is-vertically-aligned-top', + 'is-vertically-aligned-center', + 'is-vertically-aligned-bottom', + ), true) ) { + return true; + } + return str_starts_with($class, 'wp-block-') || str_starts_with($class, 'wp-element-') || str_starts_with($class, 'wp-container-') diff --git a/php-transformer/src/WordPress/GeneratedGutenbergClassPolicy.php b/php-transformer/src/WordPress/GeneratedGutenbergClassPolicy.php index 3b6e3a86..41632bea 100644 --- a/php-transformer/src/WordPress/GeneratedGutenbergClassPolicy.php +++ b/php-transformer/src/WordPress/GeneratedGutenbergClassPolicy.php @@ -21,6 +21,7 @@ final class GeneratedGutenbergClassPolicy 'core/details' => 'wp-block-details', 'core/heading' => 'wp-block-heading', 'core/list' => 'wp-block-list', + 'core/media-text' => 'wp-block-media-text', 'core/quote' => 'wp-block-quote', 'core/separator' => 'wp-block-separator', ); diff --git a/php-transformer/src/WordPress/Runtime.php b/php-transformer/src/WordPress/Runtime.php index f1a314b3..9cc985a1 100644 --- a/php-transformer/src/WordPress/Runtime.php +++ b/php-transformer/src/WordPress/Runtime.php @@ -30,6 +30,7 @@ final class Runtime 'core/list', 'core/list-item', 'core/math', + 'core/media-text', 'core/navigation', 'core/navigation-link', 'core/navigation-submenu', diff --git a/php-transformer/tests/unit/media-text-block-factory.php b/php-transformer/tests/unit/media-text-block-factory.php new file mode 100644 index 00000000..f2966b09 --- /dev/null +++ b/php-transformer/tests/unit/media-text-block-factory.php @@ -0,0 +1,124 @@ +create('core/paragraph', array( 'content' => 'Story' )); + +$left = $factory->create('core/media-text', array( + 'mediaPosition' => 'left', + 'mediaType' => 'image', + 'mediaUrl' => 'https://example.com/photo.jpg', + 'mediaAlt' => '', + 'mediaWidth' => 50, + 'isStackedOnMobile' => true, +), array( $paragraph )); +$assertSame( + '
', + $left['innerContent'][0], + 'Default media-left opening matches core save shape.' +); +$assertSame(null, $left['innerContent'][1], 'Media-left innerContent reserves child slot inside content wrapper.'); +$assertSame('
', $left['innerContent'][2], 'Media-left closes content then wrapper.'); +$assertSame( + array( 'mediaType', 'mediaUrl', 'mediaAlt' ), + array_keys($left['attrs']), + 'Core defaults stay omitted from comment attrs.' +); +$assertNotContains('grid-template-columns', $left['innerHTML'], 'Default 50 percent width emits no inline grid style.'); +$assertNotContains('wp-image-', $left['innerHTML'], 'Image without mediaId emits no wp-image class.'); +$assertNotContains('size-', $left['innerHTML'], 'Image without mediaId emits no size class.'); + +$right = $factory->create('core/media-text', array( + 'mediaPosition' => 'right', + 'mediaType' => 'image', + 'mediaUrl' => 'https://example.com/photo?a=1&b=2', + 'mediaAlt' => 'A "quoted" alt', + 'mediaWidth' => 35, + 'verticalAlignment' => 'center', + 'href' => 'https://example.com/full?a=1&b=2', + 'linkTarget' => '_blank', + 'rel' => 'noopener noreferrer', + 'linkClass' => 'media-link', + 'anchor' => 'feature', + 'className' => 'promo', + 'style' => array( 'spacing' => array( 'blockGap' => '2rem', 'padding' => array( 'top' => '2rem' ) ) ), +), array( $paragraph )); +$assertSame( + '
', + $right['innerContent'][0], + 'Media-right opening carries position, stack, vertical, support, and width attributes.' +); +$assertSame( + '
A "quoted" alt
', + $right['innerContent'][2], + 'Media-right closes content before linked figure and escapes attributes.' +); +$assertContains('grid-template-columns:auto 35%', $right['innerHTML'], 'Right media width targets second grid track.'); +$assertContains('is-vertically-aligned-center', $right['innerHTML'], 'Vertical alignment class matches core save shape.'); +$assertSame(array( 'padding' => array( 'top' => '2rem' ) ), $right['attrs']['style']['spacing'] ?? null, 'Unsupported blockGap is removed while supported spacing remains.'); +$assertNotContains('gap:', $right['innerHTML'], 'Unsupported blockGap emits no wrapper CSS.'); + +$leftNarrow = $factory->create('core/media-text', array( + 'mediaType' => 'image', + 'mediaUrl' => 'https://example.com/narrow.jpg', + 'mediaWidth' => 40, +), array()); +$assertContains('style="grid-template-columns:40% auto"', $leftNarrow['innerHTML'], 'Left media width targets first grid track.'); + +$video = $factory->create('core/media-text', array( + 'mediaType' => 'video', + 'mediaUrl' => 'https://example.com/demo.mp4', + 'isStackedOnMobile' => false, + 'href' => 'https://example.com/ignored-for-video', +), array()); +$assertContains('
', $video['innerHTML'], 'Video emits controls and src without image link wrapper.'); +$assertNotContains('is-stacked-on-mobile', $video['innerHTML'], 'Explicit false omits stacked class.'); +$assertNotContains('validateBlockSerialization(array( $right )); +$assertSame('pass', $validity['status'] ?? null, 'Media-text block passes serialization validators.'); +$assertSame(0, $validity['summary']['finding_count'] ?? null, 'Media-text block has no serialization findings.'); + +$missingBase = $right; +$missingBase['innerHTML'] = str_replace('wp-block-media-text ', '', $right['innerHTML']); +$missingBase['innerContent'][0] = str_replace('wp-block-media-text ', '', $right['innerContent'][0]); +$missingBaseFindings = ( new CanonicalSaveShapeValidator() )->findings(array( $missingBase )); +$assertSame('missing_generated_class', $missingBaseFindings[0]['details']['reason'] ?? null, 'Canonical validator requires media-text generated wrapper class.'); + +if ( 0 === $failures ) { + echo "media-text block factory ok\n"; +} + +exit(0 === $failures ? 0 : 1); From b73cd6ad9dcbd43df1cbcc9614024db0eb970b60 Mon Sep 17 00:00:00 2001 From: Matthew Batchelder Date: Fri, 31 Jul 2026 12:08:04 -0400 Subject: [PATCH 03/11] feat(php-transformer): recognize strict media-text layouts --- .../src/HtmlToBlocks/HtmlTransformer.php | 18 + .../Patterns/MediaTextPattern.php | 416 ++++++++++++++++++ .../tests/unit/media-text-pattern.php | 375 ++++++++++++++++ 3 files changed, 809 insertions(+) create mode 100644 php-transformer/tests/unit/media-text-pattern.php diff --git a/php-transformer/src/HtmlToBlocks/HtmlTransformer.php b/php-transformer/src/HtmlToBlocks/HtmlTransformer.php index 7180c0d3..1d78bcf4 100644 --- a/php-transformer/src/HtmlToBlocks/HtmlTransformer.php +++ b/php-transformer/src/HtmlToBlocks/HtmlTransformer.php @@ -20,6 +20,7 @@ use Automattic\BlocksEngine\PhpTransformer\HtmlToBlocks\Patterns\GalleryPattern; use Automattic\BlocksEngine\PhpTransformer\HtmlToBlocks\Patterns\LogoPattern; use Automattic\BlocksEngine\PhpTransformer\HtmlToBlocks\Patterns\MathPattern; +use Automattic\BlocksEngine\PhpTransformer\HtmlToBlocks\Patterns\MediaTextPattern; use Automattic\BlocksEngine\PhpTransformer\HtmlToBlocks\Patterns\NavigationPattern; use Automattic\BlocksEngine\PhpTransformer\HtmlToBlocks\Patterns\NavigationUnderlineColorResolver; use Automattic\BlocksEngine\PhpTransformer\HtmlToBlocks\Patterns\ParameterTablePattern; @@ -166,6 +167,8 @@ final class HtmlTransformer private readonly CoverPattern $coverPattern; + private readonly MediaTextPattern $mediaTextPattern; + private readonly DetailsPattern $detailsPattern; private readonly GalleryPattern $galleryPattern; @@ -490,6 +493,7 @@ public function __construct(private readonly Runtime $runtime = new Runtime()) $this->codeWindowPattern = new CodeWindowPattern(); $this->columnsPattern = new ColumnsPattern(); $this->coverPattern = new CoverPattern(); + $this->mediaTextPattern = new MediaTextPattern(); $this->detailsPattern = new DetailsPattern(); $this->galleryPattern = new GalleryPattern(); $this->logoPattern = new LogoPattern(); @@ -2974,6 +2978,20 @@ private function convertElement(DOMElement $element, array &$fallbacks, bool $ca if ( null !== $cover ) { return $cover; } + + $mediaText = $this->mediaTextPattern->match( + $element, + $fallbacks, + fn (DOMElement $sourceElement, array &$sourceFallbacks, bool $captureUnsupported): array => $this->convertChildren($sourceElement, $sourceFallbacks, $captureUnsupported), + fn (DOMElement $sourceElement, array $excludedGeometryProperties = array()): array => $this->presentationAttributes($sourceElement, $excludedGeometryProperties), + fn (DOMElement $sourceElement): string => $this->mergedPresentationStyle($sourceElement), + fn (DOMElement $sourceElement): array => $this->htmlAttributes($sourceElement), + fn (string $url): string => $this->resolvedAssetImageUrl($url), + fn (string $name, array $attrs = array(), array $innerBlocks = array(), ?DOMElement $sourceElement = null): array => $this->createBlock($name, $attrs, $innerBlocks, $sourceElement) + ); + if ( null !== $mediaText ) { + return $mediaText; + } } $columns = $this->columnsPattern->match( diff --git a/php-transformer/src/HtmlToBlocks/Patterns/MediaTextPattern.php b/php-transformer/src/HtmlToBlocks/Patterns/MediaTextPattern.php index c0078b80..a8afe814 100644 --- a/php-transformer/src/HtmlToBlocks/Patterns/MediaTextPattern.php +++ b/php-transformer/src/HtmlToBlocks/Patterns/MediaTextPattern.php @@ -47,6 +47,422 @@ public function match( callable $resolveAssetUrl, callable $createBlock ): ?array { + $elementChildren = $this->strictElementChildren($element); + if ( null === $elementChildren || 2 !== count($elementChildren) ) { + return null; + } + + $mediaCandidates = array(); + foreach ( $elementChildren as $index => $child ) { + $resolution = $this->pureMediaResolution($child); + if ( null !== $resolution ) { + $mediaCandidates[ $index ] = $resolution; + } + } + + if ( 1 !== count($mediaCandidates) ) { + return null; + } + + $mediaIndex = (int) array_key_first($mediaCandidates); + $textIndex = 0 === $mediaIndex ? 1 : 0; + $resolution = $mediaCandidates[ $mediaIndex ]; + if ( $this->containsMediaElement($elementChildren[ $textIndex ]) ) { + return null; + } + + $localFallbacks = array(); + try { + $innerBlocks = $convertChildren($elementChildren[ $textIndex ], $localFallbacks, true); + } catch ( \Throwable ) { + return null; + } + + if ( array() === $innerBlocks || ! $this->containsTextBearingBlock($innerBlocks) ) { + return null; + } + + try { + $containerStyle = $mergedPresentationStyle($element); + } catch ( \Throwable ) { + return null; + } + + if ( $this->isVerticalFlexContainer(strtolower($containerStyle)) ) { + return null; + } + + try { + $mediaAttributes = $htmlAttributes($resolution['media']); + $sourceUrl = trim((string) ($mediaAttributes['src'] ?? '')); + if ( '' === $sourceUrl ) { + return null; + } + $mediaUrl = trim($resolveAssetUrl($sourceUrl)); + if ( '' === $mediaUrl ) { + return null; + } + } catch ( \Throwable ) { + return null; + } + + try { + $attrs = $presentationAttributes( + $element, + array( 'display', 'grid-template-columns', 'align-items', 'gap' ) + ); + } catch ( \Throwable ) { + return null; + } + unset($attrs['layout']); + + $mediaType = strtolower($resolution['media']->tagName); + $attrs['mediaType'] = 'img' === $mediaType ? 'image' : 'video'; + $attrs['mediaUrl'] = $mediaUrl; + + if ( 'img' === $mediaType ) { + $attrs['mediaAlt'] = (string) ($mediaAttributes['alt'] ?? ''); + } + if ( 1 === $mediaIndex ) { + $attrs['mediaPosition'] = 'right'; + } + + $mediaWidth = $this->mediaWidthFromContainerStyle($containerStyle, $mediaIndex); + if ( null === $mediaWidth && ! $this->hasGridTemplateColumns($containerStyle) ) { + try { + $mediaStyle = $mergedPresentationStyle($elementChildren[ $mediaIndex ]); + $mediaWidth = $this->mediaWidthFromMediaStyle($mediaStyle); + } catch ( \Throwable ) { + return null; + } + } + if ( null !== $mediaWidth && 50 !== $mediaWidth ) { + $attrs['mediaWidth'] = $mediaWidth; + } + + $verticalAlignment = $this->verticalAlignmentFromStyle($containerStyle); + if ( null !== $verticalAlignment ) { + $attrs['verticalAlignment'] = $verticalAlignment; + } + + if ( $resolution['anchor'] instanceof DOMElement ) { + try { + $anchorAttributes = $htmlAttributes($resolution['anchor']); + } catch ( \Throwable ) { + return null; + } + + $href = $this->safeLinkUrl((string) ($anchorAttributes['href'] ?? '')); + if ( '' !== $href ) { + $attrs['href'] = $href; + } + + foreach ( array( + 'target' => 'linkTarget', + 'rel' => 'rel', + 'class' => 'linkClass', + ) as $sourceName => $attributeName ) { + $value = trim((string) ($anchorAttributes[ $sourceName ] ?? '')); + if ( '' !== $value ) { + $attrs[ $attributeName ] = $value; + } + } + } + + try { + $block = $createBlock('core/media-text', $attrs, $innerBlocks, $element); + } catch ( \Throwable ) { + return null; + } + + array_push($fallbacks, ...$localFallbacks); + + return $block; + } + + /** + * @return array|null + */ + private function strictElementChildren(DOMElement $element): ?array + { + $children = array(); + foreach ( $element->childNodes as $child ) { + if ( XML_COMMENT_NODE === $child->nodeType ) { + continue; + } + if ( XML_TEXT_NODE === $child->nodeType ) { + if ( '' !== trim($child->textContent ?? '') ) { + return null; + } + continue; + } + if ( ! $child instanceof DOMElement ) { + return null; + } + $children[] = $child; + } + + return $children; + } + + private function safeLinkUrl(string $url): string + { + $url = trim($url); + if ( '' === $url || preg_match('/[\x00-\x1f\x7f]|javascript\s*:/i', $url) ) { + return ''; + } + + return $url; + } + + private function containsMediaElement(DOMElement $element): bool + { + if ( in_array(strtolower($element->tagName), array( 'img', 'video' ), true) ) { + return true; + } + + foreach ( $element->childNodes as $child ) { + if ( $child instanceof DOMElement && $this->containsMediaElement($child) ) { + return true; + } + } + + return false; + } + + /** + * @return array{media: DOMElement, anchor: DOMElement|null}|null + */ + private function pureMediaResolution(DOMElement $element, ?DOMElement $anchor = null): ?array + { + $tagName = strtolower($element->tagName); + if ( in_array($tagName, array( 'img', 'video' ), true) ) { + if ( ! $this->hasOnlyIgnorableChildren($element) ) { + return null; + } + + return array( + 'media' => $element, + 'anchor' => $anchor, + ); + } + + if ( ! in_array($tagName, array( 'figure', 'div', 'a', 'picture' ), true) ) { + return null; + } + if ( 'a' === $tagName ) { + if ( $anchor instanceof DOMElement ) { + return null; + } + $anchor = $element; + } + + if ( 'picture' === $tagName ) { + $image = $this->purePictureImage($element); + return $image instanceof DOMElement + ? array( 'media' => $image, 'anchor' => $anchor ) + : null; + } + + $child = $this->strictSingleMediaChild($element); + if ( ! $child instanceof DOMElement ) { + return null; + } + + return $this->pureMediaResolution($child, $anchor); + } + + private function purePictureImage(DOMElement $picture): ?DOMElement + { + $image = null; + if ( ! $this->collectPurePictureImage($picture, $image) ) { + return null; + } + + return $image; + } + + private function collectPurePictureImage(DOMElement $element, ?DOMElement &$image): bool + { + foreach ( $element->childNodes as $child ) { + if ( XML_COMMENT_NODE === $child->nodeType ) { + continue; + } + if ( XML_TEXT_NODE === $child->nodeType ) { + if ( '' !== trim($child->textContent ?? '') ) { + return false; + } + continue; + } + if ( ! $child instanceof DOMElement ) { + return false; + } + + $tagName = strtolower($child->tagName); + if ( 'source' === $tagName ) { + if ( ! $this->collectPurePictureImage($child, $image) ) { + return false; + } + continue; + } + if ( 'img' !== $tagName || $image instanceof DOMElement || ! $this->hasOnlyIgnorableChildren($child) ) { + return false; + } + $image = $child; + } + + return true; + } + + private function hasOnlyIgnorableChildren(DOMElement $element): bool + { + foreach ( $element->childNodes as $child ) { + if ( XML_COMMENT_NODE === $child->nodeType ) { + continue; + } + if ( XML_TEXT_NODE === $child->nodeType && '' === trim($child->textContent ?? '') ) { + continue; + } + + return false; + } + + return true; + } + + private function strictSingleMediaChild(DOMElement $element): ?DOMElement + { + $candidate = null; + foreach ( $element->childNodes as $child ) { + if ( XML_COMMENT_NODE === $child->nodeType ) { + continue; + } + if ( XML_TEXT_NODE === $child->nodeType ) { + if ( '' !== trim($child->textContent ?? '') ) { + return null; + } + continue; + } + if ( ! $child instanceof DOMElement ) { + return null; + } + if ( $candidate instanceof DOMElement ) { + return null; + } + $candidate = $child; + } + + return $candidate; + } + + /** + * @return array + */ + private function styleDeclarations(string $style): array + { + $declarations = array(); + foreach ( \Automattic\BlocksEngine\PhpTransformer\HtmlToBlocks\Style\CssValueSplitter::splitTopLevel($style, array( ';' )) as $declaration ) { + $separator = strpos($declaration, ':'); + if ( false === $separator ) { + continue; + } + + $name = strtolower(trim(substr($declaration, 0, $separator))); + $value = trim(substr($declaration, $separator + 1)); + if ( '' !== $name && '' !== $value ) { + $declarations[ $name ] = $value; + } + } + + return $declarations; + } + + private function hasGridTemplateColumns(string $style): bool + { + $declarations = $this->styleDeclarations($style); + return '' !== $this->normalizedCssValue((string) ($declarations['grid-template-columns'] ?? '')); + } + + private function mediaWidthFromContainerStyle(string $style, int $mediaIndex): ?int + { + $declarations = $this->styleDeclarations($style); + $template = $this->normalizedCssValue((string) ($declarations['grid-template-columns'] ?? '')); + if ( '' === $template ) { + return null; + } + + $tracks = \Automattic\BlocksEngine\PhpTransformer\HtmlToBlocks\Style\CssValueSplitter::splitTopLevelWhitespace($template); + if ( 2 !== count($tracks) ) { + return null; + } + + $mediaPercentage = $this->percentageValue($tracks[ $mediaIndex ]); + if ( null !== $mediaPercentage ) { + $otherTrack = $tracks[ 0 === $mediaIndex ? 1 : 0 ]; + if ( 'auto' === strtolower($otherTrack) || null !== $this->percentageValue($otherTrack) ) { + return $mediaPercentage; + } + } + + $firstFr = $this->frValue($tracks[0]); + $secondFr = $this->frValue($tracks[1]); + if ( null === $firstFr || null === $secondFr || 0.0 >= $firstFr + $secondFr ) { + return null; + } + + return (int) round(100 * ( 0 === $mediaIndex ? $firstFr : $secondFr ) / ($firstFr + $secondFr)); + } + + private function mediaWidthFromMediaStyle(string $style): ?int + { + $declarations = $this->styleDeclarations($style); + foreach ( array( 'flex-basis', 'width' ) as $property ) { + $value = $this->percentageValue($this->normalizedCssValue((string) ($declarations[ $property ] ?? ''))); + if ( null !== $value ) { + return $value; + } + } + return null; } + + private function verticalAlignmentFromStyle(string $style): ?string + { + $declarations = $this->styleDeclarations($style); + $alignItems = strtolower($this->normalizedCssValue((string) ($declarations['align-items'] ?? ''))); + + return array( + 'flex-start' => 'top', + 'center' => 'center', + 'flex-end' => 'bottom', + )[ $alignItems ] ?? null; + } + + private function normalizedCssValue(string $value): string + { + return trim(preg_replace('/\s*!\s*important\s*$/i', '', $value) ?? $value); + } + + private function percentageValue(string $value): ?int + { + if ( ! preg_match('/^(?:\d+(?:\.\d*)?|\.\d+)%$/', trim($value), $matches) ) { + return null; + } + + $percentage = (float) rtrim($matches[0], '%'); + if ( 0 > $percentage || 100 < $percentage ) { + return null; + } + + return (int) round($percentage); + } + + private function frValue(string $value): ?float + { + if ( ! preg_match('/^(?:\d+(?:\.\d*)?|\.\d+)fr$/i', trim($value), $matches) ) { + return null; + } + + return (float) substr($matches[0], 0, -2); + } } diff --git a/php-transformer/tests/unit/media-text-pattern.php b/php-transformer/tests/unit/media-text-pattern.php new file mode 100644 index 00000000..92e59d32 --- /dev/null +++ b/php-transformer/tests/unit/media-text-pattern.php @@ -0,0 +1,375 @@ +loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD); + libxml_clear_errors(); + libxml_use_internal_errors($previous); + $element = $document->getElementsByTagName($tagName)->item(0); + if ( ! $element instanceof DOMElement ) { + throw new RuntimeException('Fixture did not produce expected DOMElement.'); + } + + return $element; +}; +$htmlAttributes = static function (DOMElement $element): array { + $attributes = array(); + foreach ( $element->attributes ?? array() as $attribute ) { + $attributes[ $attribute->nodeName ] = $attribute->nodeValue ?? ''; + } + + return $attributes; +}; +$transformHtml = static function (string $html): array { + return ( new HtmlTransformer() )->transform($html)->toArray(); +}; + +$pattern = new MediaTextPattern(); + +// Frozen public callback contract. +$matchMethod = new ReflectionMethod(MediaTextPattern::class, 'match'); +$matchParameters = $matchMethod->getParameters(); +$assertSame( + array( 'element', 'fallbacks', 'convertChildren', 'presentationAttributes', 'mergedPresentationStyle', 'htmlAttributes', 'resolveAssetUrl', 'createBlock' ), + array_map(static fn (ReflectionParameter $parameter): string => $parameter->getName(), $matchParameters), + 'match callback parameter names remain frozen.' +); +$assertSame( + array( 'DOMElement', 'array', 'callable', 'callable', 'callable', 'callable', 'callable', 'callable' ), + array_map(static fn (ReflectionParameter $parameter): string => (string) $parameter->getType(), $matchParameters), + 'match callback parameter types remain frozen.' +); +$assertTrue($matchParameters[1]->isPassedByReference(), 'match fallbacks parameter remains passed by reference.'); +$assertSame('?array', (string) $matchMethod->getReturnType(), 'match nullable-array return type remains frozen.'); + +$heading = array( + 'blockName' => 'core/heading', + 'attrs' => array( 'content' => 'Build' ), + 'innerBlocks' => array(), +); +$paragraph = array( + 'blockName' => 'core/paragraph', + 'attrs' => array( 'content' => 'Ship' ), + 'innerBlocks' => array(), +); + +/** + * @param array> $convertedText + * @param array> $fallbacks + * @param array $record + * @param array $presentation + * @return array|null + */ +$match = static function ( + DOMElement $element, + array $convertedText, + array &$fallbacks, + array &$record, + array $presentation = array(), + bool $emitFallback = false, + bool $throwMediaStyle = false +) use ($pattern, $htmlAttributes): ?array { + $record = array( + 'convertCalls' => 0, + 'convertedTag' => null, + 'excluded' => null, + ); + + return $pattern->match( + $element, + $fallbacks, + static function (DOMElement $sourceElement, array &$sourceFallbacks, bool $captureUnsupported) use (&$record, $convertedText, $emitFallback): array { + ++$record['convertCalls']; + $record['convertedTag'] = strtolower($sourceElement->tagName); + if ( $emitFallback ) { + $sourceFallbacks[] = array( 'type' => 'html', 'reason' => 'unsupported_element' ); + } + return $convertedText; + }, + static function (DOMElement $sourceElement, array $excludedGeometryProperties) use (&$record, $presentation): array { + $record['excluded'] = $excludedGeometryProperties; + return $presentation; + }, + static function (DOMElement $sourceElement) use ($element, $throwMediaStyle): string { + if ( $throwMediaStyle && ! $sourceElement->isSameNode($element) ) { + throw new RuntimeException('media style unavailable'); + } + + return $sourceElement->getAttribute('style'); + }, + $htmlAttributes, + static fn (string $url): string => 'resolved:' . $url, + static fn (string $name, array $attrs, array $innerBlocks, ?DOMElement $sourceElement): array => array( + 'blockName' => $name, + 'attrs' => $attrs, + 'innerBlocks' => $innerBlocks, + ) + ); +}; + +// Media-left defaults omit position, width, and stacking attrs. +$fallbacks = array(); +$record = array(); +$mediaLeftElement = $elementFromHtml( + '
Left

Build

' +); +$mediaLeft = $match( + $mediaLeftElement, + array( $heading ), + $fallbacks, + $record, + array( 'className' => 'feature', 'layout' => array( 'type' => 'flex' ) ) +); +$assertSame('core/media-text', $mediaLeft['blockName'] ?? null, 'Media-left strict pair matches core/media-text.'); +$assertSame('image', $mediaLeft['attrs']['mediaType'] ?? null, 'Image media emits mediaType image.'); +$assertSame('resolved:left.jpg', $mediaLeft['attrs']['mediaUrl'] ?? null, 'Image src passes through asset resolver.'); +$assertSame('Left', $mediaLeft['attrs']['mediaAlt'] ?? null, 'Image alt passes through.'); +$assertTrue(! array_key_exists('mediaPosition', $mediaLeft['attrs'] ?? array()), 'Default left position is omitted.'); +$assertTrue(! array_key_exists('mediaWidth', $mediaLeft['attrs'] ?? array()), 'Default width is omitted.'); +$assertTrue(! array_key_exists('isStackedOnMobile', $mediaLeft['attrs'] ?? array()), 'Default mobile stacking is omitted.'); +$assertTrue(! array_key_exists('layout', $mediaLeft['attrs'] ?? array()), 'Consumed layout attr is removed.'); +$assertSame(array( $heading ), $mediaLeft['innerBlocks'] ?? null, 'Converted text side becomes innerBlocks.'); +$assertSame(1, $record['convertCalls'], 'Text side converts exactly once.'); +$assertSame('div', $record['convertedTag'], 'Only text child is converted.'); +$assertSame(array( 'display', 'grid-template-columns', 'align-items', 'gap' ), $record['excluded'], 'Presentation extraction excludes consumed geometry.'); + +// Media-right emits position and uses media track, not left track. +$fallbacks = array(); +$record = array(); +$mediaRightElement = $elementFromHtml( + '

Ship

' +); +$mediaRight = $match($mediaRightElement, array( $paragraph ), $fallbacks, $record); +$assertSame('right', $mediaRight['attrs']['mediaPosition'] ?? null, 'Second media child emits right position.'); +$assertSame(35, $mediaRight['attrs']['mediaWidth'] ?? null, 'Right media width derives from second grid track.'); +$assertSame('center', $mediaRight['attrs']['verticalAlignment'] ?? null, 'align-items center maps to center.'); + +// Video media consumes video without alt. +$fallbacks = array(); +$record = array(); +$videoElement = $elementFromHtml('

Watch

'); +$video = $match($videoElement, array( $paragraph ), $fallbacks, $record); +$assertSame('video', $video['attrs']['mediaType'] ?? null, 'Video media emits mediaType video.'); +$assertSame('resolved:clip.mp4', $video['attrs']['mediaUrl'] ?? null, 'Video src passes through asset resolver.'); +$assertTrue(! array_key_exists('mediaAlt', $video['attrs'] ?? array()), 'Video media omits mediaAlt.'); + +// Link wrapper attributes survive. +$fallbacks = array(); +$record = array(); +$linkedElement = $elementFromHtml( + '
Fallback

Open

' +); +$linked = $match($linkedElement, array( $paragraph ), $fallbacks, $record); +$assertSame('resolved:fallback.jpg', $linked['attrs']['mediaUrl'] ?? null, 'Picture uses img fallback src, not source srcset.'); +$assertSame('/full', $linked['attrs']['href'] ?? null, 'Link href passes through.'); +$assertSame('_blank', $linked['attrs']['linkTarget'] ?? null, 'Link target maps to linkTarget.'); +$assertSame('noopener', $linked['attrs']['rel'] ?? null, 'Link rel passes through.'); +$assertSame('zoom', $linked['attrs']['linkClass'] ?? null, 'Link class maps to linkClass.'); + +// Unsafe link destinations never reach media-text attrs. +foreach ( array( 'javascript:alert(1)', "/ok\x01bad" ) as $unsafeHref ) { + $fallbacks = array(); + $record = array(); + $unsafeLinkedElement = $elementFromHtml( + '
Safe

Safe copy

' + ); + $unsafeAnchor = $unsafeLinkedElement->getElementsByTagName('a')->item(0); + if ( ! $unsafeAnchor instanceof DOMElement ) { + throw new RuntimeException('Unsafe-link fixture did not produce anchor.'); + } + $unsafeAnchor->setAttribute('href', $unsafeHref); + $unsafeLinked = $match($unsafeLinkedElement, array( $paragraph ), $fallbacks, $record); + $assertTrue(! array_key_exists('href', $unsafeLinked['attrs'] ?? array()), 'Unsafe link href is omitted: ' . json_encode($unsafeHref)); + $assertSame('_blank', $unsafeLinked['attrs']['linkTarget'] ?? null, 'Unsafe href does not erase anchor target metadata.'); + $assertSame('noopener', $unsafeLinked['attrs']['rel'] ?? null, 'Unsafe href does not erase anchor rel metadata.'); + $assertSame('unsafe-link', $unsafeLinked['attrs']['linkClass'] ?? null, 'Unsafe href does not erase anchor class metadata.'); +} + +$unsafeLinkResult = $transformHtml( + '
Safe

Safe copy

' +); +$unsafeLinkBlock = $unsafeLinkResult['blocks'][0] ?? array(); +$assertSame('core/media-text', $unsafeLinkBlock['blockName'] ?? null, 'Unsafe linked media still converts with safe media URL.'); +$assertTrue(! array_key_exists('href', $unsafeLinkBlock['attrs'] ?? array()), 'Unsafe href is absent from emitted block attrs.'); +$assertTrue(! str_contains((string) ($unsafeLinkBlock['innerHTML'] ?? ''), 'javascript'), 'Unsafe href is absent from emitted markup.'); + +// Width derives from media-child flex-basis, then width, and from two fr tracks. +$fallbacks = array(); +$record = array(); +$flexBasisElement = $elementFromHtml('

Basis

'); +$flexBasis = $match($flexBasisElement, array( $paragraph ), $fallbacks, $record); +$assertSame(42, $flexBasis['attrs']['mediaWidth'] ?? null, 'Media flex-basis percentage derives width.'); + +$fallbacks = array(); +$record = array(); +$widthElement = $elementFromHtml('

Width

'); +$width = $match($widthElement, array( $paragraph ), $fallbacks, $record); +$assertSame(38, $width['attrs']['mediaWidth'] ?? null, 'Media width percentage rounds to nearest integer.'); + +// Media-child style resolution failures decline and discard local fallbacks. +$fallbacks = array( array( 'reason' => 'existing' ) ); +$record = array(); +$styleFailure = $match($mediaLeftElement, array( $heading ), $fallbacks, $record, array(), true, true); +$assertNull($styleFailure, 'Media-child style failure declines match.'); +$assertSame(array( array( 'reason' => 'existing' ) ), $fallbacks, 'Media-child style failure leaves host fallbacks unchanged.'); + +$fallbacks = array(); +$record = array(); +$frElement = $elementFromHtml('

Fr

'); +$fr = $match($frElement, array( $paragraph ), $fallbacks, $record); +$assertSame(40, $fr['attrs']['mediaWidth'] ?? null, 'Two fr tracks derive media share.'); + +// Vertical alignment mapping covers all core values. +foreach ( array( 'flex-start' => 'top', 'center' => 'center', 'flex-end' => 'bottom' ) as $alignItems => $expectedAlignment ) { + $fallbacks = array(); + $record = array(); + $alignmentElement = $elementFromHtml('

Align

'); + $alignment = $match($alignmentElement, array( $paragraph ), $fallbacks, $record); + $assertSame($expectedAlignment, $alignment['attrs']['verticalAlignment'] ?? null, 'align-items ' . $alignItems . ' maps to core value.'); +} + +// Media-side impurity declines before text conversion. +$fallbacks = array( array( 'reason' => 'existing' ) ); +$record = array(); +$captionElement = $elementFromHtml('
Caption

Copy

'); +$assertNull($match($captionElement, array( $paragraph ), $fallbacks, $record, array(), true), 'Figcaption makes media side impure.'); +$assertSame(0, $record['convertCalls'], 'Impure media declines before text conversion.'); +$assertSame(array( array( 'reason' => 'existing' ) ), $fallbacks, 'Impure decline leaves host fallbacks unchanged.'); + +// A second media-bearing pane is gallery-shaped, not text-bearing. +$fallbacks = array(); +$record = array(); +$ambiguousGalleryElement = $elementFromHtml( + '
C
D
D caption
', + 'div' +); +$assertNull($match($ambiguousGalleryElement, array( $paragraph ), $fallbacks, $record), 'Second pane with media descendant declines as ambiguous gallery.'); +$assertSame(0, $record['convertCalls'], 'Second media-bearing pane declines before text conversion.'); + +// Exactly three element children decline before conversion. +$fallbacks = array(); +$record = array(); +$threeChildrenElement = $elementFromHtml('

Copy

'); +$assertNull($match($threeChildrenElement, array( $paragraph ), $fallbacks, $record), 'Three element children decline.'); +$assertSame(0, $record['convertCalls'], 'Three-child decline avoids conversion.'); + +// Vertical flex declines after one conversion and discards local fallbacks. +$fallbacks = array( array( 'reason' => 'existing' ) ); +$record = array(); +$verticalElement = $elementFromHtml('

Stacked

'); +$assertNull($match($verticalElement, array( $paragraph ), $fallbacks, $record, array(), true), 'Vertical flex container declines.'); +$assertSame(1, $record['convertCalls'], 'Vertical gate runs after single text conversion.'); +$assertSame(array( array( 'reason' => 'existing' ) ), $fallbacks, 'Vertical decline discards text-side local fallbacks.'); + +// Converted text side must contain a recursive text-bearing block. +$fallbacks = array(); +$record = array(); +$imageOnly = array( + 'blockName' => 'core/group', + 'attrs' => array(), + 'innerBlocks' => array( array( 'blockName' => 'core/image', 'attrs' => array(), 'innerBlocks' => array() ) ), +); +$assertNull($match($mediaLeftElement, array( $imageOnly ), $fallbacks, $record), 'Non-text text side declines.'); +$assertSame(1, $record['convertCalls'], 'Non-text side converts once for gate and output reuse.'); + +// Underivable grid geometries omit mediaWidth. +foreach ( array( 'minmax(12rem,1fr) auto', '1fr 40%' ) as $gridTemplate ) { + $fallbacks = array(); + $record = array(); + $underivableElement = $elementFromHtml('

Unknown

'); + $underivable = $match($underivableElement, array( $paragraph ), $fallbacks, $record); + $assertTrue(! array_key_exists('mediaWidth', $underivable['attrs'] ?? array()), 'Underivable grid width is omitted: ' . $gridTemplate); +} + +// Text-side fallbacks push only after successful block creation. +$fallbacks = array( array( 'reason' => 'existing' ) ); +$record = array(); +$matchedWithFallback = $match($mediaLeftElement, array( $heading ), $fallbacks, $record, array(), true); +$assertSame('core/media-text', $matchedWithFallback['blockName'] ?? null, 'Text fallback does not suppress valid match.'); +$assertSame( + array( array( 'reason' => 'existing' ), array( 'type' => 'html', 'reason' => 'unsupported_element' ) ), + $fallbacks, + 'Matched text-side fallback pushes to host accumulator.' +); + +// Ladder fallthrough remains unchanged for strict declines. +$captionResult = $transformHtml('
Caption

Copy

'); +$assertSame('core/columns', $captionResult['blocks'][0]['blockName'] ?? null, 'Figcaption decline falls through to existing columns path.'); + +$ambiguousGalleryResult = $transformHtml( + '
C
D
D caption
' +); +$assertSame('core/gallery', $ambiguousGalleryResult['blocks'][0]['blockName'] ?? null, 'Two media-bearing figure panes remain core/gallery.'); + +$threeChildrenResult = $transformHtml('

Copy

'); +$assertSame('core/columns', $threeChildrenResult['blocks'][0]['blockName'] ?? null, 'Three-child decline falls through to existing columns path.'); + +$verticalResult = $transformHtml('

Stacked

'); +$assertTrue('core/media-text' !== ($verticalResult['blocks'][0]['blockName'] ?? null), 'Vertical flex decline never emits media-text.'); +$assertTrue('core/columns' !== ($verticalResult['blocks'][0]['blockName'] ?? null), 'Vertical flex decline keeps existing columns rejection.'); + +// Existing wp-block-media-text markup round-trips through same strict gate. +$roundTripResult = $transformHtml( + '
' + . '

Round trip

' + . '
Round
' + . '
' +); +$roundTrip = $roundTripResult['blocks'][0] ?? array(); +$assertSame('core/media-text', $roundTrip['blockName'] ?? null, 'wp-block-media-text markup passes strict round-trip gate.'); +$assertSame('right', $roundTrip['attrs']['mediaPosition'] ?? null, 'Round-trip DOM order restores right position.'); +$assertContains('has-media-on-the-right', (string) ($roundTrip['innerHTML'] ?? ''), 'Round-trip save shape restores right class.'); + +// Emitted media-text markup passes Runtime serialization validation. +$runtime = new Runtime(); +$serializedRoundTrip = $runtime->serializeBlocks(array( $roundTrip )); +$validity = $runtime->validateBlockSerialization($serializedRoundTrip); +$assertSame('pass', $validity['status'] ?? null, 'Emitted media-text markup passes serialization validity.'); + +if ( 0 === $failures ) { + echo "media text pattern ok\n"; +} + +exit(0 === $failures ? 0 : 1); From 17d053a5f0e5945312a4ca658f7c0418215eca1a Mon Sep 17 00:00:00 2001 From: Matthew Batchelder Date: Fri, 31 Jul 2026 12:08:13 -0400 Subject: [PATCH 04/11] test(php-transformer): cover media-text conversion --- php-transformer/CHANGELOG.md | 1 + php-transformer/composer.json | 2 + .../docs/html-transform-coverage.md | 3 +- .../fixtures/parity/html-media-text.json | 37 +++++++++++++++++++ 4 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 php-transformer/tests/fixtures/parity/html-media-text.json diff --git a/php-transformer/CHANGELOG.md b/php-transformer/CHANGELOG.md index 952cfccb..fbb73fcc 100644 --- a/php-transformer/CHANGELOG.md +++ b/php-transformer/CHANGELOG.md @@ -5,6 +5,7 @@ All notable changes to this project will be documented in this file. Entries are ## [0.4.10] - 2026-07-28 ### Changed +- Convert strict two-pane media/text layouts to core/media-text - Preserve label value row geometry - Cover synthetic paragraph parity - Reset synthetic paragraph margins diff --git a/php-transformer/composer.json b/php-transformer/composer.json index 1dab12f9..c230e645 100644 --- a/php-transformer/composer.json +++ b/php-transformer/composer.json @@ -66,6 +66,8 @@ "php tests/unit/background-image-extractor.php", "php tests/unit/cover-block-factory.php", "php tests/unit/cover-pattern.php", + "php tests/unit/media-text-block-factory.php", + "php tests/unit/media-text-pattern.php", "php tests/unit/cover-style-resolver.php", "php tests/unit/css-stylesheet-transformer.php", "php tests/unit/css-selector-matcher.php", diff --git a/php-transformer/docs/html-transform-coverage.md b/php-transformer/docs/html-transform-coverage.md index cb712656..5d8e7424 100644 --- a/php-transformer/docs/html-transform-coverage.md +++ b/php-transformer/docs/html-transform-coverage.md @@ -15,6 +15,7 @@ Run the coverage fixtures with `composer parity` or as part of `composer test`. | Code | `html-core-text-structure.json` | `core/code`, `core/preformatted` | | Tables | `html-core-media-actions.json` | `core/table` with head/body/caption attrs | | Images | `html-core-media-actions.json`, `html-figure-quote-media.json` | `core/image` with URL, alt, dimensions, caption, identity, size, and class attrs | +| Media and text | `html-media-text.json` | `core/media-text` for strict two-pane image/video and text layouts; ambiguous or impure media layouts continue through existing columns/group handling | | Buttons | `html-core-media-actions.json` | `core/buttons` containing `core/button` children | | Shortcodes | `html-core-media-actions.json` | `core/shortcode` for standalone shortcode text | | Wrapper provenance and safety | `html-provenance-wrapper-safety.json` | Presentational semantic wrappers are preserved as `core/group`; unsupported fallback records include selector/source metadata and sanitized fallback HTML | @@ -28,7 +29,7 @@ Run the coverage fixtures with `composer parity` or as part of `composer test`. | Category | Status | Notes | | --- | --- | --- | -| Supported | Heading, paragraph, unordered/ordered list, quote, pullquote, code, preformatted, table, image, buttons/button, shortcode | Fixtures assert the block names and representative attrs currently emitted by `HtmlTransformer`. | +| Supported | Heading, paragraph, unordered/ordered list, quote, pullquote, code, preformatted, table, image, media-text, buttons/button, shortcode | Fixtures assert the block names and representative attrs currently emitted by `HtmlTransformer`. Media-text requires exactly two element children: one pure image/video side and one text-bearing side; ambiguous layouts retain existing columns/group behavior. | | Unsupported fallback | Unknown/custom elements, SVG markup, form controls, other unsupported top-level HTML | Fallbacks use `type: unsupported_element`, include the source tag, selector, caller source/scope when provided, sanitized HTML, and increment `coverage.0.fallback_count`. | | Context-required | Interactive/form behavior, embeds, advanced layout semantics, raw-handler hooks | These require WordPress/Gutenberg runtime context or richer product converter behavior and remain outside the PHP transformer's supported slice. | | Gutenberg editor validation | Gap | The repository has no browser harness that boots Gutenberg, registers generated companion blocks, and validates load/edit/save output. `wp_block_validity` is a PHP structural and canonical save-shape check; the WordPress integration test and Playwright visual-parity tooling do not exercise the editor. | diff --git a/php-transformer/tests/fixtures/parity/html-media-text.json b/php-transformer/tests/fixtures/parity/html-media-text.json new file mode 100644 index 00000000..7c3203a0 --- /dev/null +++ b/php-transformer/tests/fixtures/parity/html-media-text.json @@ -0,0 +1,37 @@ +{ + "schema": "blocks-engine/php-transformer/parity-fixture/v1", + "name": "html-media-text", + "description": "Converts strict two-pane image/text and video/text layouts to native core/media-text blocks while preserving key media geometry and link attributes.", + "source_reference": { + "repo": "php-transformer", + "path": "tests/fixtures/parity/html-media-text.json", + "notes": "Covers a linked picture-backed image on the left and a video on the right; both layouts have exactly two element children, pure media subtrees, text-bearing content, and zero fallbacks." + }, + "legacy_comparison": { + "skip": true, + "reason": "This covers the PHP transformer's native core/media-text recognizer and canonical save shape." + }, + "operation": "html_transformer.transform", + "input": { + "content": "
\"Feature

Image feature

Linked media stays beside readable copy.

Video feature

Video renders on the right.

" + }, + "expected_blocks": [ + { "path": "blocks.0", "name": "core/media-text", "attrs": { "className": "feature-split", "mediaType": "image", "mediaUrl": "https://example.com/feature.jpg", "mediaAlt": "Feature view", "mediaWidth": 40, "verticalAlignment": "bottom", "href": "https://example.com/story", "linkTarget": "_blank", "rel": "noreferrer", "linkClass": "media-link" } }, + { "path": "blocks.0.innerBlocks.0", "name": "core/heading", "attrs": { "content": "Image feature", "level": 2 } }, + { "path": "blocks.0.innerBlocks.1", "name": "core/paragraph", "attrs": { "content": "Linked media stays beside readable copy." } }, + { "path": "blocks.1", "name": "core/media-text", "attrs": { "className": "video-split", "mediaPosition": "right", "mediaType": "video", "mediaUrl": "https://example.com/feature.mp4", "mediaWidth": 35, "verticalAlignment": "center" } }, + { "path": "blocks.1.innerBlocks.0", "name": "core/heading", "attrs": { "content": "Video feature", "level": 3 } }, + { "path": "blocks.1.innerBlocks.1", "name": "core/paragraph", "attrs": { "content": "Video renders on the right." } } + ], + "expected_fallbacks": [], + "expect": [ + { "path": "status", "assert": "equals", "value": "success" }, + { "path": "blocks", "assert": "count", "count": 2 }, + { "path": "blocks.0.innerBlocks", "assert": "count", "count": 2 }, + { "path": "blocks.1.innerBlocks", "assert": "count", "count": 2 }, + { "path": "fallbacks", "assert": "count", "count": 0 }, + { "path": "source_reports.conversion_report.metrics.fallback_count", "assert": "equals", "value": 0 }, + { "path": "coverage.0.fallback_count", "assert": "equals", "value": 0 }, + { "path": "serialized_blocks", "assert": "contains", "value": " null * | + * +-- strict media/layout gates pass? ---- no --> null + * | * +-- convert text child once * | * +-- text-bearing block? -------------- no --> null * | - * +-- vertical flex container? --------- yes -> null - * | * `-- core/media-text */ final class MediaTextPattern @@ -85,9 +85,9 @@ public function match( } $displayType = $this->containerDisplayType($containerStyle); + $flexDirection = strtolower($this->normalizedCssValue((string) ($this->styleDeclarations($containerStyle)['flex-direction'] ?? ''))); if ( - $this->isVerticalFlexContainer(strtolower($containerStyle)) - || ( 'flex' === $displayType && $this->styleValueEquals($containerStyle, 'flex-direction', 'row-reverse') ) + ( 'flex' === $displayType && in_array($flexDirection, array( 'column', 'column-reverse', 'row-reverse' ), true) ) || $this->styleValueEquals($containerStyle, 'direction', 'rtl') ) { return null; diff --git a/php-transformer/src/HtmlToBlocks/Style/StyleResolutionTrait.php b/php-transformer/src/HtmlToBlocks/Style/StyleResolutionTrait.php index 8bddaa77..521cda52 100644 --- a/php-transformer/src/HtmlToBlocks/Style/StyleResolutionTrait.php +++ b/php-transformer/src/HtmlToBlocks/Style/StyleResolutionTrait.php @@ -513,6 +513,15 @@ private function structuralPresentationDeclarations(DOMElement $element): array return $this->mergeCssDeclarationMaps($declarations, $this->cssDeclarations($this->attr($element, 'style'))); } + /** + * Resolve full authored layout style for media-text strict gates, including + * low-value direct children that general presentation resolution skips. + */ + private function mediaTextPresentationStyle(DOMElement $element): string + { + return $this->cssDeclarationString($this->structuralPresentationDeclarations($element)); + } + /** * Remove responsive/JS-revealed hidden base states (display:none / * visibility:hidden / opacity:0) from content-bearing or interactive @@ -993,6 +1002,7 @@ private function safeVisualDeclarations(array $declarations): array 'color', 'align-items', 'column-gap', + 'direction', 'display', 'flex-direction', 'flex', @@ -1020,6 +1030,7 @@ private function safeVisualDeclarations(array $declarations): array 'max-width', 'min-height', 'min-width', + 'order', 'padding', 'padding-bottom', 'padding-left', diff --git a/php-transformer/tests/unit/media-text-block-factory.php b/php-transformer/tests/unit/media-text-block-factory.php index fb113124..9c411efb 100644 --- a/php-transformer/tests/unit/media-text-block-factory.php +++ b/php-transformer/tests/unit/media-text-block-factory.php @@ -73,6 +73,7 @@ 'linkClass' => 'media-link', 'anchor' => 'feature', 'className' => 'promo', + 'backgroundColor' => 'accent', 'style' => array( 'color' => array( 'text' => '#123456' ), 'dimensions' => array( 'maxWidth' => '900px' ), @@ -81,7 +82,7 @@ 'inlineGeometryStyle' => 'min-height:30rem;aspect-ratio:16/9;max-width:900px;--media-ratio:1', ), array( $paragraph )); $assertSame( - '
', + '
', $right['innerContent'][0], 'Media-right opening carries position, stack, vertical, and width attributes.' ); @@ -92,9 +93,10 @@ ); $assertContains('grid-template-columns:auto 35%', $right['innerHTML'], 'Right media width targets second grid track.'); $assertContains('is-vertically-aligned-center', $right['innerHTML'], 'Vertical alignment class matches core save shape.'); -$assertContains('has-text-color', $right['innerHTML'], 'Style-derived support class survives wrapper style filtering.'); -$assertSame(array( 'padding' => array( 'top' => '2rem' ) ), $right['attrs']['style']['spacing'] ?? null, 'Unsupported blockGap is removed while supported spacing remains.'); -$assertSame(null, $right['attrs']['style']['dimensions']['maxWidth'] ?? null, 'Media-text comment attrs omit unsupported maxWidth.'); +$assertContains('has-accent-background-color has-background', $right['innerHTML'], 'Top-level preset support classes survive media-text style suppression.'); +$assertNotContains('has-text-color', $right['innerHTML'], 'Suppressed style attrs emit no ghost support class.'); +$assertSame('accent', $right['attrs']['backgroundColor'] ?? null, 'Top-level preset attr survives media-text style suppression.'); +$assertSame(null, $right['attrs']['style'] ?? null, 'Media-text comment attrs omit suppressed style object entirely.'); $assertNotContains('gap:', $right['innerHTML'], 'Unsupported blockGap emits no wrapper CSS.'); $assertNotContains('padding-top:', $right['innerHTML'], 'Supported comment attrs do not leak into media-text wrapper style.'); $assertNotContains('min-height:', $right['innerHTML'], 'Source min-height does not leak into media-text wrapper style.'); diff --git a/php-transformer/tests/unit/media-text-pattern.php b/php-transformer/tests/unit/media-text-pattern.php index 569eb0ce..2a116831 100644 --- a/php-transformer/tests/unit/media-text-pattern.php +++ b/php-transformer/tests/unit/media-text-pattern.php @@ -111,7 +111,8 @@ bool $emitFallback = false, bool $throwMediaStyle = false, ?callable $resolveMediaUrl = null, - bool $throwCreate = false + bool $throwCreate = false, + ?callable $resolvePresentationStyle = null ) use ($pattern, $htmlAttributes): ?array { $record = array( 'convertCalls' => 0, @@ -121,6 +122,7 @@ ); $resolveMediaUrl ??= static fn (string $url): string => '/resolved/' . ltrim($url, '/'); + $resolvePresentationStyle ??= static fn (DOMElement $sourceElement): string => $sourceElement->getAttribute('style'); return $pattern->match( $element, @@ -149,12 +151,12 @@ static function (DOMElement $sourceElement, array $excludedGeometryProperties) u $record['excluded'] = $excludedGeometryProperties; return $presentation; }, - static function (DOMElement $sourceElement) use ($element, $throwMediaStyle): string { + static function (DOMElement $sourceElement) use ($element, $throwMediaStyle, $resolvePresentationStyle): string { if ( $throwMediaStyle && ! $sourceElement->isSameNode($element) ) { throw new RuntimeException('media style unavailable'); } - return $sourceElement->getAttribute('style'); + return $resolvePresentationStyle($sourceElement); }, $htmlAttributes, $resolveMediaUrl, @@ -517,6 +519,49 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so $row = $match($rowElement, array( $paragraph ), $fallbacks, $record); $assertSame('core/media-text', $row['blockName'] ?? null, 'Normal flex row remains eligible.'); +// Authored direction/order rules reach strict gates for low-value direct children. +$fallbacks = array( array( 'reason' => 'existing' ) ); +$record = array(); +$authoredOrderElement = $elementFromHtml('

Ordered

'); +$authoredOrder = $match( + $authoredOrderElement, + array( $paragraph ), + $fallbacks, + $record, + array(), + true, + false, + null, + false, + static fn (DOMElement $sourceElement): string => str_contains(' ' . $sourceElement->getAttribute('class') . ' ', ' copy ') + ? 'order:2' + : $sourceElement->getAttribute('style') +); +$assertNull($authoredOrder, 'Authored child order declines match.'); +$assertSame(0, $record['convertCalls'], 'Authored child order declines before text conversion.'); +$assertSame(array( array( 'reason' => 'existing' ) ), $fallbacks, 'Authored child order leaves host fallbacks unchanged.'); + +$fallbacks = array( array( 'reason' => 'existing' ) ); +$record = array(); +$authoredRtlElement = $elementFromHtml('

RTL

'); +$authoredRtl = $match( + $authoredRtlElement, + array( $paragraph ), + $fallbacks, + $record, + array(), + true, + false, + null, + false, + static fn (DOMElement $sourceElement): string => str_contains(' ' . $sourceElement->getAttribute('class') . ' ', ' shell ') + ? 'display:grid;direction:rtl' + : $sourceElement->getAttribute('style') +); +$assertNull($authoredRtl, 'Authored container rtl declines match.'); +$assertSame(0, $record['convertCalls'], 'Authored container rtl declines before text conversion.'); +$assertSame(array( array( 'reason' => 'existing' ) ), $fallbacks, 'Authored container rtl leaves host fallbacks unchanged.'); + // Link-wrapped video is not representable by core/media-text save markup. $fallbacks = array( array( 'reason' => 'existing' ) ); $record = array(); @@ -583,13 +628,16 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so // Ladder fallthrough remains unchanged for strict declines. $geometryResult = $transformHtml( - '

Copy

' + '

Copy

' ); $geometryBlock = $geometryResult['blocks'][0] ?? array(); $geometryOpening = (string) ($geometryBlock['innerContent'][0] ?? ''); $geometryAssets = implode("\n", array_map(static fn (array $asset): string => (string) ($asset['content'] ?? ''), $geometryResult['assets'] ?? array())); $assertSame('core/media-text', $geometryBlock['blockName'] ?? null, 'Grid geometry case emits media-text.'); -$assertTrue(! isset($geometryBlock['attrs']['style']['dimensions']['maxWidth']), 'Media-text attrs omit maxWidth.'); +$assertTrue(! isset($geometryBlock['attrs']['style']), 'Media-text attrs omit suppressed style object.'); +$assertSame('accent', $geometryBlock['attrs']['backgroundColor'] ?? null, 'Media-text preserves top-level preset attr.'); +$assertContains('has-accent-background-color has-background', $geometryOpening, 'Media-text preserves top-level preset classes.'); +$assertContains('be-inline-geometry-', (string) ($geometryBlock['attrs']['className'] ?? ''), 'Media-text preserves generated geometry carrier class.'); $assertContains('style="grid-template-columns:30% auto"', $geometryOpening, 'Media-text wrapper style contains grid tracks.'); foreach ( array( 'max-width', 'min-height', 'aspect-ratio', '--media-gap', 'padding-' ) as $leakedProperty ) { $assertTrue(! str_contains($geometryOpening, $leakedProperty), 'Media-text wrapper style omits source property: ' . $leakedProperty); @@ -601,6 +649,24 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so $rowReverseResult = $transformHtml('

Copy

'); $assertTrue('core/media-text' !== ($rowReverseResult['blocks'][0]['blockName'] ?? null), 'Flex row-reverse falls through without media-text.'); +$authoredOrderResult = $transformHtml('

Copy

'); +$assertTrue('core/media-text' !== ($authoredOrderResult['blocks'][0]['blockName'] ?? null), 'Authored .copy{order:2} declines media-text.'); + +$authoredRtlResult = $transformHtml('

Copy

'); +$assertTrue('core/media-text' !== ($authoredRtlResult['blocks'][0]['blockName'] ?? null), 'Authored .shell{display:grid;direction:rtl} declines media-text.'); + +$lastDisplayWinsResult = $transformHtml('

Copy

'); +$assertSame('core/media-text', $lastDisplayWinsResult['blocks'][0]['blockName'] ?? null, 'Last duplicate display declaration controls row-reverse gate.'); + +$lastFlexDirectionWinsResult = $transformHtml('

Copy

'); +$assertSame('core/media-text', $lastFlexDirectionWinsResult['blocks'][0]['blockName'] ?? null, 'Last duplicate flex-direction declaration controls row-reverse gate.'); + +$reviewerLastDisplayResult = $transformHtml('

Copy

'); +$assertSame('core/media-text', $reviewerLastDisplayResult['blocks'][0]['blockName'] ?? null, 'Last display:block declaration makes stale flex column inapplicable.'); + +$reviewerLastDirectionResult = $transformHtml('

Copy

'); +$assertSame('core/media-text', $reviewerLastDirectionResult['blocks'][0]['blockName'] ?? null, 'Last flex-direction:row declaration supersedes stale column.'); + $linkedVideoResult = $transformHtml('

Copy

'); $assertTrue('core/media-text' !== ($linkedVideoResult['blocks'][0]['blockName'] ?? null), 'Linked video falls through without media-text.'); From 1f66c534f5924409be18de7e27e7f86295b73748 Mon Sep 17 00:00:00 2001 From: Matthew Batchelder Date: Fri, 31 Jul 2026 13:10:22 -0400 Subject: [PATCH 08/11] fix(php-transformer): preserve media-text support styles --- .../src/HtmlToBlocks/BlockFactory.php | 27 ++++++++++++--- .../tests/unit/media-text-block-factory.php | 34 ++++++++++++++----- .../tests/unit/media-text-pattern.php | 11 ++++-- 3 files changed, 57 insertions(+), 15 deletions(-) diff --git a/php-transformer/src/HtmlToBlocks/BlockFactory.php b/php-transformer/src/HtmlToBlocks/BlockFactory.php index ebfd51f3..a3226c9d 100644 --- a/php-transformer/src/HtmlToBlocks/BlockFactory.php +++ b/php-transformer/src/HtmlToBlocks/BlockFactory.php @@ -77,7 +77,20 @@ private function normalizeAttrsForBlock(string $name, array $attrs): array } if ( 'core/media-text' === $name ) { - unset($attrs['style']); + $supportedStyleGroups = array( 'border', 'color', 'elements', 'spacing', 'typography' ); + if ( is_array($attrs['style'] ?? null) ) { + foreach ( array_keys($attrs['style']) as $styleGroup ) { + if ( ! in_array($styleGroup, $supportedStyleGroups, true) ) { + unset($attrs['style'][ $styleGroup ]); + } + } + if ( empty($attrs['style']) ) { + unset($attrs['style']); + } + } else { + unset($attrs['style']); + } + unset($attrs['inlineGeometryStyle']); } if ( 'core/separator' === $name ) { @@ -471,6 +484,9 @@ private function mediaTextHtml(array $attrs, array $innerBlocks): array if ( '' !== $verticalAlignment ) { $wrapperClasses[] = 'is-vertically-aligned-' . $verticalAlignment; } + if ( ! empty($attrs['style']['elements']['link']['color']) ) { + $wrapperClasses[] = 'has-link-color'; + } $wrapperAttrs = $attrs; $wrapperStyle = ''; @@ -922,9 +938,12 @@ private function blockSupportAttrs(array $attrs, string $baseClass = '', ?string $layoutClasses = $this->layoutClasses($attrs['layout'] ?? null, $baseClass); $alignmentClasses = $this->textAlignmentClasses($attrs); $classes = $this->mergeClassNames($baseClass, $presetClasses, $support['classes'], $layoutClasses, $alignmentClasses, (string) ($attrs['className'] ?? '')); - $style = null === $styleOverride - ? trim((string) $support['style'] . ';' . (string) ($attrs['inlineGeometryStyle'] ?? ''), ';') - : trim($styleOverride, ';'); + $style = trim( + (string) $support['style'] . ';' . (null === $styleOverride + ? (string) ($attrs['inlineGeometryStyle'] ?? '') + : $styleOverride), + ';' + ); return $this->htmlAttrs(array( 'id' => (string) ($attrs['anchor'] ?? ''), 'class' => $classes, diff --git a/php-transformer/tests/unit/media-text-block-factory.php b/php-transformer/tests/unit/media-text-block-factory.php index 9c411efb..48b4c56c 100644 --- a/php-transformer/tests/unit/media-text-block-factory.php +++ b/php-transformer/tests/unit/media-text-block-factory.php @@ -76,13 +76,18 @@ 'backgroundColor' => 'accent', 'style' => array( 'color' => array( 'text' => '#123456' ), - 'dimensions' => array( 'maxWidth' => '900px' ), + 'border' => array( 'radius' => '8px' ), + 'dimensions' => array( 'maxWidth' => '900px', 'minHeight' => '30rem' ), + 'elements' => array( 'link' => array( 'color' => array( 'text' => '#654321' ) ) ), + 'position' => array( 'type' => 'sticky', 'top' => '0px' ), 'spacing' => array( 'blockGap' => '2rem', 'padding' => array( 'top' => '2rem' ) ), + 'typography' => array( 'lineHeight' => '1.4' ), + '--media-ratio' => '1', ), 'inlineGeometryStyle' => 'min-height:30rem;aspect-ratio:16/9;max-width:900px;--media-ratio:1', ), array( $paragraph )); $assertSame( - '
', + '
', $right['innerContent'][0], 'Media-right opening carries position, stack, vertical, and width attributes.' ); @@ -93,17 +98,30 @@ ); $assertContains('grid-template-columns:auto 35%', $right['innerHTML'], 'Right media width targets second grid track.'); $assertContains('is-vertically-aligned-center', $right['innerHTML'], 'Vertical alignment class matches core save shape.'); -$assertContains('has-accent-background-color has-background', $right['innerHTML'], 'Top-level preset support classes survive media-text style suppression.'); -$assertNotContains('has-text-color', $right['innerHTML'], 'Suppressed style attrs emit no ghost support class.'); -$assertSame('accent', $right['attrs']['backgroundColor'] ?? null, 'Top-level preset attr survives media-text style suppression.'); -$assertSame(null, $right['attrs']['style'] ?? null, 'Media-text comment attrs omit suppressed style object entirely.'); +$assertContains('has-accent-background-color has-background', $right['innerHTML'], 'Top-level preset support classes survive media-text style filtering.'); +$assertContains('has-text-color', $right['innerHTML'], 'Supported style-derived class survives media-text style filtering.'); +$assertContains('has-link-color', $right['innerHTML'], 'Supported link-element class survives media-text style filtering.'); +$assertSame('accent', $right['attrs']['backgroundColor'] ?? null, 'Top-level preset attr survives media-text style filtering.'); +$assertSame( + array( + 'color' => array( 'text' => '#123456' ), + 'border' => array( 'radius' => '8px' ), + 'elements' => array( 'link' => array( 'color' => array( 'text' => '#654321' ) ) ), + 'spacing' => array( 'padding' => array( 'top' => '2rem' ) ), + 'typography' => array( 'lineHeight' => '1.4' ), + ), + $right['attrs']['style'] ?? null, + 'Media-text comment attrs keep only supported style groups.' +); $assertNotContains('gap:', $right['innerHTML'], 'Unsupported blockGap emits no wrapper CSS.'); -$assertNotContains('padding-top:', $right['innerHTML'], 'Supported comment attrs do not leak into media-text wrapper style.'); +$assertContains('padding-top:2rem', $right['innerHTML'], 'Supported spacing regenerates in media-text wrapper style.'); +$assertContains('border-radius:8px', $right['innerHTML'], 'Supported border regenerates in media-text wrapper style.'); +$assertContains('line-height:1.4', $right['innerHTML'], 'Supported typography regenerates in media-text wrapper style.'); $assertNotContains('min-height:', $right['innerHTML'], 'Source min-height does not leak into media-text wrapper style.'); $assertNotContains('aspect-ratio:', $right['innerHTML'], 'Source aspect-ratio does not leak into media-text wrapper style.'); $assertNotContains('max-width:', $right['innerHTML'], 'Source max-width does not leak into media-text wrapper style.'); $assertNotContains('--media-ratio:', $right['innerHTML'], 'Source custom property does not leak into media-text wrapper style.'); -$assertNotContains('color:#123456', $right['innerHTML'], 'Style-derived support declaration does not leak into media-text wrapper style.'); +$assertContains('color:#123456', $right['innerHTML'], 'Supported color regenerates in media-text wrapper style.'); $leftNarrow = $factory->create('core/media-text', array( 'mediaType' => 'image', diff --git a/php-transformer/tests/unit/media-text-pattern.php b/php-transformer/tests/unit/media-text-pattern.php index 2a116831..eee1a411 100644 --- a/php-transformer/tests/unit/media-text-pattern.php +++ b/php-transformer/tests/unit/media-text-pattern.php @@ -634,12 +634,17 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so $geometryOpening = (string) ($geometryBlock['innerContent'][0] ?? ''); $geometryAssets = implode("\n", array_map(static fn (array $asset): string => (string) ($asset['content'] ?? ''), $geometryResult['assets'] ?? array())); $assertSame('core/media-text', $geometryBlock['blockName'] ?? null, 'Grid geometry case emits media-text.'); -$assertTrue(! isset($geometryBlock['attrs']['style']), 'Media-text attrs omit suppressed style object.'); +$assertSame( + array( 'top' => '1rem', 'right' => '1rem', 'bottom' => '1rem', 'left' => '1rem' ), + $geometryBlock['attrs']['style']['spacing']['padding'] ?? null, + 'Media-text attrs preserve supported padding.' +); +$assertTrue(! isset($geometryBlock['attrs']['style']['dimensions']), 'Media-text attrs omit unsupported dimensions.'); $assertSame('accent', $geometryBlock['attrs']['backgroundColor'] ?? null, 'Media-text preserves top-level preset attr.'); $assertContains('has-accent-background-color has-background', $geometryOpening, 'Media-text preserves top-level preset classes.'); $assertContains('be-inline-geometry-', (string) ($geometryBlock['attrs']['className'] ?? ''), 'Media-text preserves generated geometry carrier class.'); -$assertContains('style="grid-template-columns:30% auto"', $geometryOpening, 'Media-text wrapper style contains grid tracks.'); -foreach ( array( 'max-width', 'min-height', 'aspect-ratio', '--media-gap', 'padding-' ) as $leakedProperty ) { +$assertContains('padding-top:1rem;padding-right:1rem;padding-bottom:1rem;padding-left:1rem;grid-template-columns:30% auto', $geometryOpening, 'Media-text wrapper merges support styles with grid tracks.'); +foreach ( array( 'max-width', 'min-height', 'aspect-ratio', '--media-gap' ) as $leakedProperty ) { $assertTrue(! str_contains($geometryOpening, $leakedProperty), 'Media-text wrapper style omits source property: ' . $leakedProperty); } $assertContains('max-width:900px !important', $geometryAssets, 'Carrier stylesheet preserves source max-width.'); From 112f454ac1fc752bbe45fd1bbc93e8dddec9721e Mon Sep 17 00:00:00 2001 From: Matthew Batchelder Date: Fri, 31 Jul 2026 13:45:49 -0400 Subject: [PATCH 09/11] feat(php-transformer): add media-text corpus diagnostics --- .../src/CorpusDiagnostics/CorpusDetectors.php | 625 ++++++++++++++++++ .../CorpusDiagnosticsRunner.php | 32 + .../tests/unit/corpus-detectors.php | 195 +++++- .../tests/fixtures/media-text-source.html | 85 +++ .../tests/transform-media-text.php | 74 +++ 5 files changed, 1010 insertions(+), 1 deletion(-) create mode 100644 php-transformer/tools/visual-parity/tests/fixtures/media-text-source.html create mode 100644 php-transformer/tools/visual-parity/tests/transform-media-text.php diff --git a/php-transformer/src/CorpusDiagnostics/CorpusDetectors.php b/php-transformer/src/CorpusDiagnostics/CorpusDetectors.php index 39698804..e74bae22 100644 --- a/php-transformer/src/CorpusDiagnostics/CorpusDetectors.php +++ b/php-transformer/src/CorpusDiagnostics/CorpusDetectors.php @@ -4,8 +4,11 @@ namespace Automattic\BlocksEngine\PhpTransformer\CorpusDiagnostics; use Automattic\BlocksEngine\PhpTransformer\Contract\ConversionFindingContract; +use Automattic\BlocksEngine\PhpTransformer\HtmlToBlocks\HtmlTransformer; use Automattic\BlocksEngine\PhpTransformer\HtmlToBlocks\Patterns\CoverPattern; use Automattic\BlocksEngine\PhpTransformer\HtmlToBlocks\Patterns\CoverStyleResolver; +use Automattic\BlocksEngine\PhpTransformer\HtmlToBlocks\Style\CssSelectorMatcher; +use Automattic\BlocksEngine\PhpTransformer\HtmlToBlocks\Style\CssValueSplitter; /** * Pure, read-only detectors that turn a transformer result envelope into a flat @@ -105,6 +108,7 @@ public static function collect(array $result, string $sourceHtml = '', ?callable $svgLost = self::svgContentLost($result, $flat); $layoutMisrecognition = self::layoutDirectionMisrecognition($sourceHtml, $columnsVerifier); $coverGateRejections = self::coverGateRejections($sourceHtml, $flat); + $mediaTextMetrics = self::mediaTextMetrics($sourceHtml, $flat); $findings = array(); foreach ( self::transformerFindings($result) as $finding ) { @@ -155,6 +159,9 @@ public static function collect(array $result, string $sourceHtml = '', ?callable 'svg_content_lost_count' => count($svgLost), 'layout_direction_misrecognition_count' => count($layoutMisrecognition), ); + foreach ( $mediaTextMetrics as $name => $value ) { + $metrics[ $name ] = $value; + } return array( 'metrics' => $metrics, @@ -251,6 +258,176 @@ public static function nativeRate(array $flat): array ); } + /** + * Count emitted core/media-text blocks and source-derived outcomes for + * strict two-pane candidates. A candidate has exactly two direct element + * children and exactly one img/video across those two sides. + * + * Outcome counters are exclusive. width_oob is intentionally not a decline: + * MediaTextPattern still emits the block and merely omits an out-of-bounds + * mediaWidth attribute. + * + * @param string $sourceHtml Original source HTML for the document. + * @param array> $flat Flattened emitted block list. + * @return array{ + * media_text_count: int, + * media_text_decline_media_impure_count: int, + * media_text_decline_no_text_side_count: int, + * media_text_decline_vertical_or_reversed_count: int, + * media_text_decline_unsafe_url_count: int, + * media_text_width_oob_count: int, + * media_text_decline_linked_video_count: int, + * media_text_decline_other_count: int + * } + */ + private static function mediaTextMetrics(string $sourceHtml, array $flat): array + { + $metrics = array( + 'media_text_count' => 0, + 'media_text_decline_media_impure_count' => 0, + 'media_text_decline_no_text_side_count' => 0, + 'media_text_decline_vertical_or_reversed_count' => 0, + 'media_text_decline_unsafe_url_count' => 0, + 'media_text_width_oob_count' => 0, + 'media_text_decline_linked_video_count' => 0, + 'media_text_decline_other_count' => 0, + ); + + foreach ( $flat as $block ) { + if ( 'core/media-text' === ($block['blockName'] ?? null) ) { + ++$metrics['media_text_count']; + } + } + + if ( '' === trim($sourceHtml) ) { + return $metrics; + } + + $previous = libxml_use_internal_errors(true); + $doc = new \DOMDocument(); + $loaded = $doc->loadHTML('' . $sourceHtml); + libxml_clear_errors(); + libxml_use_internal_errors($previous); + if ( ! $loaded ) { + return $metrics; + } + + $xpath = new \DOMXPath($doc); + $nodes = $xpath->query('//body//*'); + if ( false === $nodes ) { + return $metrics; + } + $textTransformer = null; + $sourceStyleMarkup = ''; + $sourceCss = ''; + foreach ( $doc->getElementsByTagName('style') as $styleElement ) { + $styleCss = (string) $styleElement->textContent; + $sourceCss .= ( '' === $sourceCss ? '' : "\n" ) . $styleCss; + $styleMarkup = $doc->saveHTML($styleElement); + if ( is_string($styleMarkup) ) { + $sourceStyleMarkup .= $styleMarkup; + } + } + $styleRules = self::mediaTextStaticStyleRules($sourceCss); + + $sourcePasserCount = 0; + $widthOobCandidateCount = 0; + foreach ( $nodes as $node ) { + if ( ! $node instanceof \DOMElement ) { + continue; + } + + $children = self::directElementChildren($node); + if ( 2 !== count($children) ) { + continue; + } + + $mediaCounts = array( + self::mediaElementCount($children[0]), + self::mediaElementCount($children[1]), + ); + if ( 1 !== $mediaCounts[0] + $mediaCounts[1] ) { + continue; + } + + $mediaIndex = 1 === $mediaCounts[0] ? 0 : 1; + $textIndex = 0 === $mediaIndex ? 1 : 0; + + if ( self::hasNonIgnorableDirectNodes($node) ) { + ++$metrics['media_text_decline_other_count']; + continue; + } + + $resolution = self::diagnosticPureMediaResolution($children[ $mediaIndex ]); + if ( null === $resolution ) { + ++$metrics['media_text_decline_media_impure_count']; + continue; + } + + $media = $resolution['media']; + if ( 'video' === strtolower($media->tagName) && $resolution['anchor'] instanceof \DOMElement ) { + ++$metrics['media_text_decline_linked_video_count']; + continue; + } + + $containerStyle = self::mediaTextResolvedDeclarations( + $node, + $styleRules, + array( 'display', 'flex-direction', 'direction', 'grid-template-columns' ) + ); + $childStyles = array( + self::mediaTextResolvedDeclarations($children[0], $styleRules, array( 'order', 'flex-basis', 'width' )), + self::mediaTextResolvedDeclarations($children[1], $styleRules, array( 'order', 'flex-basis', 'width' )), + ); + if ( self::mediaTextHasVerticalOrReversedLayout($containerStyle, $childStyles) ) { + ++$metrics['media_text_decline_vertical_or_reversed_count']; + continue; + } + + if ( '' === self::diagnosticSafeMediaUrl($media->getAttribute('src')) ) { + ++$metrics['media_text_decline_unsafe_url_count']; + continue; + } + + $textBearing = self::mediaTextSideHasTextBearingBlock( + $doc, + $children[ $textIndex ], + $sourceStyleMarkup, + $textTransformer + ); + if ( false === $textBearing ) { + ++$metrics['media_text_decline_no_text_side_count']; + continue; + } + if ( null === $textBearing ) { + ++$metrics['media_text_decline_other_count']; + continue; + } + + ++$sourcePasserCount; + $mediaWidth = self::diagnosticMediaWidth($containerStyle, $childStyles[ $mediaIndex ], $mediaIndex); + if ( null !== $mediaWidth && ( 15 > $mediaWidth || 85 < $mediaWidth ) ) { + ++$widthOobCandidateCount; + } + } + + // Source-only gates cannot expose transform-time failures. Approximate + // `other` as otherwise-eligible candidates that did not emit, at document + // granularity; emitted blocks consume source passers, never known declines. + // The width diagnostic is capped by emitted adoption so it cannot also be + // counted as an `other` decline for the same document-level candidate. + $metrics['media_text_width_oob_count'] = min( + $widthOobCandidateCount, + $metrics['media_text_count'] + ); + $metrics['media_text_decline_other_count'] += max( + 0, + $sourcePasserCount - $metrics['media_text_count'] + ); + + return $metrics; + } + /** * var(--x) references in the emitted block markup. * @@ -773,6 +950,454 @@ public static function clusterKey(array $finding): string return $bucket . ' :: ' . $pattern; } + /** + * Keep only top-level author rules, matching HtmlTransformer's strict-gate + * cascade. Conditional and other at-rules remain available to the isolated + * text-side transform through the separately preserved source markup. + */ + private static function mediaTextTopLevelCss(string $css): string + { + $css = preg_replace('@/\*.*?\*/@s', '', $css) ?? $css; + $output = ''; + $length = strlen($css); + $depth = 0; + + for ( $offset = 0; $offset < $length; ++$offset ) { + $char = $css[ $offset ]; + if ( '"' === $char || "'" === $char ) { + $output .= $char; + for ( ++$offset; $offset < $length; ++$offset ) { + $output .= $css[ $offset ]; + if ( '\\' === $css[ $offset ] && $offset + 1 < $length ) { + $output .= $css[ ++$offset ]; + continue; + } + if ( $char === $css[ $offset ] ) { + break; + } + } + continue; + } + + if ( 0 !== $depth || '@' !== $char ) { + if ( '{' === $char ) { + ++$depth; + } elseif ( '}' === $char && 0 < $depth ) { + --$depth; + } + $output .= $char; + continue; + } + + $blockStart = self::mediaTextCssToken($css, '{', $offset); + $statementEnd = self::mediaTextCssToken($css, ';', $offset); + if ( null === $blockStart || ( null !== $statementEnd && $statementEnd < $blockStart ) ) { + if ( null === $statementEnd ) { + break; + } + $offset = $statementEnd; + continue; + } + + $atRuleDepth = 1; + for ( $inner = $blockStart + 1; $inner < $length; ++$inner ) { + if ( '"' === $css[ $inner ] || "'" === $css[ $inner ] ) { + $quote = $css[ $inner ]; + for ( ++$inner; $inner < $length; ++$inner ) { + if ( '\\' === $css[ $inner ] ) { + ++$inner; + continue; + } + if ( $quote === $css[ $inner ] ) { + break; + } + } + continue; + } + if ( '{' === $css[ $inner ] ) { + ++$atRuleDepth; + } elseif ( '}' === $css[ $inner ] && 0 === --$atRuleDepth ) { + $offset = $inner; + continue 2; + } + } + break; + } + + return $output; + } + + /** + * Parse production-equivalent ordered static rules for media-text gate + * properties. Dynamic pseudo-state rules never affect resting strict gates. + * + * @return array, declarations: array}> + */ + private static function mediaTextStaticStyleRules(string $css): array + { + $css = self::mediaTextTopLevelCss($css); + if ( ! preg_match_all('/([^{}]+)\{([^{}]+)\}/', $css, $matches, PREG_SET_ORDER) ) { + return array(); + } + + $requested = array_flip(array( + 'display', + 'flex-direction', + 'direction', + 'grid-template-columns', + 'order', + 'flex-basis', + 'width', + )); + $rules = array(); + foreach ( $matches as $match ) { + $declarations = array_intersect_key( + self::mediaTextCssDeclarations((string) $match[2]), + $requested + ); + if ( array() === $declarations ) { + continue; + } + foreach ( explode(',', (string) $match[1]) as $selectorSource ) { + $selectorSource = trim($selectorSource); + if ( + '' === $selectorSource + || preg_match('/:{1,2}(?:hover|focus-visible|focus-within|focus|active|visited|before|after)\b/i', $selectorSource) + ) { + continue; + } + $selector = CssSelectorMatcher::parse($selectorSource); + if ( $selector['supported'] ?? false ) { + $rules[] = array( + 'selector' => $selector, + 'declarations' => $declarations, + ); + } + } + } + + return $rules; + } + + /** + * Merge matching rules in source order, then inline declarations, exactly as + * StyleResolutionTrait::structuralPresentationDeclarations(). + * + * @param array, declarations: array}> $rules + * @param array $requested + * @return array + */ + private static function mediaTextResolvedDeclarations(\DOMElement $element, array $rules, array $requested): array + { + $declarations = array(); + foreach ( $rules as $rule ) { + $match = CssSelectorMatcher::matches($element, $rule['selector']); + if ( $match['supported'] && $match['matches'] ) { + $declarations = array_merge($declarations, $rule['declarations']); + } + } + $declarations = array_merge( + $declarations, + self::mediaTextCssDeclarations($element->getAttribute('style')) + ); + + return array_intersect_key($declarations, array_flip($requested)); + } + + /** @return array */ + private static function mediaTextCssDeclarations(string $style): array + { + $declarations = array(); + foreach ( CssValueSplitter::splitTopLevel($style, array( ';' )) as $declaration ) { + if ( ! str_contains($declaration, ':') ) { + continue; + } + [$name, $value] = array_map('trim', explode(':', $declaration, 2)); + $name = strtolower($name); + $value = preg_replace('/\s+/', ' ', $value) ?? $value; + $allowsImageUrl = in_array($name, array( 'background', 'background-image' ), true) + && ! preg_match('/(?:expression\s*\(|javascript\s*:)/i', $value); + if ( + '' !== $name + && '' !== $value + && ( $allowsImageUrl || ! preg_match('/(?:expression\s*\(|javascript\s*:|url\s*\()/i', $value) ) + ) { + $declarations[ $name ] = $value; + } + } + + return $declarations; + } + + private static function mediaTextCssToken(string $css, string $token, int $offset): ?int + { + $length = strlen($css); + for ( ; $offset < $length; ++$offset ) { + if ( '"' === $css[ $offset ] || "'" === $css[ $offset ] ) { + $quote = $css[ $offset ]; + for ( ++$offset; $offset < $length; ++$offset ) { + if ( '\\' === $css[ $offset ] ) { + ++$offset; + continue; + } + if ( $quote === $css[ $offset ] ) { + break; + } + } + continue; + } + if ( $token === $css[ $offset ] ) { + return $offset; + } + } + + return null; + } + + /** + * Convert the candidate text side through the production transformer, then + * apply the same recursive block-name test as PatternGateHelpersTrait. + * Embedded source styles are retained so selector-driven conversion stays + * as close as possible to the full-document path. + */ + private static function mediaTextSideHasTextBearingBlock( + \DOMDocument $doc, + \DOMElement $textSide, + string $sourceStyleMarkup, + ?HtmlTransformer &$transformer + ): ?bool { + $fragment = $doc->saveHTML($textSide); + if ( ! is_string($fragment) ) { + return null; + } + + $transformer ??= new HtmlTransformer(); + try { + $result = $transformer->transform( + '' . $sourceStyleMarkup . '' . $fragment . '', + array() + )->toArray(); + } catch ( \Throwable ) { + return null; + } + + $blocks = is_array($result['blocks'] ?? null) ? $result['blocks'] : array(); + $textBearingNames = array( 'core/heading', 'core/paragraph', 'core/list', 'core/buttons', 'core/quote' ); + foreach ( self::flatten($blocks) as $block ) { + if ( in_array($block['blockName'] ?? null, $textBearingNames, true) ) { + return true; + } + } + + return false; + } + + /** + * @return array + */ + private static function directElementChildren(\DOMElement $element): array + { + $children = array(); + foreach ( $element->childNodes as $child ) { + if ( $child instanceof \DOMElement ) { + $children[] = $child; + } + } + + return $children; + } + + private static function hasNonIgnorableDirectNodes(\DOMElement $element): bool + { + foreach ( $element->childNodes as $child ) { + if ( XML_COMMENT_NODE === $child->nodeType || $child instanceof \DOMElement ) { + continue; + } + if ( XML_TEXT_NODE === $child->nodeType && '' === trim($child->textContent ?? '') ) { + continue; + } + + return true; + } + + return false; + } + + private static function mediaElementCount(\DOMElement $element): int + { + return (in_array(strtolower($element->tagName), array( 'img', 'video' ), true) ? 1 : 0) + + $element->getElementsByTagName('img')->length + + $element->getElementsByTagName('video')->length; + } + + /** + * @return array{media: \DOMElement, anchor: \DOMElement|null}|null + */ + private static function diagnosticPureMediaResolution(\DOMElement $element, ?\DOMElement $anchor = null): ?array + { + $tagName = strtolower($element->tagName); + if ( in_array($tagName, array( 'img', 'video' ), true) ) { + if ( array() !== self::directElementChildren($element) || self::hasNonIgnorableDirectNodes($element) ) { + return null; + } + + return array( + 'media' => $element, + 'anchor' => $anchor, + ); + } + + if ( ! in_array($tagName, array( 'figure', 'div', 'a', 'picture' ), true) ) { + return null; + } + if ( 'a' === $tagName ) { + if ( $anchor instanceof \DOMElement ) { + return null; + } + $anchor = $element; + } + + if ( 'picture' === $tagName ) { + $image = null; + foreach ( $element->getElementsByTagName('*') as $descendant ) { + $descendantTag = strtolower($descendant->tagName); + if ( 'source' === $descendantTag ) { + continue; + } + if ( 'img' !== $descendantTag || $image instanceof \DOMElement ) { + return null; + } + $image = $descendant; + } + if ( ! $image instanceof \DOMElement || '' !== trim($element->textContent ?? '') ) { + return null; + } + + return array( 'media' => $image, 'anchor' => $anchor ); + } + + $children = self::directElementChildren($element); + if ( 1 !== count($children) || self::hasNonIgnorableDirectNodes($element) ) { + return null; + } + + return self::diagnosticPureMediaResolution($children[0], $anchor); + } + + private static function diagnosticSafeMediaUrl(string $url): string + { + $url = trim($url); + if ( '' === $url || preg_match('/[\x00-\x1f\x7f]/', $url) ) { + return ''; + } + if ( str_starts_with($url, '//') || ! preg_match('/^([a-z][a-z0-9+.-]*)\s*:/i', $url, $matches) ) { + return $url; + } + + $scheme = strtolower($matches[1]); + if ( in_array($scheme, array( 'http', 'https' ), true) && preg_match('/^' . preg_quote($scheme, '/') . ':/i', $url) ) { + return $url; + } + if ( 'data' === $scheme && preg_match('/^data:image\/[a-z0-9.+-]+(?:[;,])/i', $url) ) { + return $url; + } + + return ''; + } + + /** + * @param array $containerStyle + * @param array> $childStyles + */ + private static function mediaTextHasVerticalOrReversedLayout(array $containerStyle, array $childStyles): bool + { + $display = strtolower(self::mediaTextCssValue((string) ($containerStyle['display'] ?? ''))); + $flexDirection = strtolower(self::mediaTextCssValue((string) ($containerStyle['flex-direction'] ?? ''))); + $direction = strtolower(self::mediaTextCssValue((string) ($containerStyle['direction'] ?? ''))); + if ( + ( 'flex' === $display && in_array($flexDirection, array( 'column', 'column-reverse', 'row-reverse' ), true) ) + || 'rtl' === $direction + ) { + return true; + } + + foreach ( $childStyles as $style ) { + if ( array_key_exists('order', $style) ) { + return true; + } + } + + return false; + } + + /** + * @param array $containerStyle + * @param array $mediaStyle + */ + private static function diagnosticMediaWidth(array $containerStyle, array $mediaStyle, int $mediaIndex): ?int + { + $display = strtolower(self::mediaTextCssValue((string) ($containerStyle['display'] ?? ''))); + $template = self::mediaTextCssValue((string) ($containerStyle['grid-template-columns'] ?? '')); + if ( 'grid' === $display && '' !== $template ) { + return self::diagnosticGridMediaWidth($template, $mediaIndex); + } + + foreach ( array( 'flex-basis', 'width' ) as $property ) { + $width = self::diagnosticPercentage((string) ($mediaStyle[ $property ] ?? '')); + if ( null !== $width ) { + return $width; + } + } + + return null; + } + + private static function diagnosticGridMediaWidth(string $template, int $mediaIndex): ?int + { + $tracks = CssValueSplitter::splitTopLevelWhitespace($template); + if ( 2 !== count($tracks) ) { + return null; + } + + $percentage = self::diagnosticPercentage($tracks[ $mediaIndex ]); + if ( null !== $percentage ) { + return $percentage; + } + + $firstFr = self::diagnosticFrValue($tracks[0]); + $secondFr = self::diagnosticFrValue($tracks[1]); + if ( null === $firstFr || null === $secondFr || 0.0 >= $firstFr + $secondFr ) { + return null; + } + + return (int) round(100 * ( 0 === $mediaIndex ? $firstFr : $secondFr ) / ($firstFr + $secondFr)); + } + + private static function diagnosticPercentage(string $value): ?int + { + $value = self::mediaTextCssValue($value); + if ( ! preg_match('/^-?(?:\d+(?:\.\d*)?|\.\d+)%$/', $value) ) { + return null; + } + + return (int) round((float) rtrim($value, '%')); + } + + private static function diagnosticFrValue(string $value): ?float + { + $value = self::mediaTextCssValue($value); + if ( ! preg_match('/^(?:\d+(?:\.\d*)?|\.\d+)fr$/i', $value) ) { + return null; + } + + return (float) substr($value, 0, -2); + } + + private static function mediaTextCssValue(string $value): string + { + return trim(preg_replace('/\s*!\s*important\s*$/i', '', $value) ?? $value); + } + /** * Whether the raw content of a core/html block carries an SVG remnant/marker * — either a literal tag or an HTML comment that names svg (the diff --git a/php-transformer/src/CorpusDiagnostics/CorpusDiagnosticsRunner.php b/php-transformer/src/CorpusDiagnostics/CorpusDiagnosticsRunner.php index f20d914c..c483594a 100644 --- a/php-transformer/src/CorpusDiagnostics/CorpusDiagnosticsRunner.php +++ b/php-transformer/src/CorpusDiagnostics/CorpusDiagnosticsRunner.php @@ -50,6 +50,14 @@ public function run(string $corpusDir): array 'layout_direction_misrecognition_count' => 0, 'var_ref_count' => 0, 'var_custom_ref_count' => 0, + 'media_text_count' => 0, + 'media_text_decline_media_impure_count' => 0, + 'media_text_decline_no_text_side_count' => 0, + 'media_text_decline_vertical_or_reversed_count' => 0, + 'media_text_decline_unsafe_url_count' => 0, + 'media_text_width_oob_count' => 0, + 'media_text_decline_linked_video_count' => 0, + 'media_text_decline_other_count' => 0, 'finding_count' => 0, ); @@ -81,6 +89,18 @@ public function run(string $corpusDir): array $totals['layout_direction_misrecognition_count'] += (int) $metrics['layout_direction_misrecognition_count']; $totals['var_ref_count'] += (int) $metrics['var_ref_count']; $totals['var_custom_ref_count'] += (int) $metrics['var_custom_ref_count']; + foreach ( array( + 'media_text_count', + 'media_text_decline_media_impure_count', + 'media_text_decline_no_text_side_count', + 'media_text_decline_vertical_or_reversed_count', + 'media_text_decline_unsafe_url_count', + 'media_text_width_oob_count', + 'media_text_decline_linked_video_count', + 'media_text_decline_other_count', + ) as $metricName ) { + $totals[ $metricName ] += (int) $metrics[ $metricName ]; + } foreach ( $collected['findings'] as $finding ) { $key = CorpusDetectors::clusterKey($finding); @@ -150,6 +170,17 @@ public function renderSummary(array $report, int $limit = 25): string (int) ($totals['svg_content_lost_count'] ?? 0), (int) ($totals['layout_direction_misrecognition_count'] ?? 0) ); + $lines[] = sprintf( + 'MEDIA-TEXT: media_text_count=%d media_text_decline_media_impure_count=%d media_text_decline_no_text_side_count=%d media_text_decline_vertical_or_reversed_count=%d media_text_decline_unsafe_url_count=%d media_text_width_oob_count=%d media_text_decline_linked_video_count=%d media_text_decline_other_count=%d', + (int) ($totals['media_text_count'] ?? 0), + (int) ($totals['media_text_decline_media_impure_count'] ?? 0), + (int) ($totals['media_text_decline_no_text_side_count'] ?? 0), + (int) ($totals['media_text_decline_vertical_or_reversed_count'] ?? 0), + (int) ($totals['media_text_decline_unsafe_url_count'] ?? 0), + (int) ($totals['media_text_width_oob_count'] ?? 0), + (int) ($totals['media_text_decline_linked_video_count'] ?? 0), + (int) ($totals['media_text_decline_other_count'] ?? 0) + ); $lines[] = sprintf( 'INFORMATIONAL var density (materialized downstream by SSI — not a repair gap): var_refs=%d (custom=%d)', (int) $totals['var_ref_count'], @@ -331,4 +362,5 @@ private function columnsVerifier(): callable return is_array($first) && 'core/columns' === ($first['blockName'] ?? ''); }; } + } diff --git a/php-transformer/tests/unit/corpus-detectors.php b/php-transformer/tests/unit/corpus-detectors.php index 1bb0bfad..8638d5d1 100644 --- a/php-transformer/tests/unit/corpus-detectors.php +++ b/php-transformer/tests/unit/corpus-detectors.php @@ -5,7 +5,7 @@ * Unit tests for the corpus-diagnostics detectors. * * Plain-PHP test script in the style of tests/unit/css-value-splitter.php — no - * PHPUnit. The four hardened detectors are exercised: + * PHPUnit. The five hardened detectors are exercised: * 1. RichText editor-invalid risk: a class/style-bearing inline / in * paragraph/heading/list-item content is the authoritative invalidity * signal, ranked HIGH (structural wp_block_validity=0 is not "no invalid @@ -16,6 +16,8 @@ * 3. SVG loss: an -sourced empty/comment-only core/html flags * svg_content_lost, while a shape-bearing svg core/html does NOT. * 4. var density is informational (severity=info), not a top-ranked repair gap. + * 5. Media-text corpus metrics count emitted blocks and assign each strict + * two-pane candidate to at most one source-derived gate outcome. */ require dirname(__DIR__, 2) . '/vendor/autoload.php'; @@ -296,6 +298,197 @@ static function (string $fragment): bool { 'got ' . count($collectedCoverRejections) ); +// --------------------------------------------------------------------------- +// 8. Media-text corpus metrics: emitted blocks plus deterministic, exclusive +// gate outcomes for strict two-pane source candidates. width_oob is a +// diagnostic outcome only: the candidate still emits core/media-text. +// --------------------------------------------------------------------------- +$mediaTextCounterKeys = array( + 'media_text_decline_media_impure_count', + 'media_text_decline_no_text_side_count', + 'media_text_decline_vertical_or_reversed_count', + 'media_text_decline_unsafe_url_count', + 'media_text_width_oob_count', + 'media_text_decline_linked_video_count', + 'media_text_decline_other_count', +); +$mediaTextCases = array( + 'media_text_decline_media_impure_count' => '
Caption

Title

Body

', + 'media_text_decline_no_text_side_count' => '
', + 'media_text_decline_vertical_or_reversed_count' => '

Title

', + 'media_text_decline_unsafe_url_count' => '

Title

', + 'media_text_width_oob_count' => '

Title

', + 'media_text_decline_linked_video_count' => '

Title

', + 'media_text_decline_other_count' => '

Title

', +); + +foreach ( $mediaTextCases as $expectedKey => $source ) { + $flat = 'media_text_width_oob_count' === $expectedKey + ? array( array( 'blockName' => 'core/media-text' ) ) + : array(); + $metrics = CorpusDetectors::collect(array( 'blocks' => $flat ), $source)['metrics']; + $actual = array(); + foreach ( $mediaTextCounterKeys as $counterKey ) { + if ( 0 !== (int) ($metrics[ $counterKey ] ?? 0) ) { + $actual[ $counterKey ] = (int) $metrics[ $counterKey ]; + } + } + $assert( + array( $expectedKey => 1 ) === $actual, + '8: media-text candidate has one exclusive outcome: ' . $expectedKey, + json_encode($actual) + ); +} + +$directRtlSource = '

Title

'; +$directRtlResult = ( new HtmlTransformer() )->transform($directRtlSource, array())->toArray(); +$directRtlMetrics = CorpusDetectors::collect($directRtlResult, $directRtlSource)['metrics']; +$assert( + 0 === (int) $directRtlMetrics['media_text_count'] + && 1 === (int) $directRtlMetrics['media_text_decline_vertical_or_reversed_count'], + '8b: direction:rtl declared on candidate declines as vertical-or-reversed', + json_encode($directRtlMetrics) +); + +$inheritedRtlSource = '

Title

'; +$inheritedRtlResult = ( new HtmlTransformer() )->transform($inheritedRtlSource, array())->toArray(); +$inheritedRtlMetrics = CorpusDetectors::collect($inheritedRtlResult, $inheritedRtlSource)['metrics']; +$inheritedRtlDeclines = array_sum(array_map( + static fn (string $key): int => (int) $inheritedRtlMetrics[ $key ], + array_filter($mediaTextCounterKeys, static fn (string $key): bool => 'media_text_width_oob_count' !== $key) +)); +$assert( + 1 === (int) $inheritedRtlMetrics['media_text_count'] + && 0 === (int) $inheritedRtlMetrics['media_text_decline_vertical_or_reversed_count'] + && 0 === $inheritedRtlDeclines, + '8c: inherited direction:rtl does not decline candidate that transformer emits', + json_encode($inheritedRtlMetrics) +); + +$conditionalLayouts = array( + 'media' => '@media (min-width:1px){.pair{display:flex;flex-direction:column}}', + 'supports' => '@supports (display:grid){.pair{display:flex;flex-direction:column}}', + 'container' => '@container (min-width:1px){.pair{display:flex;flex-direction:column}}', +); +foreach ( $conditionalLayouts as $atRule => $conditionalCss ) { + $conditionalSource = '' + . '

Title

' + . ''; + $conditionalResult = ( new HtmlTransformer() )->transform($conditionalSource, array())->toArray(); + $conditionalMetrics = CorpusDetectors::collect($conditionalResult, $conditionalSource)['metrics']; + $conditionalDeclines = array_sum(array_map( + static fn (string $key): int => (int) $conditionalMetrics[ $key ], + array_filter($mediaTextCounterKeys, static fn (string $key): bool => 'media_text_width_oob_count' !== $key) + )); + $assert( + 1 === (int) $conditionalMetrics['media_text_count'] + && 0 === (int) $conditionalMetrics['media_text_decline_vertical_or_reversed_count'] + && 0 === $conditionalDeclines, + '8d: conditional @' . $atRule . ' layout does not affect production strict gate metric', + json_encode($conditionalMetrics) + ); +} + +$compoundClassSource = '' + . '

Title

' + . ''; +$compoundClassResult = ( new HtmlTransformer() )->transform($compoundClassSource, array())->toArray(); +$compoundClassMetrics = CorpusDetectors::collect($compoundClassResult, $compoundClassSource)['metrics']; +$assert( + 0 === (int) $compoundClassMetrics['media_text_count'] + && 1 === (int) $compoundClassMetrics['media_text_decline_vertical_or_reversed_count'] + && 0 === (int) $compoundClassMetrics['media_text_decline_other_count'], + '8e: compound-class source rule drives same vertical gate as production matcher', + json_encode($compoundClassMetrics) +); + +$tableTextSource = '
Data
'; +$tableTextResult = ( new HtmlTransformer() )->transform($tableTextSource, array())->toArray(); +$tableTextMetrics = CorpusDetectors::collect($tableTextResult, $tableTextSource)['metrics']; +$assert( + 0 === (int) $tableTextMetrics['media_text_count'] + && 1 === (int) $tableTextMetrics['media_text_decline_no_text_side_count'] + && 0 === (int) $tableTextMetrics['media_text_decline_other_count'], + '8f: text-bearing table lacks production text-bearing block and declines no-text-side', + json_encode($tableTextMetrics) +); + +$nestedMediaTextBlocks = array( + array( + 'blockName' => 'core/group', + 'innerBlocks' => array( + array( 'blockName' => 'core/media-text', 'innerBlocks' => array() ), + ), + ), + array( 'blockName' => 'core/media-text', 'innerBlocks' => array() ), +); +$emittedMetrics = CorpusDetectors::collect(array( 'blocks' => $nestedMediaTextBlocks ))['metrics']; +$assert( + 2 === (int) ($emittedMetrics['media_text_count'] ?? 0), + '8g: media_text_count includes emitted blocks at every depth', + (string) ($emittedMetrics['media_text_count'] ?? '(missing)') +); +$actualMediaTextKeys = array_values(array_filter( + array_keys($emittedMetrics), + static fn (string $key): bool => str_starts_with($key, 'media_text') +)); +$assert( + array_merge(array( 'media_text_count' ), $mediaTextCounterKeys) === $actualMediaTextKeys, + '8h: media-text metrics expose exact frozen key set in stable order', + implode(',', $actualMediaTextKeys) +); + +$widthSource = $mediaTextCases['media_text_width_oob_count']; +$widthResult = ( new HtmlTransformer() )->transform($widthSource, array())->toArray(); +$widthCollected = CorpusDetectors::collect($widthResult, $widthSource); +$assert( + 1 === (int) ($widthCollected['metrics']['media_text_count'] ?? 0) + && 1 === (int) ($widthCollected['metrics']['media_text_width_oob_count'] ?? 0), + '8i: width_oob remains diagnostic while transformer emits core/media-text', + json_encode($widthCollected['metrics']) +); +$widthDeclined = CorpusDetectors::collect(array( 'blocks' => array() ), $widthSource)['metrics']; +$assert( + 0 === (int) $widthDeclined['media_text_width_oob_count'] + && 1 === (int) $widthDeclined['media_text_decline_other_count'], + '8j: non-emitted width candidate is exclusively other, never width_oob', + json_encode($widthDeclined) +); + +$summary = ( new CorpusDiagnosticsRunner() )->renderSummary(array( + 'totals' => array( + 'document_count' => 1, + 'fixture_count' => 1, + 'block_count' => 1, + 'native_rate' => 1.0, + 'finding_count' => 0, + 'richtext_invalid_risk_count' => 0, + 'invalid_block_count' => 0, + 'svg_content_lost_count' => 0, + 'layout_direction_misrecognition_count' => 0, + 'var_ref_count' => 0, + 'var_custom_ref_count' => 0, + 'media_text_count' => 1, + 'media_text_decline_media_impure_count' => 2, + 'media_text_decline_no_text_side_count' => 3, + 'media_text_decline_vertical_or_reversed_count' => 4, + 'media_text_decline_unsafe_url_count' => 5, + 'media_text_width_oob_count' => 6, + 'media_text_decline_linked_video_count' => 7, + 'media_text_decline_other_count' => 8, + ), + 'clusters' => array(), +)); +$expectedMediaTextLine = 'MEDIA-TEXT: media_text_count=1 media_text_decline_media_impure_count=2 ' + . 'media_text_decline_no_text_side_count=3 media_text_decline_vertical_or_reversed_count=4 ' + . 'media_text_decline_unsafe_url_count=5 media_text_width_oob_count=6 ' + . 'media_text_decline_linked_video_count=7 media_text_decline_other_count=8'; +$assert( + str_contains($summary, $expectedMediaTextLine), + '8k: runner summary surfaces exact media_text adoption and gate values on one line', + $summary +); + if ( $failures > 0 ) { fwrite(STDERR, "CorpusDetectors unit tests: {$failures} failed, {$passes} passed\n"); exit(1); diff --git a/php-transformer/tools/visual-parity/tests/fixtures/media-text-source.html b/php-transformer/tools/visual-parity/tests/fixtures/media-text-source.html new file mode 100644 index 00000000..dc1f739a --- /dev/null +++ b/php-transformer/tools/visual-parity/tests/fixtures/media-text-source.html @@ -0,0 +1,85 @@ + + + + + + Media Text Visual Parity Source + + + +
+
+ Abstract green and gold landscape +
+
+

Stories built side by side

+

A strict two-pane composition keeps expressive media and editable text together without losing the original visual rhythm.

+
+
+ + diff --git a/php-transformer/tools/visual-parity/tests/transform-media-text.php b/php-transformer/tools/visual-parity/tests/transform-media-text.php new file mode 100644 index 00000000..150355a4 --- /dev/null +++ b/php-transformer/tools/visual-parity/tests/transform-media-text.php @@ -0,0 +1,74 @@ +transform($source)->toArray(); +if ( 'failed' === ($result['status'] ?? null) ) { + throw new RuntimeException('Media-text source fixture transform failed.'); +} + +$mediaTextCount = 0; +$countMediaText = static function (array $blocks) use (&$countMediaText, &$mediaTextCount): void { + foreach ( $blocks as $block ) { + if ( 'core/media-text' === ($block['blockName'] ?? null) ) { + ++$mediaTextCount; + } + if ( is_array($block['innerBlocks'] ?? null) ) { + $countMediaText($block['innerBlocks']); + } + } +}; +$countMediaText($result['blocks'] ?? array()); +if ( 1 !== $mediaTextCount ) { + throw new RuntimeException(sprintf('Expected one core/media-text block; found %d.', $mediaTextCount)); +} + +$stylesheet = ''; +foreach ( $result['assets'] ?? array() as $asset ) { + if ( 'stylesheet' !== ($asset['role'] ?? null) || 'text/css' !== ($asset['mime_type'] ?? null) ) { + continue; + } + $stylesheet .= (string) ($asset['content'] ?? '') . "\n"; +} + +$coreMediaTextCss = <<<'CSS' +@media (max-width: 600px) { + .wp-block-media-text.is-stacked-on-mobile { + grid-template-columns: 100% !important; + } +} +CSS; + +$rendered = ( new Runtime() )->renderBlocks($result['blocks'] ?? array()); +$target = '' . "\n" + . '' . "\n" + . '' . "\n" + . ' ' . "\n" + . ' ' . "\n" + . ' Media Text Visual Parity Target' . "\n" + . ' ' . "\n" + . '' . "\n" + . '' . "\n" . $rendered . "\n" . '' . "\n" + . '' . "\n"; + +$targetDirectory = dirname($targetPath); +if ( ! is_dir($targetDirectory) && ! mkdir($targetDirectory, 0777, true) && ! is_dir($targetDirectory) ) { + throw new RuntimeException('Unable to create media-text target directory.'); +} +if ( false === file_put_contents($targetPath, $target) ) { + throw new RuntimeException('Unable to write media-text target fixture.'); +} + +fwrite(STDOUT, sprintf("media-text target written: %s\n", $targetPath)); From f9fb6b74d6da0f628a6f9a8afc5241484d14bd8a Mon Sep 17 00:00:00 2001 From: Matthew Batchelder Date: Fri, 31 Jul 2026 14:36:29 -0400 Subject: [PATCH 10/11] fix(php-transformer): finalize media-text handling Honor resolved CSS cascade semantics for media-text layout gates, preserve carrier-owned geometry dependencies, and clamp representable widths. Add regressions for inline display modes, order and reversal rules, geometry carriers, data URLs, memoization, CSS importance, specificity, and invalid declarations. --- .../src/HtmlToBlocks/HtmlTransformer.php | 2 +- .../Patterns/MediaTextPattern.php | 205 ++++++++- .../Style/StyleResolutionTrait.php | 401 +++++++++++++++++- .../tests/unit/media-text-pattern.php | 233 +++++++++- 4 files changed, 802 insertions(+), 39 deletions(-) diff --git a/php-transformer/src/HtmlToBlocks/HtmlTransformer.php b/php-transformer/src/HtmlToBlocks/HtmlTransformer.php index c78ecbf1..239539bd 100644 --- a/php-transformer/src/HtmlToBlocks/HtmlTransformer.php +++ b/php-transformer/src/HtmlToBlocks/HtmlTransformer.php @@ -2984,7 +2984,7 @@ private function convertElement(DOMElement $element, array &$fallbacks, bool $ca $fallbacks, fn (DOMElement $sourceElement, array &$sourceFallbacks, bool $captureUnsupported): array => $this->convertChildren($sourceElement, $sourceFallbacks, $captureUnsupported), fn (DOMElement $sourceElement, array &$sourceFallbacks, bool $captureUnsupported): ?array => $this->convertElement($sourceElement, $sourceFallbacks, $captureUnsupported), - fn (DOMElement $sourceElement, array $excludedGeometryProperties = array()): array => $this->presentationAttributes($sourceElement, $excludedGeometryProperties), + fn (DOMElement $sourceElement, array $excludedGeometryProperties = array()): array => $this->mediaTextPresentationAttributes($sourceElement, $excludedGeometryProperties), fn (DOMElement $sourceElement): string => $this->mediaTextPresentationStyle($sourceElement), fn (DOMElement $sourceElement): array => $this->htmlAttributes($sourceElement), fn (string $url): string => $this->resolvedAssetImageUrl($url), diff --git a/php-transformer/src/HtmlToBlocks/Patterns/MediaTextPattern.php b/php-transformer/src/HtmlToBlocks/Patterns/MediaTextPattern.php index f117ecde..ef958cb0 100644 --- a/php-transformer/src/HtmlToBlocks/Patterns/MediaTextPattern.php +++ b/php-transformer/src/HtmlToBlocks/Patterns/MediaTextPattern.php @@ -84,11 +84,18 @@ public function match( return null; } - $displayType = $this->containerDisplayType($containerStyle); - $flexDirection = strtolower($this->normalizedCssValue((string) ($this->styleDeclarations($containerStyle)['flex-direction'] ?? ''))); + try { + $containerAttributes = $htmlAttributes($element); + } catch ( \Throwable ) { + return null; + } + + $displayType = $this->containerDisplayType($containerStyle); + $flexDirection = $this->flexDirectionFromStyle($containerStyle); if ( ( 'flex' === $displayType && in_array($flexDirection, array( 'column', 'column-reverse', 'row-reverse' ), true) ) || $this->styleValueEquals($containerStyle, 'direction', 'rtl') + || 'rtl' === strtolower(trim((string) ($containerAttributes['dir'] ?? ''))) ) { return null; } @@ -97,7 +104,11 @@ public function match( try { foreach ( $elementChildren as $index => $child ) { $childStyles[ $index ] = $mergedPresentationStyle($child); - if ( array_key_exists('order', $this->styleDeclarations($childStyles[ $index ])) ) { + $childDeclarations = $this->styleDeclarations($childStyles[ $index ]); + $order = strtolower($this->normalizedCssValue((string) ($childDeclarations['order'] ?? ''))); + $isInitialOrder = in_array($order, array( 'initial', 'unset' ), true) + || ( is_numeric($order) && 0.0 === (float) $order ); + if ( '' !== $order && ! $isInitialOrder ) { return null; } } @@ -159,13 +170,18 @@ public function match( $attrs['mediaPosition'] = 'right'; } - $mediaWidth = 'grid' === $displayType + $hasGridTemplateColumns = $this->hasGridTemplateColumns($containerStyle); + $useGridTemplateColumns = 'flex' !== $displayType && $hasGridTemplateColumns; + $mediaWidth = $useGridTemplateColumns ? $this->mediaWidthFromContainerStyle($containerStyle, $mediaIndex) : null; - if ( null === $mediaWidth && ( 'grid' !== $displayType || ! $this->hasGridTemplateColumns($containerStyle) ) ) { + if ( null === $mediaWidth && ! $useGridTemplateColumns ) { $mediaWidth = $this->mediaWidthFromMediaStyle($childStyles[ $mediaIndex ]); } - if ( null !== $mediaWidth && 15 <= $mediaWidth && 85 >= $mediaWidth && 50 !== $mediaWidth ) { + if ( null !== $mediaWidth ) { + $mediaWidth = max(15, min(85, $mediaWidth)); + } + if ( null !== $mediaWidth && 50 !== $mediaWidth ) { $attrs['mediaWidth'] = $mediaWidth; } @@ -269,8 +285,8 @@ private function safeUrlWithSchemes(string $url, array $allowedSchemes, bool $al return $url; } - if ( $allowImageData && 'data' === $scheme && preg_match('/^data:image\/[a-z0-9.+-]+(?:[;,])/i', $url) ) { - return $url; + if ( $allowImageData && 'data' === $scheme && preg_match('/^data:image\/([a-z0-9.+-]+)(?:[;,])/i', $url, $dataMatches) ) { + return in_array(strtolower($dataMatches[1]), array( 'svg', 'svg+xml' ), true) ? '' : $url; } return ''; @@ -422,6 +438,7 @@ private function strictSingleMediaChild(DOMElement $element): ?DOMElement private function styleDeclarations(string $style): array { $declarations = array(); + $important = array(); foreach ( \Automattic\BlocksEngine\PhpTransformer\HtmlToBlocks\Style\CssValueSplitter::splitTopLevel($style, array( ';' )) as $declaration ) { $separator = strpos($declaration, ':'); if ( false === $separator ) { @@ -430,9 +447,17 @@ private function styleDeclarations(string $style): array $name = strtolower(trim(substr($declaration, 0, $separator))); $value = trim(substr($declaration, $separator + 1)); - if ( '' !== $name && '' !== $value ) { - $declarations[ $name ] = $value; + if ( '' === $name || '' === $value || ! $this->isValidMediaTextCssDeclaration($name, $value) ) { + continue; + } + + $valueIsImportant = $this->cssValueIsImportant($value); + if ( isset($declarations[ $name ]) && ($important[ $name ] ?? false) && ! $valueIsImportant ) { + continue; } + + $declarations[ $name ] = $value; + $important[ $name ] = $valueIsImportant; } return $declarations; @@ -487,7 +512,62 @@ private function mediaWidthFromMediaStyle(string $style): ?int private function containerDisplayType(string $style): ?string { $display = strtolower($this->normalizedCssValue((string) ($this->styleDeclarations($style)['display'] ?? ''))); - return in_array($display, array( 'flex', 'grid' ), true) ? $display : null; + return array( + 'flex' => 'flex', + 'inline-flex' => 'flex', + 'grid' => 'grid', + 'inline-grid' => 'grid', + )[ $display ] ?? null; + } + + private function flexDirectionFromStyle(string $style): string + { + $direction = ''; + $directionIsImportant = false; + $hasDirection = false; + foreach ( \Automattic\BlocksEngine\PhpTransformer\HtmlToBlocks\Style\CssValueSplitter::splitTopLevel($style, array( ';' )) as $declaration ) { + $separator = strpos($declaration, ':'); + if ( false === $separator ) { + continue; + } + + $name = strtolower(trim(substr($declaration, 0, $separator))); + $rawValue = trim(substr($declaration, $separator + 1)); + $value = strtolower($this->normalizedCssValue($rawValue)); + $candidate = null; + if ( 'flex-direction' === $name ) { + if ( ! $this->isValidMediaTextCssDeclaration($name, $rawValue) ) { + continue; + } + $candidate = $value; + } elseif ( 'flex-flow' === $name ) { + if ( ! $this->isValidMediaTextCssDeclaration($name, $rawValue) ) { + continue; + } + $candidate = 'row'; + foreach ( \Automattic\BlocksEngine\PhpTransformer\HtmlToBlocks\Style\CssValueSplitter::splitTopLevelWhitespace($value) as $component ) { + if ( in_array($component, array( 'row', 'row-reverse', 'column', 'column-reverse' ), true) ) { + $candidate = $component; + break; + } + } + } + + if ( null === $candidate ) { + continue; + } + + $candidateIsImportant = $this->cssValueIsImportant($rawValue); + if ( $hasDirection && $directionIsImportant && ! $candidateIsImportant ) { + continue; + } + + $direction = $candidate; + $directionIsImportant = $candidateIsImportant; + $hasDirection = true; + } + + return $direction; } private function styleValueEquals(string $style, string $property, string $expected): bool @@ -515,6 +595,109 @@ private function normalizedCssValue(string $value): string return trim(preg_replace('/\s*!\s*important\s*$/i', '', $value) ?? $value); } + private function cssValueIsImportant(string $value): bool + { + return 1 === preg_match('/\s*!\s*important\s*$/i', $value); + } + + private function isValidMediaTextCssDeclaration(string $property, string $rawValue): bool + { + $value = strtolower($this->normalizedCssValue($rawValue)); + $cssWide = array( 'inherit', 'initial', 'revert', 'revert-layer', 'unset' ); + if ( in_array($value, $cssWide, true) ) { + return true; + } + + if ( 'display' === $property ) { + return in_array($value, array( + 'block', 'contents', 'flow-root', 'flex', 'grid', 'inline', 'inline-block', + 'inline-flex', 'inline-grid', 'inline-table', 'list-item', 'none', 'ruby', + 'ruby-base', 'ruby-base-container', 'ruby-text', 'ruby-text-container', + 'table', 'table-caption', 'table-cell', 'table-column', 'table-column-group', + 'table-footer-group', 'table-header-group', 'table-row', 'table-row-group', + ), true) || 1 === preg_match('/^(?:block|inline)\s+(?:flow|flow-root|flex|grid|ruby)(?:\s+list-item)?$/', $value); + } + + if ( 'flex-direction' === $property ) { + return in_array($value, array( 'column', 'column-reverse', 'row', 'row-reverse' ), true); + } + + if ( 'flex-flow' === $property ) { + $directions = array( 'column', 'column-reverse', 'row', 'row-reverse' ); + $wraps = array( 'nowrap', 'wrap', 'wrap-reverse' ); + $seenDirection = false; + $seenWrap = false; + $components = \Automattic\BlocksEngine\PhpTransformer\HtmlToBlocks\Style\CssValueSplitter::splitTopLevelWhitespace($value); + if ( array() === $components || 2 < count($components) ) { + return false; + } + foreach ( $components as $component ) { + if ( in_array($component, $directions, true) && ! $seenDirection ) { + $seenDirection = true; + continue; + } + if ( in_array($component, $wraps, true) && ! $seenWrap ) { + $seenWrap = true; + continue; + } + return false; + } + return true; + } + + if ( 'order' === $property ) { + return is_numeric($value); + } + + if ( 'align-items' === $property ) { + return in_array($value, array( + 'anchor-center', 'baseline', 'center', 'dialog', 'end', 'first baseline', + 'flex-end', 'flex-start', 'last baseline', 'normal', 'self-end', 'self-start', + 'start', 'stretch', + ), true) || 1 === preg_match('/^(?:safe|unsafe)\s+(?:center|end|flex-end|flex-start|self-end|self-start|start)$/', $value); + } + + if ( 'direction' === $property ) { + return in_array($value, array( 'ltr', 'rtl' ), true); + } + + if ( in_array($property, array( 'flex-basis', 'width' ), true) ) { + return in_array($value, array( 'auto', 'contain', 'content', 'fit-content', 'max-content', 'min-content', 'stretch' ), true) + || 1 === preg_match('/^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:%|[a-z]+)?$/i', $value) + || 1 === preg_match('/^(?:calc|clamp|fit-content|max|min|var)\(.+\)$/i', $value); + } + + if ( 'grid-template-columns' === $property ) { + return $this->isValidGridTemplateColumns($value); + } + + return true; + } + + private function isValidGridTemplateColumns(string $value): bool + { + if ( in_array($value, array( 'masonry', 'none', 'subgrid' ), true) ) { + return true; + } + + $tracks = \Automattic\BlocksEngine\PhpTransformer\HtmlToBlocks\Style\CssValueSplitter::splitTopLevelWhitespace($value); + if ( array() === $tracks ) { + return false; + } + foreach ( $tracks as $track ) { + if ( in_array($track, array( 'auto', 'max-content', 'min-content' ), true) + || 1 === preg_match('/^\[[^\]]+\]$/', $track) + || 1 === preg_match('/^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:%|fr|[a-z]+)$/i', $track) + || 1 === preg_match('/^(?:calc|clamp|fit-content|max|min|minmax|repeat|var)\(.+\)$/i', $track) + ) { + continue; + } + return false; + } + + return true; + } + private function percentageValue(string $value): ?int { if ( ! preg_match('/^(?:\d+(?:\.\d*)?|\.\d+)%$/', trim($value), $matches) ) { diff --git a/php-transformer/src/HtmlToBlocks/Style/StyleResolutionTrait.php b/php-transformer/src/HtmlToBlocks/Style/StyleResolutionTrait.php index 521cda52..f683c51e 100644 --- a/php-transformer/src/HtmlToBlocks/Style/StyleResolutionTrait.php +++ b/php-transformer/src/HtmlToBlocks/Style/StyleResolutionTrait.php @@ -47,6 +47,11 @@ trait StyleResolutionTrait */ private array $mergedPresentationStyleCache = array(); + /** + * @var array + */ + private array $mediaTextPresentationStyleCache = array(); + /** * Inline presentation declarations which core block supports cannot serialize * are carried by deterministic classes in a generated stylesheet. @@ -100,6 +105,7 @@ private function resetPresentationResolutionCache(): void $this->presentationAttributesCache = array(); $this->presentationDeclarationsCache = array(); $this->mergedPresentationStyleCache = array(); + $this->mediaTextPresentationStyleCache = array(); $this->generatedGeometryRules = array(); $this->geometryCarrierClassAllocator = null; } @@ -129,7 +135,34 @@ private function highValueStyleBoundaryPolicy(): HighValueStyleBoundaryPolicy */ private function presentationAttributes(DOMElement $element, array $excludedGeometryProperties = array(), array $forcedGeometryProperties = array()): array { - $cacheKey = $this->presentationCacheKey($element) . ':' . implode(',', $excludedGeometryProperties) . ':' . implode(',', $forcedGeometryProperties); + return $this->resolvedPresentationAttributes($element, $excludedGeometryProperties, $forcedGeometryProperties, false); + } + + /** + * Preserve inline-only geometry entirely in the generated carrier because + * core/media-text cannot serialize arbitrary wrapper geometry inline. + * + * @return array + */ + private function mediaTextPresentationAttributes(DOMElement $element, array $excludedGeometryProperties = array()): array + { + return $this->resolvedPresentationAttributes($element, $excludedGeometryProperties, array(), true); + } + + /** + * @return array + */ + private function resolvedPresentationAttributes( + DOMElement $element, + array $excludedGeometryProperties, + array $forcedGeometryProperties, + bool $carrierOwnsInlineGeometry + ): array + { + $cacheKey = $this->presentationCacheKey($element) + . ':' . implode(',', $excludedGeometryProperties) + . ':' . implode(',', $forcedGeometryProperties) + . ':' . ($carrierOwnsInlineGeometry ? 'carrier' : 'inline'); if ( isset($this->presentationAttributesCache[$cacheKey]) ) { return $this->presentationAttributesCache[$cacheKey]; } @@ -148,7 +181,13 @@ private function presentationAttributes(DOMElement $element, array $excludedGeom 'anchor' => $this->safeAnchor($this->attr($element, 'id')), 'className' => $this->mergePresentationClassNames( $this->promotedClassName($this->attr($element, 'class')), - $this->inlineGeometryClassName($element, $excludedGeometryProperties, $forcedGeometryProperties, $forcedGeometryDeclarations) + $this->inlineGeometryClassName( + $element, + $excludedGeometryProperties, + $forcedGeometryProperties, + $forcedGeometryDeclarations, + $carrierOwnsInlineGeometry + ) ), 'inlineGeometryStyle' => $this->inlineGeometryStyle($element, $excludedGeometryProperties, $forcedGeometryProperties), 'style' => $mapped['style'], @@ -285,9 +324,17 @@ private function hasConditionalStyleFamily(DOMElement $element, string $family): * inline geometry in a generated stylesheet; class-owned declarations are * already retained by author stylesheet materialization. */ - private function inlineGeometryClassName(DOMElement $element, array $excludedProperties = array(), array $forcedProperties = array(), array $forcedDeclarations = array()): string + private function inlineGeometryClassName( + DOMElement $element, + array $excludedProperties = array(), + array $forcedProperties = array(), + array $forcedDeclarations = array(), + bool $carrierOwnsInlineGeometry = false + ): string { - $declarations = $this->cssDeclarations($this->attr($element, 'style')); + $declarations = $carrierOwnsInlineGeometry + ? $this->mediaTextInlineCascadeDeclarations($this->attr($element, 'style')) + : $this->cssDeclarations($this->attr($element, 'style')); $geometry = array(); $properties = $this->inlineGeometryProperties(); $inlineBackground = (string) ($declarations['background'] ?? $declarations['background-image'] ?? ''); @@ -301,10 +348,12 @@ private function inlineGeometryClassName(DOMElement $element, array $excludedPro continue; } $rawValue = trim((string) ($declarations[$property] ?? ($forcedDeclarations[$property] ?? ''))); - if (1 === preg_match('/\s*!important\s*$/i', $rawValue)) { + if (! $carrierOwnsInlineGeometry && 1 === preg_match('/\s*!important\s*$/i', $rawValue)) { continue; } - $value = $rawValue; + $value = $carrierOwnsInlineGeometry + ? trim(preg_replace('/\s*!\s*important\s*$/i', '', $rawValue) ?? $rawValue) + : $rawValue; if ( in_array($property, array( 'background', 'background-image' ), true) ) { $value = CssUrlRewriter::rewrite($value, fn (string $url): string => $this->resolvedAssetImageUrl($url)); } @@ -513,13 +562,332 @@ private function structuralPresentationDeclarations(DOMElement $element): array return $this->mergeCssDeclarationMaps($declarations, $this->cssDeclarations($this->attr($element, 'style'))); } + /** + * Resolve media-text gate declarations without flattening CSS importance or + * shorthand/longhand order. Inline declarations outrank matched stylesheet + * declarations at equal importance. + * + * @return array + */ + private function mediaTextPresentationDeclarations(DOMElement $element): array + { + $cascade = array(); + $sequence = 0; + foreach ($this->staticStyleRules as $rule) { + if (! $this->matchesCssSelector($element, $rule['selector'])) { + continue; + } + foreach ($rule['mediaTextDeclarations'] ?? array() as $entry) { + $this->applyMediaTextCascadeDeclaration( + $cascade, + $entry['property'], + $entry['value'] . ($entry['important'] ? ' !important' : ''), + false, + $rule['mediaTextSpecificity'] ?? array( 0, 0, 0 ), + ++$sequence + ); + } + } + + foreach ($this->mediaTextInlineDeclarationEntries($this->attr($element, 'style')) as $entry) { + $this->applyMediaTextCascadeDeclaration( + $cascade, + $entry['property'], + $entry['value'] . ($entry['important'] ? ' !important' : ''), + true, + array( PHP_INT_MAX, PHP_INT_MAX, PHP_INT_MAX ), + ++$sequence + ); + } + + $declarations = array(); + foreach ($cascade as $property => $entry) { + $declarations[$property] = $entry['value'] . ($entry['important'] ? ' !important' : ''); + } + + return $declarations; + } + + /** + * @param array $cascade + * @param array{int, int, int} $specificity + */ + private function applyMediaTextCascadeDeclaration( + array &$cascade, + string $property, + string $rawValue, + bool $inline, + array $specificity, + int $sequence + ): void { + $property = str_starts_with($property, '--') ? $property : strtolower($property); + $important = 1 === preg_match('/\s*!\s*important\s*$/i', $rawValue); + $value = trim(preg_replace('/\s*!\s*important\s*$/i', '', $rawValue) ?? $rawValue); + if ('' === $property || '' === $value) { + return; + } + + if ('flex-flow' === $property) { + $property = 'flex-direction'; + $flowDirection = null; + foreach (CssValueSplitter::splitTopLevelWhitespace(strtolower($value)) as $component) { + if (in_array($component, array('row', 'row-reverse', 'column', 'column-reverse'), true)) { + $flowDirection = $component; + break; + } + } + $value = $flowDirection ?? (in_array(strtolower($value), array('inherit', 'unset', 'revert', 'revert-layer'), true) ? strtolower($value) : 'row'); + } + + $current = $cascade[$property] ?? null; + if (is_array($current)) { + if ($current['important'] && ! $important) { + return; + } + if ($current['important'] === $important) { + $specificityComparison = $this->compareMediaTextSpecificity($current['specificity'], $specificity); + if (0 < $specificityComparison) { + return; + } + if (0 === $specificityComparison && $current['sequence'] > $sequence) { + return; + } + if (0 === $specificityComparison && $current['sequence'] === $sequence && $current['inline'] && ! $inline) { + return; + } + } + } + + $cascade[$property] = array( + 'value' => $value, + 'important' => $important, + 'inline' => $inline, + 'specificity' => $specificity, + 'sequence' => $sequence, + ); + } + + /** + * @return list + */ + private function mediaTextInlineDeclarationEntries(string $style): array + { + $entries = array(); + foreach (CssValueSplitter::splitTopLevel($style, array(';')) as $declaration) { + $separator = strpos($declaration, ':'); + if (false === $separator) { + continue; + } + + $rawProperty = trim(substr($declaration, 0, $separator)); + $property = str_starts_with($rawProperty, '--') ? $rawProperty : strtolower($rawProperty); + $rawValue = trim(substr($declaration, $separator + 1)); + $important = 1 === preg_match('/\s*!\s*important\s*$/i', $rawValue); + $value = trim(preg_replace('/\s*!\s*important\s*$/i', '', $rawValue) ?? $rawValue); + $value = preg_replace('/\s+/', ' ', $value) ?? $value; + if ('' === $property + || '' === $value + || array() === $this->cssDeclarations($property . ':' . $value) + || ! $this->isValidMediaTextDeclarationValue($property, $value) + ) { + continue; + } + + $entries[] = array( + 'property' => $property, + 'value' => $value, + 'important' => $important, + ); + } + + return $entries; + } + + private function isValidMediaTextDeclarationValue(string $property, string $rawValue): bool + { + if (str_starts_with($property, '--')) { + return true; + } + + $value = strtolower(trim($rawValue)); + if (in_array($value, array('inherit', 'initial', 'revert', 'revert-layer', 'unset'), true)) { + return true; + } + + if ('display' === $property) { + return in_array($value, array( + 'block', 'contents', 'flow-root', 'flex', 'grid', 'inline', 'inline-block', + 'inline-flex', 'inline-grid', 'inline-table', 'list-item', 'none', 'ruby', + 'ruby-base', 'ruby-base-container', 'ruby-text', 'ruby-text-container', + 'table', 'table-caption', 'table-cell', 'table-column', 'table-column-group', + 'table-footer-group', 'table-header-group', 'table-row', 'table-row-group', + ), true) || 1 === preg_match('/^(?:block|inline)\s+(?:flow|flow-root|flex|grid|ruby)(?:\s+list-item)?$/', $value); + } + + if ('flex-direction' === $property) { + return in_array($value, array('column', 'column-reverse', 'row', 'row-reverse'), true); + } + + if ('flex-flow' === $property) { + $directions = array('column', 'column-reverse', 'row', 'row-reverse'); + $wraps = array('nowrap', 'wrap', 'wrap-reverse'); + $seenDirection = false; + $seenWrap = false; + $components = CssValueSplitter::splitTopLevelWhitespace($value); + if (array() === $components || 2 < count($components)) { + return false; + } + foreach ($components as $component) { + if (in_array($component, $directions, true) && ! $seenDirection) { + $seenDirection = true; + continue; + } + if (in_array($component, $wraps, true) && ! $seenWrap) { + $seenWrap = true; + continue; + } + return false; + } + return true; + } + + if ('order' === $property) { + return is_numeric($value); + } + + if ('align-items' === $property) { + return in_array($value, array( + 'anchor-center', 'baseline', 'center', 'dialog', 'end', 'first baseline', + 'flex-end', 'flex-start', 'last baseline', 'normal', 'self-end', 'self-start', + 'start', 'stretch', + ), true) || 1 === preg_match('/^(?:safe|unsafe)\s+(?:center|end|flex-end|flex-start|self-end|self-start|start)$/', $value); + } + + if ('direction' === $property) { + return in_array($value, array('ltr', 'rtl'), true); + } + + if (in_array($property, array('flex-basis', 'width'), true)) { + return in_array($value, array('auto', 'contain', 'content', 'fit-content', 'max-content', 'min-content', 'stretch'), true) + || 1 === preg_match('/^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:%|[a-z]+)?$/i', $value) + || 1 === preg_match('/^(?:calc|clamp|fit-content|max|min|var)\(.+\)$/i', $value); + } + + if ('grid-template-columns' === $property) { + return $this->isValidMediaTextGridTemplateColumns($value); + } + + return true; + } + + private function isValidMediaTextGridTemplateColumns(string $value): bool + { + if (in_array($value, array('masonry', 'none', 'subgrid'), true)) { + return true; + } + + $tracks = CssValueSplitter::splitTopLevelWhitespace($value); + if (array() === $tracks) { + return false; + } + foreach ($tracks as $track) { + if (in_array($track, array('auto', 'max-content', 'min-content'), true) + || 1 === preg_match('/^\[[^\]]+\]$/', $track) + || 1 === preg_match('/^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:%|fr|[a-z]+)$/i', $track) + || 1 === preg_match('/^(?:calc|clamp|fit-content|max|min|minmax|repeat|var)\(.+\)$/i', $track) + ) { + continue; + } + return false; + } + + return true; + } + + /** + * Preserve case-sensitive custom-property names while resolving duplicate + * inline declarations by CSS importance and source order. + * + * @return array + */ + private function mediaTextInlineCascadeDeclarations(string $style): array + { + $cascade = array(); + foreach ($this->mediaTextInlineDeclarationEntries($style) as $entry) { + $current = $cascade[$entry['property']] ?? null; + if (is_array($current) && $current['important'] && ! $entry['important']) { + continue; + } + $cascade[$entry['property']] = array( + 'value' => $entry['value'], + 'important' => $entry['important'], + ); + } + + $declarations = array(); + foreach ($cascade as $property => $entry) { + $declarations[$property] = $entry['value'] . ($entry['important'] ? ' !important' : ''); + } + + return $declarations; + } + + /** + * @return array{int, int, int} + */ + private function mediaTextSelectorSpecificity(string $selector): array + { + $parsed = $this->parsedCssSelector($selector); + if (! ($parsed['supported'] ?? false)) { + return array( 0, 0, 0 ); + } + + $ids = 0; + $classes = 0; + $elements = 0; + foreach ($parsed['compounds'] as $compound) { + $ids += count($compound['ids'] ?? array()); + $classes += count($compound['classes'] ?? array()) + count($compound['attributes'] ?? array()); + if (null !== ($compound['nth_child'] ?? null) || ($compound['first_child'] ?? false) || ($compound['last_child'] ?? false)) { + ++$classes; + } + if (null !== ($compound['type'] ?? null)) { + ++$elements; + } + } + + return array( $ids, $classes, $elements ); + } + + /** + * @param array{int, int, int} $left + * @param array{int, int, int} $right + */ + private function compareMediaTextSpecificity(array $left, array $right): int + { + foreach ( array( 0, 1, 2 ) as $index ) { + if ( $left[ $index ] !== $right[ $index ] ) { + return $left[ $index ] <=> $right[ $index ]; + } + } + + return 0; + } + /** * Resolve full authored layout style for media-text strict gates, including * low-value direct children that general presentation resolution skips. */ private function mediaTextPresentationStyle(DOMElement $element): string { - return $this->cssDeclarationString($this->structuralPresentationDeclarations($element)); + $cacheKey = $this->presentationCacheKey($element); + if ( isset($this->mediaTextPresentationStyleCache[$cacheKey]) ) { + return $this->mediaTextPresentationStyleCache[$cacheKey]; + } + + $this->mediaTextPresentationStyleCache[$cacheKey] = $this->cssDeclarationString($this->mediaTextPresentationDeclarations($element)); + + return $this->mediaTextPresentationStyleCache[$cacheKey]; } /** @@ -659,7 +1027,7 @@ private function isHighValueStyledElement(DOMElement $element): bool } /** - * @return array, condition: string}> + * @return array, mediaTextDeclarations: list, mediaTextSpecificity: array{int, int, int}}> */ private function staticStyleRules(string $html, string $linkedCss): array { @@ -684,12 +1052,28 @@ private function staticStyleRules(string $html, string $linkedCss): array if ( array() === $declarations ) { continue; } + $mediaTextDeclarations = array_values(array_filter( + $this->mediaTextInlineDeclarationEntries((string) $match[2]), + static fn (array $entry): bool => in_array($entry['property'], array( + 'align-items', + 'direction', + 'display', + 'flex-basis', + 'flex-direction', + 'flex-flow', + 'grid-template-columns', + 'order', + 'width', + ), true) + )); foreach ( explode(',', (string) $match[1]) as $selector ) { $selector = trim($selector); if ( '' !== $selector && ! $this->selectorCarriesPseudoState($selector) && $this->isSupportedCssSelector($selector) ) { $rules[] = array( 'selector' => $selector, 'declarations' => $declarations, + 'mediaTextDeclarations' => $mediaTextDeclarations, + 'mediaTextSpecificity' => $this->mediaTextSelectorSpecificity($selector), ); } } @@ -1005,6 +1389,7 @@ private function safeVisualDeclarations(array $declarations): array 'direction', 'display', 'flex-direction', + 'flex-flow', 'flex', 'flex-basis', 'flex-grow', diff --git a/php-transformer/tests/unit/media-text-pattern.php b/php-transformer/tests/unit/media-text-pattern.php index eee1a411..76222774 100644 --- a/php-transformer/tests/unit/media-text-pattern.php +++ b/php-transformer/tests/unit/media-text-pattern.php @@ -352,7 +352,7 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so $assertSame($safeMediaUrl, $safeMedia['attrs']['mediaUrl'] ?? null, 'Allowed media URL survives: ' . $safeMediaUrl); } -foreach ( array( 'javascript:alert(1)', 'data:text/html,unsafe', 'ftp://example.com/media.jpg', 'file:///tmp/media.jpg', "bad\x01media.jpg" ) as $unsafeMediaUrl ) { +foreach ( array( 'javascript:alert(1)', 'data:text/html,unsafe', 'data:image/svg+xml;base64,AAAA', 'data:image/SVG;base64,AAAA', 'ftp://example.com/media.jpg', 'file:///tmp/media.jpg', "bad\x01media.jpg" ) as $unsafeMediaUrl ) { $fallbacks = array(); $record = array(); $unsafeMediaElement = $elementFromHtml('

Unsafe media

'); @@ -425,26 +425,33 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so } foreach ( array( - 'grid-template-columns:30% auto', - 'display:flex;grid-template-columns:30% auto', - 'display:inline-grid;grid-template-columns:30% auto', -) as $inactiveGridStyle ) { + 'grid-template-columns:30% auto' => 30, + 'display:block;grid-template-columns:30% auto' => 30, + 'display:flex;grid-template-columns:30% auto' => null, + 'display:inline-grid;grid-template-columns:30% auto' => 30, +) as $gridIntentStyle => $expectedWidth ) { $fallbacks = array(); $record = array(); - $inactiveGridElement = $elementFromHtml('

Inactive grid

'); - $inactiveGrid = $match($inactiveGridElement, array( $paragraph ), $fallbacks, $record); - $assertTrue(! array_key_exists('mediaWidth', $inactiveGrid['attrs'] ?? array()), 'Grid tracks ignored unless display resolves exactly grid: ' . $inactiveGridStyle); + $gridIntentElement = $elementFromHtml('

Grid intent

'); + $gridIntent = $match($gridIntentElement, array( $paragraph ), $fallbacks, $record); + $assertSame($expectedWidth, $gridIntent['attrs']['mediaWidth'] ?? null, 'Grid tracks imply grid intent unless display resolves flex: ' . $gridIntentStyle); } -foreach ( array( 14 => null, 15 => 15, 85 => 85, 86 => null ) as $sourceWidth => $expectedWidth ) { +foreach ( array( 10 => 15, 14 => 15, 15 => 15, 85 => 85, 86 => 85, 90 => 85 ) as $sourceWidth => $expectedWidth ) { $fallbacks = array(); $record = array(); $boundedWidthElement = $elementFromHtml('

Bounded

'); $boundedWidth = $match($boundedWidthElement, array( $paragraph ), $fallbacks, $record); $actualWidth = $boundedWidth['attrs']['mediaWidth'] ?? null; - $assertSame($expectedWidth, $actualWidth, 'mediaWidth emits only within inclusive 15..85 range: ' . $sourceWidth); + $assertSame($expectedWidth, $actualWidth, 'mediaWidth clamps to inclusive 15..85 range: ' . $sourceWidth); } +$fallbacks = array(); +$record = array(); +$flexContradictionElement = $elementFromHtml('

Flex width

'); +$flexContradiction = $match($flexContradictionElement, array( $paragraph ), $fallbacks, $record); +$assertSame(41, $flexContradiction['attrs']['mediaWidth'] ?? null, 'Resolved flex ignores grid tracks and keeps media flex-basis/width fallback order.'); + // Vertical alignment mapping covers all core values. foreach ( array( 'flex-start' => 'top', 'start' => 'top', 'center' => 'center', 'flex-end' => 'bottom', 'end' => 'bottom' ) as $alignItems => $expectedAlignment ) { $fallbacks = array(); @@ -455,16 +462,16 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so } foreach ( array( - 'align-items:center', - 'display:block;align-items:center', - 'display:inline-flex;align-items:center', - 'display:inline-grid;align-items:center', -) as $inactiveAlignmentStyle ) { + 'align-items:center' => null, + 'display:block;align-items:center' => null, + 'display:inline-flex;align-items:center' => 'center', + 'display:inline-grid;align-items:center' => 'center', +) as $alignmentStyle => $expectedAlignment ) { $fallbacks = array(); $record = array(); - $inactiveAlignmentElement = $elementFromHtml('

Align

'); - $inactiveAlignment = $match($inactiveAlignmentElement, array( $paragraph ), $fallbacks, $record); - $assertTrue(! array_key_exists('verticalAlignment', $inactiveAlignment['attrs'] ?? array()), 'Alignment ignored unless display resolves exactly flex or grid: ' . $inactiveAlignmentStyle); + $alignmentElement = $elementFromHtml('

Align

'); + $alignment = $match($alignmentElement, array( $paragraph ), $fallbacks, $record); + $assertSame($expectedAlignment, $alignment['attrs']['verticalAlignment'] ?? null, 'Inline display forms share flex/grid alignment semantics: ' . $alignmentStyle); } $fallbacks = array(); @@ -501,9 +508,12 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so // Strict layout-direction gates decline before text conversion. foreach ( array( 'row reverse' => '

Reverse

', - 'media order' => '

Ordered

', + 'inline flex column' => '

Vertical

', + 'flex flow reverse' => '

Reverse

', + 'media order' => '

Ordered

', 'text order' => '

Ordered

', 'rtl' => '

RTL

', + 'dir rtl' => '

RTL

', ) as $gateName => $gateHtml ) { $fallbacks = array( array( 'reason' => 'existing' ) ); $record = array(); @@ -519,6 +529,74 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so $row = $match($rowElement, array( $paragraph ), $fallbacks, $record); $assertSame('core/media-text', $row['blockName'] ?? null, 'Normal flex row remains eligible.'); +foreach ( array( '0', '+0', '-0', '0.0', 'initial', 'unset' ) as $initialOrder ) { + $fallbacks = array(); + $record = array(); + $initialOrderElement = $elementFromHtml('

Initial order

'); + $initialOrderBlock = $match($initialOrderElement, array( $paragraph ), $fallbacks, $record); + $assertSame('core/media-text', $initialOrderBlock['blockName'] ?? null, 'Initial-equivalent child order remains eligible: ' . $initialOrder); +} + +foreach ( array( + 'order:1 !important;order:0' => null, + 'order:0 !important;order:1' => 'core/media-text', +) as $orderCascade => $expectedBlockName ) { + $fallbacks = array(); + $record = array(); + $orderCascadeElement = $elementFromHtml('

Order cascade

'); + $orderCascadeBlock = $match($orderCascadeElement, array( $paragraph ), $fallbacks, $record); + $assertSame($expectedBlockName, $orderCascadeBlock['blockName'] ?? null, 'Order gate honors declaration importance: ' . $orderCascade); +} + +foreach ( array( + 'flex-direction:row;flex-flow:row-reverse wrap' => null, + 'flex-flow:row-reverse wrap;flex-direction:row' => 'core/media-text', + 'flex-flow:row;flex-direction:row;flex-flow:row-reverse wrap' => null, + 'flex-direction:row !important;flex-flow:column' => 'core/media-text', +) as $directionOrder => $expectedBlockName ) { + $fallbacks = array(); + $record = array(); + $directionOrderElement = $elementFromHtml('

Flow order

'); + $directionOrderBlock = $match($directionOrderElement, array( $paragraph ), $fallbacks, $record); + $assertSame($expectedBlockName, $directionOrderBlock['blockName'] ?? null, 'Last flex-flow/flex-direction declaration controls direction: ' . $directionOrder); +} + +foreach ( array( + 'display:flex;flex-flow:column;flex-direction:banana', + 'display:flex;flex-direction:column;flex-flow:nope', + 'display:flex;display:banana;flex-direction:column', +) as $invalidDirectionStyle ) { + $fallbacks = array(); + $record = array(); + $invalidDirectionElement = $elementFromHtml('

Invalid direction

'); + $invalidDirectionBlock = $match($invalidDirectionElement, array( $paragraph ), $fallbacks, $record); + $assertNull($invalidDirectionBlock, 'Invalid CSS value does not override earlier valid layout declaration: ' . $invalidDirectionStyle); +} + +$fallbacks = array(); +$record = array(); +$invalidInitialOrderElement = $elementFromHtml('

Invalid order

'); +$invalidInitialOrderBlock = $match($invalidInitialOrderElement, array( $paragraph ), $fallbacks, $record); +$assertSame('core/media-text', $invalidInitialOrderBlock['blockName'] ?? null, 'Invalid order does not override earlier zero order.'); + +$fallbacks = array(); +$record = array(); +$invalidAlignmentElement = $elementFromHtml('

Invalid align

'); +$invalidAlignmentBlock = $match($invalidAlignmentElement, array( $paragraph ), $fallbacks, $record); +$assertSame('center', $invalidAlignmentBlock['attrs']['verticalAlignment'] ?? null, 'Invalid alignment does not override earlier center alignment.'); + +$fallbacks = array(); +$record = array(); +$invalidGridElement = $elementFromHtml('

Invalid grid

'); +$invalidGridBlock = $match($invalidGridElement, array( $paragraph ), $fallbacks, $record); +$assertSame(30, $invalidGridBlock['attrs']['mediaWidth'] ?? null, 'Invalid grid template does not override earlier valid tracks.'); + +$fallbacks = array(); +$record = array(); +$invalidWidthElement = $elementFromHtml('

Invalid width

'); +$invalidWidthBlock = $match($invalidWidthElement, array( $paragraph ), $fallbacks, $record); +$assertSame(40, $invalidWidthBlock['attrs']['mediaWidth'] ?? null, 'Invalid media width does not override earlier percentage width.'); + // Authored direction/order rules reach strict gates for low-value direct children. $fallbacks = array( array( 'reason' => 'existing' ) ); $record = array(); @@ -651,15 +729,117 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so $assertContains('min-height:30rem !important', $geometryAssets, 'Carrier stylesheet preserves source min-height.'); $assertContains('aspect-ratio:16/9 !important', $geometryAssets, 'Carrier stylesheet preserves source aspect-ratio.'); +$variableGeometryResult = $transformHtml( + '

Copy

' +); +$variableGeometryBlock = $variableGeometryResult['blocks'][0] ?? array(); +$variableGeometryOpening = (string) ($variableGeometryBlock['innerContent'][0] ?? ''); +$variableGeometryAssets = implode("\n", array_map(static fn (array $asset): string => (string) ($asset['content'] ?? ''), $variableGeometryResult['assets'] ?? array())); +$assertSame('core/media-text', $variableGeometryBlock['blockName'] ?? null, 'Variable geometry case emits media-text.'); +$assertContains('--base:420px !important', $variableGeometryAssets, 'Carrier stylesheet preserves transitive custom-property definition.'); +$assertContains('--pane:var(--base) !important', $variableGeometryAssets, 'Carrier stylesheet preserves directly referenced custom-property definition.'); +$assertContains('min-height:var(--pane) !important', $variableGeometryAssets, 'Carrier stylesheet preserves variable geometry declaration.'); +$assertTrue(! str_contains($variableGeometryOpening, '--pane'), 'Media-text wrapper keeps custom properties out of inline style.'); +$assertTrue(! str_contains($variableGeometryOpening, 'min-height'), 'Media-text wrapper keeps variable geometry out of inline style.'); + +$importantGeometryResult = $transformHtml( + '

Copy

' +); +$importantGeometryBlock = $importantGeometryResult['blocks'][0] ?? array(); +$importantGeometryOpening = (string) ($importantGeometryBlock['innerContent'][0] ?? ''); +$importantGeometryAssets = implode("\n", array_map(static fn (array $asset): string => (string) ($asset['content'] ?? ''), $importantGeometryResult['assets'] ?? array())); +$assertSame('core/media-text', $importantGeometryBlock['blockName'] ?? null, 'Important geometry case emits media-text.'); +$assertContains('min-height:420px !important', $importantGeometryAssets, 'Carrier stylesheet preserves important-only geometry.'); +$assertTrue(! str_contains($importantGeometryOpening, 'min-height'), 'Media-text wrapper keeps important geometry out of inline style.'); + +$importantCascadeResult = $transformHtml( + '

Copy

' +); +$importantCascadeAssets = implode("\n", array_map(static fn (array $asset): string => (string) ($asset['content'] ?? ''), $importantCascadeResult['assets'] ?? array())); +$assertContains('min-height:420px !important', $importantCascadeAssets, 'Carrier stylesheet honors important geometry over later normal declaration.'); +$assertTrue(! str_contains($importantCascadeAssets, 'min-height:200px'), 'Carrier stylesheet drops losing normal geometry declaration.'); + +$caseSensitiveVariableResult = $transformHtml( + '

Copy

' +); +$caseSensitiveVariableAssets = implode("\n", array_map(static fn (array $asset): string => (string) ($asset['content'] ?? ''), $caseSensitiveVariableResult['assets'] ?? array())); +$assertContains('--x:400px !important', $caseSensitiveVariableAssets, 'Carrier stylesheet preserves case-sensitive custom-property identity.'); +$assertTrue(! str_contains($caseSensitiveVariableAssets, '--x:500px'), 'Carrier stylesheet does not merge differently cased custom properties.'); + +$clampedWidthResult = $transformHtml('

Copy

'); +$clampedWidthBlock = $clampedWidthResult['blocks'][0] ?? array(); +$assertSame(15, $clampedWidthBlock['attrs']['mediaWidth'] ?? null, 'Out-of-range source width clamps in emitted attrs.'); +$assertContains('grid-template-columns:15% auto', (string) ($clampedWidthBlock['innerContent'][0] ?? ''), 'Clamped width controls emitted wrapper track.'); + +$impliedGridResult = $transformHtml('

Copy

'); +$assertSame(30, $impliedGridResult['blocks'][0]['attrs']['mediaWidth'] ?? null, 'Grid tracks derive emitted width without explicit display grid.'); + +$inlineFlexAlignmentResult = $transformHtml('

Copy

'); +$assertSame('center', $inlineFlexAlignmentResult['blocks'][0]['attrs']['verticalAlignment'] ?? null, 'Inline flex preserves emitted vertical alignment.'); + $rowReverseResult = $transformHtml('

Copy

'); $assertTrue('core/media-text' !== ($rowReverseResult['blocks'][0]['blockName'] ?? null), 'Flex row-reverse falls through without media-text.'); +$inlineFlexColumnResult = $transformHtml('

Copy

'); +$assertTrue('core/media-text' !== ($inlineFlexColumnResult['blocks'][0]['blockName'] ?? null), 'Inline-flex column falls through without media-text.'); + +$flexFlowReverseResult = $transformHtml('

Copy

'); +$assertTrue('core/media-text' !== ($flexFlowReverseResult['blocks'][0]['blockName'] ?? null), 'Flex-flow row-reverse falls through without media-text.'); + +$authoredFlexFlowResult = $transformHtml('

Copy

'); +$assertTrue('core/media-text' !== ($authoredFlexFlowResult['blocks'][0]['blockName'] ?? null), 'Stylesheet-authored flex-flow row-reverse reaches media-text gate.'); + +$importantAuthoredFlowResult = $transformHtml('

Copy

'); +$assertTrue('core/media-text' !== ($importantAuthoredFlowResult['blocks'][0]['blockName'] ?? null), 'Stylesheet important flex-flow beats inline normal flex-flow.'); + +$repeatedAuthoredFlowResult = $transformHtml('

Copy

'); +$assertTrue('core/media-text' !== ($repeatedAuthoredFlowResult['blocks'][0]['blockName'] ?? null), 'Stylesheet declaration order resolves repeated flex-flow against flex-direction.'); + +$inlineImportantFlowResult = $transformHtml('

Copy

'); +$assertSame('core/media-text', $inlineImportantFlowResult['blocks'][0]['blockName'] ?? null, 'Inline important flex-direction beats stylesheet important flex-flow.'); + +$specificAuthoredFlowResult = $transformHtml('

Copy

'); +$assertTrue('core/media-text' !== ($specificAuthoredFlowResult['blocks'][0]['blockName'] ?? null), 'Higher-specificity stylesheet flex-flow beats later lower-specificity rule.'); + +$tupleSpecificityFlowResult = $transformHtml('

Copy

'); +$assertTrue('core/media-text' !== ($tupleSpecificityFlowResult['blocks'][0]['blockName'] ?? null), 'ID specificity beats any number of class selectors without scalar carry.'); + +$attributeValueSpecificityResult = $transformHtml('

Copy

'); +$assertTrue('core/media-text' !== ($attributeValueSpecificityResult['blocks'][0]['blockName'] ?? null), 'ID-like text inside attribute value does not add ID specificity.'); + +foreach ( array( + 'display:flex;flex-flow:column;flex-direction:banana', + 'display:flex;flex-direction:column;flex-flow:nope', + 'display:flex;display:banana;flex-direction:column', +) as $invalidIntegrationStyle ) { + $invalidIntegrationResult = $transformHtml('

Copy

'); + $assertTrue('core/media-text' !== ($invalidIntegrationResult['blocks'][0]['blockName'] ?? null), 'Transform ignores invalid layout declaration: ' . $invalidIntegrationStyle); +} + +$invalidAuthoredLayoutResult = $transformHtml('

Copy

'); +$assertTrue('core/media-text' !== ($invalidAuthoredLayoutResult['blocks'][0]['blockName'] ?? null), 'Stylesheet invalid value does not override earlier valid layout declaration.'); + +$initialOrderResult = $transformHtml('

Copy

'); +$assertSame('core/media-text', $initialOrderResult['blocks'][0]['blockName'] ?? null, 'Authored order zero remains eligible for media-text.'); + $authoredOrderResult = $transformHtml('

Copy

'); $assertTrue('core/media-text' !== ($authoredOrderResult['blocks'][0]['blockName'] ?? null), 'Authored .copy{order:2} declines media-text.'); +$importantAuthoredOrderResult = $transformHtml('

Copy

'); +$assertTrue('core/media-text' !== ($importantAuthoredOrderResult['blocks'][0]['blockName'] ?? null), 'Stylesheet important order beats inline normal order.'); + +$repeatedAuthoredOrderResult = $transformHtml('

Copy

'); +$assertTrue('core/media-text' !== ($repeatedAuthoredOrderResult['blocks'][0]['blockName'] ?? null), 'Stylesheet declaration importance resolves repeated order declarations.'); + $authoredRtlResult = $transformHtml('

Copy

'); $assertTrue('core/media-text' !== ($authoredRtlResult['blocks'][0]['blockName'] ?? null), 'Authored .shell{display:grid;direction:rtl} declines media-text.'); +$dirRtlResult = $transformHtml('

Copy

'); +$assertTrue('core/media-text' !== ($dirRtlResult['blocks'][0]['blockName'] ?? null), 'Container dir=rtl declines media-text.'); + +$svgDataResult = $transformHtml('

Copy

'); +$assertTrue('core/media-text' !== ($svgDataResult['blocks'][0]['blockName'] ?? null), 'SVG data media URL declines media-text.'); + $lastDisplayWinsResult = $transformHtml('

Copy

'); $assertSame('core/media-text', $lastDisplayWinsResult['blocks'][0]['blockName'] ?? null, 'Last duplicate display declaration controls row-reverse gate.'); @@ -702,6 +882,21 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so $assertSame('right', $roundTrip['attrs']['mediaPosition'] ?? null, 'Round-trip DOM order restores right position.'); $assertContains('has-media-on-the-right', (string) ($roundTrip['innerHTML'] ?? ''), 'Round-trip save shape restores right class.'); +// Media-text style resolution memoizes by the shared presentation cache key. +$memoizedTransformer = new HtmlTransformer(); +$memoizedElement = $elementFromHtml('

Memo

'); +$mediaStyleMethod = new ReflectionMethod(HtmlTransformer::class, 'mediaTextPresentationStyle'); +$presentationKeyMethod = new ReflectionMethod(HtmlTransformer::class, 'presentationCacheKey'); +$mediaStyleCacheProperty = new ReflectionProperty(HtmlTransformer::class, 'mediaTextPresentationStyleCache'); +$firstMediaStyle = $mediaStyleMethod->invoke($memoizedTransformer, $memoizedElement); +$memoizedElement->setAttribute('style', 'display:grid'); +$secondMediaStyle = $mediaStyleMethod->invoke($memoizedTransformer, $memoizedElement); +$mediaStyleCache = $mediaStyleCacheProperty->getValue($memoizedTransformer); +$presentationKey = $presentationKeyMethod->invoke($memoizedTransformer, $memoizedElement); +$assertSame('display:flex', $firstMediaStyle, 'Media-text presentation style resolves initial authored style.'); +$assertSame($firstMediaStyle, $secondMediaStyle, 'Media-text presentation style reuses cached value for same DOM node.'); +$assertSame($firstMediaStyle, $mediaStyleCache[$presentationKey] ?? null, 'Media-text style cache uses shared presentation cache key.'); + // Emitted media-text markup passes Runtime serialization validation. $runtime = new Runtime(); $serializedRoundTrip = $runtime->serializeBlocks(array( $roundTrip )); From 908db384aabcef73a982bc35428c082da2b3f9d4 Mon Sep 17 00:00:00 2001 From: Matthew Batchelder Date: Wed, 5 Aug 2026 22:00:33 -0400 Subject: [PATCH 11/11] fix(php-transformer): fail media-text gates closed per adversarial review ## Summary Close the fail-open gaps two adversarial review passes found in media-text conversion, and integrate the pattern with trunk's author-owned layout preservation after the rebase. ## Why The strict gates read absent style values as defaults, so design-token var() layouts, ancestor RTL, floated panes, and inexpressible grid templates silently converted with the wrong pane order or width. After the rebase, trunk's author-owned-layout interception also consumed every candidate before the media-text dispatch was reached, and containers with no authored horizontal CSS converted into side-by-side layouts their sources never render. ## How - Dispatch media-text before author-owned layout preservation and remove the now-unreachable later dispatch site - Require an authored horizontal mechanism (display:flex/grid, a usable grid template, or round-trip wp-block-media-text markup) before converting - Resolve text direction through inheritance (ancestor dir attributes and inherited CSS direction; dir="auto" fails closed) - Decline floated panes, unresolvable var() gate values, and grid templates that cannot express a mediaWidth; derive complement widths for an auto media track beside a percentage text track - Run width gates before text-side conversion so declines stop double-converting the subtree and leaking block-binding occurrence counts - Hoist text-side wrapper groups only when their sole classes are transformer-generated css-owned markers absent from source markup - Drop linkTarget/rel/linkClass when the href is rejected as unsafe - Accept media-text state classes in the save-shape validator only when the corresponding attributes justify them - Diagnostics: single-scan at-rule skip, nested-candidate dedup, memoized inherited-direction walk, and PCRE or transform failures counted as diagnostic errors instead of declines ## Testing - [ ] composer test:unit && composer test:parity && composer test:canonical - [ ] php tools/visual-parity/tests/transform-media-text.php - [ ] composer corpus-diagnostics reports media-text counters unchanged from baseline --- .../docs/html-transform-coverage.md | 2 +- .../src/CorpusDiagnostics/CorpusDetectors.php | 154 +++++++++++-- .../CorpusDiagnosticsRunner.php | 7 +- .../src/HtmlToBlocks/HtmlTransformer.php | 39 ++-- .../Patterns/MediaTextPattern.php | 207 +++++++++++++++--- .../Style/StyleResolutionTrait.php | 31 ++- .../WordPress/CanonicalSaveShapeValidator.php | 26 ++- .../tests/unit/corpus-detectors.php | 36 +-- .../tests/unit/media-text-pattern.php | 105 +++++++-- .../tests/fixtures/media-text-source.html | 2 +- 10 files changed, 483 insertions(+), 126 deletions(-) diff --git a/php-transformer/docs/html-transform-coverage.md b/php-transformer/docs/html-transform-coverage.md index 2301d026..604465fc 100644 --- a/php-transformer/docs/html-transform-coverage.md +++ b/php-transformer/docs/html-transform-coverage.md @@ -15,7 +15,7 @@ Run the coverage fixtures with `composer parity` or as part of `composer test`. | Code | `html-core-text-structure.json` | `core/code`, `core/preformatted` | | Tables | `html-core-media-actions.json` | `core/table` with head/body/caption attrs | | Images | `html-core-media-actions.json`, `html-figure-quote-media.json` | `core/image` with URL, alt, dimensions, caption, identity, size, and class attrs | -| Media and text | `html-media-text.json` | `core/media-text` for strict two-pane image/video and text layouts; matched `section`/`article` containers emit the block's canonical `div` wrapper; ambiguous or impure media layouts continue through existing columns/group handling | +| Media and text | `html-media-text.json` | `core/media-text` for strict two-pane image/video and text layouts with an authored horizontal mechanism (`display:flex`/`grid`, a usable grid template, or round-trip `wp-block-media-text` markup); matched `section`/`article` containers emit the block's canonical `div` wrapper; gates fail closed — mechanism-less containers, floated panes, unresolvable `var()` layout values, inherited RTL, and grid templates that cannot express a `mediaWidth` all decline into existing columns/group/author-layout handling | | Buttons | `html-core-media-actions.json` | `core/buttons` containing `core/button` children | | Shortcodes | `html-core-media-actions.json` | `core/shortcode` for standalone shortcode text | | Wrapper provenance and safety | `html-provenance-wrapper-safety.json` | Presentational semantic wrappers are preserved as `core/group`; unsupported fallback records include selector/source metadata and sanitized fallback HTML | diff --git a/php-transformer/src/CorpusDiagnostics/CorpusDetectors.php b/php-transformer/src/CorpusDiagnostics/CorpusDetectors.php index e74bae22..c72666b1 100644 --- a/php-transformer/src/CorpusDiagnostics/CorpusDetectors.php +++ b/php-transformer/src/CorpusDiagnostics/CorpusDetectors.php @@ -277,7 +277,8 @@ public static function nativeRate(array $flat): array * media_text_decline_unsafe_url_count: int, * media_text_width_oob_count: int, * media_text_decline_linked_video_count: int, - * media_text_decline_other_count: int + * media_text_decline_other_count: int, + * media_text_diagnostic_error_count: int * } */ private static function mediaTextMetrics(string $sourceHtml, array $flat): array @@ -291,6 +292,7 @@ private static function mediaTextMetrics(string $sourceHtml, array $flat): array 'media_text_width_oob_count' => 0, 'media_text_decline_linked_video_count' => 0, 'media_text_decline_other_count' => 0, + 'media_text_diagnostic_error_count' => 0, ); foreach ( $flat as $block ) { @@ -329,9 +331,14 @@ private static function mediaTextMetrics(string $sourceHtml, array $flat): array } } $styleRules = self::mediaTextStaticStyleRules($sourceCss); + if ( null === $styleRules ) { + // A PCRE failure erased the CSS cascade; gate outcomes computed + // without it would be fabrications, not approximations. + ++$metrics['media_text_diagnostic_error_count']; + return $metrics; + } - $sourcePasserCount = 0; - $widthOobCandidateCount = 0; + $candidates = array(); foreach ( $nodes as $node ) { if ( ! $node instanceof \DOMElement ) { continue; @@ -350,7 +357,41 @@ private static function mediaTextMetrics(string $sourceHtml, array $flat): array continue; } - $mediaIndex = 1 === $mediaCounts[0] ? 0 : 1; + $candidates[] = array( + 'node' => $node, + 'children' => $children, + 'mediaIndex' => 1 === $mediaCounts[0] ? 0 : 1, + ); + } + + // A wrapper whose descendant is itself a candidate is not a two-pane + // candidate — evaluating it fabricates declines for markup that + // converts through the descendant. + $candidates = array_values(array_filter( + $candidates, + static function (array $candidate) use ($candidates): bool { + foreach ( $candidates as $other ) { + if ( $other['node'] === $candidate['node'] ) { + continue; + } + for ( $ancestor = $other['node']->parentNode; $ancestor instanceof \DOMElement; $ancestor = $ancestor->parentNode ) { + if ( $ancestor === $candidate['node'] ) { + return false; + } + } + } + + return true; + } + )); + + $sourcePasserCount = 0; + $widthOobCandidateCount = 0; + $directionCache = array(); + foreach ( $candidates as $candidate ) { + $node = $candidate['node']; + $children = $candidate['children']; + $mediaIndex = $candidate['mediaIndex']; $textIndex = 0 === $mediaIndex ? 1 : 0; if ( self::hasNonIgnorableDirectNodes($node) ) { @@ -379,7 +420,10 @@ private static function mediaTextMetrics(string $sourceHtml, array $flat): array self::mediaTextResolvedDeclarations($children[0], $styleRules, array( 'order', 'flex-basis', 'width' )), self::mediaTextResolvedDeclarations($children[1], $styleRules, array( 'order', 'flex-basis', 'width' )), ); - if ( self::mediaTextHasVerticalOrReversedLayout($containerStyle, $childStyles) ) { + if ( + self::mediaTextHasVerticalOrReversedLayout($containerStyle, $childStyles) + || self::diagnosticInheritedRtlBlocks($node, $styleRules, $directionCache) + ) { ++$metrics['media_text_decline_vertical_or_reversed_count']; continue; } @@ -400,7 +444,9 @@ private static function mediaTextMetrics(string $sourceHtml, array $flat): array continue; } if ( null === $textBearing ) { - ++$metrics['media_text_decline_other_count']; + // A crash inside the isolated text-side transform is a + // diagnostic failure, not a conversion decline. + ++$metrics['media_text_diagnostic_error_count']; continue; } @@ -989,15 +1035,18 @@ private static function mediaTextTopLevelCss(string $css): string continue; } - $blockStart = self::mediaTextCssToken($css, '{', $offset); - $statementEnd = self::mediaTextCssToken($css, ';', $offset); - if ( null === $blockStart || ( null !== $statementEnd && $statementEnd < $blockStart ) ) { - if ( null === $statementEnd ) { - break; - } - $offset = $statementEnd; + // One forward scan for whichever terminator comes first. Two + // independent scans go quadratic when the other token is absent — + // each @ re-scans to end-of-css. + $terminator = self::mediaTextCssFirstToken($css, $offset); + if ( null === $terminator ) { + break; + } + if ( ';' === $terminator['token'] ) { + $offset = $terminator['position']; continue; } + $blockStart = $terminator['position']; $atRuleDepth = 1; for ( $inner = $blockStart + 1; $inner < $length; ++$inner ) { @@ -1031,12 +1080,19 @@ private static function mediaTextTopLevelCss(string $css): string * Parse production-equivalent ordered static rules for media-text gate * properties. Dynamic pseudo-state rules never affect resting strict gates. * - * @return array, declarations: array}> + * Returns null when PCRE itself fails — an empty ruleset means "no rules", + * which callers must not conflate with "could not read the rules". + * + * @return array, declarations: array}>|null */ - private static function mediaTextStaticStyleRules(string $css): array + private static function mediaTextStaticStyleRules(string $css): ?array { $css = self::mediaTextTopLevelCss($css); - if ( ! preg_match_all('/([^{}]+)\{([^{}]+)\}/', $css, $matches, PREG_SET_ORDER) ) { + $ruleCount = preg_match_all('/([^{}]+)\{([^{}]+)\}/', $css, $matches, PREG_SET_ORDER); + if ( false === $ruleCount ) { + return null; + } + if ( 0 === $ruleCount ) { return array(); } @@ -1129,7 +1185,12 @@ private static function mediaTextCssDeclarations(string $style): array return $declarations; } - private static function mediaTextCssToken(string $css, string $token, int $offset): ?int + /** + * First unquoted `{` or `;` at or after the offset, in one forward scan. + * + * @return array{token: string, position: int}|null + */ + private static function mediaTextCssFirstToken(string $css, int $offset): ?array { $length = strlen($css); for ( ; $offset < $length; ++$offset ) { @@ -1146,8 +1207,11 @@ private static function mediaTextCssToken(string $css, string $token, int $offse } continue; } - if ( $token === $css[ $offset ] ) { - return $offset; + if ( '{' === $css[ $offset ] || ';' === $css[ $offset ] ) { + return array( + 'token' => $css[ $offset ], + 'position' => $offset, + ); } } @@ -1284,6 +1348,56 @@ private static function diagnosticPureMediaResolution(\DOMElement $element, ?\DO return self::diagnosticPureMediaResolution($children[0], $anchor); } + /** + * Mirror the production inherited-direction gate: nearest ancestor (self + * included) with an explicit CSS `direction` or `dir` attribute wins; + * `dir="auto"` fails closed. + * + * Memoized by node path — candidates share ancestor chains, and each + * unmemoized level re-scans the whole ruleset. Node paths are stable keys + * here because the diagnostics DOM is never mutated. + * + * @param array, declarations: array}> $styleRules + * @param array $cache + */ + private static function diagnosticInheritedRtlBlocks(\DOMElement $element, array $styleRules, array &$cache): bool + { + $chain = array(); + $result = null; + for ( $node = $element; $node instanceof \DOMElement; $node = $node->parentNode ) { + $path = (string) $node->getNodePath(); + if ( array_key_exists($path, $cache) ) { + $result = $cache[ $path ]; + break; + } + $chain[] = $path; + + $declarations = self::mediaTextResolvedDeclarations($node, $styleRules, array( 'direction' )); + $direction = strtolower(self::mediaTextCssValue((string) ($declarations['direction'] ?? ''))); + if ( in_array($direction, array( 'ltr', 'rtl' ), true) ) { + $result = 'rtl' === $direction; + break; + } + + $dir = strtolower(trim($node->getAttribute('dir'))); + if ( 'auto' === $dir ) { + $result = true; + break; + } + if ( in_array($dir, array( 'ltr', 'rtl' ), true) ) { + $result = 'rtl' === $dir; + break; + } + } + + $result ??= false; + foreach ( $chain as $path ) { + $cache[ $path ] = $result; + } + + return $result; + } + private static function diagnosticSafeMediaUrl(string $url): string { $url = trim($url); @@ -1366,7 +1480,7 @@ private static function diagnosticGridMediaWidth(string $template, int $mediaInd $firstFr = self::diagnosticFrValue($tracks[0]); $secondFr = self::diagnosticFrValue($tracks[1]); - if ( null === $firstFr || null === $secondFr || 0.0 >= $firstFr + $secondFr ) { + if ( null === $firstFr || null === $secondFr || 0.0 >= $firstFr + $secondFr || ! is_finite($firstFr + $secondFr) ) { return null; } diff --git a/php-transformer/src/CorpusDiagnostics/CorpusDiagnosticsRunner.php b/php-transformer/src/CorpusDiagnostics/CorpusDiagnosticsRunner.php index c483594a..7e3411a2 100644 --- a/php-transformer/src/CorpusDiagnostics/CorpusDiagnosticsRunner.php +++ b/php-transformer/src/CorpusDiagnostics/CorpusDiagnosticsRunner.php @@ -58,6 +58,7 @@ public function run(string $corpusDir): array 'media_text_width_oob_count' => 0, 'media_text_decline_linked_video_count' => 0, 'media_text_decline_other_count' => 0, + 'media_text_diagnostic_error_count' => 0, 'finding_count' => 0, ); @@ -98,6 +99,7 @@ public function run(string $corpusDir): array 'media_text_width_oob_count', 'media_text_decline_linked_video_count', 'media_text_decline_other_count', + 'media_text_diagnostic_error_count', ) as $metricName ) { $totals[ $metricName ] += (int) $metrics[ $metricName ]; } @@ -171,7 +173,7 @@ public function renderSummary(array $report, int $limit = 25): string (int) ($totals['layout_direction_misrecognition_count'] ?? 0) ); $lines[] = sprintf( - 'MEDIA-TEXT: media_text_count=%d media_text_decline_media_impure_count=%d media_text_decline_no_text_side_count=%d media_text_decline_vertical_or_reversed_count=%d media_text_decline_unsafe_url_count=%d media_text_width_oob_count=%d media_text_decline_linked_video_count=%d media_text_decline_other_count=%d', + 'MEDIA-TEXT: media_text_count=%d media_text_decline_media_impure_count=%d media_text_decline_no_text_side_count=%d media_text_decline_vertical_or_reversed_count=%d media_text_decline_unsafe_url_count=%d media_text_width_oob_count=%d media_text_decline_linked_video_count=%d media_text_decline_other_count=%d media_text_diagnostic_error_count=%d', (int) ($totals['media_text_count'] ?? 0), (int) ($totals['media_text_decline_media_impure_count'] ?? 0), (int) ($totals['media_text_decline_no_text_side_count'] ?? 0), @@ -179,7 +181,8 @@ public function renderSummary(array $report, int $limit = 25): string (int) ($totals['media_text_decline_unsafe_url_count'] ?? 0), (int) ($totals['media_text_width_oob_count'] ?? 0), (int) ($totals['media_text_decline_linked_video_count'] ?? 0), - (int) ($totals['media_text_decline_other_count'] ?? 0) + (int) ($totals['media_text_decline_other_count'] ?? 0), + (int) ($totals['media_text_diagnostic_error_count'] ?? 0) ); $lines[] = sprintf( 'INFORMATIONAL var density (materialized downstream by SSI — not a repair gap): var_refs=%d (custom=%d)', diff --git a/php-transformer/src/HtmlToBlocks/HtmlTransformer.php b/php-transformer/src/HtmlToBlocks/HtmlTransformer.php index 239539bd..5acd399e 100644 --- a/php-transformer/src/HtmlToBlocks/HtmlTransformer.php +++ b/php-transformer/src/HtmlToBlocks/HtmlTransformer.php @@ -2888,6 +2888,28 @@ private function convertElement(DOMElement $element, array &$fallbacks, bool $ca return $this->authorLayoutBlockFromElement($element, $fallbacks); } + if ( in_array($tagName, array( 'div', 'section', 'article' ), true) ) { + // A strict two-pane media/text candidate is a more specific + // recognition than generic author-owned layout preservation: + // media-text candidates are by definition authored flex/grid + // containers, so they must be recognized before the layout is + // demoted to a css-owned core/group. + $mediaText = $this->mediaTextPattern->match( + $element, + $fallbacks, + fn (DOMElement $sourceElement, array &$sourceFallbacks, bool $captureUnsupported): array => $this->convertChildren($sourceElement, $sourceFallbacks, $captureUnsupported), + fn (DOMElement $sourceElement, array &$sourceFallbacks, bool $captureUnsupported): ?array => $this->convertElement($sourceElement, $sourceFallbacks, $captureUnsupported), + fn (DOMElement $sourceElement, array $excludedGeometryProperties = array()): array => $this->mediaTextPresentationAttributes($sourceElement, $excludedGeometryProperties), + fn (DOMElement $sourceElement): string => $this->mediaTextPresentationStyle($sourceElement), + fn (DOMElement $sourceElement): array => $this->htmlAttributes($sourceElement), + fn (string $url): string => $this->resolvedAssetImageUrl($url), + fn (string $name, array $attrs = array(), array $innerBlocks = array(), ?DOMElement $sourceElement = null): array => $this->createBlock($name, $attrs, $innerBlocks, $sourceElement) + ); + if ( null !== $mediaText ) { + return $mediaText; + } + } + if ( 'button' !== strtolower($this->attr($element, 'role')) && ! $this->hasClass($element, 'wp-block-columns') && $this->isAuthorOwnedLayout($element) @@ -2979,20 +3001,9 @@ private function convertElement(DOMElement $element, array &$fallbacks, bool $ca return $cover; } - $mediaText = $this->mediaTextPattern->match( - $element, - $fallbacks, - fn (DOMElement $sourceElement, array &$sourceFallbacks, bool $captureUnsupported): array => $this->convertChildren($sourceElement, $sourceFallbacks, $captureUnsupported), - fn (DOMElement $sourceElement, array &$sourceFallbacks, bool $captureUnsupported): ?array => $this->convertElement($sourceElement, $sourceFallbacks, $captureUnsupported), - fn (DOMElement $sourceElement, array $excludedGeometryProperties = array()): array => $this->mediaTextPresentationAttributes($sourceElement, $excludedGeometryProperties), - fn (DOMElement $sourceElement): string => $this->mediaTextPresentationStyle($sourceElement), - fn (DOMElement $sourceElement): array => $this->htmlAttributes($sourceElement), - fn (string $url): string => $this->resolvedAssetImageUrl($url), - fn (string $name, array $attrs = array(), array $innerBlocks = array(), ?DOMElement $sourceElement = null): array => $this->createBlock($name, $attrs, $innerBlocks, $sourceElement) - ); - if ( null !== $mediaText ) { - return $mediaText; - } + // core/media-text is dispatched earlier in this method, before + // author-owned layout preservation — its candidates are by + // definition authored flex/grid containers. } $columns = $this->columnsPattern->match( diff --git a/php-transformer/src/HtmlToBlocks/Patterns/MediaTextPattern.php b/php-transformer/src/HtmlToBlocks/Patterns/MediaTextPattern.php index ef958cb0..679fea78 100644 --- a/php-transformer/src/HtmlToBlocks/Patterns/MediaTextPattern.php +++ b/php-transformer/src/HtmlToBlocks/Patterns/MediaTextPattern.php @@ -84,27 +84,46 @@ public function match( return null; } - try { - $containerAttributes = $htmlAttributes($element); - } catch ( \Throwable ) { + if ( $this->declaresUnresolvableGateValue($containerStyle, array( 'display', 'flex-direction', 'flex-flow', 'direction' )) ) { return null; } $displayType = $this->containerDisplayType($containerStyle); $flexDirection = $this->flexDirectionFromStyle($containerStyle); + if ( 'flex' === $displayType && in_array($flexDirection, array( 'column', 'column-reverse', 'row-reverse' ), true) ) { + return null; + } + + // Conversion requires an authored horizontal mechanism: display + // flex/grid or a grid template. Without one the source renders + // stacked, and emitting the block would fabricate a side-by-side + // layout. Core's own wp-block-media-text markup is exempt — its grid + // comes from core stylesheets, not author CSS. + $hasGridTemplateColumns = $this->hasGridTemplateColumns($containerStyle); if ( - ( 'flex' === $displayType && in_array($flexDirection, array( 'column', 'column-reverse', 'row-reverse' ), true) ) - || $this->styleValueEquals($containerStyle, 'direction', 'rtl') - || 'rtl' === strtolower(trim((string) ($containerAttributes['dir'] ?? ''))) + null === $displayType + && ! $hasGridTemplateColumns + && ! in_array('wp-block-media-text', preg_split('/\s+/', trim($this->attr($element, 'class'))) ?: array(), true) ) { return null; } + if ( $this->inheritedDirectionBlocksConversion($element, $mergedPresentationStyle, $htmlAttributes) ) { + return null; + } + $childStyles = array(); try { foreach ( $elementChildren as $index => $child ) { $childStyles[ $index ] = $mergedPresentationStyle($child); + if ( $this->declaresUnresolvableGateValue($childStyles[ $index ], array( 'order', 'float' )) ) { + return null; + } $childDeclarations = $this->styleDeclarations($childStyles[ $index ]); + $float = strtolower($this->normalizedCssValue((string) ($childDeclarations['float'] ?? ''))); + if ( in_array($float, array( 'left', 'right', 'inline-start', 'inline-end' ), true) ) { + return null; + } $order = strtolower($this->normalizedCssValue((string) ($childDeclarations['order'] ?? ''))); $isInitialOrder = in_array($order, array( 'initial', 'unset' ), true) || ( is_numeric($order) && 0.0 === (float) $order ); @@ -130,6 +149,27 @@ public function match( return null; } + // Width gates are resolvable from styles alone, so they run BEFORE the + // text side is converted: convertElement is not side-effect free + // (block-binding occurrence counters), and a post-conversion decline + // re-converts the subtree through the fallback path. + $useGridTemplateColumns = 'flex' !== $displayType && $hasGridTemplateColumns; + $mediaWidth = $useGridTemplateColumns + ? $this->mediaWidthFromContainerStyle($containerStyle, $mediaIndex) + : null; + if ( null === $mediaWidth && $useGridTemplateColumns ) { + // A grid template that yields no percentage/fr-derived width (px, + // minmax(), var(), none, 3+ tracks) cannot be represented by + // mediaWidth; emitting the block would silently render 50/50. + return null; + } + if ( null === $mediaWidth ) { + $mediaWidth = $this->mediaWidthFromMediaStyle($childStyles[ $mediaIndex ]); + } + if ( null !== $mediaWidth ) { + $mediaWidth = max(15, min(85, $mediaWidth)); + } + $localFallbacks = array(); try { $textBlock = $convertElement($elementChildren[ $textIndex ], $localFallbacks, true); @@ -140,7 +180,7 @@ public function match( $innerBlocks = null === $textBlock ? array() : array( $textBlock ); if ( 'core/group' === ($textBlock['blockName'] ?? null) - && array() === ($textBlock['attrs'] ?? array()) + && $this->isHoistableTextSideGroupAttrs($textBlock['attrs'] ?? array(), $elementChildren[ $textIndex ]) && is_array($textBlock['innerBlocks'] ?? null) ) { $innerBlocks = $textBlock['innerBlocks']; @@ -170,17 +210,6 @@ public function match( $attrs['mediaPosition'] = 'right'; } - $hasGridTemplateColumns = $this->hasGridTemplateColumns($containerStyle); - $useGridTemplateColumns = 'flex' !== $displayType && $hasGridTemplateColumns; - $mediaWidth = $useGridTemplateColumns - ? $this->mediaWidthFromContainerStyle($containerStyle, $mediaIndex) - : null; - if ( null === $mediaWidth && ! $useGridTemplateColumns ) { - $mediaWidth = $this->mediaWidthFromMediaStyle($childStyles[ $mediaIndex ]); - } - if ( null !== $mediaWidth ) { - $mediaWidth = max(15, min(85, $mediaWidth)); - } if ( null !== $mediaWidth && 50 !== $mediaWidth ) { $attrs['mediaWidth'] = $mediaWidth; } @@ -202,16 +231,20 @@ public function match( $href = $this->safeLinkUrl((string) ($anchorAttributes['href'] ?? '')); if ( '' !== $href ) { $attrs['href'] = $href; - } - foreach ( array( - 'target' => 'linkTarget', - 'rel' => 'rel', - 'class' => 'linkClass', - ) as $sourceName => $attributeName ) { - $value = trim((string) ($anchorAttributes[ $sourceName ] ?? '')); - if ( '' !== $value ) { - $attrs[ $attributeName ] = $value; + // Link metadata is only meaningful alongside an emitted href: + // core sources these attributes from `figure a`, so without an + // anchor they can never round-trip — and a rejected href must + // not leave its rel/target/class text behind. + foreach ( array( + 'target' => 'linkTarget', + 'rel' => 'rel', + 'class' => 'linkClass', + ) as $sourceName => $attributeName ) { + $value = trim((string) ($anchorAttributes[ $sourceName ] ?? '')); + if ( '' !== $value ) { + $attrs[ $attributeName ] = $value; + } } } } @@ -292,6 +325,108 @@ private function safeUrlWithSchemes(string $url, array $allowedSchemes, bool $al return ''; } + /** + * A converted text side is hoisted into the media-text content area when + * its wrapper group carries nothing the block would lose: no attrs at all, + * or only transformer-generated css-owned layout marker classes. Those + * markers compensate core group flow defaults inside a preserved author + * layout — inside core/media-text the block owns the pane layout, so the + * wrapper is pure noise. A marker-prefixed class that already appears in + * the SOURCE element's class attribute is author-authored, not generated, + * and may carry author stylesheet rules — never hoist it away. + * + * @param array $attrs + */ + private function isHoistableTextSideGroupAttrs(array $attrs, DOMElement $textSide): bool + { + if ( array() === $attrs ) { + return true; + } + if ( array( 'className' ) !== array_keys($attrs) || ! is_string($attrs['className']) ) { + return false; + } + + $sourceClasses = preg_split('/\s+/', trim($this->attr($textSide, 'class'))) ?: array(); + foreach ( preg_split('/\s+/', trim($attrs['className'])) ?: array() as $class ) { + if ( '' === $class ) { + continue; + } + if ( ! str_starts_with($class, 'blocks-engine-css-owned-') || in_array($class, $sourceClasses, true) ) { + return false; + } + } + + return true; + } + + /** + * True when any of the given gate properties carries a var() reference the + * static pipeline cannot resolve. Gates must fail closed on such values — + * treating them as absent silently converts with the default layout. + * + * Scans raw declarations (no validity filter) so unresolvable values are + * seen even though the value validators exclude them elsewhere. + * + * @param array $properties + */ + private function declaresUnresolvableGateValue(string $style, array $properties): bool + { + foreach ( \Automattic\BlocksEngine\PhpTransformer\HtmlToBlocks\Style\CssValueSplitter::splitTopLevel($style, array( ';' )) as $declaration ) { + $separator = strpos($declaration, ':'); + if ( false === $separator ) { + continue; + } + $name = strtolower(trim(substr($declaration, 0, $separator))); + if ( ! in_array($name, $properties, true) ) { + continue; + } + if ( 1 === preg_match('/var\s*\(/i', substr($declaration, $separator + 1)) ) { + return true; + } + } + + return false; + } + + /** + * Resolve the effective text direction the way inheritance does: nearest + * ancestor (self included) with an explicit CSS `direction` or `dir` + * attribute wins. Declines on rtl, on `dir="auto"`, and on any direction + * value the static pipeline cannot resolve. + */ + private function inheritedDirectionBlocksConversion( + DOMElement $element, + callable $mergedPresentationStyle, + callable $htmlAttributes + ): bool { + for ( $node = $element; $node instanceof DOMElement; $node = $node->parentNode ) { + try { + $style = $mergedPresentationStyle($node); + $attributes = $htmlAttributes($node); + } catch ( \Throwable ) { + return true; + } + + if ( $this->declaresUnresolvableGateValue($style, array( 'direction' )) ) { + return true; + } + $direction = strtolower($this->normalizedCssValue((string) ($this->styleDeclarations($style)['direction'] ?? ''))); + if ( in_array($direction, array( 'ltr', 'rtl' ), true) ) { + return 'rtl' === $direction; + } + + $dir = strtolower(trim((string) ($attributes['dir'] ?? ''))); + if ( 'auto' === $dir ) { + return true; + } + if ( in_array($dir, array( 'ltr', 'rtl' ), true) ) { + return 'rtl' === $dir; + } + } + + return false; + } + private function containsMediaElement(DOMElement $element): bool { if ( in_array(strtolower($element->tagName), array( 'img', 'video' ), true) ) { @@ -487,9 +622,19 @@ private function mediaWidthFromContainerStyle(string $style, int $mediaIndex): ? return $mediaPercentage; } + // Core's own save shape pairs one percentage track with `auto` + // (`N% auto` / `auto N%`), so an auto media track beside a percentage + // text track expresses the complement. + if ( 'auto' === strtolower(trim($tracks[ $mediaIndex ])) ) { + $textPercentage = $this->percentageValue($tracks[ 0 === $mediaIndex ? 1 : 0 ]); + if ( null !== $textPercentage ) { + return 100 - $textPercentage; + } + } + $firstFr = $this->frValue($tracks[0]); $secondFr = $this->frValue($tracks[1]); - if ( null === $firstFr || null === $secondFr || 0.0 >= $firstFr + $secondFr ) { + if ( null === $firstFr || null === $secondFr || 0.0 >= $firstFr + $secondFr || ! is_finite($firstFr + $secondFr) ) { return null; } @@ -570,12 +715,6 @@ private function flexDirectionFromStyle(string $style): string return $direction; } - private function styleValueEquals(string $style, string $property, string $expected): bool - { - $value = strtolower($this->normalizedCssValue((string) ($this->styleDeclarations($style)[ $property ] ?? ''))); - return $expected === $value; - } - private function verticalAlignmentFromStyle(string $style): ?string { $declarations = $this->styleDeclarations($style); diff --git a/php-transformer/src/HtmlToBlocks/Style/StyleResolutionTrait.php b/php-transformer/src/HtmlToBlocks/Style/StyleResolutionTrait.php index f683c51e..862b5d1f 100644 --- a/php-transformer/src/HtmlToBlocks/Style/StyleResolutionTrait.php +++ b/php-transformer/src/HtmlToBlocks/Style/StyleResolutionTrait.php @@ -629,14 +629,18 @@ private function applyMediaTextCascadeDeclaration( if ('flex-flow' === $property) { $property = 'flex-direction'; - $flowDirection = null; - foreach (CssValueSplitter::splitTopLevelWhitespace(strtolower($value)) as $component) { - if (in_array($component, array('row', 'row-reverse', 'column', 'column-reverse'), true)) { - $flowDirection = $component; - break; + // A var() flow is statically unresolvable — keep it verbatim so the + // strict gate declines on it instead of defaulting to row. + if (1 !== preg_match('/var\s*\(/i', $value)) { + $flowDirection = null; + foreach (CssValueSplitter::splitTopLevelWhitespace(strtolower($value)) as $component) { + if (in_array($component, array('row', 'row-reverse', 'column', 'column-reverse'), true)) { + $flowDirection = $component; + break; + } } + $value = $flowDirection ?? (in_array(strtolower($value), array('inherit', 'unset', 'revert', 'revert-layer'), true) ? strtolower($value) : 'row'); } - $value = $flowDirection ?? (in_array(strtolower($value), array('inherit', 'unset', 'revert', 'revert-layer'), true) ? strtolower($value) : 'row'); } $current = $cascade[$property] ?? null; @@ -714,6 +718,14 @@ private function isValidMediaTextDeclarationValue(string $property, string $rawV return true; } + // var() values are valid CSS everywhere but statically unresolvable. + // They must SURVIVE into the cascade so the strict gates can fail + // closed on them — dropping them here makes the gate read "absent" + // and convert with the default layout. + if (1 === preg_match('/var\s*\(/i', $value)) { + return true; + } + if ('display' === $property) { return in_array($value, array( 'block', 'contents', 'flow-root', 'flex', 'grid', 'inline', 'inline-block', @@ -1049,9 +1061,6 @@ private function staticStyleRules(string $html, string $linkedCss): array foreach ( $matches as $match ) { $declarations = $this->safeVisualDeclarations($this->cssDeclarations((string) $match[2])); - if ( array() === $declarations ) { - continue; - } $mediaTextDeclarations = array_values(array_filter( $this->mediaTextInlineDeclarationEntries((string) $match[2]), static fn (array $entry): bool => in_array($entry['property'], array( @@ -1061,11 +1070,15 @@ private function staticStyleRules(string $html, string $linkedCss): array 'flex-basis', 'flex-direction', 'flex-flow', + 'float', 'grid-template-columns', 'order', 'width', ), true) )); + if ( array() === $declarations && array() === $mediaTextDeclarations ) { + continue; + } foreach ( explode(',', (string) $match[1]) as $selector ) { $selector = trim($selector); if ( '' !== $selector && ! $this->selectorCarriesPseudoState($selector) && $this->isSupportedCssSelector($selector) ) { diff --git a/php-transformer/src/WordPress/CanonicalSaveShapeValidator.php b/php-transformer/src/WordPress/CanonicalSaveShapeValidator.php index f3a0ed43..37c0a4cb 100644 --- a/php-transformer/src/WordPress/CanonicalSaveShapeValidator.php +++ b/php-transformer/src/WordPress/CanonicalSaveShapeValidator.php @@ -167,7 +167,7 @@ private function validateWrapper(array $block, string $blockName, string $path, // token core would reproduce from the className attribute. A leftover // source class core's save() never regenerates breaks the round-trip. foreach ( $wrapperClasses as $class ) { - if ( $this->isStructuralClass($class, $blockName) || in_array($class, $classNameTokens, true) ) { + if ( $this->isStructuralClass($class, $blockName, $attrs) || in_array($class, $classNameTokens, true) ) { continue; } @@ -277,15 +277,23 @@ private function validateNoDuplicateClassTokens(array $block, ?string $blockName * input: the block base class, element classes, and attribute-derived * support classes (alignment, color/border has-*, and is-* state/style). */ - private function isStructuralClass(string $class, string $blockName): bool + /** + * @param array $attrs + */ + private function isStructuralClass(string $class, string $blockName, array $attrs): bool { - if ( 'core/media-text' === $blockName && in_array($class, array( - 'is-stacked-on-mobile', - 'is-vertically-aligned-top', - 'is-vertically-aligned-center', - 'is-vertically-aligned-bottom', - ), true) ) { - return true; + if ( 'core/media-text' === $blockName ) { + // State classes are structural only when the attribute core's + // save() derives them from justifies them — an unjustified state + // class is exactly the divergence this validator exists to catch. + if ( 'is-stacked-on-mobile' === $class ) { + return ! array_key_exists('isStackedOnMobile', $attrs) || false !== $attrs['isStackedOnMobile']; + } + foreach ( array( 'top', 'center', 'bottom' ) as $alignment ) { + if ( 'is-vertically-aligned-' . $alignment === $class ) { + return $alignment === ($attrs['verticalAlignment'] ?? null); + } + } } return str_starts_with($class, 'wp-block-') diff --git a/php-transformer/tests/unit/corpus-detectors.php b/php-transformer/tests/unit/corpus-detectors.php index 8638d5d1..c6a84567 100644 --- a/php-transformer/tests/unit/corpus-detectors.php +++ b/php-transformer/tests/unit/corpus-detectors.php @@ -311,6 +311,7 @@ static function (string $fragment): bool { 'media_text_width_oob_count', 'media_text_decline_linked_video_count', 'media_text_decline_other_count', + 'media_text_diagnostic_error_count', ); $mediaTextCases = array( 'media_text_decline_media_impure_count' => '
Caption

Title

Body

', @@ -353,16 +354,24 @@ static function (string $fragment): bool { $inheritedRtlSource = '

Title

'; $inheritedRtlResult = ( new HtmlTransformer() )->transform($inheritedRtlSource, array())->toArray(); $inheritedRtlMetrics = CorpusDetectors::collect($inheritedRtlResult, $inheritedRtlSource)['metrics']; -$inheritedRtlDeclines = array_sum(array_map( - static fn (string $key): int => (int) $inheritedRtlMetrics[ $key ], +$assert( + 0 === (int) $inheritedRtlMetrics['media_text_count'] + && 1 === (int) $inheritedRtlMetrics['media_text_decline_vertical_or_reversed_count'], + '8c: inherited direction:rtl declines in production and diagnostics agree', + json_encode($inheritedRtlMetrics) +); + +$nestedWrapperSource = '

Title

'; +$nestedWrapperResult = ( new HtmlTransformer() )->transform($nestedWrapperSource, array())->toArray(); +$nestedWrapperMetrics = CorpusDetectors::collect($nestedWrapperResult, $nestedWrapperSource)['metrics']; +$nestedWrapperDeclines = array_sum(array_map( + static fn (string $key): int => (int) $nestedWrapperMetrics[ $key ], array_filter($mediaTextCounterKeys, static fn (string $key): bool => 'media_text_width_oob_count' !== $key) )); $assert( - 1 === (int) $inheritedRtlMetrics['media_text_count'] - && 0 === (int) $inheritedRtlMetrics['media_text_decline_vertical_or_reversed_count'] - && 0 === $inheritedRtlDeclines, - '8c: inherited direction:rtl does not decline candidate that transformer emits', - json_encode($inheritedRtlMetrics) + 1 === (int) $nestedWrapperMetrics['media_text_count'] && 0 === $nestedWrapperDeclines, + '8c2: wrapper around a converting candidate is not itself counted as a declined candidate', + json_encode($nestedWrapperMetrics) ); $conditionalLayouts = array( @@ -376,15 +385,14 @@ static function (string $fragment): bool { . ''; $conditionalResult = ( new HtmlTransformer() )->transform($conditionalSource, array())->toArray(); $conditionalMetrics = CorpusDetectors::collect($conditionalResult, $conditionalSource)['metrics']; - $conditionalDeclines = array_sum(array_map( - static fn (string $key): int => (int) $conditionalMetrics[ $key ], - array_filter($mediaTextCounterKeys, static fn (string $key): bool => 'media_text_width_oob_count' !== $key) - )); + // No resting display means the mechanism gate declines the candidate; + // the conditional column direction must NOT be misclassified as a + // vertical/reversed decline — it lands in `other` via reconciliation. $assert( - 1 === (int) $conditionalMetrics['media_text_count'] + 0 === (int) $conditionalMetrics['media_text_count'] && 0 === (int) $conditionalMetrics['media_text_decline_vertical_or_reversed_count'] - && 0 === $conditionalDeclines, - '8d: conditional @' . $atRule . ' layout does not affect production strict gate metric', + && 1 === (int) $conditionalMetrics['media_text_decline_other_count'], + '8d: conditional @' . $atRule . ' layout affects neither resting gates nor vertical classification', json_encode($conditionalMetrics) ); } diff --git a/php-transformer/tests/unit/media-text-pattern.php b/php-transformer/tests/unit/media-text-pattern.php index 76222774..6eb4abf1 100644 --- a/php-transformer/tests/unit/media-text-pattern.php +++ b/php-transformer/tests/unit/media-text-pattern.php @@ -178,7 +178,7 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so $fallbacks = array(); $record = array(); $mediaLeftElement = $elementFromHtml( - '
Left

Build

' + '
Left

Build

' ); $mediaLeft = $match( $mediaLeftElement, @@ -202,28 +202,28 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so $assertSame(array( 'display', 'grid-template-columns', 'align-items', 'gap' ), $record['excluded'], 'Presentation extraction excludes consumed geometry.'); // Host conversion preserves text-child identity while plain groups may hoist. -$headingResult = $transformHtml('

Only head

'); +$headingResult = $transformHtml('

Only head

'); $headingMediaText = $headingResult['blocks'][0] ?? array(); $assertSame('core/media-text', $headingMediaText['blockName'] ?? null, 'Heading text side matches media-text.'); $assertSame('core/heading', $headingMediaText['innerBlocks'][0]['blockName'] ?? null, 'Heading text side keeps core/heading identity.'); $assertTrue(! array_key_exists('mediaAlt', $headingMediaText['attrs'] ?? array()), 'Empty image alt is omitted from media-text attrs.'); -$quoteResult = $transformHtml('

Quoted

'); +$quoteResult = $transformHtml('

Quoted

'); $assertSame('core/quote', $quoteResult['blocks'][0]['innerBlocks'][0]['blockName'] ?? null, 'Blockquote text side keeps core/quote identity.'); -$styledTextResult = $transformHtml('

Styled copy

'); +$styledTextResult = $transformHtml('

Styled copy

'); $styledTextBlock = $styledTextResult['blocks'][0]['innerBlocks'][0] ?? array(); $assertSame('core/group', $styledTextBlock['blockName'] ?? null, 'Styled text wrapper keeps core/group identity.'); -$assertSame('copy-panel', $styledTextBlock['attrs']['className'] ?? null, 'Styled text group keeps className.'); +$assertSame('copy-panel blocks-engine-css-owned-layout', $styledTextBlock['attrs']['className'] ?? null, 'Styled text group keeps className plus layout-item marker.'); $assertSame('1rem', $styledTextBlock['attrs']['style']['spacing']['padding']['top'] ?? null, 'Styled text group keeps style attrs.'); -$plainTextResult = $transformHtml('

Head

Copy

'); +$plainTextResult = $transformHtml('

Head

Copy

'); $plainTextBlocks = $plainTextResult['blocks'][0]['innerBlocks'] ?? array(); $assertSame(2, count($plainTextBlocks), 'Attr-less text group hoists both children.'); $assertSame('core/heading', $plainTextBlocks[0]['blockName'] ?? null, 'Hoisted first child keeps heading identity.'); $assertSame('core/paragraph', $plainTextBlocks[1]['blockName'] ?? null, 'Hoisted second child keeps paragraph identity.'); -$inlineParagraphResult = $transformHtml('

Read now.

'); +$inlineParagraphResult = $transformHtml('

Read now.

'); $inlineParagraphBlocks = $inlineParagraphResult['blocks'][0]['innerBlocks'] ?? array(); $assertSame(1, count($inlineParagraphBlocks), 'Single paragraph remains one inner block.'); $assertSame('core/paragraph', $inlineParagraphBlocks[0]['blockName'] ?? null, 'Single paragraph keeps core/paragraph identity.'); @@ -243,7 +243,7 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so // Video media consumes video without alt. $fallbacks = array(); $record = array(); -$videoElement = $elementFromHtml('

Watch

'); +$videoElement = $elementFromHtml('

Watch

'); $video = $match($videoElement, array( $paragraph ), $fallbacks, $record); $assertSame('video', $video['attrs']['mediaType'] ?? null, 'Video media emits mediaType video.'); $assertSame('/resolved/clip.mp4', $video['attrs']['mediaUrl'] ?? null, 'Video src passes through asset resolver.'); @@ -253,7 +253,7 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so $fallbacks = array(); $record = array(); $linkedElement = $elementFromHtml( - '
Fallback

Open

' + '
Fallback

Open

' ); $linked = $match($linkedElement, array( $paragraph ), $fallbacks, $record); $assertSame('/resolved/fallback.jpg', $linked['attrs']['mediaUrl'] ?? null, 'Picture uses img fallback src, not source srcset.'); @@ -275,7 +275,7 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so ) as $safeHref ) { $fallbacks = array(); $record = array(); - $safeLinkedElement = $elementFromHtml('

Safe copy

'); + $safeLinkedElement = $elementFromHtml('

Safe copy

'); $safeAnchor = $safeLinkedElement->getElementsByTagName('a')->item(0); if ( ! $safeAnchor instanceof DOMElement ) { throw new RuntimeException('Safe-link fixture did not produce anchor.'); @@ -290,7 +290,7 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so $fallbacks = array(); $record = array(); $unsafeLinkedElement = $elementFromHtml( - '
Safe

Safe copy

' + '
Safe

Safe copy

' ); $unsafeAnchor = $unsafeLinkedElement->getElementsByTagName('a')->item(0); if ( ! $unsafeAnchor instanceof DOMElement ) { @@ -299,13 +299,13 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so $unsafeAnchor->setAttribute('href', $unsafeHref); $unsafeLinked = $match($unsafeLinkedElement, array( $paragraph ), $fallbacks, $record); $assertTrue(! array_key_exists('href', $unsafeLinked['attrs'] ?? array()), 'Unsafe link href is omitted: ' . json_encode($unsafeHref)); - $assertSame('_blank', $unsafeLinked['attrs']['linkTarget'] ?? null, 'Unsafe href does not erase anchor target metadata.'); - $assertSame('noopener', $unsafeLinked['attrs']['rel'] ?? null, 'Unsafe href does not erase anchor rel metadata.'); - $assertSame('unsafe-link', $unsafeLinked['attrs']['linkClass'] ?? null, 'Unsafe href does not erase anchor class metadata.'); + $assertSame(null, $unsafeLinked['attrs']['linkTarget'] ?? null, 'Rejected href drops anchor target metadata.'); + $assertSame(null, $unsafeLinked['attrs']['rel'] ?? null, 'Rejected href drops anchor rel metadata.'); + $assertSame(null, $unsafeLinked['attrs']['linkClass'] ?? null, 'Rejected href drops anchor class metadata.'); } $unsafeLinkResult = $transformHtml( - '
Safe

Safe copy

' + '
Safe

Safe copy

' ); $unsafeLinkBlock = $unsafeLinkResult['blocks'][0] ?? array(); $assertSame('core/media-text', $unsafeLinkBlock['blockName'] ?? null, 'Unsafe linked media still converts with safe media URL.'); @@ -313,7 +313,7 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so $assertTrue(! str_contains((string) ($unsafeLinkBlock['innerHTML'] ?? ''), 'javascript'), 'Unsafe href is absent from emitted markup.'); $substringLinkResult = $transformHtml( - '

Copy

' + '

Copy

' ); $assertSame( 'https://e.com/blog/what-is-javascript:-a-primer', @@ -333,7 +333,7 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so ) as $safeMediaUrl ) { $fallbacks = array(); $record = array(); - $safeMediaElement = $elementFromHtml('

Safe media

'); + $safeMediaElement = $elementFromHtml('

Safe media

'); $safeImage = $safeMediaElement->getElementsByTagName('img')->item(0); if ( ! $safeImage instanceof DOMElement ) { throw new RuntimeException('Safe-media fixture did not produce image.'); @@ -393,13 +393,13 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so // Width derives from media-child flex-basis, then width, and from two fr tracks. $fallbacks = array(); $record = array(); -$flexBasisElement = $elementFromHtml('

Basis

'); +$flexBasisElement = $elementFromHtml('

Basis

'); $flexBasis = $match($flexBasisElement, array( $paragraph ), $fallbacks, $record); $assertSame(42, $flexBasis['attrs']['mediaWidth'] ?? null, 'Media flex-basis percentage derives width.'); $fallbacks = array(); $record = array(); -$widthElement = $elementFromHtml('

Width

'); +$widthElement = $elementFromHtml('

Width

'); $width = $match($widthElement, array( $paragraph ), $fallbacks, $record); $assertSame(38, $width['attrs']['mediaWidth'] ?? null, 'Media width percentage rounds to nearest integer.'); @@ -593,7 +593,7 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so $fallbacks = array(); $record = array(); -$invalidWidthElement = $elementFromHtml('

Invalid width

'); +$invalidWidthElement = $elementFromHtml('

Invalid width

'); $invalidWidthBlock = $match($invalidWidthElement, array( $paragraph ), $fallbacks, $record); $assertSame(40, $invalidWidthBlock['attrs']['mediaWidth'] ?? null, 'Invalid media width does not override earlier percentage width.'); @@ -847,7 +847,7 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so $assertSame('core/media-text', $lastFlexDirectionWinsResult['blocks'][0]['blockName'] ?? null, 'Last duplicate flex-direction declaration controls row-reverse gate.'); $reviewerLastDisplayResult = $transformHtml('

Copy

'); -$assertSame('core/media-text', $reviewerLastDisplayResult['blocks'][0]['blockName'] ?? null, 'Last display:block declaration makes stale flex column inapplicable.'); +$assertTrue('core/media-text' !== ($reviewerLastDisplayResult['blocks'][0]['blockName'] ?? null), 'Last display:block declaration declines via the mechanism gate, not the stale flex column.'); $reviewerLastDirectionResult = $transformHtml('

Copy

'); $assertSame('core/media-text', $reviewerLastDirectionResult['blocks'][0]['blockName'] ?? null, 'Last flex-direction:row declaration supersedes stale column.'); @@ -864,12 +864,73 @@ static function (string $name, array $attrs, array $innerBlocks, ?DOMElement $so $assertSame('core/gallery', $ambiguousGalleryResult['blocks'][0]['blockName'] ?? null, 'Two media-bearing figure panes remain core/gallery.'); $threeChildrenResult = $transformHtml('

Copy

'); -$assertSame('core/columns', $threeChildrenResult['blocks'][0]['blockName'] ?? null, 'Three-child decline falls through to existing columns path.'); +$assertSame('core/group', $threeChildrenResult['blocks'][0]['blockName'] ?? null, 'Three-child decline falls through to author-owned layout preservation.'); $verticalResult = $transformHtml('

Stacked

'); $assertTrue('core/media-text' !== ($verticalResult['blocks'][0]['blockName'] ?? null), 'Vertical flex decline never emits media-text.'); $assertTrue('core/columns' !== ($verticalResult['blocks'][0]['blockName'] ?? null), 'Vertical flex decline keeps existing columns rejection.'); +// Unresolvable var() on gate properties fails closed instead of converting +// with the default layout. +foreach ( array( + 'display:flex;flex-direction:var(--stack-direction)', + 'display:flex;flex-flow:var(--stack-flow)', + 'display:var(--layout-mode)', + 'display:flex;direction:var(--text-direction)', +) as $unresolvableContainerStyle ) { + $unresolvableContainerResult = $transformHtml('

Copy

'); + $assertTrue('core/media-text' !== ($unresolvableContainerResult['blocks'][0]['blockName'] ?? null), 'Unresolvable container gate value declines: ' . $unresolvableContainerStyle); +} + +$authoredVarDirectionResult = $transformHtml('

Copy

'); +$assertTrue('core/media-text' !== ($authoredVarDirectionResult['blocks'][0]['blockName'] ?? null), 'Stylesheet var() flex-direction declines media-text.'); + +$varOrderResult = $transformHtml('

Copy

'); +$assertTrue('core/media-text' !== ($varOrderResult['blocks'][0]['blockName'] ?? null), 'Unresolvable child order declines media-text.'); + +// Inherited RTL declines even when declared on an ancestor. +$ancestorDirResult = $transformHtml('

Copy

'); +$assertTrue('core/media-text' !== ($ancestorDirResult['blocks'][0]['blockName'] ?? null) && ! str_contains(json_encode($ancestorDirResult['blocks']), 'core\/media-text'), 'Ancestor dir=rtl declines media-text.'); + +$bodyDirectionResult = $transformHtml('

Copy

'); +$assertTrue(! str_contains(json_encode($bodyDirectionResult['blocks']), 'core\/media-text'), 'Inherited body{direction:rtl} declines media-text.'); + +$nearestLtrResult = $transformHtml('

Copy

'); +$assertTrue(str_contains(json_encode($nearestLtrResult['blocks']), 'core\/media-text'), 'Nearest dir=ltr overrides ancestor rtl and converts.'); + +$dirAutoResult = $transformHtml('

Copy

'); +$assertTrue(! str_contains(json_encode($dirAutoResult['blocks']), 'core\/media-text'), 'dir=auto fails closed and declines media-text.'); + +// Floated panes decline instead of converting with DOM-order position. +$floatRightResult = $transformHtml('

Copy

'); +$assertTrue(! str_contains(json_encode($floatRightResult['blocks']), 'core\/media-text'), 'Floated media pane declines media-text.'); + +$authoredFloatResult = $transformHtml('

Copy

'); +$assertTrue(! str_contains(json_encode($authoredFloatResult['blocks']), 'core\/media-text'), 'Stylesheet-floated text pane declines media-text.'); + +// Grid templates that cannot express a mediaWidth decline instead of +// silently rendering 50/50. +foreach ( array( + 'display:grid;grid-template-columns:300px auto', + 'display:grid;grid-template-columns:minmax(200px,1fr) 2fr', + 'display:grid;grid-template-columns:none', + 'display:grid;grid-template-columns:var(--cols)', +) as $inexpressibleGridStyle ) { + $inexpressibleGridResult = $transformHtml('

Copy

'); + $assertTrue(! str_contains(json_encode($inexpressibleGridResult['blocks']), 'core\/media-text'), 'Inexpressible grid template declines: ' . $inexpressibleGridStyle); +} + +$expressibleGridResult = $transformHtml('

Copy

'); +$assertTrue(str_contains(json_encode($expressibleGridResult['blocks']), 'core\/media-text'), 'Percentage grid template still converts.'); + +// A split-implying class with no authored horizontal CSS renders stacked and +// defers to the columns demotion policy instead of fabricating a side pair. +$classOnlySplitResult = $transformHtml('

Fresh Bread Daily

Baked every morning.

Bread
'); +$assertTrue(! str_contains(json_encode($classOnlySplitResult['blocks']), 'core\/media-text'), 'Class-implied split without authored CSS declines media-text.'); + +$classSplitWithCssResult = $transformHtml('

Fresh Bread Daily

Baked every morning.

Bread
'); +$assertTrue(str_contains(json_encode($classSplitWithCssResult['blocks']), 'core\/media-text'), 'Class-implied split with authored grid converts.'); + // Existing wp-block-media-text markup round-trips through same strict gate. $roundTripResult = $transformHtml( '
' diff --git a/php-transformer/tools/visual-parity/tests/fixtures/media-text-source.html b/php-transformer/tools/visual-parity/tests/fixtures/media-text-source.html index dc1f739a..1b20f65d 100644 --- a/php-transformer/tools/visual-parity/tests/fixtures/media-text-source.html +++ b/php-transformer/tools/visual-parity/tests/fixtures/media-text-source.html @@ -74,7 +74,7 @@
- Abstract green and gold landscape + Abstract green and gold gradient

Stories built side by side