Skip to content

MWPW-200020: Fix Blog Homepage card tags, View all styling, chevron color, and mobile alignment #644

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
echen-adobe wants to merge 10 commits into
base: stage
Choose a base branch
from
Open

MWPW-200020: Fix Blog Homepage card tags, View all styling, chevron color, and mobile alignment #644

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6f2c2a8
MWPW-200020: Fix blog homepage card tags, View all link styling, chev…
echen-adobe Jul 20, 2026
8801874
MWPW-200020: unset blog-posts-v2 wide-screen max-width
echen-adobe Jul 23, 2026
7eeb6f4
Merge branch 'stage' into mwpw-200020-blog-bugs
echen-adobe Jul 23, 2026
0451b3c
Merge branch 'stage' into mwpw-200020-blog-bugs
echen-adobe Jul 29, 2026
1e39a24
Merge branch 'stage' into mwpw-200020-blog-bugs
echen-adobe Aug 10, 2026
05d7b73
Update blog-posts-v2.css
echen-adobe Aug 14, 2026
e921c83
Update blog-posts-v2.css
echen-adobe Aug 14, 2026
db3ab8a
Update blog-feature-marquee.css
echen-adobe Aug 14, 2026
75ad7c7
Update blog-posts-v2.css
echen-adobe Aug 14, 2026
fda9b94
Merge branch 'stage' into mwpw-200020-blog-bugs
echen-adobe Aug 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 33 additions & 8 deletions express/code/blocks/blog-posts-v2/blog-posts-v2.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -354,20 +354,29 @@ 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 {
text-align: center;
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 {
Expand All @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -485,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;
}
Expand Down
21 changes: 11 additions & 10 deletions express/code/blocks/blog-posts-v2/blog-posts-v2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -372,9 +372,10 @@ async function getHeroCard(post, dateFormatter, blogTag) {

const pictureTag = imageWrapper.outerHTML;
const dateMarkup = dateString ? `<p class="blog-card-date">${dateString}</p>` : '';
const tagMarkup = blogTag ? `<span class="blog-tag">${blogTag}</span>` : '';
card.innerHTML = `<div class="blog-card-image">
${pictureTag}
<span class="blog-tag">${blogTag}</span>
${tagMarkup}
</div>
<div class="blog-hero-card-body">
<h3 class="blog-card-title">${filteredTitle}</h3>
Expand All @@ -400,9 +401,10 @@ function getCard(post, dateFormatter, blogTag) {

const pictureTag = imageWrapper.outerHTML;
const dateMarkup = dateString ? `<p class="blog-card-date">${dateString}</p>` : '';
const tagMarkup = blogTag ? `<span class="blog-tag">${blogTag}</span>` : '';
card.innerHTML = `<div class="blog-card-image">
${pictureTag}
<span class="blog-tag">${blogTag}</span>
${tagMarkup}
</div>
<section class="blog-card-body">
<h3 class="blog-card-title">${filteredTitle}</h3>
Expand Down Expand Up @@ -430,18 +432,18 @@ function addRightChevronToViewAll(blockElement) {

const rightChevronSVGHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.46967 2.86029C5.76256 2.5674 6.23744 2.5674 6.53033 2.86029L11.0303 7.3603C11.3232 7.65319 11.3232 8.12806 11.0303 8.42095L6.53033
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="#292929"/>
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"/>
</svg>`;

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) {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -640,7 +641,7 @@ export default async function decorate(block) {
if (link) {
const rightChevronSVGHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.46967 2.86029C5.76256 2.5674 6.23744 2.5674 6.53033 2.86029L11.0303 7.3603C11.3232 7.65319 11.3232 8.12806 11.0303 8.42095L6.53033
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="#292929"/>
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"/>
</svg>`;
link.innerHTML = `${link.innerHTML} ${rightChevronSVGHTML}`;
}
Expand Down
Loading