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.
We meet and have ongoing discussions in Slack#design
Team: Wednesday 18:00 UTC
Triage: CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress./metaMetaMeta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress.: Monday 16:30 UTC 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/: Tuesday 16:00 UTC
Happy Friday, everyone! I’ve got some interesting design updates today regarding full-site editing with 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/.
Page & Template Navigation
Initially, I had assumed the two dropdowns in the middle of the top toolbar were primarily for navigating between pages or templates. Turns out we are going to try another direction. Matias expressed an interest to utilize these two dropdowns as a way to modify the page or template – not necessarily for navigation. So something more like this:
The second works similarly to the 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.. Users would be able to use a modifier key + click on a navigation item in the page to jump to that page. Or there may be a way to click the menu item and click the link appended to it like in Google docs.
The Navigator
The Navigator is getting some revisions lately. We are adding movers to the blocks and will add the ability for dragging and dropping. There’s even some talk about adding an ellipses menu for more options. With these additions, the Navigator is becoming a significant way to work with your content. @michael-arestad explored the Navigator as a persistent slideout panel similarly to the outline panel in Google docs.
Template parts & Patterns
The relationship between template parts and patterns does leave one feeling a bit confused because they are so similar. One defining difference is that template parts are global and patterns are local, but what happens when we start talking about 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. and Footer patterns? Yesterday, @michael-arestad brought up that template parts are really just containers that hold patterns. This means we don’t need another tab in the Inserter for template parts! Basically, when editing a Header template part, the user will see Header patterns appear first in the Inserter.
This means that categories for Patterns will definitely include Headers, and Footers among other things.
Building templates
The last thing today was about building templates. Figuring out this UXUXUX 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 is important. Right now we are leaning toward a flow that includes some sort of step process that provides a skeleton for users to click and manipulate. Imagine creating a new template and seeing a screen that already lays out a Header, Content area, and Footer. Clicking on the Content area provides an option of a 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. or not. This is still just being thought through… nothing solid yet.
Get involved
Now is a great time to get involved. While the work on this project is intense, it is always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details, contribute, and leave feedback.
Thanks for reading, staying informed, and contributing anywhere you can!
PRs that have PRs ready for testing. If you would like to try out the new 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/ enhancements, you can do it with gutenberg.run in GitHubGitHubGitHub is a website that offers online implementation of git repositories that can 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/
Design updates for Gutenberg
FSE Site Builder screen is getting closer in terms of parity with the post editor, there’s still some work left
Posted a prototype of a page switcher when editing site – could use some feedback
Proposed persistent 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. navigator
There was a call for tasks that we could work on during contributors day. We have a comment from @mapk about Figma components but we would like to have more. Another task could be about colors/input styling consistency in Gutenberg. Please add to the post above.
Open Floor
Ste Dobrescu, a new contributor asked for advice on some work he is doing regarding CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. for the admin are in WordPress. The team provided some feedback and recommended he joined the #core-css channel where he can find more help.
@netpassprodsr introduced the idea of mentorship as a role for the design team. @karmatosed asked if anyone in the team is willing to write a proposal for the design team.
Volunteers to run coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. and metaMetaMeta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. triage on Mondays
Updates from any specific focuses
Status of 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/ design work
Handbook update
TrelloTrelloProject management system using the concepts of boards and cards to organize tasks in a sane way. This is what the make.wordpress.com/marketing team uses for example: https://trello.com/b/8UGHVBu8/wp-marketing.: what is in our inbox?
This meeting is held in the #design channel in 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/..
Leave a comment if you would like something reviewed, discussed, help or something added to the agenda.
Happy Friday! 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/ 8.0 just dropped this last Wednesday. This releaseReleaseA release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. included the new Inserter which now contains Patterns.
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. Inserter
Probably one of the most significant updates to Gutenberg’s 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. in relation to the G2 changes is how the Inserter works now. Not only does it slide out from the left side instead of as a popover, but it also includes Patterns!
Now’s a great time to get involved. While the work on this project is intense, it’s always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details and contribute.
Thanks for reading, staying informed, and contributing anywhere you can!
WordCampWordCampWordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Europe Online will take place on June 4-6, 2020. If you haven’t registered yet, get your tickets on the website.
With only a few weeks away, we need to plan our tasks to make better use of our time. This is a call for tasks or projects that could be resolved in a few hours.
Tools
The tools that we will use during Contributors day will be the design Slack channel and Zoom (a link will be provided early on June 4th).
If you are a new contributor we will have open office hours between May 25 and June 3, more on this to come.
Call for Tasks
Do you have an idea of a task that can be solved by the design team? Or are you working on a PR that needs design feedback?
What would be a good task? An example will be a simulation of a triage and walk through open issues.
Let us know in the comments and we will be making a decision on which tasks will be working on depending on the number of contributors we have and the number of tasks.
The call for tasks will close on May 20, 2020 so we can discuss tasks in the next two design meetings and make a good plan.
Last month saw the first show and tell, let’s have another! This time so far there is set agenda so now is your opportunity to add a comment and share something. Do you have something you are working on to share, it can be 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/, coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress., metaMetaMeta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. or even a demo of something cool.
Maybe it’s something you want feedback on that you are contributing, or perhaps it’s something you are working on and would love to bring into the project. Now is your time to share! To share something, just add a comment here and you’re on the agenda!
The video link will be shared in #design on SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. just before. Make sure you download zoom before. There will also be a recording, posted so you can watch async if unable to make the time.
Welcome to the 50th 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/ design update y’all!
With that, here’s a video of the full site editing experience from @matveb during the WPBlock Talk online event.
Seeing this come together is amazing! Watch Matias navigate through the experience and easily build a site and edit crucial content within the same interface.
Gutenberg now has its own icons package. This allows Gutenberg to use SVG icons when needed without requiring an entire sprite of icons to load as Dashicons does.
This being said, there’s an interesting post from Joen about the future of Dashicons. Spoiler, they are not going away and will remain a vital part of WordPress. They’re just getting another 30-something icons and then moving to a maintenance mode wherein they will no longer accept further requests.
Get involved
Now’s a great time to get involved. While the work on this project is intense, it’s always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details and contribute.
Thanks for reading, staying informed, and contributing anywhere you can!
