The Design Team provides user experience, user interface, and visual design expertise for the WordPress project.
Want to get involved?
Welcome! This all-volunteer team needs designers of various kinds. 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 WordPress 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.
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
Additional search views
In Openverse, we designed additional search views for sources, creators, and tags. Soon will be possible to land on a sharable landing page that allows users to browse content under any of these content groups.
Metasearch
As part of the 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. improvement project, we designed a cleaner metasearch to allow users searching in external sources in a new modal instead of a popover.
Showcase
A refined take on the Showcase refresh, to hopefully be implemented soon. Issue.
FilterFilterFilters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. component
As part of the WordPress.orgWordPress.orgThe 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/ redesign, we’ve been designing a Filter component to reuse it in all sections and ease the content browse.
WordPress.org Design Library
In parallel to the WordPress.org redesign, we are cleaning up the Design Library by blending components, adding new ones per site section, and introducing variables to ease the mockup creating and dev hands-off.
Command palette border fix
Before/After
From the department of details matter, a 2px border was changed into a 1px border in the command palette. PR.
Top toolbar button fix
Before/After
PR to fix an issue with the new top toolbar when a pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party added a button to the top toolbar.
More details to Template Parts
Before/After
PR to add more information in the detail view of template parts.
List View description
PR to add a description to the list view, making its use case clearer.
Confirm dialog improvements
Before/After/Also
PR to simplify, reduce, and bring consistency to our modal confirm dialogs.
Patterns section column improvements
Before (always 2 columns)/After (2-4 columns depending on screen)
Two PRs (one, two) to improve the display of patterns in the new Patterns section, wrapping to 3 or 4 columns when space allows it, rather than be locked to two.
Patterns section detail view improvements
Before/After
PR to add context and distinguish between patterns and template parts.
Pattern creation icon updates
Before/After
PR to update the icons shown when you create new patterns. These go generic reserving the location-based icons for headers and footers.
Frontpage Template Details
Issue with a design take on what the detail view for the Front Page template could look like.
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 SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
Site Editor Legends
A small set of “legend” style pictograms depicting various 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 of the blockBlockBlock 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.
Navigation “focus mode”
Menus can be edited in isolation, just their content and none of their style. If you want to edit their styles, you have to edit the menu in context of a template or template part. On its own, this differentiation can be a little confusing, but the split is similar to how blocks in the Style Book are styled. For that same reason, this mockup leans into an incoming Style Book refresh to add in-canvas controls for orientation and otherwise. Issue.
Reusable Blocks, Library, “Patterns”
In 6.3, you will be able to create and edit your own custom patterns. Since the underlying tech is similar to that of reusable blocks, a rename is being considered, so reusable blocks will simply become “Synced patterns”. Here are some related mockups. Issue, Issue 2.
Editing prompt layout shift fix
Before/After
Small PR to fix a layout shift between the default appender — the first prompt to “Type / to choose a block” — and the empty paragraph thats added there on click.
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 SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
Pattern Library
Closing in towards completion are two important phase 2 PRs as shepherded by Glen, Aaron and Saxon, with aim to have a version of this in 6.3. PRs to follow, 51144, 51078.
Modal radius
Before/After
Small PR to update the border radius from 8px to 4px to better match buttons that sit inside.
Toolbar button refinements
Before/After
Issue outlining some visual improvements to how the buttons on the right side of the editor toolbar can be refined a bit. Issue.
Styling drop caps
New issue outlining how we can add more customization controls to the drop cap option. Issue.
Styling and customizing ordered and unordered lists
New issue outlining improvements to the list blockBlockBlock 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. controls, such as customizing the bullet, the type of numeral, color, or size. Issue.
Add template explorations
Polishing some details around the current flow, including updating the template titles. Also exploring a longer-term update which brings the add-template flow into the command palette.
Home template details panel
Putting the finishing touches on the Home template details panel. PR here.
Site editor publishing
PR to add a publish flow that works in context of the new content/template editing split.
Learn Refresh
Higher res version. With the first sketch shared early the WordPress core Slack to gather initial impressions, sections in the Learn categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. on WordPress.orgWordPress.orgThe 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/ are being revisited in a minimal and pragmatic way, with a new design language that can be systematically applied to multiple pages and sections. Note that these mockups are still just that, mockups, which is why they are full of lorem ipsum text and without all current feedback applied yet (please keep it coming). Hopefully the design language can inspire content updates that can leverage and inform these designs.
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 SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
Font Management
Moving fast now is a fonts library PR, which we are collaborating on while continuously refining the mockups shown here.
Palette icon
In effort to avoid confusion between the Global Styles iconography, and the inspector Style tab, this palette icon is an explored alternative. Let us know your thoughts.
Toolbar icons
Before/After
With recent additions to the top toolbar (view post and document title), there’s an opportunity to simplify and revisit the visuals for consistency and compactness. Issue.
WP.org account security
WP.org account security features are getting ongoing refinement, with these new mockups detailing checklists and flows for adding security keys.
Content/Template editing improvements
First passs of the improved flow for clarifying when you’re editing content vs. template has been landed, and will appear in v16 of the plugin, thanks to Saxon and Robert.
Create new page
In this PR by Saxon, a unified “new page” modal is introduced in the site editor. This modal can eventually be invoked from anywhere, including the navigation items or in the link 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., creating a consistent initial building experience.
Improved template table view
A PR to improve the table view for templates and other manage views.
Page details
With the Pages section landed in the site editor, this PR improves the detail views for individual pages.
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 SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
A new release has begun, and this time @richtabor and I are collaborating on the design leading. In order to kick things off, we are holding an open zoom session May 26, 2023 at 14:30 UTC. The Zoom link will be shared in #design.
After the session, a recording will be posted here, along with notes and updates.
Agenda
Discuss what is going to happen going forward.
Begin to prepare a spreadsheet of all issues across GitHubGitHubGitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ and tracTracTrac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. that need doing.
Prepare a list of things that will need issues that haven’t got any.
Have some space for questions or look to answer them async.
The session will take 30 minutes to ensure everyone can easily watch or drop in. It will be a working session with a focus on getting all the issues into a log.
Questions about design in releases?
Do you have any questions you want answered? Whilst we might not get time in this meeting, the goal of this release is to document and setup future leads for being able to access information easily. Is there something you’ve always needed to know about leading design in a release? Curious how it happens and can’t find specific information?
Now is the time to ask the questions you can’t find the answers to and get those responses documented so you and future contributors can be empowered to lead awesome releases going forward. So, you can do the following:
Once we have those questions, we will both try and answer them and also add to our list of things to document.
Designers joining coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. and editor triages
As one change to start off this kickoff, design triages are going to be part of the core and editor triages. This means that attending those times is something if you are curious about triage or getting involved is a good idea. There will be more on this and other ways to get involved as the release pace gathers. To discover the triage meetings you can find them in the meeting calendar link here.
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
Cleaner results layout
After updating most 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. components with the new button styles, we made use of the button revisit to polish the content media links and headerHeaderThe 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. layout of All content results. Design ticket.
Notification banners
As part of the analytics project, we are updating the notification banners for the new privacy settings and other possible performance breaks we need to inform users about.
Detail panels
Continued work to nail down the contents of the details panel in the site editor for various contexts.
Save modal
An updated design for the Site Editor save modal.
Save dock behaviour
We’ve updated the behaviour of the save hub in the site editor so that it only prompts to review changes when there are changes outside the current context. PR.
Patterns
Introduces a way to create and manage patterns via a consolidated “Library” space. This work is leading up to the idea of synced patterns. Issue.
View site link + new external link icon
A design for an unobtrusive “View site” link in the site editor. Also updates the `external` icon making it more harmonious with the rest of the set.
Document Title
As part of designing the new title bar, we’ve created designs for all cases of the toolbar, across post editor, site editor, top toolbar, and mobile combinations.
Navigation in Site View
A navigation section was included in the site editor late in the 6.2 phase, but was pulled at the last minute due to some intricacies of its behavior. We are revisiting and simplifying these behaviors, with a primary focus on surfacing every menu you have saved, and letting you do basic management in the site view, still directing you to the edit view for intricate operations.
Notification bell
A coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. project, WP Notify, is making progress, and we’re seeking out how we can collaborate with them. For now, we’ve contributed a bell icon.
Condensed margin/padding controls
Before/After
Thanks to work by Aaron, more condensed unlinked padding and margin controls are close to landing.
When building thems in the site editor, it can be unclear from where a particular style originates (theme, user, global unspecific, global specific, local, etc). These concepts explore how to visualize that in an unintrusive way, and could use your feedback.
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 SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
RevisionsRevisionsThe WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.
Featured ImageFeatured imageA featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. improvements
A new language icon for polyglots to use, or to go with the lang attribute control.
Detail panels
In the site view of the site editor, each sidebarSidebarA sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. section you navigate to we’ve referred to as “detail panels” or “drilldown details”. They are a good opportunity to surface high level options, without needing to dive into the edit view.
You can create pages from a variety of locations, such as URLURLA specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org dialogs, navigation items, the command center, or the site editor. An important part of a site building flow is also to create a slew of pages initially as you are building out your site, then edit them later. These mockups imagine a unified modal for this.
Pattern modal updates
Before/after
When creating things like Query Loops, Templates, and Headers, there are prompts in the site editor that ask the user to choose a pattern. Previously these prompts opened small, cramped modals that forced the user to scroll a lot to see all the options. They now open comfier ‘full screen’ modals that are capable of showing many patterns at once.
Call for testing: content/template split in the site editor
Mockup showing how an “Add new page” detail panel could look like as invoked from the site editor.
On-canvas radius manipulation
A quick mockup to demonstrate how we might enable users to change the corner radius of a blockBlockBlock 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. without having to open the Inspector.
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 SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
