Solo-Web-Works/CWC
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: scope mobile media text behavior

Browse Source
This commit is contained in:
Keith Solomon
2026-06-27 20:35:10 -05:00
parent 6263a98988
commit d19924e22b
3 changed files with 68 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/mobile-homepage.spec.js
+46 -11
View File
@@ -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 ({
views/blocks/media-text/media-text.css
+10 -7
View File
@@ -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%;
}
}
views/blocks/media-text/media-text.php
+12 -8
View File
@@ -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, '<iframe' ) !== false ) {
?>
<div <?php echo wp_kses_post( $wrapper ); ?>>
<div class="<?php echo esc_attr( $mediaClass ); ?> <?php echo $vidBlock ? 'aspect-video' : ''; ?>">
<?php if ( $vidBlock ) : ?>
<?php echo wp_kses( $vidBlock, escEmbeds() ); ?>
<?php else : ?>
<img src="<?php echo esc_url( $imgBlock['url'] ); ?>" alt="<?php echo esc_attr( $imgBlock['alt'] ); ?>" class="">
<?php endif; ?>
</div>
<div class="content-wrapper text-balance <?php echo esc_attr( $contentClass ); ?>">
<?php if ( ! empty( $heading ) ) : ?>
<h2 class=""><?php echo esc_html( $heading ); ?></h2>
@@ -96,4 +92,12 @@ if ( $vidBlock && strpos( $vidBlock, '<iframe' ) !== false ) {
</div>
<?php endif; ?>
</div>
<div class="media-wrapper <?php echo esc_attr( $mediaClass ); ?> <?php echo $vidBlock ? 'aspect-video' : ''; ?>">
<?php if ( $vidBlock ) : ?>
<?php echo wp_kses( $vidBlock, escEmbeds() ); ?>
<?php else : ?>
<img src="<?php echo esc_url( $imgBlock['url'] ); ?>" alt="<?php echo esc_attr( $imgBlock['alt'] ); ?>" class="">
<?php endif; ?>
</div>
</div>