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.
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!
In an effort to share the most recent design work for 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/, I’m pinging designers to get their latest explorations and visuals to share them with anyone who reads these updates. I am hoping this provides more insight into the work as it is happening. If you have got something to add, please share it below!
The W
With the introduction of the fullscreen default mode in 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, @shaunandrews has been exploring interactions to help surface the admin menu.
The Block Inserter has also undergone some redesigns. Rather than a popover as you’re familiar with, it’s now a slideout from the left side. It also now includes the Block Patterns which used to be on the other side of the interface. It’s looking amazing!
One recent addition to the Gutenberg 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 is the introduction of the Navigation block in the Menu screen. This is a response to the outlined focus of Phase 2.
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!
Howdy! If you’ve been following along, the 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 release is pushed back a week and will be coming out next Wednesday, April 15th. In the interim, the design updates are as follows.
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. Library/Inserter
Recent designs for the Inserter are focused on figuring out how to add Block Patterns, and eventually Template-parts. Basically, if everything is a block, then having one unified way to add these blocks feels right.
Inserter animation
Full site editing
Take a look at what’s coming!
Multi-entity saving This gif below gives some insight into the saving process of multiple elements: templates, template-parts, content – all from one view.
Adding a template-part Imagine opening the Inserter and adding a 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. to your page, or swapping out your current Header with another one.
In an effort to surface what the team is working on week by week, we’re labeling issues on the project boards with [Priority] High in 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 moving them to an “in progress” column for easy identification.
In Progress for Patterns
In Progress for FSE
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!
Howdy and happy Friday, everyone! How is 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/ coming along you ask? Version 7.8 was just released on Wednesday and focused mostly on the new 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. refinements. This release included:
Adds a current menu class to the Navigation 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..
Adds a block outline when interacting with the block toolbar.
Polish around some icons.
Polish around the Date Picker.
and more…
Full site editing
Full site editing has seen some more design work recently. The extra effort reexamining the 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. and having multiple people review design work is paying off! I’m super impressed with the recent work being done in light of other site building software I’ve been testing.
Placeholder blocks Currently, templates need some way to show where certain blocks would exist, without necessarily showing actual content in them. Thus, we’ve been exploring placeholder blocks for many of the Post blocks like: Post Title, Post Author, Post Date, Post Comments, etc. These are being refined in this PR. https://github.com/WordPress/gutenberg/issues/19256#issuecomment-604765696
A few UX flows are ready for development. How exciting!
Patterns took a bit of a pivot recently. Figuring out imagery to include in the software is difficult. Do we want pictures of mountains? Or maybe natural patterns? Cars? We’re not settled on this. So rather than holding up our patterns, we’re working to build a few really nicely designed text-based patterns for now. These patterns should be customizable by themes, and not include custom CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. that makes for a difficult integration into websites.
New icons
There was a recent PR submitted that include several new icons that conform to the new G2 UI and the new icons being implemented throughout the interface. https://github.com/WordPress/gutenberg/pull/21209
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!
I hope you all are staying safe out there in the world today! This week in 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 has several things going on. Let’s address them below.
Multi-entity saving has an interesting prototype uploaded just yesterday.
Multi-entity saving in 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 another take on it in a dialog modal.
Multi-entity saving in modal
I ran a short Twitter poll that asked how people would like to be informed about saving certain parts of their site. Based on those that answered the poll, the preference for a multi-editing save at the end of all their edits. We don’t use Twitter polls to direct our design decisions, but they can help inform them.
In the context of full site editing #WordPress, after making an edit that affects the site globally, when would you like to be presented with the option to save it?
The global styles minimum viable productMinimum Viable Product"A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia (MVPMinimum Viable Product"A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia) includes some basic elements that will help anyone edit their styles across all pages/posts. These elements include: font-family, font-scale, line-height, and link colors. This issue defines how this may look: https://github.com/WordPress/gutenberg/issues/20367
Global styles in sidebar
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. patterns
The block pattern work is already included in the current 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 right now as an MVP. We’re working to add more patterns that are great for common layouts that many can take advantage of. Once more patterns are added, work will continue on the Block Library to include them there as well.
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!
It’s Friday again! If you’re following along with the 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/ releases, you’ll notice that Gutenberg 7.7 was released this week and with it came a newly designed interface creatively named “G2.” 😉 This redesign provides higher contrast, less 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. visuals, and new icons including a streamlined and pleasant experience.
I recently shared this interface in a diagram layout identifying the various parts. This file can also be found in Figma.
If you’re not familiar with Figma, it’s a design tool that allows real-time collaboration. There’s no need to download anything because it lives in the cloud. 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/ has an account where the Design Team keeps all our libraries, and where the designers do most, if not all, of their work. It’s open for anyone to join and use.
Figma
In fact, if you’re looking to help contribute to Gutenberg design work, especially in light of the new G2 UI updates, here’s how you might go about finding things.
If you’ve haven’t been added to the Figma account, you can ask for access in the Making WordPress #designSlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel. Once you’re set up, you can browse the various files for each of the projects in the WordPress.org account. Notice there’s one specifically for Gutenberg.
Inside the Gutenberg Project is a file for G2. This file contains a number of the G2 components used in the new redesign of Gutenberg. It’s still very much a work in progress, but can help get you started quickly. Just copy and paste the parts you need into your own file.
G2 Figma file
Full Site Editing
Most, if not all, issues regarding full site editing have design work posted to them. This is great news! It provides everyone some visuals to talk through. If there are iterations needed, they remain in 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/ with the label “Needs Design.”
The Top Toolbar for full site editing is closing in on a solution. This is going to be the way by which users will navigate through the experience and select individual pages, templates, template parts, etc. for editing.
FSE Top Toolbar
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. Patterns
Block Patterns are also implemented in Gutenberg 7.7. Their current UI is only an MVPMinimum Viable Product"A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia, but should help everyone realize the benefit of patterns in the layout of pages and posts. Lots of work is going into providing common patterns and getting this in as early as possible for testing and feedback.
Block patterns
Global Styles
Global Styles are in an MVP stage as well. While not quite yet integrated into the 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, there is a PR that can be tested.
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!
Happy Friday! The 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/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 has gone through 2 weeks in a row of releases earlier (7.4 and 7.5) due to the betaBetaA pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. release of WordPress 5.4. However, we did not have a release this week. Our next RCRelease CandidateA beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. for Gutenberg will be on this coming Monday with an expected release for Wednesday. We’ll then continue with our bi-weekly release schedule.
In those two releases, we saw a myriad of features:
Added text color options to the Group 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..
New 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. for adding links to text.
Background and text color support for the Columns block.
New Social Links block.
Added inline color to specific words within text.
Added featured images to the Latest Posts block.
And everyone’s kid’s favorite; TikTok embed support.
Full site editing
Full site editing is experiencing TONS of mockups and 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 explorations right now. Check out the Figma files to see the work happening there.
Template-part selected state as seen in the 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/ issue: https://github.com/WordPress/gutenberg/pull/19929
Global styles
The Global styles team has narrowed down the Minimum Viable ProductMinimum Viable Product"A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia (MVPMinimum Viable Product"A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia) to just get some basic global styles into 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.” interface for now. Mockups and prototypes are still being built around improvements.
We’ve also decided to trim down block patterns UX to an MVP as well. This will most likely begin as a sidebar that allows the selection of block patterns to be inserted into the content. Turns out attempting to redesign the Block Library will take more development effort. We want to get patterns in sooner, so an MVP feels the better way to go.
Block Patterns future UI
Lions, Tigers, and Sidebars! Oh my!
If this sounds like a lot of sidebars to you, we hear ya! It’s a quick way to test interactions out, get some feedback and forward direction. We understand that some of this work isn’t the ideal scenario, and everyone is working to improve it. Thank you so much to everyone contributing!
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!
Full site editing is underway! Mockups are being explored and Information Architecture (IA) flows are being examined. Let’s take a look at the work.
Full site navigation
Navigating through various pages, posts, templates, and template-parts can get overwhelming quickly. It’s tricky. Figuring out how to navigate through these flows and simplify it for the users is incredibly important.
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!
Howdy, and happy Friday! Gutenberg 7.3 just released this week! It included a several fantastic improvements.
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/ 7.3
Navigation 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. text/background colors
Navigation block text and background color
Better block labels in the Navigation block’s Navigator
Navigation block navigator
Replace media flow has been added to the Cover 19583, Media+Text 19198, File 19174, Audio 19158 and Video 19162 blocks.
Replace media flow component for an Image block
This release also includes lots of “lighter DOM” PRs which improve performance and make the DOM easier to style for both 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 and theme authors. Many, many, many bug fixes as well.
WordPress 5.4 Preparation
In preparation for WordPress 5.4, a list of particular PRs has been gathered that I’m hoping we can get in. The list includes:
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!
Happy Friday everyone! This will be my last update through the end of the year. I’ll reconvene in January again. I wish everyone happy holidays and a wonderful New Year.
It was also decided in the #core-editor meeting that there will be no 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/ releases or meetings for the remainder of the year. We’ll pick these back up in January.
Navigation 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.
While the Nav block has found its way into the 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, it’s also being iterated upon to improve basic UX interactions.
@karmatosed is exploring the Menu screen in wp-admin which is in the early stages right now. There are mockups ready for design feedback. Please drop in on the ticket and leave your thoughts.
Block Directory
A recent post was written by @melchoyce that really brings together some plans for the next phase of the Block Directory.
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!
You must be logged in to post a comment.