You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Our News page has big space until user arrives to read the content. In recent feedback on Slack, we are asked to present an urgent update that can help solve this. Here are several solutions for it.
Fix 1. Removal of big 'News' decorative block. Also, not visually present, but 'categories' dropdown' ideally changes color.*
Fix 2. Dark style. Removal of big 'News' decorative block, and adding a standard page hero block we have on other pages. 'Categories' dropdown change color, so when user click the change is very visible, and not 'merged' with the bg color. The 'release' section becomes separate/white.
Fix 3. Blueberry style. Same as 2, but Blueberry styled.
For me, Solution 1 seems to be the best approach, especially when taking mobile into account. Solutions 1 and 2, on mobile, put content below the fold.
I think these designs also highlight that the "Latest Release" section is part of the problem. This is static for weeks and is occupying an immense amount of screen real estate, sometimes redundantly so (when a release post is also the latest post). Given that a release post is almost always one of the "Latest Posts" I think it would be safe to shrink the "Latest Release" section as well.
Thanks. The issue of removing background color, and not having anything on top (in order to reduce tihings) is that we get an impression that this is doc page, or some sub-page. It still needs to be clear that this is a landing page.
As you can see in my mockup. The white version + reduced spacing a lot, produces very weird impression for the page, which should stand as a 'landing page'. I cannot really ship it like that. Maybe dark color works there for this first phase fix?
Thanks @marko-srb, it looks like instead of just changing the colors, we could be shrinking the header a bit more, as the latest release was part of the header. Can we shrink that area further? Or do something else with the Latest Release section elsewhere on the page so that the News articles move higher up on the page?
We can do lots of things to it. But I don't think it is a good approach due 'idea to do a quick fix' soon. Due the relation to the request for this update being long ago.
Meaning: I did reduce that section a bit. In my white test it's smaller for 30px. On darker fix, the spacing towards the edge feels off, so it's not much reduced than original.
Regardless. For any other change as you asked, it is a totally new design. Which isn't an action I can sign off now — meaning I wouldn't provide such design as a thing that 'I advise going live'. Especially because it requires testing and accommodating the best solution. To clarify: it can be done, but not properly now. It requires time for nice execution, again so this doesn't feel like a 'doc' page, but as a 'landing' page.
I can show you why. Below is a 'quick fix' with your comment in mind. I cannot sign this as my contribution to this task. It doesn't work.
By luck, I have this section from another page concept I am working on.
Left: still might be big in height. Right: can work. Not ideal though, so would need some more input, as I am not sure this works better than what was.
Thanks for this work. I agree on a quick fix soon and further improvements as followups. The thing to immediately solve for is the big blue area, and that's why I—and this is a very soft personal opinion—am drawn to solution 2 or what you have here, perhap even removing the paint strokes.
@eidolonnight those banners can be placed to any WordPress.org page. They exist as draft page on the site. I don't think that works visually, due above comments
Sorry, @marko-srb but I don't see any comments regarding a combination of your first proposed solution and a release banner. The designs you say won't work all remove the News/Category bar, which I agree is a bad idea and is not what I'm suggesting. I'm suggesting we keep that bar and swap only the release row with a slimmer release banner.
Also, it'd be really helpful, when discussing these designs, if we could crop to just a 1920x1080 viewport, or similar. Visitors don't consume the page whole, as shown. They see only a slice at a time, and the issue we're currently addressing is the primary page content being pushed mostly below the fold (I.e. outside the viewport on page load).
No worries @eidolonnight. I maybe wasn't clear. That suggestion also doesn't work, regardless if news/category banner stays — the quick mockup didn't aim to hide them, but was done on the fly. Another potential route that [solutions from 2 and 3] (#744 (comment)) we keep the News banner with more height, also doesn't work with only 'News' in it, as you asked me in another tread to remove subtext from there. Sadly, none of those solutions work visually.
I am happy to leave this task on hold until more time for exploration, as I won't be able to work on it for a few weeks. Also happy to leave this one for you to test it live if you wish. I believe you have access to both News and Banners page. I don't mind that at all. Either way, I won't be available for a while so someone else can pick this up and continue iterating, or I will once I am back with availability.
Remove big block on top (News heading and decorative brush)
Color the Release section to #23282D (Charcoal 2)
On hover, color the right block of Release section (post link) to #1A1919 (Charcoal 0)
Since we don't show 'News' anywhere, maybe make breadcrumb link visible from the start, and not just on scroll (desktop). You can see how the breadcrumb works when visible from the start - on any subpages, like: https://learn.wordpress.org/courses/, or About page.
Make sure that hidden H1 still says 'News' for SEO needs
Activity
marko-srb commentedon Sep 1, 2026
The fix presented includes:
Fix 1. Removal of big 'News' decorative block. Also, not visually present, but 'categories' dropdown' ideally changes color.*
Fix 2. Dark style. Removal of big 'News' decorative block, and adding a standard page hero block we have on other pages. 'Categories' dropdown change color, so when user click the change is very visible, and not 'merged' with the bg color. The 'release' section becomes separate/white.
Fix 3. Blueberry style. Same as 2, but Blueberry styled.
eidolonnight commentedon Sep 1, 2026
For me, Solution 1 seems to be the best approach, especially when taking mobile into account. Solutions 1 and 2, on mobile, put content below the fold.
I think these designs also highlight that the "Latest Release" section is part of the problem. This is static for weeks and is occupying an immense amount of screen real estate, sometimes redundantly so (when a release post is also the latest post). Given that a release post is almost always one of the "Latest Posts" I think it would be safe to shrink the "Latest Release" section as well.
marko-srb commentedon Sep 1, 2026
Thanks. The issue of removing background color, and not having anything on top (in order to reduce tihings) is that we get an impression that this is doc page, or some sub-page. It still needs to be clear that this is a landing page.
As you can see in my mockup. The white version + reduced spacing a lot, produces very weird impression for the page, which should stand as a 'landing page'. I cannot really ship it like that. Maybe dark color works there for this first phase fix?
bjmcsherry commentedon Sep 1, 2026
Thanks @marko-srb, it looks like instead of just changing the colors, we could be shrinking the header a bit more, as the latest release was part of the header. Can we shrink that area further? Or do something else with the Latest Release section elsewhere on the page so that the News articles move higher up on the page?
marko-srb commentedon Sep 1, 2026
@bjmcsherry
We can do lots of things to it. But I don't think it is a good approach due 'idea to do a quick fix' soon. Due the relation to the request for this update being long ago.
Meaning: I did reduce that section a bit. In my white test it's smaller for 30px. On darker fix, the spacing towards the edge feels off, so it's not much reduced than original.
Regardless. For any other change as you asked, it is a totally new design. Which isn't an action I can sign off now — meaning I wouldn't provide such design as a thing that 'I advise going live'. Especially because it requires testing and accommodating the best solution. To clarify: it can be done, but not properly now. It requires time for nice execution, again so this doesn't feel like a 'doc' page, but as a 'landing' page.
I can show you why. Below is a 'quick fix' with your comment in mind. I cannot sign this as my contribution to this task. It doesn't work.
marko-srb commentedon Sep 2, 2026
By luck, I have this section from another page concept I am working on.
Left: still might be big in height. Right: can work. Not ideal though, so would need some more input, as I am not sure this works better than what was.
marko-srb commentedon Sep 2, 2026
CC: @jasmussen, @fcoveram, @richtabor any thoughts?
jasmussen commentedon Sep 2, 2026
Thanks for this work. I agree on a quick fix soon and further improvements as followups. The thing to immediately solve for is the big blue area, and that's why I—and this is a very soft personal opinion—am drawn to solution 2 or what you have here, perhap even removing the paint strokes.
eidolonnight commentedon Sep 2, 2026
Could we swap the release area for one of the homepage banner styles we've used in the past? Or are those not available on /news?
marko-srb commentedon Sep 2, 2026
@eidolonnight those banners can be placed to any WordPress.org page. They exist as draft page on the site. I don't think that works visually, due above comments
eidolonnight commentedon Sep 2, 2026
Good to know for the banners!
Sorry, @marko-srb but I don't see any comments regarding a combination of your first proposed solution and a release banner. The designs you say won't work all remove the News/Category bar, which I agree is a bad idea and is not what I'm suggesting. I'm suggesting we keep that bar and swap only the release row with a slimmer release banner.
Also, it'd be really helpful, when discussing these designs, if we could crop to just a 1920x1080 viewport, or similar. Visitors don't consume the page whole, as shown. They see only a slice at a time, and the issue we're currently addressing is the primary page content being pushed mostly below the fold (I.e. outside the viewport on page load).
marko-srb commentedon Sep 3, 2026
No worries @eidolonnight. I maybe wasn't clear. That suggestion also doesn't work, regardless if news/category banner stays — the quick mockup didn't aim to hide them, but was done on the fly. Another potential route that [solutions from 2 and 3] (#744 (comment)) we keep the News banner with more height, also doesn't work with only 'News' in it, as you asked me in another tread to remove subtext from there. Sadly, none of those solutions work visually.
I am happy to leave this task on hold until more time for exploration, as I won't be able to work on it for a few weeks. Also happy to leave this one for you to test it live if you wish. I believe you have access to both News and Banners page. I don't mind that at all. Either way, I won't be available for a while so someone else can pick this up and continue iterating, or I will once I am back with availability.
Thanks!
fcoveram commentedon Sep 4, 2026
As @jasmussen, I'm drawn to solution 2. That hero consistency would allow us to iterate later with other ideas
marko-srb commentedon Sep 25, 2026
Thank you all for your comments. Let's ship this version and go back to drawing board for the full redesign iteration.
If needed, Figma file here:
https://www.figma.com/design/Vh74fjV9nWRS3QCxvOxDno/News-2026-update?node-id=16798-13517&t=f1LC8vtuKthjVX5o-1
Written explanation of the changes:
Who can help us with this change?
marko-srb commentedon Sep 28, 2026
Opened in the right place, and this one closed in favor of:
WordPress/wporg-news-2021#451