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. and 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
There is an easier way to try out a 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/ PR that does not require one to setup a local Development Environment. One can download a special version of a 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 that includes the PR one wants to test.
Here is a video I made showing how it is done. This is a great way to be able to give feedback to features as they are being worked on.
An alternative is to visit gutenberg.run and insert the PR number and sit and wait until the site has loaded up the Pull Request.
Quick start instructions.
Find a Github Gutenberg PR you want to test out. Along the tabs just below the PR title. To the right of the active Conversation tab is the Checks tab. Click the Checks tab. Along the left side is 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. containing various links. Scroll until you find Build Gutenberg Plugin Zip. Click the Build Gutenberg Plugin Zip. Scroll to the bottom and click the gutenberg-plugin link. The Gutenberg plugin is then downloaded. (On a Mac) Double click to unzip. There is one zip within another zip. Both are uncompressed. Right click and choose to compress the uncompressed folder back to a zip. Upload the Gutenberg plugin zip to a test site and test out the PR.
Add a comment to the PR asking for the special Build Gutenberg Plugin Zip if you have not located it in the Checks tab.
Thank you to everyone who submitted, refined, and helped launch this set. I’m thrilled that users have such a broad set of high-quality patterns to choose from at launch, and I look forward to iterating and growing the collection over time.
Now that we’re post-launch, we’re going to close submission of general patterns to this initial collection. The next phase of development for the directory will allow anyone to submit their own patterns directly, so please hold onto your ideas for then!
In the meantime, the design team may add a few more patterns from time to time (similar to how default patterns were occasionally added to 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/ before). You can keep an eye on the Pattern Directory’s GitHub repository for any activity there. Also, if you notice a bug with one of the existing 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/ patterns, please file an issue and let folks know!
This week’s meeting is a show and tell so come and join us in the zoom, the link will be shared in the design channel. If you’ve got anything you’d like to talk about just comment here or bring along the topic to the meeting.
WordPress 5.8 (released last week 🎉) brings the power 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/ blocks to widgetWidgetA WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. areas — which means highly customizable layout and styling options, and a more WYSIWYGWhat You See Is What You GetWhat You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. editing experience. I made a test site based on oldie-but-goodie Twenty Sixteen theme, which has 3 separate widget areas to work with. In this post, I’ll highlight a few cool things that are now possible to do with your widgets, and a take a look at where things may be heading next.
Create interesting visual effects with overlapping layouts and Duotone images
Appearance-wise, users have a lot more control over widgets areas than ever before — especially through the use of blocks with tons of customization options like the Cover and Image 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.. Here’s what I’m able to create in the classic widgets editor (above) versus what I’m able to create in the new block-based widget editor (below).
Intersperse widgets and custom code throughout your visual designs
Container blocks like Cover and Columns make it really easy to weave dynamic or interactive elements into your designs. While dynamic/interactive elements are sort of a given for many types of widgets, the block versions of widgets can be easily wrapped and layered within container blocks to more fully integrate them into your layout.
In the example below, I tried placing a Search block in front of a Cover block, which creates a nice layered effect. I also tried inserting Custom HTMLHTMLHTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. blocks within a Columns block to display different messaging depending on the time of day. (jQuery script here)
Use traditional widget layouts (or not) with lots of flexibility over title and structure
Classic widgets have always had a lockup that includes a widget title. One cool thing about having blocks in widget areas is that you have complete flexibility over how titles appear. For example, you might choose to have a title over every widget, you might only want one title at the top of each widget area, or your design might not need titles at all.
Note: Some themes, like Twenty Twenty-One, are designed to flow content horizontally within widget areas. If you’re having trouble with a theme splitting your layout into columns, you could try keeping the lockup together by containing it within a Group block.
Copy & paste existing layouts from the WordPress Pattern Directory
While patterns haven’t been fully integrated into the widget editors yet, one thing you can do is copy and paste patterns from the game-changing new WordPress Pattern Directory into your site’s widget areas. I used this horizontal call to action pattern from the directory almost exactly as is, with minor color and copy adjustments:
Inserting widget patterns
There is some early discussions about how patterns can begin to be integrated into the widget editors in GitHub issue #26170. Some of the conversation has been around introducing a Patterns tab into the inserter, which would allow users to browse patterns the same way as in the post editor.
A couple of goals for introducing pattern insertion 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. into the widget editors are:
Display patterns that make sense to use in a constrained 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 footer area, depending on the type of widget area being edited.
Surface patterns in a extra discoverable way for users (including classic widget users who want to quickly recreate a traditional layout).
Based on this, I’ve been exploring ways that patterns could be surfaced in the quick inserter as a default/resting state as soon as the popover is opened:
Thoughts?
How would you like to see patterns incorporated into the new block-based widget editors? Join the discussion by opening a new issue on GitHub or commenting below!
Welcome to a new installment of the series where I look at the current state 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/ blocks and propose improvements.
In my previous post, I talked about the Table 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.. This time I’ll be discussing another important component: the Search block.
Since search is a central activity for blogs and other sites that index content, it’s essential to give users the ability to customize the appearance of their search bars so that they don’t look alien or feel disconnected from the design of their sites.
The Search block options are pretty limited at the moment, and the block can only offer a short range of styles. The good news is that just by adding a small group of settings (many of which already exist for other blocks), users will be able to customize their search boxes in many different ways:
With that in mind, let’s have a look at this block.
Toolbar
The current toolbar has three main buttons that perform the following actions:
Showing and hiding the search label.
Changing the position of the search button (outside, inside, or no button).
Toggling between a search button with text or an icon.
To be more consistent with the way other blocks present the options and also to simplify the toolbar, we could move the second and third buttons (“Change button position” and “Use the button with icon”) from the toolbar to the 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.. In the case of “Use button with icon”, I think this is not a primary action, and also the icon itself doesn’t convey the actual operation behind the button.
We could also add a setting to modify the alignment of the text inside the input field and the position of the text button. Controlling the alignment would allow users to create bars like these ones:
For languages that use right to left scripts like Arabic, Hebrew, or Urdu, we automatically switch the alignment of the text and the position of the search button.
To allow having styles that use the writing direction defined by the language, we could offer four alignment options:
Default (it uses the direction of the selected language)
Left
Center
Right
The last three options would overwrite the direction defined by the selected language.
Sidebars
Let’s review how the sidebar could look like and the sections that it would include:
This section would replace the “Change button position” that we removed from the sidebar, and add a new option: Button only. There’s an open issue that discusses this option here.
When users add a new search bar, they’ll get the default setting (Button outside), but will have the other styles visible on their sidebars for a quick switch.
Display settings
This section would allow adjusting the general width of the block (a feature that is currently present) and also toggling the following settings:
The icon inside the search input.
The icon inside the search button.
Here is a list of variations that those two settings would produce:
Spacing
In this section, users could change the padding of the item and also affect the spacing (the distance between the button and the input field).
There’s an interesting conversation around contextual padding controls in this GitHub issue, which could probably be applied to this block.
Depending on the style (button outside or button inside) the padding could behave differently:
If the style button outside is selected, the padding will affect both the input field and the button.
If the style button inside is selected, the padding will affect the outermost element.
The spacing setting could also be adjusted using a handle in the block itself. The control between the input field and the button would change the spacing, whereas the control in the button would allow resizing the whole block (which is the current behaviour).
Border
I think we should allow users to modify the border of the input field and the button independently for each of the four sides. That would give them great control to create different styles. For instance, they could create search bars with just a bottom border.
There’s an open PR that deals with border color support and border style here.
Typography
Depending on what element is selected, the typography section would affect the font and style of the input field, the text button, or the label.
Color
Like in the typography section, this one would affect the text and background colors of both the input and the button (again, depending on the selection).
As I mentioned at the beginning of this post, if we implement these changes, users will be able to customize their search bars in many different and exciting ways and have more control over the design of their sites.
@richtabor provided a range of 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/ issues we dove into discussing various things around the editor.
The first of these was closing block styles proposed by @michael-arestad (who joined in the discussion). This improves the styles panel; discussion led to more thoughts around the side panel updates that are incoming.
During this discussion, some great links were shared by @melchoyce, @shaunandrews, @joen and many others. Here are a few of those:
We have an open call for note-takers and triage facilitators. These both are great ways to get involved for new contributors but everyone is welcome to help out. Let us know if you are interested in the comments.
Contributions to the Design Team are always welcomed. Please pingPingThe act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.”@estelaris or @chaion07 and they will guide you through.
This week’s meeting is a show and tell so come and join us in the zoom, the link will be shared in the design channel. If you’ve got anything you’d like to talk about just comment here or bring along the topic to the meeting.
We have an open call for note-takers and triage facilitators. These both are great ways to get involved for new contributors but everyone is welcome to help out. Let us know if you are interested in the comments.
Contributions to the Design Team are always welcomed. Please pingPingThe act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.”@estelaris or @chaion07 and they will guide you through.
Requesting all to read and leave your valuable feedback on these posts. Your comments will help the design team to improve WordPress.
Open Floor:
@magdy thinks 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/ panels can be improved something similar to Quillforms is doing. @karmatosed advised to open an enhancement issue on https://github.com/WordPress/gutenberg/ and Joen agrees that the tricky part is to find the right balance.
Now that you’ve helped us populate the directory with so many patterns, @melchoyce, @beafialho, and I are going to shift focus to further refining and tidying up the collection for launch. Our goal for this pre-release set of patterns is to provide users with a diverse, high-quality set of designs that share a common thread.
This does not mean that submissions are closed — just that we’re at a point where we can begin viewing submissions through the lens of curating and filling out the collection as a whole. With that in mind, I’ve pulled together a handful of suggestions to help folks who are submitting patterns between now and launch:
Draw inspiration from history, art, and nature. Like the patterns that are currently bundled with Gutenberg, this set is designed to share the common thread of history, specifically through the lens of art and the natural world. Using these reference points allows us to cover a wide range of topics and styles, while still having a throughline that connects them all. When submitting a pattern for this pre-release collection, please consider having your imagery and text be related to those topics. That will help this feel like a cohesive set.
Challenge yourself to create something new. Before you get started, take time to browse through the directory and ensure that your pattern does not duplicate existing work. For example, the directory includes many Media & Text patterns already, so there probably isn’t room for many more Media & Text patterns at this point.
Write text creatively. For this initial collection, we’ve been avoiding “Lorem ipsum” text in order to help make the patterns feel more real. Try using text as a way to hook into that common thread of history, nature, and art mentioned above. If you have links in your text, feel free to link to WP.org or WordPress.org. You can use [email protected] as an email address if you need one.
Be sure to use CC0 or Public Domain images. Keep the common thread in mind when choosing images. If you need inspiration, previous patterns have had great luck pulling from Rawpixel’s curated public domain collection of images. At this time, let’s avoid modern iconography as we wait for a more flexible icon solution 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/.
Aim for accessible color palettes. If your pattern uses colors, be sure that text contrast adheres to WCAG 2.0 guidelines. This will ensure that more people can read your pattern!
Consider a range of screen sizes. Be sure to test your pattern on mobile, tablet, and desktop views. Some patterns using large text tend to break awkwardly on smaller screens. Be sure to test that out, and adjust accordingly.
Ensure your pattern works well in many themes. Be sure to keep your 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. settings as specific as possible: Outside of default colors like black and white, please specify hex values instead of relying on theme presets. Make sure your pattern isn’t using any theme-specific block styles, and be sure to set line-height for text when appropriate.
We’ll continue evolving these suggestions and guidelines over time as the directory continues to grow.
As we move into a more tightly curatorial part of this effort, I’d like to reemphasize that the current process is just for the early, pre-release phase of pattern submission. For example, if you have a pattern that is similar to one that is already in the pre-release collection, the Design team may hold off on including it for now. But you’ll be free to resubmit it directly yourself once the directory is launched.
Again, thank you all for your submissions! It’s exciting to see the directory come to life.
You must be logged in to post a comment.