From d19924e22b062f9a74b682fdc0c294f0f543d6f7 Mon Sep 17 00:00:00 2001 From: Keith Solomon Date: Sat, 27 Jun 2026 20:35:10 -0500 Subject: [PATCH] fix: scope mobile media text behavior --- tests/mobile-homepage.spec.js | 57 +++++++++++++++++++++----- views/blocks/media-text/media-text.css | 17 ++++---- views/blocks/media-text/media-text.php | 20 +++++---- 3 files changed, 68 insertions(+), 26 deletions(-) diff --git a/tests/mobile-homepage.spec.js b/tests/mobile-homepage.spec.js index c204785..2eef6fb 100644 --- a/tests/mobile-homepage.spec.js +++ b/tests/mobile-homepage.spec.js @@ -245,10 +245,15 @@ test("mobile media text matches the 402px reference composition", async ({ }) => { await page.goto(homepage); - const block = await getBox(page.locator(".media-cols")); - const content = await getBox(page.locator(".media-cols .content-wrapper")); - const media = await getBox(page.locator(".media-cols > div:first-child")); - const buttons = page.locator(".media-cols .reset .button"); + const blockLocator = page.locator( + ".wp-block-acf-media-text.media-cols.has-two-ctas", + ); + const block = await getBox(blockLocator); + const content = await getBox( + blockLocator.locator(":scope > .content-wrapper"), + ); + const media = await getBox(blockLocator.locator(":scope > .media-wrapper")); + const buttons = blockLocator.locator(".reset .button"); const services = await getBox(buttons.nth(0)); const about = await getBox(buttons.nth(1)); const contact = await getBox(page.locator(".contact-block.home-contact")); @@ -265,6 +270,26 @@ test("mobile media text matches the 402px reference composition", async ({ expectNear(contact.y - (media.y + media.height), 232, 5); }); +test("media text keeps content first in the DOM and marks its CTA pair", async ({ + page, +}) => { + await page.goto(homepage); + + const block = page.locator(".wp-block-acf-media-text.media-cols"); + const childOrder = await block + .locator(":scope > div") + .evaluateAll((children) => + children.map((child) => + child.classList.contains("content-wrapper") + ? "content" + : "media", + ), + ); + + expect(childOrder).toEqual(["content", "media"]); + await expect(block).toHaveClass(/\bhas-two-ctas\b/); +}); + test("mobile media text remains contained at responsive endpoints", async ({ page, }) => { @@ -272,13 +297,14 @@ test("mobile media text remains contained at responsive endpoints", async ({ await page.setViewportSize({ width, height: 900 }); await page.goto(homepage); + const block = page.locator( + ".wp-block-acf-media-text.media-cols.has-two-ctas", + ); const content = await getBox( - page.locator(".media-cols .content-wrapper"), + block.locator(":scope > .content-wrapper"), ); - const media = await getBox( - page.locator(".media-cols > div:first-child"), - ); - const buttons = page.locator(".media-cols .reset .button"); + const media = await getBox(block.locator(":scope > .media-wrapper")); + const buttons = block.locator(".reset .button"); const services = await getBox(buttons.nth(0)); const about = await getBox(buttons.nth(1)); @@ -297,12 +323,21 @@ test("media text keeps its configured ordering at 768px", async ({ page }) => { await page.setViewportSize({ width: 768, height: 900 }); await page.goto(homepage); - const content = await getBox(page.locator(".media-cols .content-wrapper")); - const media = await getBox(page.locator(".media-cols > div:first-child")); + const block = page.locator(".wp-block-acf-media-text.media-cols"); + const contentLocator = block.locator(":scope > .content-wrapper"); + const mediaLocator = block.locator(":scope > .media-wrapper"); + const content = await getBox(contentLocator); + const media = await getBox(mediaLocator); expect(media.y).toBeLessThan(content.y); expectNear(media.x, 70, 3); expectNear(media.width, 627, 3); + await expect(block).toHaveCSS("padding-top", "0px"); + await expect(contentLocator.locator(".font-light")).toHaveCSS( + "font-size", + "18px", + ); + await expect(contentLocator.locator(".reset")).toHaveCSS("display", "flex"); }); test("mobile recent posts exposes previous and next controls", async ({ diff --git a/views/blocks/media-text/media-text.css b/views/blocks/media-text/media-text.css index cd3bf0a..ef3cd69 100644 --- a/views/blocks/media-text/media-text.css +++ b/views/blocks/media-text/media-text.css @@ -1,39 +1,42 @@ @media (max-width: 767px) { - .media-cols { + .wp-block-acf-media-text.media-cols { gap: 3rem; grid-template-columns: minmax(0, 1fr); padding: 5rem 0 0; padding-inline: 0 !important; } - .media-cols > div:first-child { + .wp-block-acf-media-text.media-cols > .media-wrapper { order: 2; } - .media-cols > div:first-child img { + .wp-block-acf-media-text.media-cols > .media-wrapper img { display: block; height: auto; width: 100%; } - .media-cols .content-wrapper { + .wp-block-acf-media-text.media-cols > .content-wrapper { order: 1; padding: 0; } - .media-cols .content-wrapper .font-light { + .wp-block-acf-media-text.media-cols > .content-wrapper .font-light { font-size: 1rem; line-height: 1.5; } - .media-cols .content-wrapper .reset { + .wp-block-acf-media-text.media-cols.has-two-ctas > .content-wrapper .reset { display: grid; gap: 1.375rem; grid-template-columns: minmax(0, 148fr) minmax(0, 124fr); width: min(100%, 18.375rem); } - .media-cols .content-wrapper .reset .button { + .wp-block-acf-media-text.media-cols.has-two-ctas + > .content-wrapper + .reset + .button { width: 100%; } } diff --git a/views/blocks/media-text/media-text.php b/views/blocks/media-text/media-text.php index fa3e40e..875dc1e 100644 --- a/views/blocks/media-text/media-text.php +++ b/views/blocks/media-text/media-text.php @@ -27,6 +27,10 @@ $mediaClass = $mediaLeft ? 'order-first' : 'order-last'; $contentClass = $mediaLeft ? 'order-last pr-8' : 'order-first pl-8'; $classes = 'media-cols grid grid-cols-1 lg:grid-cols-2 gap-24 items-center mb-8 p-0 container'; +if ( 2 === count( $ctas ) ) { + $classes .= ' has-two-ctas'; +} + if ( $isDark ) { $classes .= ' dark text-white'; } @@ -41,14 +45,6 @@ if ( $vidBlock && strpos( $vidBlock, '
> -
- - - - <?php echo esc_attr( $imgBlock['alt'] ); ?> - -
-

@@ -96,4 +92,12 @@ if ( $vidBlock && strpos( $vidBlock, '
+ +
+ + + + <?php echo esc_attr( $imgBlock['alt'] ); ?> + +