Search Box

[bph]

Javier Arce:
"We shouldn’t put a search box inside the beta announcement bar. Let’s move it to the top of the Latest post section for the moment."
and "We shouldn’t put a search box inside the beta announcement bar. Let’s move it to the top of the Latest post section for the moment."

Joen Asmussen: "The search box looks unrefined:

The font size is smaller inside the input than in the button, there’s no radius on either, the input border is 2px vs. 1px, and contrast doesn’t meet requirements. Might be better to show this section on a white background, or integrate it otherwise.

We don’t use a separate label for search in other places, and usually use a single input pattern, like this:
"

cc: @javierarce @jasmussen

[ryelle]

Once WordPress/wporg-parent-2021#61 lands, you should be able to use the "secondary" style on the search block to get closer to that design.

[ryelle]

I applied the "secondary" style to the search box and moved it to the top of the posts list:

[bph]

Thanks @ryelle for updating the search box.

[ryelle]

@bph Does that fix this issue enough or is more work needed here? If it's fixed, can you close the issue?

[bph]

Thank you, @ryelle - It was @jasmussen who expressed concerns, so I'd love for Joen to chime in here and on the subscribe issue as well.

[jasmussen]

The search box looks better, yes, but it's not entirely as it looks on other redesigns. For example the Showcase was recently redesigned to have this new style of search box:

The text inside there is actually a little small, and the Figma WP.org design library remains a better source of truth:

So it isn't just about making sure the border radius, color, font, font size are right, it's also about the width of the box and where it's placed. Right now it seems randomly placed above the post list, whereas both theme directory and pattern directory have them in consistent places similar to that of the Showcase:

It's the same issue with the newsletter subscription box, it doesn't look like it does on /news.

So the primary issue is that the design appears to be diverging for what I understand to be mostly technical reasons. I understand the blog was built on the assumption that it could reuse the /news theme mostly verbatim, so the main challenge here is to get those two to actually align more.

[renintw]

Hi @jasmussen,

I'm taking over the issue, and by reading through the thread discussion, I got some questions I'd like to ask for further clarification to see if my understanding of it is correct.

• The search box in https://developer.wordpress.org/news/ doesn't align with the one in the Figma WP.org design library. It should be shorter and be refined more?
• As for where it should be placed, I'm wondering if we already had a design for it somewhere, or it still needs some further discussion.

Search box in developer-blog

---

the newsletter subscription box, it doesn't look like it does on /news.

Not sure if I understand it correctly, are the following two imgs the newsletter subscription box we'd like to compare? I don't see much difference between them. It does have a little discrepancy for the subscribe button width and font weight, is this the point you'd like to highlight? Or it's something else that I totally missed.

Newsletter subscription box on developer-blog

Newsletter subscription box on news

Thanks!

cc @bph

[jasmussen]

Thank you for the attention to detail. Yes, the boxes feels much closer now, nice work. The "Subscribe" text is still bolder, but that's a small thing that if fixed can close this issue.

On a separate note, I have put together a small refresh of the dev blog:

Figma

The idea is to reuse the design from the Developer site that's also being redesigned. What's the best way to share this design? New issue here? And would this simplify the site design work, being able to re-apply ideally the same theme that the developer site will get?

[bengreeley]

@jasmussen I think a new issue would be the right next step. Given the potential tweaks to the Developer site design that were recently discussed, I'm thinking we may want to hold off on the implementation of this new look of the developer blog until that gets settled. What are your thoughts?

Since we're looking to change the landing page significantly down the road anyways, my suggestion is we apply these light updates that @renintw made so the site can come out of beta, and then we can apply the new look to the landing page later on. If we did that, I wonder if we should pause any work on these issues which are homepage-specific and focus on wrapping up the rest of the tasks to take it out of beta:

• RSS Feed needs styling for metadata #30
• Secondary content boxes #23 (reusing grid from news page)

[jasmussen]

Created a new issue here #35

[renintw]

The "Subscribe" text is still bolder, but that's a small thing that if fixed can close this issue.

Based on Figma, it seems the bolder font on Developer Blog is the right one and the thinner font on the News isn't. After looking into it, found out that this is because the button font weight on Dev Blog is affected by the wprog-parent theme, and since the development of News didn't involve wporg-parent, so the button style is a bit off.

This can be fixed by specifically adding CSS style to tweak News button style or replacing the bottom-banner of News with the footer template of wporg-parent, but that might be some effort to do that (@ryelle correct me if I'm wrong about it, thanks!), so I'm tempted to leave it as-is on News.

Since the style of Subscribe button isn't incorrect here, and there's a new issue open for the new look of the homepage, I'm going to close this issue then.

--

As @bengreeley suggested, it seems a good idea to hold off on homepage-specific issues (#30 #23 #35) at the moment to focus on taking it out of beta, which leaves #33 #18 (PR was open) #2 (WIP, currently looking for some clarifications) to do, and after these issues being wrapped up, we can proceed to next step.