The Design Team provides experience, interface, and visual design expertise for the WordPress project.
Want to get involved? See our handbook and drop into #design once signed up for volunteer opportunities. Our vision is to be the go-to resource for design for other teams across the open sourceOpen SourceOpen Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. project.
GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ updates
There are not many updates on Gutenberg as Gutenberg 6.8 RCRelease CandidateA beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. will be ready next Monday 28 October, according to @mapk.
@estelaris mentioned a post published last week regarding the new design on HelpHub for Home and CategoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. pages. The post had very good comments and the changes were incorporated to the HH Homepage re-designed by the team at WC Valencia, lead by @AnaCirujano. The new design will be based on Valencia’s design with a few details added. You can leave your comments on Figma (if you do not have access, please ask in the SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.#design channel.) The plan is to finalize both the Home and Category pages for mobile and desktop this week and present them to #docs next Monday.
New Type Scale for WordPress
@davewhitley shared his proposal for a new type scale for WordPress. So far he has applied the type scale to 3 screens: posts, settings, and the editor. See images below:
Comparison Settings caused some discussion due to the type becoming smaller on large sentences.
The gifs will be added as comments on the post for more visibility. There were questions as to how other languages would be affected by the type scale, for example in languages with long words like German. One solution would be to make the admin menu a little wider to accommodate other languages, but that is a different discussion.
The type scale, if accepted, would be applied to all the WordPress application: WP Admin, customizerCustomizerTool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings., editor, etc.
Another two feedback points from the post that were discussed:
There is no documentation yet on when or how these styles should be used.
The “label” style which is all caps. Currently, there are headings that use all caps in WP Admin. The #design team argued against the use of all caps due to accessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) issues. And because we don’t want it to be a blocker for the type scale, it can be removed.
Secondary Button Styles
There have been several discussions about the new secondary button and how it looks too similar to text input styles. This needs to be solved in the future. As of now, @davewhitley is gathering good and bad button examples and input fields on a Figma file. There is also the design systems repo, where people can find examples.
There seems to be a concern that border-radii varies quite a bit. All small interactive UIUIUI 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. elements should use the same border-radius, we believe this was the result if fast integration and someone must have missed or not accounted for something.