Design Share #59 (Jun 17-Jun 28)

This is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.

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.

---

Background/Image Tools

Status: In progress

Work is continuing on background tools with discussions around how we can consolidate a UIUI 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. that is currently split across different panels. A “Background” item in global styles is one initiative, perhaps a separate “Background” panel is too. Discussion on this PR.

Fill → Grow

Status: Needs feedback

Flex tools have a dimensions control that lets you choose between Fit, Fill and Fixed. The term “Fill” can be confusing in this context, though, as its meaning in this context is ambiguous, and overlaps with background-fill terminology. Renaming it to “Grow”, arguably, helps make its behavior clearer. Issue.

Dimension Tools

Status: Needs feedback

Padding, margin, minimum height tools are a bit hard to scan the difference between. By adding icons to each row, we might improve that. Issue.

Aligning Naming Modals

Status: In Progress

Renaming is a common action, yet users are presented with slightly UIs surface inconsistent versions of this modal. A series of pull requests seek to bring these into alignment with a focus on:

• Ensuring the input is automatically focussed on open
• Consistent titles and labels
• Consistent button sizes and labels

Adding custom fields in data views

Status: Conceptual

A very early mockup exploring how it could be made possible for users to create custom fields from within data views.

In table layout a + button appears before the ‘Actions’ column. Clicking this navigates to an ‘Add custom fieldCustom Field Custom Field, also referred to as post meta, is a feature in WordPress. It allows users to add additional information when writing a post, eg contributors’ names, auth. WordPress stores this information as metadata. Users can display this meta data by using template tags in their WordPress themes.’ page where the field is configured.

Design tools exploration: Contextual color controls and new panels for Background, and Elements

Status: Conceptual

The text color control is relocated to the Typography panel. The background color control moves to a new Background panel, alongside the background image control. This facilitates two improvements…

1. The dedicated ‘Background’ panel offers support for multiple background layers (including images) and custom ordering.
2. A new ‘Elements’ panel, where users have full control over the appearance of elements within a container. Today they can only adjust color.

Discuss in this issue.

Lessons in Course page

Status: In progress

As part of the Learn redesign project, we have been improving how lessons are displayed on the Course details page. The variants span users browsing content without logging in and users who have completed the course.

Open Graph images

Status: Needs feedback

In collaboration with contributors working on enhancing the 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/, we decided to have a template file in Figma Community for Open Graph images translated to other languages. The testing file was created and shared to identify flaws and other improvements before making it available to everyone.

Theme preview

Status: Completed

As part of WordPress.org style refresh, we improved the interaction flow inside the Theme preview for shifting between style variations and patterns to be consistent with other site-wise updates. The change is already live, like in this example.