From 2f5387ee385390e3d95b4b827e93f887e6bedbf5 Mon Sep 17 00:00:00 2001 From: Chris Huber Date: Tue, 1 Sep 2026 10:01:17 -0400 Subject: [PATCH 01/10] Drive carousel behavior through the Interactivity API --- .../AuthoredCarouselBlockGenerator.php | 125 +++++++++++------- php-transformer/tests/contract/run.php | 5 +- .../tests/unit/authored-carousel-block.php | 6 +- 3 files changed, 87 insertions(+), 49 deletions(-) diff --git a/php-transformer/src/HtmlToBlocks/Generators/AuthoredCarouselBlockGenerator.php b/php-transformer/src/HtmlToBlocks/Generators/AuthoredCarouselBlockGenerator.php index a9892d4d..ecccf3da 100644 --- a/php-transformer/src/HtmlToBlocks/Generators/AuthoredCarouselBlockGenerator.php +++ b/php-transformer/src/HtmlToBlocks/Generators/AuthoredCarouselBlockGenerator.php @@ -43,49 +43,78 @@ function rootProps( attributes ) { } ); } )( window.wp.blocks, window.wp.blockEditor, window.wp.element ); JS; + // The Interactivity API is WordPress's own front-end runtime for blocks, + // so the behavior is declared on the markup and the module carries only + // the state the directives read. $view = <<<'JS' -( function() { - function mount( root ) { - if ( root.dataset.carouselMounted ) return; - var viewport = root.querySelector( '.blocks-engine-authored-carousel__viewport' ); - var track = root.querySelector( '.blocks-engine-authored-carousel__track' ); - var previous = root.querySelector( '[data-carousel-previous]' ); - var next = root.querySelector( '[data-carousel-next]' ); - var status = root.querySelector( '.blocks-engine-authored-carousel__status' ); - if ( ! viewport || ! track || ! previous || ! next ) return; - var slides = Array.prototype.slice.call( track.children ); - if ( slides.length < 2 ) return; - var index = 0; - var wraps = 'false' !== root.dataset.wrap; - var reducedMotion = window.matchMedia && window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches; - function visibleItems() { - var width = slides[ 0 ].getBoundingClientRect().width; - return width > 0 ? Math.max( 1, Math.min( slides.length, Math.round( viewport.clientWidth / width ) ) ) : 1; - } - function maximumIndex() { return Math.max( 0, slides.length - visibleItems() ); } - function update() { - var maximum = maximumIndex(); - index = Math.min( index, maximum ); - previous.disabled = 0 === maximum || ( ! wraps && 0 === index ); - next.disabled = 0 === maximum || ( ! wraps && index === maximum ); - if ( status ) status.textContent = 'Slide ' + ( index + 1 ) + ' of ' + slides.length; - } - function show( requested ) { - var maximum = maximumIndex(); - index = wraps ? ( requested < 0 ? maximum : requested > maximum ? 0 : requested ) : Math.max( 0, Math.min( maximum, requested ) ); - viewport.scrollTo( { left: slides[ index ].offsetLeft, behavior: reducedMotion ? 'auto' : 'smooth' } ); - update(); - } - previous.addEventListener( 'click', function() { show( index - 1 ); } ); - next.addEventListener( 'click', function() { show( index + 1 ); } ); - viewport.addEventListener( 'keydown', function( event ) { if ( 'ArrowLeft' === event.key || 'ArrowRight' === event.key ) { event.preventDefault(); show( index + ( 'ArrowLeft' === event.key ? -1 : 1 ) ); } } ); - if ( window.ResizeObserver ) new ResizeObserver( update ).observe( viewport ); - root.dataset.carouselMounted = 'true'; - update(); +import { store, getContext, getElement } from '@wordpress/interactivity'; + +const slidesOf = ( ref ) => Array.from( ref.querySelectorAll( '.blocks-engine-authored-carousel__track > *' ) ); + +const visibleCount = ( ref ) => { + const viewport = ref.querySelector( '.blocks-engine-authored-carousel__viewport' ); + const slides = slidesOf( ref ); + if ( ! viewport || 0 === slides.length ) { + return 1; } - function mountAll() { document.querySelectorAll( '.blocks-engine-authored-carousel' ).forEach( mount ); } - if ( 'loading' === document.readyState ) document.addEventListener( 'DOMContentLoaded', mountAll ); else mountAll(); -} )(); + const width = slides[ 0 ].getBoundingClientRect().width; + return width > 0 ? Math.max( 1, Math.min( slides.length, Math.round( viewport.clientWidth / width ) ) ) : 1; +}; + +const maximumIndex = ( ref ) => Math.max( 0, slidesOf( ref ).length - visibleCount( ref ) ); + +const show = ( requested ) => { + const context = getContext(); + const { ref } = getElement(); + const maximum = maximumIndex( ref ); + context.index = context.wrap + ? ( requested < 0 ? maximum : requested > maximum ? 0 : requested ) + : Math.max( 0, Math.min( maximum, requested ) ); + const viewport = ref.querySelector( '.blocks-engine-authored-carousel__viewport' ); + const slide = slidesOf( ref )[ context.index ]; + if ( viewport && slide ) { + viewport.scrollTo( { + left: slide.offsetLeft, + behavior: window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches ? 'auto' : 'smooth', + } ); + } +}; + +store( 'blocks-engine/carousel', { + state: { + get atStart() { + const context = getContext(); + const { ref } = getElement(); + return 0 === maximumIndex( ref ) || ( ! context.wrap && 0 === context.index ); + }, + get atEnd() { + const context = getContext(); + const { ref } = getElement(); + const maximum = maximumIndex( ref ); + return 0 === maximum || ( ! context.wrap && context.index === maximum ); + }, + get statusText() { + const context = getContext(); + const { ref } = getElement(); + return 'Slide ' + ( context.index + 1 ) + ' of ' + slidesOf( ref ).length; + }, + }, + actions: { + previous() { + show( getContext().index - 1 ); + }, + next() { + show( getContext().index + 1 ); + }, + keydown( event ) { + if ( 'ArrowLeft' !== event.key && 'ArrowRight' !== event.key ) { + return; + } + event.preventDefault(); + show( getContext().index + ( 'ArrowLeft' === event.key ? -1 : 1 ) ); + }, + }, +} ); JS; $style = '.blocks-engine-authored-carousel{--blocks-engine-carousel-gap:1rem;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--blocks-engine-carousel-gap);align-items:center;max-width:100%;min-width:0}.blocks-engine-authored-carousel__viewport{min-width:0;overflow:hidden;scroll-behavior:smooth}.blocks-engine-authored-carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3rem)/4);gap:var(--blocks-engine-carousel-gap)}.blocks-engine-authored-carousel--items-1 .blocks-engine-authored-carousel__track{grid-auto-columns:100%}.blocks-engine-authored-carousel--items-2 .blocks-engine-authored-carousel__track{grid-auto-columns:calc((100% - 1rem)/2)}.blocks-engine-authored-carousel--items-3 .blocks-engine-authored-carousel__track{grid-auto-columns:calc((100% - 2rem)/3)}.blocks-engine-authored-carousel--items-5 .blocks-engine-authored-carousel__track{grid-auto-columns:calc((100% - 4rem)/5)}.blocks-engine-authored-carousel--items-6 .blocks-engine-authored-carousel__track{grid-auto-columns:calc((100% - 5rem)/6)}.blocks-engine-authored-carousel__track>*{box-sizing:border-box;min-width:0;margin:0}.blocks-engine-authored-carousel__track>.wp-block-image img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:inherit}.blocks-engine-authored-carousel__previous,.blocks-engine-authored-carousel__next{cursor:pointer}.blocks-engine-authored-carousel__previous:disabled,.blocks-engine-authored-carousel__next:disabled{cursor:default;opacity:.45}.blocks-engine-authored-carousel__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:900px){.blocks-engine-authored-carousel .blocks-engine-authored-carousel__track{grid-auto-columns:calc((100% - 1rem)/2)}}@media(max-width:600px){.blocks-engine-authored-carousel .blocks-engine-authored-carousel__track{grid-auto-columns:100%}}@media(prefers-reduced-motion:reduce){.blocks-engine-authored-carousel__viewport{scroll-behavior:auto}}'; @@ -98,10 +127,10 @@ function mountAll() { document.querySelectorAll( '.blocks-engine-authored-carous 'category' => 'media', 'description' => 'An editable carousel with bounded previous and next navigation.', 'editorScript' => 'file:./index.js', - 'viewScript' => 'file:./view.js', + 'viewScriptModule' => 'file:./view.js', 'style' => 'file:./style.css', 'attributes' => $attributes, - 'supports' => array('html' => false, 'customClassName' => false), + 'supports' => array('html' => false, 'customClassName' => false, 'interactivity' => true), ), 'assets' => array( 'index.js' => str_replace(array('__BLOCK_NAME__', '__ATTRIBUTES__'), array($blockName, json_encode($attributes, JSON_THROW_ON_ERROR | JSON_UNESCAPED_SLASHES)), $editor), @@ -119,9 +148,15 @@ public function shell(array $attributes): array $items = min(6, max(1, (int) ($attributes['itemsPerView'] ?? 4))); $wrap = false === ($attributes['wrap'] ?? true) ? 'false' : 'true'; + $context = htmlspecialchars( + (string) json_encode(array('index' => 0, 'wrap' => 'true' === $wrap), JSON_THROW_ON_ERROR | JSON_UNESCAPED_SLASHES), + ENT_QUOTES | ENT_SUBSTITUTE, + 'UTF-8' + ); + return array( - 'opening' => '
', - 'closing' => '
', + 'opening' => '
', + 'closing' => '
', ); } } diff --git a/php-transformer/tests/contract/run.php b/php-transformer/tests/contract/run.php index b0bdb5f9..ccdd9e39 100644 --- a/php-transformer/tests/contract/run.php +++ b/php-transformer/tests/contract/run.php @@ -230,8 +230,9 @@ function serialize_blocks(array $blocks): string $assert( 1 === count($carouselDefinitions) && 'authored-carousel' === ($carouselDefinitions[0]['name'] ?? null) - && 'file:./view.js' === ($carouselDefinitions[0]['block_json']['viewScript'] ?? null) - && str_contains((string) ($carouselDefinitions[0]['view_js'] ?? ''), 'data-carousel-next') + && 'file:./view.js' === ($carouselDefinitions[0]['block_json']['viewScriptModule'] ?? null) + && true === ($carouselDefinitions[0]['block_json']['supports']['interactivity'] ?? null) + && str_contains((string) ($carouselDefinitions[0]['view_js'] ?? ''), "store( 'blocks-engine/carousel'") && isset($carouselDefinitions[0]['assets']['style.css']), 'bounded carousel projection carries one generic editor block with scoped frontend behavior' ); diff --git a/php-transformer/tests/unit/authored-carousel-block.php b/php-transformer/tests/unit/authored-carousel-block.php index aa32b450..fefaa1c0 100644 --- a/php-transformer/tests/unit/authored-carousel-block.php +++ b/php-transformer/tests/unit/authored-carousel-block.php @@ -30,18 +30,20 @@ $editor = (string) ($definition['assets']['index.js'] ?? ''); $view = (string) ($definition['view_js'] ?? ''); $style = (string) ($definition['assets']['style.css'] ?? ''); -$assert('file:./view.js' === ($definition['block_json']['viewScript'] ?? null) && str_contains($editor, 'InnerBlocks.Content'), 'the companion carries one editable parent block and a scoped frontend script'); +$assert('file:./view.js' === ($definition['block_json']['viewScriptModule'] ?? null) && true === ($definition['block_json']['supports']['interactivity'] ?? null) && ! isset($definition['block_json']['viewScript']) && str_contains($editor, 'InnerBlocks.Content'), 'the companion carries one editable parent block and declares its behavior through the Interactivity API'); +$assert(str_contains($view, "from '@wordpress/interactivity'") && str_contains($view, "store( 'blocks-engine/carousel'"), 'frontend behavior is a script module built on the WordPress Interactivity API'); $assert(str_contains($view, "'ArrowLeft'") && str_contains($view, "'ArrowRight'") && str_contains($view, 'requested > maximum ? 0'), 'frontend behavior supports keyboard navigation and deterministic wrapping'); $assert(str_contains($style, 'grid-auto-flow:column') && str_contains($style, '@media(max-width:600px)') && str_contains($style, 'prefers-reduced-motion:reduce'), 'carousel layout is bounded and responsive with reduced-motion handling'); $shell = (new AuthoredCarouselBlockGenerator())->shell(array('ariaLabel' => 'Care & ', 'itemsPerView' => 99, 'wrap' => false)); $shellMarkup = $shell['opening'] . $shell['closing']; $assert(str_contains($shellMarkup, 'aria-label="Care & <support>"') && str_contains($shellMarkup, '--items-6') && str_contains($shellMarkup, 'data-wrap="false"'), 'shell attributes are escaped and bounded'); +$assert(str_contains($shellMarkup, 'data-wp-interactive="blocks-engine/carousel"') && str_contains($shellMarkup, 'data-wp-context="{"index":0,"wrap":false}"') && str_contains($shellMarkup, 'data-wp-on--click="actions.next"') && str_contains($shellMarkup, 'data-wp-bind--disabled="state.atEnd"'), 'the shell declares its behavior through Interactivity API directives'); $payload = (new CompanionPluginPayload())->fromBlockTypes(array(), array(), array(), array($definition)); $payloadBlock = $payload['blocks'][0] ?? array(); $assert(CompanionPluginPayload::SCHEMA === ($payload['schema'] ?? null) && 'authored-carousel' === ($payloadBlock['name'] ?? null), 'the generated carousel uses the established companion-plugin payload'); -$assert(isset($payloadBlock['assets']['index.js'], $payloadBlock['assets']['style.css']) && str_contains((string) ($payloadBlock['view_js'] ?? ''), 'data-carousel-next'), 'the companion payload carries editor, style, and frontend behavior assets'); +$assert(isset($payloadBlock['assets']['index.js'], $payloadBlock['assets']['style.css']) && str_contains((string) ($payloadBlock['view_js'] ?? ''), "store( 'blocks-engine/carousel'"), 'the companion payload carries editor, style, and frontend behavior assets'); $assert(!isset($payloadBlock['render'], $payloadBlock['renderer'], $payloadBlock['block_json']['render']), 'the carousel needs no executable PHP renderer'); $customHost = (new HtmlTransformer())->transform('
')->toArray(); From b174f96948a8885be917a6e547baade4a9b41db1 Mon Sep 17 00:00:00 2001 From: Chris Huber Date: Tue, 1 Sep 2026 10:25:00 -0400 Subject: [PATCH 02/10] Declare the view module import in the companion payload --- .../src/ArtifactCompiler/CompanionPluginPayload.php | 13 +++++++++++-- .../Generators/AuthoredCarouselBlockGenerator.php | 5 ++++- .../tests/unit/authored-carousel-block.php | 1 + 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/php-transformer/src/ArtifactCompiler/CompanionPluginPayload.php b/php-transformer/src/ArtifactCompiler/CompanionPluginPayload.php index 389291c3..c16f2ecb 100644 --- a/php-transformer/src/ArtifactCompiler/CompanionPluginPayload.php +++ b/php-transformer/src/ArtifactCompiler/CompanionPluginPayload.php @@ -203,7 +203,13 @@ private function normalizeGeneratedBlock(array $block): array if ( is_array($block['assets'] ?? null) && array() !== $block['assets'] ) { $normalized['assets'] = $block['assets']; } - $scriptDependencies = $this->normalizeScriptDependencies($block['script_dependencies'] ?? null, $normalized['assets'] ?? array()); + // The view module is carried in its own slot and lands as `view.js` + // beside the declared assets, so it can be depended on by that name. + $dependencyAssets = $normalized['assets'] ?? array(); + if ( isset($normalized['view_js']) ) { + $dependencyAssets['view.js'] = $normalized['view_js']; + } + $scriptDependencies = $this->normalizeScriptDependencies($block['script_dependencies'] ?? null, $dependencyAssets); if ( array() !== $scriptDependencies ) { $normalized['script_dependencies'] = $scriptDependencies; } @@ -232,7 +238,10 @@ private function normalizeScriptDependencies(mixed $dependencies, array $assets) $validHandles = array(); foreach ( $handles as $handle ) { - if ( ! is_string($handle) || 1 !== preg_match('/^[A-Za-z0-9_-]+$/', $handle) || isset($validHandles[$handle]) ) { + // A classic script states a handle; a script module states its + // import specifier, which is how `@wordpress/interactivity` + // reaches the generated asset manifest. + if ( ! is_string($handle) || 1 !== preg_match('#^(?:@[a-z0-9][a-z0-9._-]*/)?[A-Za-z0-9][A-Za-z0-9._-]*$#', $handle) || isset($validHandles[$handle]) ) { continue; } $validHandles[$handle] = true; diff --git a/php-transformer/src/HtmlToBlocks/Generators/AuthoredCarouselBlockGenerator.php b/php-transformer/src/HtmlToBlocks/Generators/AuthoredCarouselBlockGenerator.php index ecccf3da..1a5ed551 100644 --- a/php-transformer/src/HtmlToBlocks/Generators/AuthoredCarouselBlockGenerator.php +++ b/php-transformer/src/HtmlToBlocks/Generators/AuthoredCarouselBlockGenerator.php @@ -137,7 +137,10 @@ function rootProps( attributes ) { 'style.css' => $style, ), 'view_js' => $view, - 'script_dependencies' => array('index.js' => array('wp-blocks', 'wp-block-editor', 'wp-element')), + 'script_dependencies' => array( + 'index.js' => array('wp-blocks', 'wp-block-editor', 'wp-element'), + 'view.js' => array('@wordpress/interactivity'), + ), ); } diff --git a/php-transformer/tests/unit/authored-carousel-block.php b/php-transformer/tests/unit/authored-carousel-block.php index fefaa1c0..16368439 100644 --- a/php-transformer/tests/unit/authored-carousel-block.php +++ b/php-transformer/tests/unit/authored-carousel-block.php @@ -43,6 +43,7 @@ $payload = (new CompanionPluginPayload())->fromBlockTypes(array(), array(), array(), array($definition)); $payloadBlock = $payload['blocks'][0] ?? array(); $assert(CompanionPluginPayload::SCHEMA === ($payload['schema'] ?? null) && 'authored-carousel' === ($payloadBlock['name'] ?? null), 'the generated carousel uses the established companion-plugin payload'); +$assert(array('@wordpress/interactivity') === ($payloadBlock['script_dependencies']['view.js'] ?? null), 'the view module declares the Interactivity API import so the generated asset manifest resolves it'); $assert(isset($payloadBlock['assets']['index.js'], $payloadBlock['assets']['style.css']) && str_contains((string) ($payloadBlock['view_js'] ?? ''), "store( 'blocks-engine/carousel'"), 'the companion payload carries editor, style, and frontend behavior assets'); $assert(!isset($payloadBlock['render'], $payloadBlock['renderer'], $payloadBlock['block_json']['render']), 'the carousel needs no executable PHP renderer'); From afd92ce9f1bf9966e37659970171ea8973407e3b Mon Sep 17 00:00:00 2001 From: Chris Huber Date: Tue, 1 Sep 2026 11:37:42 -0400 Subject: [PATCH 03/10] Recognize camel-cased carousel identities --- .../HtmlToBlocks/Classification/SourceElementClassifier.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/php-transformer/src/HtmlToBlocks/Classification/SourceElementClassifier.php b/php-transformer/src/HtmlToBlocks/Classification/SourceElementClassifier.php index e0d58f55..3d5c8d4d 100644 --- a/php-transformer/src/HtmlToBlocks/Classification/SourceElementClassifier.php +++ b/php-transformer/src/HtmlToBlocks/Classification/SourceElementClassifier.php @@ -482,14 +482,14 @@ public function hasCapturedMediaContent(DOMElement $element): bool public function hasCarouselIdentity(DOMElement $element): bool { - $identity = strtolower(implode(' ', array( + $identity = strtolower((string) preg_replace(array('/([a-z0-9])([A-Z])/', '/([A-Z]+)([A-Z][a-z])/'), array('$1 $2', '$1 $2'), implode(' ', array( $element->tagName, SourceDom::attr($element, 'id'), SourceDom::attr($element, 'class'), SourceDom::attr($element, 'role'), SourceDom::attr($element, 'data-hook'), SourceDom::attr($element, 'data-testid'), - ))); + )))); return 1 === preg_match('/(?:^|[^a-z0-9])(?:carousel|gallery|slider|slideshow)(?:[^a-z0-9]|$)/', $identity); } From 4a18a5146ef5a9853ebe2bee5fe88b562f94f451 Mon Sep 17 00:00:00 2001 From: Chris Huber Date: Tue, 1 Sep 2026 11:01:58 -0400 Subject: [PATCH 04/10] Initialize carousel state from its interactive root --- .../AuthoredCarouselBlockGenerator.php | 33 ++++++++++++------- .../tests/unit/authored-carousel-block.php | 2 +- 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/php-transformer/src/HtmlToBlocks/Generators/AuthoredCarouselBlockGenerator.php b/php-transformer/src/HtmlToBlocks/Generators/AuthoredCarouselBlockGenerator.php index 1a5ed551..97b842e2 100644 --- a/php-transformer/src/HtmlToBlocks/Generators/AuthoredCarouselBlockGenerator.php +++ b/php-transformer/src/HtmlToBlocks/Generators/AuthoredCarouselBlockGenerator.php @@ -51,6 +51,8 @@ function rootProps( attributes ) { const slidesOf = ( ref ) => Array.from( ref.querySelectorAll( '.blocks-engine-authored-carousel__track > *' ) ); +const rootOf = ( ref ) => ref.closest( '.blocks-engine-authored-carousel' ); + const visibleCount = ( ref ) => { const viewport = ref.querySelector( '.blocks-engine-authored-carousel__viewport' ); const slides = slidesOf( ref ); @@ -61,17 +63,21 @@ function rootProps( attributes ) { return width > 0 ? Math.max( 1, Math.min( slides.length, Math.round( viewport.clientWidth / width ) ) ) : 1; }; -const maximumIndex = ( ref ) => Math.max( 0, slidesOf( ref ).length - visibleCount( ref ) ); +const maximumIndex = ( context ) => Math.max( 0, context.count - context.visible ); const show = ( requested ) => { const context = getContext(); const { ref } = getElement(); - const maximum = maximumIndex( ref ); + const root = rootOf( ref ); + if ( ! root ) { + return; + } + const maximum = maximumIndex( context ); context.index = context.wrap ? ( requested < 0 ? maximum : requested > maximum ? 0 : requested ) : Math.max( 0, Math.min( maximum, requested ) ); - const viewport = ref.querySelector( '.blocks-engine-authored-carousel__viewport' ); - const slide = slidesOf( ref )[ context.index ]; + const viewport = root.querySelector( '.blocks-engine-authored-carousel__viewport' ); + const slide = slidesOf( root )[ context.index ]; if ( viewport && slide ) { viewport.scrollTo( { left: slide.offsetLeft, @@ -84,19 +90,24 @@ function rootProps( attributes ) { state: { get atStart() { const context = getContext(); - const { ref } = getElement(); - return 0 === maximumIndex( ref ) || ( ! context.wrap && 0 === context.index ); + return 0 === maximumIndex( context ) || ( ! context.wrap && 0 === context.index ); }, get atEnd() { const context = getContext(); - const { ref } = getElement(); - const maximum = maximumIndex( ref ); + const maximum = maximumIndex( context ); return 0 === maximum || ( ! context.wrap && context.index === maximum ); }, get statusText() { + const context = getContext(); + return 'Slide ' + ( context.index + 1 ) + ' of ' + context.count; + }, + }, + callbacks: { + init() { const context = getContext(); const { ref } = getElement(); - return 'Slide ' + ( context.index + 1 ) + ' of ' + slidesOf( ref ).length; + context.count = slidesOf( ref ).length; + context.visible = visibleCount( ref ); }, }, actions: { @@ -152,13 +163,13 @@ public function shell(array $attributes): array $wrap = false === ($attributes['wrap'] ?? true) ? 'false' : 'true'; $context = htmlspecialchars( - (string) json_encode(array('index' => 0, 'wrap' => 'true' === $wrap), JSON_THROW_ON_ERROR | JSON_UNESCAPED_SLASHES), + (string) json_encode(array('index' => 0, 'wrap' => 'true' === $wrap, 'count' => 0, 'visible' => $items), JSON_THROW_ON_ERROR | JSON_UNESCAPED_SLASHES), ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8' ); return array( - 'opening' => '
', + 'opening' => '
', 'closing' => '
', ); } diff --git a/php-transformer/tests/unit/authored-carousel-block.php b/php-transformer/tests/unit/authored-carousel-block.php index 16368439..c3a0f7fc 100644 --- a/php-transformer/tests/unit/authored-carousel-block.php +++ b/php-transformer/tests/unit/authored-carousel-block.php @@ -38,7 +38,7 @@ $shell = (new AuthoredCarouselBlockGenerator())->shell(array('ariaLabel' => 'Care & ', 'itemsPerView' => 99, 'wrap' => false)); $shellMarkup = $shell['opening'] . $shell['closing']; $assert(str_contains($shellMarkup, 'aria-label="Care & <support>"') && str_contains($shellMarkup, '--items-6') && str_contains($shellMarkup, 'data-wrap="false"'), 'shell attributes are escaped and bounded'); -$assert(str_contains($shellMarkup, 'data-wp-interactive="blocks-engine/carousel"') && str_contains($shellMarkup, 'data-wp-context="{"index":0,"wrap":false}"') && str_contains($shellMarkup, 'data-wp-on--click="actions.next"') && str_contains($shellMarkup, 'data-wp-bind--disabled="state.atEnd"'), 'the shell declares its behavior through Interactivity API directives'); +$assert(str_contains($shellMarkup, 'data-wp-interactive="blocks-engine/carousel"') && str_contains($shellMarkup, 'data-wp-context="{"index":0,"wrap":false,"count":0,"visible":6}"') && str_contains($shellMarkup, 'data-wp-init="callbacks.init"') && str_contains($shellMarkup, 'data-wp-on--click="actions.next"') && str_contains($shellMarkup, 'data-wp-bind--disabled="state.atEnd"'), 'the shell declares its behavior through Interactivity API directives'); $payload = (new CompanionPluginPayload())->fromBlockTypes(array(), array(), array(), array($definition)); $payloadBlock = $payload['blocks'][0] ?? array(); From a3f63b120bef627949d03d9e60be05def593dd90 Mon Sep 17 00:00:00 2001 From: Chris Huber Date: Tue, 1 Sep 2026 11:27:10 -0400 Subject: [PATCH 05/10] Extend authored carousels with slideshow presentation --- .../AuthoredCarouselBlockGenerator.php | 99 +++++++++++++++++-- .../src/HtmlToBlocks/HtmlTransformer.php | 67 ++++++++++++- .../tests/unit/authored-carousel-block.php | 11 ++- 3 files changed, 165 insertions(+), 12 deletions(-) diff --git a/php-transformer/src/HtmlToBlocks/Generators/AuthoredCarouselBlockGenerator.php b/php-transformer/src/HtmlToBlocks/Generators/AuthoredCarouselBlockGenerator.php index 97b842e2..619ac20a 100644 --- a/php-transformer/src/HtmlToBlocks/Generators/AuthoredCarouselBlockGenerator.php +++ b/php-transformer/src/HtmlToBlocks/Generators/AuthoredCarouselBlockGenerator.php @@ -16,15 +16,26 @@ public function definition(string $namespace): array 'ariaLabel' => array('type' => 'string', 'default' => 'Carousel'), 'itemsPerView' => array('type' => 'number', 'default' => 4), 'wrap' => array('type' => 'boolean', 'default' => true), + 'presentation' => array('type' => 'string', 'default' => 'track'), + 'slideCount' => array('type' => 'number', 'default' => 0), + 'initialSlide' => array('type' => 'number', 'default' => 0), + 'viewportHeight' => array('type' => 'number', 'default' => 0), + 'transitionDuration' => array('type' => 'number', 'default' => 300), + 'autoplayInterval' => array('type' => 'number', 'default' => 0), + 'showDots' => array('type' => 'boolean', 'default' => false), + 'fullBleed' => array('type' => 'boolean', 'default' => false), ); $editor = <<<'JS' ( function( blocks, blockEditor, element ) { var createElement = element.createElement; var InnerBlocks = blockEditor.InnerBlocks; function normalizedItems( value ) { value = Math.round( Number( value ) || 4 ); return Math.min( 6, Math.max( 1, value ) ); } + function normalizedCount( value ) { return Math.max( 0, Math.round( Number( value ) || 0 ) ); } function rootProps( attributes ) { var items = normalizedItems( attributes.itemsPerView ); - return { className: 'blocks-engine-authored-carousel blocks-engine-authored-carousel--items-' + items, role: 'region', 'aria-label': attributes.ariaLabel || 'Carousel', 'aria-roledescription': 'carousel', 'data-wrap': false === attributes.wrap ? 'false' : 'true' }; + var presentation = 'slideshow' === attributes.presentation ? 'slideshow' : 'track'; + var initial = Math.min( Math.max( 0, Math.round( Number( attributes.initialSlide ) || 0 ) ), Math.max( 0, normalizedCount( attributes.slideCount ) - 1 ) ); + return { className: 'blocks-engine-authored-carousel blocks-engine-authored-carousel--items-' + items + ' blocks-engine-authored-carousel--' + presentation + ( attributes.fullBleed ? ' blocks-engine-authored-carousel--full-bleed' : '' ), style: attributes.viewportHeight > 0 ? { '--blocks-engine-carousel-height': Math.round( attributes.viewportHeight ) + 'px', '--blocks-engine-carousel-transition': Math.max( 0, Math.round( Number( attributes.transitionDuration ) || 0 ) ) + 'ms' } : undefined, role: 'region', 'aria-label': attributes.ariaLabel || 'Carousel', 'aria-roledescription': 'carousel', 'data-wrap': false === attributes.wrap ? 'false' : 'true', 'data-wp-interactive': 'blocks-engine/carousel', 'data-wp-context': JSON.stringify( { index: initial, wrap: false !== attributes.wrap, count: 0, visible: items, presentation: presentation, autoplayInterval: Math.max( 0, Math.round( Number( attributes.autoplayInterval ) || 0 ) ), paused: false } ), 'data-wp-init': 'callbacks.init', 'data-wp-on--mouseenter': 'actions.pause', 'data-wp-on--mouseleave': 'actions.resume', 'data-wp-on--focusin': 'actions.pause', 'data-wp-on--focusout': 'actions.resume' }; } blocks.registerBlockType( '__BLOCK_NAME__', { attributes: __ATTRIBUTES__, @@ -33,11 +44,14 @@ function rootProps( attributes ) { return createElement( 'div', { className: 'blocks-engine-authored-carousel-editor' }, createElement( 'strong', null, props.attributes.ariaLabel || 'Carousel' ), createElement( InnerBlocks, { allowedBlocks: [ 'core/image', 'core/group' ], renderAppender: InnerBlocks.ButtonBlockAppender } ) ); }, save: function( props ) { + var dotCount = props.attributes.showDots ? normalizedCount( props.attributes.slideCount ) : 0; + var dots = Array.from( { length: dotCount }, function( _, index ) { return createElement( 'button', { key: index, type: 'button', className: 'blocks-engine-authored-carousel__dot', 'aria-label': 'Show slide ' + ( index + 1 ), 'data-carousel-index': String( index ), 'data-wp-on--click': 'actions.goTo' } ); } ); return createElement( 'div', rootProps( props.attributes ), - createElement( 'button', { type: 'button', className: 'blocks-engine-authored-carousel__previous', 'data-carousel-previous': 'true' }, 'Previous' ), - createElement( 'div', { className: 'blocks-engine-authored-carousel__viewport', tabIndex: 0 }, createElement( 'div', { className: 'blocks-engine-authored-carousel__track' }, createElement( InnerBlocks.Content ) ) ), - createElement( 'button', { type: 'button', className: 'blocks-engine-authored-carousel__next', 'data-carousel-next': 'true' }, 'Next' ), - createElement( 'span', { className: 'blocks-engine-authored-carousel__status', 'aria-live': 'polite', 'aria-atomic': 'true' } ) + createElement( 'button', { type: 'button', className: 'blocks-engine-authored-carousel__previous', 'data-carousel-previous': 'true', 'data-wp-on--click': 'actions.previous', 'data-wp-bind--disabled': 'state.atStart' }, 'Previous' ), + createElement( 'div', { className: 'blocks-engine-authored-carousel__viewport', tabIndex: 0, 'data-wp-on--keydown': 'actions.keydown' }, createElement( 'div', { className: 'blocks-engine-authored-carousel__track' }, createElement( InnerBlocks.Content ) ) ), + createElement( 'button', { type: 'button', className: 'blocks-engine-authored-carousel__next', 'data-carousel-next': 'true', 'data-wp-on--click': 'actions.next', 'data-wp-bind--disabled': 'state.atEnd' }, 'Next' ), + dotCount > 0 ? createElement( 'div', { className: 'blocks-engine-authored-carousel__dots', role: 'group', 'aria-label': 'Choose slide' }, dots ) : null, + createElement( 'span', { className: 'blocks-engine-authored-carousel__status', 'aria-live': 'polite', 'aria-atomic': 'true', 'data-wp-text': 'state.statusText' } ) ); } } ); @@ -47,7 +61,7 @@ function rootProps( attributes ) { // so the behavior is declared on the markup and the module carries only // the state the directives read. $view = <<<'JS' -import { store, getContext, getElement } from '@wordpress/interactivity'; +import { store, getContext, getElement, withScope } from '@wordpress/interactivity'; const slidesOf = ( ref ) => Array.from( ref.querySelectorAll( '.blocks-engine-authored-carousel__track > *' ) ); @@ -65,6 +79,26 @@ function rootProps( attributes ) { const maximumIndex = ( context ) => Math.max( 0, context.count - context.visible ); +const syncSlideshow = ( root, context ) => { + if ( 'slideshow' !== context.presentation ) { + return; + } + slidesOf( root ).forEach( ( slide, index ) => { + const active = index === context.index; + slide.classList.toggle( 'blocks-engine-authored-carousel__slide--active', active ); + slide.setAttribute( 'aria-hidden', active ? 'false' : 'true' ); + slide.toggleAttribute( 'inert', ! active ); + } ); + root.querySelectorAll( '.blocks-engine-authored-carousel__dot' ).forEach( ( dot, index ) => { + dot.classList.toggle( 'blocks-engine-authored-carousel__dot--active', index === context.index ); + if ( index === context.index ) { + dot.setAttribute( 'aria-current', 'true' ); + } else { + dot.removeAttribute( 'aria-current' ); + } + } ); +}; + const show = ( requested ) => { const context = getContext(); const { ref } = getElement(); @@ -76,6 +110,10 @@ function rootProps( attributes ) { context.index = context.wrap ? ( requested < 0 ? maximum : requested > maximum ? 0 : requested ) : Math.max( 0, Math.min( maximum, requested ) ); + syncSlideshow( root, context ); + if ( 'slideshow' === context.presentation ) { + return; + } const viewport = root.querySelector( '.blocks-engine-authored-carousel__viewport' ); const slide = slidesOf( root )[ context.index ]; if ( viewport && slide ) { @@ -107,7 +145,19 @@ function rootProps( attributes ) { const context = getContext(); const { ref } = getElement(); context.count = slidesOf( ref ).length; - context.visible = visibleCount( ref ); + context.visible = 'slideshow' === context.presentation ? 1 : visibleCount( ref ); + context.index = Math.min( context.index, maximumIndex( context ) ); + syncSlideshow( ref, context ); + if ( 'slideshow' !== context.presentation || context.autoplayInterval <= 0 || context.count < 2 || window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches ) { + return; + } + const advance = withScope( () => { + if ( ! context.paused ) { + show( context.index + 1 ); + } + } ); + const timer = window.setInterval( advance, context.autoplayInterval ); + return () => window.clearInterval( timer ); }, }, actions: { @@ -117,6 +167,15 @@ function rootProps( attributes ) { next() { show( getContext().index + 1 ); }, + goTo( event ) { + show( Number( event.currentTarget.dataset.carouselIndex ) || 0 ); + }, + pause() { + getContext().paused = true; + }, + resume() { + getContext().paused = false; + }, keydown( event ) { if ( 'ArrowLeft' !== event.key && 'ArrowRight' !== event.key ) { return; @@ -128,6 +187,7 @@ function rootProps( attributes ) { } ); JS; $style = '.blocks-engine-authored-carousel{--blocks-engine-carousel-gap:1rem;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--blocks-engine-carousel-gap);align-items:center;max-width:100%;min-width:0}.blocks-engine-authored-carousel__viewport{min-width:0;overflow:hidden;scroll-behavior:smooth}.blocks-engine-authored-carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3rem)/4);gap:var(--blocks-engine-carousel-gap)}.blocks-engine-authored-carousel--items-1 .blocks-engine-authored-carousel__track{grid-auto-columns:100%}.blocks-engine-authored-carousel--items-2 .blocks-engine-authored-carousel__track{grid-auto-columns:calc((100% - 1rem)/2)}.blocks-engine-authored-carousel--items-3 .blocks-engine-authored-carousel__track{grid-auto-columns:calc((100% - 2rem)/3)}.blocks-engine-authored-carousel--items-5 .blocks-engine-authored-carousel__track{grid-auto-columns:calc((100% - 4rem)/5)}.blocks-engine-authored-carousel--items-6 .blocks-engine-authored-carousel__track{grid-auto-columns:calc((100% - 5rem)/6)}.blocks-engine-authored-carousel__track>*{box-sizing:border-box;min-width:0;margin:0}.blocks-engine-authored-carousel__track>.wp-block-image img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:inherit}.blocks-engine-authored-carousel__previous,.blocks-engine-authored-carousel__next{cursor:pointer}.blocks-engine-authored-carousel__previous:disabled,.blocks-engine-authored-carousel__next:disabled{cursor:default;opacity:.45}.blocks-engine-authored-carousel__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:900px){.blocks-engine-authored-carousel .blocks-engine-authored-carousel__track{grid-auto-columns:calc((100% - 1rem)/2)}}@media(max-width:600px){.blocks-engine-authored-carousel .blocks-engine-authored-carousel__track{grid-auto-columns:100%}}@media(prefers-reduced-motion:reduce){.blocks-engine-authored-carousel__viewport{scroll-behavior:auto}}'; + $style .= '.blocks-engine-authored-carousel--full-bleed{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}.blocks-engine-authored-carousel--slideshow{position:relative;display:block;gap:0}.blocks-engine-authored-carousel--slideshow .blocks-engine-authored-carousel__viewport,.blocks-engine-authored-carousel--slideshow .blocks-engine-authored-carousel__track{height:var(--blocks-engine-carousel-height);width:100%}.blocks-engine-authored-carousel--slideshow .blocks-engine-authored-carousel__track{position:relative;display:block}.blocks-engine-authored-carousel--slideshow .blocks-engine-authored-carousel__track>*{position:absolute;inset:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:opacity var(--blocks-engine-carousel-transition,300ms) ease,visibility var(--blocks-engine-carousel-transition,300ms) ease}.blocks-engine-authored-carousel--slideshow .blocks-engine-authored-carousel__track>.blocks-engine-authored-carousel__slide--active{opacity:1;visibility:visible;z-index:1}.blocks-engine-authored-carousel--slideshow .blocks-engine-authored-carousel__track>.wp-block-image img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}.blocks-engine-authored-carousel--slideshow .blocks-engine-authored-carousel__previous,.blocks-engine-authored-carousel--slideshow .blocks-engine-authored-carousel__next{position:absolute;top:50%;z-index:3;width:3rem;height:3rem;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.32);color:#fff;font-size:0;transform:translateY(-50%)}.blocks-engine-authored-carousel--slideshow .blocks-engine-authored-carousel__previous{left:1rem}.blocks-engine-authored-carousel--slideshow .blocks-engine-authored-carousel__next{right:1rem}.blocks-engine-authored-carousel--slideshow .blocks-engine-authored-carousel__previous::before,.blocks-engine-authored-carousel--slideshow .blocks-engine-authored-carousel__next::before{display:block;font-size:2rem;line-height:1;content:"\\2039"}.blocks-engine-authored-carousel--slideshow .blocks-engine-authored-carousel__next::before{content:"\\203a"}.blocks-engine-authored-carousel__dots{position:absolute;right:0;bottom:1.25rem;left:0;z-index:3;display:flex;justify-content:center;gap:.65rem}.blocks-engine-authored-carousel__dot{width:.75rem;height:.75rem;padding:0;border:1px solid currentColor;border-radius:50%;background:transparent;color:#fff;cursor:pointer}.blocks-engine-authored-carousel__dot--active{background:currentColor}@media(prefers-reduced-motion:reduce){.blocks-engine-authored-carousel--slideshow .blocks-engine-authored-carousel__track>*{transition:none}}'; return array( 'name' => self::LOCAL_NAME, @@ -161,16 +221,35 @@ public function shell(array $attributes): array $label = htmlspecialchars((string) ($attributes['ariaLabel'] ?? 'Carousel'), ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8'); $items = min(6, max(1, (int) ($attributes['itemsPerView'] ?? 4))); $wrap = false === ($attributes['wrap'] ?? true) ? 'false' : 'true'; + $presentation = 'slideshow' === ($attributes['presentation'] ?? 'track') ? 'slideshow' : 'track'; + $slideCount = max(0, (int) ($attributes['slideCount'] ?? 0)); + $initialSlide = min(max(0, (int) ($attributes['initialSlide'] ?? 0)), max(0, $slideCount - 1)); + $viewportHeight = max(0, (int) ($attributes['viewportHeight'] ?? 0)); + $transitionDuration = max(0, (int) ($attributes['transitionDuration'] ?? 300)); + $autoplayInterval = max(0, (int) ($attributes['autoplayInterval'] ?? 0)); + $fullBleed = true === ($attributes['fullBleed'] ?? false); + $showDots = true === ($attributes['showDots'] ?? false) && 1 < $slideCount; + $classes = 'blocks-engine-authored-carousel blocks-engine-authored-carousel--items-' . $items . ' blocks-engine-authored-carousel--' . $presentation . ($fullBleed ? ' blocks-engine-authored-carousel--full-bleed' : ''); + $styleAttribute = 0 < $viewportHeight ? ' style="--blocks-engine-carousel-height:' . $viewportHeight . 'px;--blocks-engine-carousel-transition:' . $transitionDuration . 'ms"' : ''; $context = htmlspecialchars( - (string) json_encode(array('index' => 0, 'wrap' => 'true' === $wrap, 'count' => 0, 'visible' => $items), JSON_THROW_ON_ERROR | JSON_UNESCAPED_SLASHES), + (string) json_encode(array('index' => $initialSlide, 'wrap' => 'true' === $wrap, 'count' => 0, 'visible' => $items, 'presentation' => $presentation, 'autoplayInterval' => $autoplayInterval, 'paused' => false), JSON_THROW_ON_ERROR | JSON_UNESCAPED_SLASHES), ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8' ); + $dots = ''; + if ( $showDots ) { + $dots = '
'; + for ( $index = 0; $index < $slideCount; ++$index ) { + $dots .= ''; + } + $dots .= '
'; + } + return array( - 'opening' => '
', - 'closing' => '
', + 'opening' => '
', + 'closing' => '
' . $dots . '
', ); } } diff --git a/php-transformer/src/HtmlToBlocks/HtmlTransformer.php b/php-transformer/src/HtmlToBlocks/HtmlTransformer.php index ec2c324a..9dc6c5aa 100644 --- a/php-transformer/src/HtmlToBlocks/HtmlTransformer.php +++ b/php-transformer/src/HtmlToBlocks/HtmlTransformer.php @@ -10084,12 +10084,77 @@ private function authoredCarouselBlock(DOMElement $element): ?array $slides[] = $slide; } + $listIdentity = strtolower(implode(' ', array($list->tagName, $this->attr($list, 'class'), $this->attr($list, 'role')))); + $presentation = 1 === preg_match('/(?:^|[^a-z0-9])slideshow(?:[^a-z0-9]|$)/', $listIdentity) ? 'slideshow' : 'track'; + $initialSlide = 0; + foreach ( $items as $index => $item ) { + if ( '' !== $this->attr($item, 'aria-hidden') || '' !== $this->attr($item, 'data-slideshow-slide') ) { + $presentation = 'slideshow'; + } + if ( 'false' === strtolower(trim($this->attr($item, 'aria-hidden'))) || str_contains(' ' . strtolower($this->attr($item, 'class')) . ' ', ' active ') ) { + $initialSlide = $index; + } + } + + $showDots = false; + foreach ( $element->getElementsByTagName('*') as $candidate ) { + if ( ! $candidate instanceof DOMElement ) { + continue; + } + foreach ( array('data-slide', 'data-slide-index', 'data-carousel-index', 'data-slideshow-item', 'data-uk-slideshow-item') as $attribute ) { + if ( ctype_digit(trim($this->attr($candidate, $attribute))) ) { + $showDots = true; + break 2; + } + } + } + + $durationMilliseconds = static function (string $value): int { + if ( 1 !== preg_match('/^([0-9]+(?:\.[0-9]+)?)(ms|s)$/', strtolower(trim($value)), $matches) ) { + return 0; + } + $milliseconds = (float) $matches[1] * ('s' === $matches[2] ? 1000 : 1); + return (int) round($milliseconds); + }; + $transitionDuration = 0; + $autoplayInterval = 0; + foreach ( $items as $item ) { + $transitionDuration = max($transitionDuration, $durationMilliseconds((string) ($this->styleResolver->cssDeclarations($this->attr($item, 'style'))['animation-duration'] ?? ''))); + foreach ( $item->getElementsByTagName('*') as $descendant ) { + if ( ! $descendant instanceof DOMElement ) { + continue; + } + $autoplayInterval = max($autoplayInterval, $durationMilliseconds((string) ($this->styleResolver->cssDeclarations($this->attr($descendant, 'style'))['animation-duration'] ?? ''))); + } + } + if ( $autoplayInterval <= $transitionDuration ) { + $autoplayInterval = 0; + } + if ( 0 === $transitionDuration ) { + $transitionDuration = 300; + } + + $listHeight = (string) ($this->styleResolver->cssDeclarations($this->attr($list, 'style'))['height'] ?? ''); + $viewportHeight = 1 === preg_match('/^([0-9]+(?:\.[0-9]+)?)px$/', trim($listHeight), $heightMatch) ? (int) round((float) $heightMatch[1]) : 0; + $rootDeclarations = $this->styleResolver->cssDeclarations($this->attr($element, 'style')); + $rootWidth = strtolower((string) preg_replace('/\s+/', '', (string) ($rootDeclarations['width'] ?? ''))); + $fullBleed = ('100vw' === $rootWidth || 1 === preg_match('/^[0-9]+(?:\.[0-9]+)?px$/', $rootWidth)) + && 1 === preg_match('/^-\s*(?:[0-9]+|[0-9]*\.[0-9]+)(?:px|rem|em|%)$/', strtolower(trim((string) ($rootDeclarations['left'] ?? '')))); + $generator = new AuthoredCarouselBlockGenerator(); $this->generatedBlocks()->register(AuthoredCarouselBlockGenerator::class, $generator->definition($this->generatedBlocks()->namespace())); $attributes = array( 'ariaLabel' => trim($this->attr($element, 'aria-label')) ?: 'Carousel', - 'itemsPerView' => min(4, count($slides)), + 'itemsPerView' => 'slideshow' === $presentation ? 1 : min(4, count($slides)), 'wrap' => true, + 'presentation' => $presentation, + 'slideCount' => count($slides), + 'initialSlide' => $initialSlide, + 'viewportHeight' => 'slideshow' === $presentation ? $viewportHeight : 0, + 'transitionDuration' => 'slideshow' === $presentation ? $transitionDuration : 300, + 'autoplayInterval' => 'slideshow' === $presentation ? $autoplayInterval : 0, + 'showDots' => 'slideshow' === $presentation && $showDots, + 'fullBleed' => 'slideshow' === $presentation && $fullBleed, ); $shell = $generator->shell($attributes); $innerContent = array($shell['opening']); diff --git a/php-transformer/tests/unit/authored-carousel-block.php b/php-transformer/tests/unit/authored-carousel-block.php index c3a0f7fc..44ec1295 100644 --- a/php-transformer/tests/unit/authored-carousel-block.php +++ b/php-transformer/tests/unit/authored-carousel-block.php @@ -38,7 +38,7 @@ $shell = (new AuthoredCarouselBlockGenerator())->shell(array('ariaLabel' => 'Care & ', 'itemsPerView' => 99, 'wrap' => false)); $shellMarkup = $shell['opening'] . $shell['closing']; $assert(str_contains($shellMarkup, 'aria-label="Care & <support>"') && str_contains($shellMarkup, '--items-6') && str_contains($shellMarkup, 'data-wrap="false"'), 'shell attributes are escaped and bounded'); -$assert(str_contains($shellMarkup, 'data-wp-interactive="blocks-engine/carousel"') && str_contains($shellMarkup, 'data-wp-context="{"index":0,"wrap":false,"count":0,"visible":6}"') && str_contains($shellMarkup, 'data-wp-init="callbacks.init"') && str_contains($shellMarkup, 'data-wp-on--click="actions.next"') && str_contains($shellMarkup, 'data-wp-bind--disabled="state.atEnd"'), 'the shell declares its behavior through Interactivity API directives'); +$assert(str_contains($shellMarkup, 'data-wp-interactive="blocks-engine/carousel"') && str_contains($shellMarkup, '"presentation":"track"') && str_contains($shellMarkup, 'data-wp-init="callbacks.init"') && str_contains($shellMarkup, 'data-wp-on--click="actions.next"') && str_contains($shellMarkup, 'data-wp-bind--disabled="state.atEnd"'), 'the shell declares its behavior through Interactivity API directives'); $payload = (new CompanionPluginPayload())->fromBlockTypes(array(), array(), array(), array($definition)); $payloadBlock = $payload['blocks'][0] ?? array(); @@ -50,4 +50,13 @@ $customHost = (new HtmlTransformer())->transform('
')->toArray(); $assert('custom/authored-carousel' === ($customHost['blocks'][0]['blockName'] ?? null), 'custom-element carousel hosts use the same generic block before generated HTML fallback'); +$slideshowSource = '
'; +$slideshowResult = (new HtmlTransformer())->transform($slideshowSource)->toArray(); +$slideshow = $slideshowResult['blocks'][0] ?? array(); +$slideshowMarkup = (string) ($slideshowResult['serialized_blocks'] ?? ''); +$assert('custom/authored-carousel' === ($slideshow['blockName'] ?? null) && 'slideshow' === ($slideshow['attrs']['presentation'] ?? null) && 1 === ($slideshow['attrs']['itemsPerView'] ?? null), 'a one-at-a-time authored slideshow uses the same parameterized carousel primitive'); +$assert(720 === ($slideshow['attrs']['viewportHeight'] ?? null) && 500 === ($slideshow['attrs']['transitionDuration'] ?? null) && 12000 === ($slideshow['attrs']['autoplayInterval'] ?? null), 'slideshow timing and captured viewport height are recovered from source declarations'); +$assert(1 === ($slideshow['attrs']['initialSlide'] ?? null) && true === ($slideshow['attrs']['showDots'] ?? null) && true === ($slideshow['attrs']['fullBleed'] ?? null), 'active slide, dot navigation, and viewport breakout survive conversion'); +$assert(str_contains($slideshowMarkup, '--slideshow') && 2 === substr_count($slideshowMarkup, 'data-carousel-index=') && str_contains($slideshowMarkup, '--blocks-engine-carousel-height:720px'), 'slideshow markup carries stacked presentation, indexed dots, and source height'); + fwrite(STDOUT, "Authored carousel companion tests passed\n"); From bab908933f99060c7e0707dd809e17605aa06aeb Mon Sep 17 00:00:00 2001 From: Chris Huber Date: Tue, 1 Sep 2026 14:42:40 -0400 Subject: [PATCH 06/10] Preserve responsive source fidelity --- .../src/HtmlToBlocks/HtmlTransformer.php | 21 +++++++++++++++++-- .../NavigationBlockNormalizer.php | 2 ++ .../Patterns/SocialLinksPattern.php | 6 ++++++ php-transformer/tests/contract/run.php | 10 +++++++++ .../unit/navigation-block-normalizer.php | 4 ++++ 5 files changed, 41 insertions(+), 2 deletions(-) diff --git a/php-transformer/src/HtmlToBlocks/HtmlTransformer.php b/php-transformer/src/HtmlToBlocks/HtmlTransformer.php index 9dc6c5aa..813707bc 100644 --- a/php-transformer/src/HtmlToBlocks/HtmlTransformer.php +++ b/php-transformer/src/HtmlToBlocks/HtmlTransformer.php @@ -6532,12 +6532,24 @@ private function sourceContext(DOMElement $element): array 'role' => $this->attr($element, 'role'), 'id' => $this->attr($element, 'id'), 'class_names' => $this->classNames($element), + 'ancestor_class_names' => $this->ancestorClassNames($element), 'data_attributes' => $this->safeDataAttributes($element), 'structure_signals' => $this->structureSignals($element, array()), 'interactive_attributes' => $this->interactiveAttributes($element), ), static fn (mixed $value): bool => '' !== $value && array() !== $value); } + /** @return list */ + private function ancestorClassNames(DOMElement $element): array + { + $classes = array(); + for ( $ancestor = $element->parentNode; $ancestor instanceof DOMElement && 'body' !== strtolower($ancestor->tagName); $ancestor = $ancestor->parentNode ) { + array_push($classes, ...$this->classNames($ancestor)); + } + + return array_values(array_unique($classes)); + } + private function nearestPreviousHeadingText(DOMElement $element): string { for ( $node = $element->previousSibling; $node instanceof DOMNode; $node = $node->previousSibling ) { @@ -9467,10 +9479,15 @@ private function isImageOnlyAnchor(DOMElement $anchor): bool $imageChildren = 0; foreach ( $anchor->childNodes as $child ) { if ( $child instanceof DOMElement ) { - if ( ! in_array(strtolower($child->tagName), array( 'img', 'picture' ), true) && ! ( $this->imageOnlyCarrierElement($child) instanceof DOMElement ) ) { + if ( in_array(strtolower($child->tagName), array( 'img', 'picture' ), true) || $this->imageOnlyCarrierElement($child) instanceof DOMElement ) { + ++$imageChildren; + continue; + } + // Lightbox links commonly append empty overlay elements beside + // their image. They are decoration, not additional link content. + if ( '' !== trim($child->textContent ?? '') ) { return false; } - ++$imageChildren; continue; } diff --git a/php-transformer/src/HtmlToBlocks/NavigationBlockNormalizer.php b/php-transformer/src/HtmlToBlocks/NavigationBlockNormalizer.php index 5f0bce9d..1b5a9e7a 100644 --- a/php-transformer/src/HtmlToBlocks/NavigationBlockNormalizer.php +++ b/php-transformer/src/HtmlToBlocks/NavigationBlockNormalizer.php @@ -210,11 +210,13 @@ private function isMobileDuplicate(array $block, array $sourceProvenance): bool $attributes = is_array($source['source_attributes'] ?? null) ? $source['source_attributes'] : array(); $context = is_array($source['context'] ?? null) ? $source['context'] : array(); $classNames = is_array($context['class_names'] ?? null) ? implode(' ', $context['class_names']) : ''; + $ancestorClassNames = is_array($context['ancestor_class_names'] ?? null) ? implode(' ', $context['ancestor_class_names']) : ''; $haystack = strtolower(trim(implode(' ', array( (string) ($attributes['class'] ?? ''), (string) ($attributes['id'] ?? ''), $classNames, + $ancestorClassNames, )))); return (bool) preg_match('/(?:^|[^a-z0-9])(?:mobile|drawer|offcanvas|overlay|collapsed|hamburger|menu-panel|nav-panel)(?:[^a-z0-9]|$)/', $haystack); diff --git a/php-transformer/src/HtmlToBlocks/Patterns/SocialLinksPattern.php b/php-transformer/src/HtmlToBlocks/Patterns/SocialLinksPattern.php index 6c389022..cde17f1e 100644 --- a/php-transformer/src/HtmlToBlocks/Patterns/SocialLinksPattern.php +++ b/php-transformer/src/HtmlToBlocks/Patterns/SocialLinksPattern.php @@ -90,6 +90,12 @@ public function recognize(DOMElement $element, PatternContext $context): ?Patter } $attrs = $context->presentationAttributes($element); + for ( $carrier = $element; $carrier instanceof DOMElement && 'body' !== strtolower($carrier->tagName); $carrier = $carrier->parentNode ) { + if ( preg_match('/(?:^|;)\s*text-align\s*:\s*(left|center|right)\b/i', $this->attr($carrier, 'style'), $alignment) ) { + $attrs['justifyContent'] = strtolower($alignment[1]); + break; + } + } if ( $showLabels ) { $attrs['showLabels'] = true; } diff --git a/php-transformer/tests/contract/run.php b/php-transformer/tests/contract/run.php index ccdd9e39..33dab29b 100644 --- a/php-transformer/tests/contract/run.php +++ b/php-transformer/tests/contract/run.php @@ -2819,6 +2819,16 @@ public function recognize(DOMElement $element, PatternContext $context): ?Patter $assert(str_contains((string) ($deduplicatedMobileNavigation['serialized_blocks'] ?? ''), 'mobile-nav'), 'deduplicated desktop/mobile navigation preserves mobile navigation target class'); $assert(! str_contains((string) ($deduplicatedMobileNavigation['serialized_blocks'] ?? ''), 'drawer-nav'), 'deduplicated desktop/mobile navigation removes duplicate drawer navigation children'); +$decoratedImageLink = ( new HtmlTransformer() )->transform( + 'Photo
' +)->toArray(); +$assert(str_contains((string) ($decoratedImageLink['serialized_blocks'] ?? ''), '