If you have updates you’d like to include in the next Design Share, drop a note in the #design channel. If you have questions, you can also ask them there, or as a comment on this post.
Learn homepage
Status: In progress.
Here’s an exploration for the Learn landing page that uses a card-based layout.
Video thumbnail generator
Status: In progress.
The thumbnail generator file is done and ready to be used. However, we’re preparing the intro and how-to content to publish the file in Figma Community. Francisco also plans to record a video showing step by step how to generate the visuals.
Dark mode switcher
Status: In progress.
Continuing with the design assets for Openverse’s Dark mode project, we’re exploring ideas to highlight the new theme switcher component in the UI UI is an acronym for User Interface – the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. as part of the feature introduction task. Previous ideas tapped into modal announcements, but the feedback collected suggested going with a less intrusive notification.
Additional search views
Status: Completed.
Now that the Additional Search Views project is done, we made a video to announce the new result views on WordPress socials. The video shows a real UX UX is an acronym for User Experience – the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. flow of landing on a tag view.
Grid indication
Status: In progress.
Grid work continues, with resize handles in the canvas being focused on. Here are some mockups that leverage currentColor to ensure that grid-cell-indication is visible regardless of theme colors. PR.
WP.org Blocks page: small updates
Status: In progress.
The potential for a future WP.org blocks page is still being discussed. While that happens, we’ve been exploring a few light updates. It’s a block 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.-editor page, after all, so small changes are easy to make, even when waiting for bigger and better things.
Aspect ratio toggle in data views grid layout
Status: Conceptual.
Currently the preview field in grid layout renders in a hard-coded 1/1 aspect ratio, IE a square. As a default this works reasonably well, but some consumers would appreciate more expression. Pattern and Template previews for instance can be all kinds of lengths… squares don’t always offer the best experience. By allowing custom (or auto to begin with) aspect ratios data views can make better use of space. Issue.
Command Palette: Add links to data views
Status: Conceptual.
The Command Palette is missing shortcuts to access data views like Page or Template management. Issue.
Site editor page spacing metrics
Status: In progress.
The spacing values in the page component and many data views elements are a “one size fits all”, which of course doesn’t really fit all, and results in compromises. For example in narrow instances (like List layout) the spacing feels a bit too large. In wider instances (grid / table layouts) you could say the spacing feels too small, especially on very large screens. Pull request.
Hover/Focus/Current states
Status: In progress.
Being able to design the various states of buttons and menu items has invisible complexity. One is that you need to be able to design hover, and hover+current states separately:
Another aspect is that color is not enough, you also need access to other things like text-decoration, border, radius — any design tool a neutral state would have access to.
57719 outlines a design that can scale from handling these states, to exciting things in the future. The following mockups were extracted from that design, to handle just states for buttons and navigation items:
Color Variations
Status: In progress.
A slight adjustment to color variations in Global Styles, which allow for themes with many color variations to scale better. PR.
Leave a Reply