From 6f2c2a815476554be1b8e8f8aed1f0c28c0ce129 Mon Sep 17 00:00:00 2001 From: Eric Chen <159481679+echen-adobe@users.noreply.github.com> Date: Mon, 20 Jul 2026 12:11:41 -0700 Subject: [PATCH 1/6] MWPW-200020: Fix blog homepage card tags, View all link styling, chevron color, and mobile alignment - Tags: pull the per-post category through to each card instead of the hardcoded 'Social Media' fallback; omit the tag pill when no category. - View all: neutralize Milo con-button styling so the control renders as a plain floating text link (no background/border/padding). - Chevron: use fill="currentColor" so the '>' inherits the link's accent color instead of the hardcoded dark #292929. - Mobile: stack the section header and left-align View all (column layout below 768px), restoring the row/space-between layout at >=768px. Co-Authored-By: Claude Opus 4.8 (1M context) --- .../blocks/blog-posts-v2/blog-posts-v2.css | 39 +++++++++++++++---- .../blocks/blog-posts-v2/blog-posts-v2.js | 21 +++++----- 2 files changed, 43 insertions(+), 17 deletions(-) diff --git a/express/code/blocks/blog-posts-v2/blog-posts-v2.css b/express/code/blocks/blog-posts-v2/blog-posts-v2.css index 73ce0a5eb..2f3106e01 100644 --- a/express/code/blocks/blog-posts-v2/blog-posts-v2.css +++ b/express/code/blocks/blog-posts-v2/blog-posts-v2.css @@ -354,9 +354,10 @@ main .blog-posts-v2 .card .card-body p { main .section:has(.blog-posts-v2)>.content { display: flex; - justify-content: space-between; - align-items: end; - gap: var(--spacing-400); + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + gap: var(--spacing-200); max-width: var(--block-wd-grid-max-width); } .blog-posts-v2 .blog-posts-header a { @@ -364,10 +365,18 @@ main .section:has(.blog-posts-v2)>.content { font-size: var(--body-font-size-s); font-weight: var(--body-font-weight); line-height: var(--body-line-height); - display: flex; - justify-content: space-between; + display: inline-flex; + justify-content: flex-start; align-items: center; gap: var(--spacing-75); + padding: 0; + min-width: 0; + min-height: 0; + border: none; + border-radius: 0; + background: none; + color: var(--S2-Buttons-Accent-Color-Default); + text-decoration: none; } main .section:has(.blog-posts-v2)>.content p { @@ -378,10 +387,19 @@ main .section:has(.blog-posts-v2)>.content p { } main .section:has(.blog-posts-v2)>.content a { - display: flex; - justify-content: space-between; + display: inline-flex; + justify-content: flex-start; align-items: center; gap: var(--spacing-75); + padding: 0; + min-width: 0; + min-height: 0; + border: none; + border-radius: 0; + background: none; + color: var(--S2-Buttons-Accent-Color-Default); + text-decoration: none; + white-space: nowrap; } .section.ax-blog-posts-container>.content a { @@ -408,6 +426,13 @@ main .section:has(.blog-posts-v2)>.content>h3 { max-width: 1199px; } + main .section:has(.blog-posts-v2)>.content { + flex-direction: row; + justify-content: space-between; + align-items: end; + gap: var(--spacing-400); + } + main .blog-posts-v2 .blog-posts-header { flex-direction: row; align-items: baseline; diff --git a/express/code/blocks/blog-posts-v2/blog-posts-v2.js b/express/code/blocks/blog-posts-v2/blog-posts-v2.js index 5a459777a..fd3fdda37 100755 --- a/express/code/blocks/blog-posts-v2/blog-posts-v2.js +++ b/express/code/blocks/blog-posts-v2/blog-posts-v2.js @@ -372,9 +372,10 @@ async function getHeroCard(post, dateFormatter, blogTag) { const pictureTag = imageWrapper.outerHTML; const dateMarkup = dateString ? `

${dateString}

` : ''; + const tagMarkup = blogTag ? `${blogTag}` : ''; card.innerHTML = `
${pictureTag} - ${blogTag} + ${tagMarkup}

${filteredTitle}

@@ -400,9 +401,10 @@ function getCard(post, dateFormatter, blogTag) { const pictureTag = imageWrapper.outerHTML; const dateMarkup = dateString ? `

${dateString}

` : ''; + const tagMarkup = blogTag ? `${blogTag}` : ''; card.innerHTML = `
${pictureTag} - ${blogTag} + ${tagMarkup}

${filteredTitle}

@@ -430,18 +432,18 @@ function addRightChevronToViewAll(blockElement) { const rightChevronSVGHTML = ` + 12.921C6.23744 13.2138 5.76256 13.2138 5.46967 12.921C5.17678 12.6281 5.17678 12.1532 5.46967 11.8603L9.43934 7.89062L5.46967 3.92096C5.17678 3.62806 5.17678 3.15319 5.46967 2.86029Z" fill="currentColor"/> `; link.innerHTML = `${link.innerHTML} ${rightChevronSVGHTML}`; } -function getBlogTag(block) { +function getBlogTag(block, post) { const activeSection = block.closest('.section.content-toggle-active'); if (activeSection?.dataset.toggle?.trim()) { return activeSection.dataset.toggle.trim(); } - return 'Social Media'; + return post?.category?.trim() || ''; } function updateBlogTags(block, tagValue) { @@ -495,17 +497,16 @@ async function decorateBlogPosts(blogPostsElements, config, offset = 0, gridModu getDateFormatter(newLanguage); } - const blogTag = getBlogTag(blogPostsElements); - if (isHero) { - const card = await getHeroCard(posts[0], dateFormatter, blogTag); + const heroTag = getBlogTag(blogPostsElements, posts[0]); + const card = await getHeroCard(posts[0], dateFormatter, heroTag); blogPostsElements.prepend(card); images.push(card.querySelector('img')); count = 1; } else { for (let i = offset; i < posts.length && count < limit; i += 1) { const post = posts[i]; - const card = getCard(post, dateFormatter, blogTag); + const card = getCard(post, dateFormatter, getBlogTag(blogPostsElements, post)); cards.append(card); images.push(card.querySelector('img')); count += 1; @@ -640,7 +641,7 @@ export default async function decorate(block) { if (link) { const rightChevronSVGHTML = ` + 12.921C6.23744 13.2138 5.76256 13.2138 5.46967 12.921C5.17678 12.6281 5.17678 12.1532 5.46967 11.8603L9.43934 7.89062L5.46967 3.92096C5.17678 3.62806 5.17678 3.15319 5.46967 2.86029Z" fill="currentColor"/> `; link.innerHTML = `${link.innerHTML} ${rightChevronSVGHTML}`; } From 8801874f3b0d6989fe0270ef91c3e7716748e310 Mon Sep 17 00:00:00 2001 From: Eric Chen <159481679+echen-adobe@users.noreply.github.com> Date: Thu, 23 Jul 2026 10:13:37 -0700 Subject: [PATCH 2/6] MWPW-200020: unset blog-posts-v2 wide-screen max-width The >=1024px rule capped .blog-posts-v2 at --block-wd-max-width; unset it so the block spans full width on wide screens (matching the .wide variant). Co-Authored-By: Claude Opus 4.8 (1M context) --- express/code/blocks/blog-posts-v2/blog-posts-v2.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/express/code/blocks/blog-posts-v2/blog-posts-v2.css b/express/code/blocks/blog-posts-v2/blog-posts-v2.css index 2f3106e01..c8c522757 100644 --- a/express/code/blocks/blog-posts-v2/blog-posts-v2.css +++ b/express/code/blocks/blog-posts-v2/blog-posts-v2.css @@ -510,7 +510,7 @@ main .section:has(.blog-posts-v2)>.content>h3 { } main .blog-posts-v2 { - max-width: var(--block-wd-max-width); + max-width: unset; margin-right: auto; margin-left: auto; } From 05d7b73a7dbfb966ff64c6b201712c3fcc52f8f2 Mon Sep 17 00:00:00 2001 From: Eric Chen <159481679+echen-adobe@users.noreply.github.com> Date: Fri, 14 Aug 2026 14:47:40 -0700 Subject: [PATCH 3/6] Update blog-posts-v2.css --- express/code/blocks/blog-posts-v2/blog-posts-v2.css | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/express/code/blocks/blog-posts-v2/blog-posts-v2.css b/express/code/blocks/blog-posts-v2/blog-posts-v2.css index c8c522757..b03f311be 100644 --- a/express/code/blocks/blog-posts-v2/blog-posts-v2.css +++ b/express/code/blocks/blog-posts-v2/blog-posts-v2.css @@ -17,7 +17,7 @@ transform: translateX(-50%); width: 100vw; height: 100%; - background-color: var(--color-gray-100); + background-color: var(--color-white); z-index: -1; } @@ -249,7 +249,7 @@ main .blog-posts-v2 .blog-hero-card .blog-card-image img { } main .blog-posts-v2 .blog-card h3.blog-card-title { - font-size: var(--heading-font-size-xs); + font-size: var(--ax-heading-l-size); font-weight: var(--subheading-font-weight); line-height: var(--heading-line-height); text-align: left; @@ -440,7 +440,7 @@ main .section:has(.blog-posts-v2)>.content>h3 { main .blog-posts-v2 .blog-cards { width: var(--ax-grid-12-col-width); - gap: var(--spacing-400); + gap: var(--spacing-300); flex-direction: row; align-items: stretch; } @@ -501,6 +501,12 @@ main .section:has(.blog-posts-v2)>.content>h3 { } } +@media (min-width: 768px) and (max-width: 1023px) { + main .blog-posts-v2 .blog-hero-card { + gap: var(--spacing-300); + } +} + @media (min-width: 1024px) { .section.ax-blog-posts-container { padding: var(--spacing-900) var(--spacing-600); From e921c8367ad19a23b9f1bef90ffa34e370d595e0 Mon Sep 17 00:00:00 2001 From: Eric Chen <159481679+echen-adobe@users.noreply.github.com> Date: Fri, 14 Aug 2026 15:09:03 -0700 Subject: [PATCH 4/6] Update blog-posts-v2.css --- express/code/blocks/blog-posts-v2/blog-posts-v2.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/express/code/blocks/blog-posts-v2/blog-posts-v2.css b/express/code/blocks/blog-posts-v2/blog-posts-v2.css index b03f311be..0b07c95f7 100644 --- a/express/code/blocks/blog-posts-v2/blog-posts-v2.css +++ b/express/code/blocks/blog-posts-v2/blog-posts-v2.css @@ -411,16 +411,17 @@ main .section:has(.blog-posts-v2)>.content a>span { } main .section:has(.blog-posts-v2)>.content>h2 { - margin-top: var(--spacing-900); + margin-top: 0; } main .section:has(.blog-posts-v2)>.content>h3 { font-size: var(--heading-font-size-m); - margin-top: var(--spacing-800); + margin-top: 0; } @media (min-width: 768px) { .section.ax-blog-posts-container { + padding-top: var(--spacing-900); padding-right: var(--spacing-500); padding-left: var(--spacing-500); max-width: 1199px; From db3ab8a8665369b625057e052fd03c25310a5b43 Mon Sep 17 00:00:00 2001 From: Eric Chen <159481679+echen-adobe@users.noreply.github.com> Date: Fri, 14 Aug 2026 15:11:40 -0700 Subject: [PATCH 5/6] Update blog-feature-marquee.css --- .../code/blocks/blog-feature-marquee/blog-feature-marquee.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/express/code/blocks/blog-feature-marquee/blog-feature-marquee.css b/express/code/blocks/blog-feature-marquee/blog-feature-marquee.css index a27371396..9595d0133 100644 --- a/express/code/blocks/blog-feature-marquee/blog-feature-marquee.css +++ b/express/code/blocks/blog-feature-marquee/blog-feature-marquee.css @@ -513,7 +513,7 @@ main .section .blog-feature-marquee p { } .blog-feature-marquee .blog-feature-marquee-content { - width: var(--ax-grid-4-col-width); + width: var(--ax-grid-6-col-width); flex-shrink: 0; } From 75ad7c7cfa5ac224618c37ec36b4ce1c8c1c54b2 Mon Sep 17 00:00:00 2001 From: Eric Chen <159481679+echen-adobe@users.noreply.github.com> Date: Fri, 14 Aug 2026 15:18:13 -0700 Subject: [PATCH 6/6] Update blog-posts-v2.css --- express/code/blocks/blog-posts-v2/blog-posts-v2.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/express/code/blocks/blog-posts-v2/blog-posts-v2.css b/express/code/blocks/blog-posts-v2/blog-posts-v2.css index 0b07c95f7..40292ae2c 100644 --- a/express/code/blocks/blog-posts-v2/blog-posts-v2.css +++ b/express/code/blocks/blog-posts-v2/blog-posts-v2.css @@ -17,7 +17,7 @@ transform: translateX(-50%); width: 100vw; height: 100%; - background-color: var(--color-white); + background-color: var(--color-gray-100); z-index: -1; } @@ -421,7 +421,6 @@ main .section:has(.blog-posts-v2)>.content>h3 { @media (min-width: 768px) { .section.ax-blog-posts-container { - padding-top: var(--spacing-900); padding-right: var(--spacing-500); padding-left: var(--spacing-500); max-width: 1199px;