Design Share: Jan 29-Feb 9

The Design Team provides design for the WordPress project.

Want to get involved? See the handbook and optionally drop into #design to chat. Most active design work happens in the block editor project, consider dropping into Needs design or Needs design feedback.

Figma Access

You don’t need edit access to use the Figma libraries, you can copy components from there into your own drafts. If you’re a contributor with the ability to grant edit access, please be mindful, and downgrade to view access once the initial need for edit has waned.

WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ polished nav

To the new design that optimizes local navigation, we applied new tweaks and documented the components specs and variants for the whole site. The implementation is already in progress and design QA will follow up.

Font Stacks

A discussion around how we can surface an interface for the ability to define font stacks and font fallbacks. With the font library being an interface for uploading and managing font files, the suggestion puts font stack management outside of that modal, letting you combine both fonts you uploaded, as well as common webfonts, into multiple stacks.

Concerning Placeholders

In a draft PR, the path forward for container blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. setup states is being discussed.

Summary polish

Some followups and polish to the summary panel, to align button sizes, and correct a missing border on the disabled state of secondary buttons. PRs 1, 2.

Revoking Google Fonts access

Before you get access to install fonts from the Google Fonts source in the Font Library, you have to grant permission to connect to the server. This sketch surfaces how you can revoke that permission again.

Openverse dark mode

For the dark mode project, we continued testing and adjusting the palette. We played with LCH color mode and how lightness look like in result details views.

If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

#design, #design-share

Tom J Nowell 4:15 pm on February 12, 2024

On the subject of .org nav design updates and seeing the Openverse dark mode, can we see some improvements to search?

Previously I could open developer.wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ and copy paste/type a function name to search and it’d pop up.

But now that searchbox is gone, and I have to use the search blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. in the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.. It no longer goes straight to the functions page and shows generic .org wide results that aren’t as good, and the popup box to type the search term in from the header is tiny, you can only see a small portion of your term if it’s a long function name or a component you’re not sure of.

In comparison the big bold search box on openverse looks amazing. Making the popup with search wordpress.org full width rather than 2-300px wide would go a long way to making it better, but I can see there’s a lot of room for improvement
Adam Wood 7:26 pm on February 12, 2024

Hi Tom, thanks for the feedback on the new design. You can still perform code reference search via the search box at https://developer.wordpress.org/reference/. It was decided not to have a search box on the homepage for the first iteration (although I don’t it existed on the old homepage), but it may be worth revisiting that decision, you can read the discussion.

Comments are closed.

The Design Team provides design for the WordPress project.

More information

Font Stacks

Concerning Placeholders

Summary polish

Revoking Google Fonts access

Openverse dark mode

Share this:

Site resources