You don’t need edit access to use the Figma libraries, you can copy components from there into your own drafts. If you’re a contributor with the ability to grant edit access, please be mindful, and downgrade to view access once the initial need for edit has waned.
After the Pattern Directory has launched, users will be able to add their own patterns to it directly. In the meantime though, the project needs a collection of high-quality, diverse, community-designed patterns to populate it with during development. These patterns will set the tone for quality in the repository, and will make the directory useful for folks upon its launch.
The Design team has already produced a small set of patterns to kick this off. If you’re using 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, you may have noticed a new set of bundled block patterns in the pattern inserter recently:
These were designed by @beafialho, @melchoyce, and myself as iterations on the default set that shipped with WordPress 5.5. They have already been migrated into the upcoming Patterns Directory on WordPress.org for testing there.
This small set is just the beginning though! The three of us are continuing to design patterns to feed into the Pattern Directory, and we’d love your help. We encourage you to submit pattern candidates (in the form of mockups and/or 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. markup) using the “[Type] Pattern Submission” tag in the Pattern Directory’s 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/ repository. There’s an issue template already created to help you get started.
In this early phase, the Design team will review each suggested pattern and work to identify a list of criteria for which types of patterns are good candidates for pre-submission to the directory.
Please share any questions or concerns in the comments below. I’m looking forward to growing the Pattern Directory, and can’t wait to see we all design together!
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. Props to @ashiquzzaman for documenting the notes for the last meeting.
Contributions to the Design Team is 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.
CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. Blog Highlights
Props to @priethor for publishing the P2P2P2 or O2 is the term people use to refer to the Make WordPress blog. It can be found at https://make.wordpress.org/. that covers not only what’s new on 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/ but also the Widgets Editor, Navigation Editor and Full Site Editing. You can also find information on areas to be aware of and how you can get involved.
Props to @desrosj for the a P2 that talks on the recent Build/Test Tool changes and 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/ Actions Update. You should read it at your convenience and comment with feedback (if any).
Thanks to @chanthaboune for releasing the latest episode of WP Briefing podcast. In this episode Josepha explores the five groups within the WordPress ecosystem and provides a high-level example of how they interact and support one another. Go ahead and listen to the podcast on the WordPress Org News blog. Additionally, you can subscribe to Apple Podcasts | Google Podcasts | PocketCasts | RSS | Spotify | Stitcher so that you don’t miss out on the future episodes.
@samsuresh‘s proposal talks about add topic based meetupMeetupAll local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. chapters. The is quite interesting as it explores the possibilities of having global meetup chapters acting as one on topics of similar interest. You can find the full post on the community blog.
If you are a fan of Full Site Editing then here’s @chanthaboune‘s update. Josepha put together another P2 on the topic. We encourage you to test it and report bugs (using GitHub) or raise a flag (in the comments below) which will eventually contribute towards a successful WordPress 5.8 launch.
@sarayourfriend published another in-depth write up on ‘when and where to use Typescript’ including relevant information. Don’t forget to check it out and interact posting comments with your feedback.
Discussion
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 2021 Contributor DayContributor DayContributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/.
The second virtual edition of WordCamp Europe is scheduled to take place between the 7 and 10 of June. We requested the team to share their thoughts on the biggest virtual contributor day. @paaljoachim among others offered to prepare supportive materials in the form of workshops and tutorials using the Learn WordPress project. The team is exploring ideas and options for smooth and easy contributor day experience overall. We will publish a P2 focusing on the topic once the official announcement is made.
Asia Pacific Working Hour
The growing interest of design working hours that can support multiple time zones. Considering the current timing are not too friendly for some. We are eager to explore working hours that are APAC friendly keeping the existing meeting times and evaluate the results. @chaion07 and @estelaris will write a P2 on this topic in the month of May.
Open Floor
@hedgefield informed about a user testing on Full Site Editing, conducted at Yoast recently where a lot of interesting observation and feedback came out. The Yoast team then shared this feedback using the Gutenberg repository including some Pull Requests. He shared a link to the reference document containing videos and screenshots.
@annezazu confirmed of the coordination focus with @francina on the topic and shared a link to a comment as reference. She’s currently awaiting a follow up comment there (for transparency and also for future references).
We had a bit of a mix up with the time due to timezones and DST but were able to share two designs: @shaunandrews shared Pattern Directory design progress and @critterverse shared reusable blocks. @estelaris shared ways designers can be more involved.
@critterverse shared her ongoing work with Reusable blocks. To continue the discussion, check out the issue on Github: https://github.com/WordPress/gutenberg/issues/30357
Being more active
@estelaris started the discussion on how designers be more active. A few take-aways:
Bring work out in the open so more people are aware of what is going on and we can engage in discussions.
Rely more on async communication in Slack, especially as not everyone can make all the meetings.
Consider posting work to the Make Design blog, as @shaunandrews recently did with Patterns.
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 is 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.
CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. Blog Highlights
@chaion07 and @estelaris are discussing the possibility of having a dedicated p2 on triage. The documentation practice will be helpful for the team and the future releases. There’s also an idea to put together a Week in Design post. Discussions are still ongoing. Contributors are needed to step in and support both the initiatives. Ping either of them on Slack to get involved.
Last week we had the February Show and Tell with the most number of attendees. We will have our next show and tell on the March 31 (last Wednesday of the month). If you’re working on something that you wish to showcase then please let the team know.
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. directory will be a place where blocks can be perused and installed. Think of it as 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 directory limited to single blocks.
Back in December, @melchoyceproposed a prototype for a block directory. That prototype is still 100% viable for the block directory. It is likely the simplest to implement as it’s pretty close to the existing plugin directory with a few nice systematic updates to patterns used across wp-admin.
When I picked up this project, it made sense to me to try a variation of what @melchoyce created . I decided to see what a block directory might look like if it shared Gutenberg’s design language. To accomplish this, I tried using similar patterns and styles to what is seen within 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/ since the block directory and Gutenberg are so closely tied together. I also have been keeping block patterns in mind when designing.
The feedback I’m looking for
This is a hopeful proposal and none of what I propose here is set in stone. I would like higher level feedback around the interactions. Do the interactions make sense? Is it clear what you’re looking at? What are the designs missing or lacking? What could be improved?
I’m not looking for detailed design feedback like hover states or border colors. Those are important for sure and that type of feedback will be needed during implementation.
The prototype
Here is a rough Figma Prototype that shows a handful of the views in the block directory. Take note of questions you have as you look through it and please share in the comments below. I hope most will be answered as I break down each of the primary design patterns and views.
The block card is designed to be a recognizable design pattern that, even without a preview, will convey that it is a block. You can see we already have a similar card proposed for implementation in Gutenberg’s block directory search.
I tackled this in a few places. To start, I identified block cards that can convey the most important information about a block at a glance. This is where I started diverging from the existing plugin directory.
I deviated from using a plugin icon and plugin 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. for two reasons.
Blocks already have an icon by nature. This icon will be one of the main identifiers when interacting with blocks. I wanted to reinforce the connection with the block icon and the block as soon as possible. Thus, I replaced the plugin icon with the block icon.
Blocks and Patterns are very visual. Rather than showing a somewhat arbitrary header image, I opted to show a preview of the block.
I trimmed down the amount of information present on the card. In this mockup, I show the Block Name, the Author, Rating, and Number of Ratings. I may add an indicator of active installs. Everything else will be shown on the Block’s Details View, which a user will need to navigate to in order to install a block.
The preview is a square because the block’s example can vary widely in its aspect ratio. We will need to do some work here to figure out the scaling and overflow details of previews.
The directory header
Mel designed an iteration of the wp-admin page header that makes great use of space, order of interactions, and hierarchy. I made very minor modifications to it resulting in what you see below. Ideally, this pattern could be used across all wp-admin sections.
It’s very simple. It has a page title, a description, primary actions, and secondary actions. The page title and description are exactly what you would expect. The primary actions are below the description and, in this case, include a search bar and upload button. The secondary actions are the help and settings buttons.
The directory view
The directory view is a combination of the header and groups of block cards.
Like the current plugins directory, the blocks will be in categories with “See all” links for folks who want to peruse a specific categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging..
The CTA banners Mel designed are ace so I expect we could use them as a way to highlight any number of topical subjects. Perhaps they could be used to promote block collections if we decide to go down that road at a later date.
The block details view
The block details view shows all the information surrounding a plugin. The current details view for a plugin relies heavily on 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.. Much of the sidebar information seems directed at plugin developers.
The most useful information for a user is at the top. It includes ratings, active installations, compatibility, the block version number, and the install button.
The Demo section is an example of the block that a user can interact with. It is important the user gets a clear idea of what they’re about to install. The editor itself will be an instance of Gutenberg with some slight customization. The inspector will remain visible because many blocks rely on the sidebar controls.
The Reviews section shows two reviews along with rating totals. I would like your thoughts as to which reviews should show.
There are still some remaining pieces of information I would like to incorporate including contributors, a changelog, and a support section of some sort. This is also missing the Advanced View. Perhaps some of those missing items will fit better there.
wp-admin design implications
These designs include patterns that could be used elsewhere in wp-admin. For example, we could use the directory header pattern on the other directories and perhaps on all wp-admin pages. This would be one of several steps to align the design language of wp-admin and Gutenberg.
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.
Next week is Design Show & Tell, a monthly Zoom meeting where you can showcase or update any project you are working on or ask for input on anything you are contributing. It is open to all design contributors.
Updates
@melchoyce let us know that Twenty Twenty-One is in 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. and the team would appreciate any input. You can test it in WordPress trunk or download the theme directly from GitHub.
@shaunandrews is looking into several floating (+) buttons, understanding their function, the problems they solve or create.
@paaljoachim ran a successful Design Feedback session on Wednesday early morning. These may continue every other week, switching between early mornings and late evenings to allow for contributors in different time zones to join.
@mapk is working on the Query 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.:
The design team held a discussion about the use we are making of the Make/design blog, triage and meeting. While we have been running an experiment on trying to contain the surplus of information, we have also noticed that we are missing opportunities and the blog has turned into a list for meeting agendas and notes.
We had several ideas that could help us improve and there will be a post about this.
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.
Next: we are doing some cleanup of Figma users. If you don’t know, Figma is the main design tool that our team uses for WordPress design. Our policy is that we give View access to everyone who asks for access to the Figma files, and Edit access only to those that are actively contributing to a project. We have revoked edit rights to users that have been inactive in Figma for over 6 months (the system reports them automatically). If you need to upgrade your access because you will work on a specific project, let us know and we will gladly grant you edit access again.
@bluetriangle is working on a post editor grid layout 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. for custom blocks.
@ZebulanStanPhill created a PR to provide an accessible way of displaying a summary for an accordion, to solve some longstanding accessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) issues. It needs a design review before merge.
Main topic
The CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress.CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. team proposed to reduce the colors in Core. @ryelle tells us they’ve developed a tool that can replace all the colors with whatever palette we define. There was a palette proposal a while back, the team decided to use that as a starting point and iterate where needed. If you want to help, reach out in the #core-css channel on Slack.
One more thing
On Friday sept 25, @joen and @noahrshrader will be doing a casual Show And Tell to go over work they’ve been doing. It’s slated for 13:00 UTC (15:00 CEST and 9:00 AM EDT.). Check the #design channel on Slack for details on how to join when the time nears. And next week there will be a ‘regular’ Show And Tell meeting during the Design Meeting timeslot!
Iterate 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. directory
@michael-arestad showed us how he mocked some options to present the block directory, where the user can see a preview of the block while hovering and a short block description on the side, instead of the current direction of the full 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 description and the plugin icon (as seen in the plugin directory).
Making the list keyboard-focus to improve accessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility).
Finding the right placement of the “add” button to avoid a button with too much information.
Looking into a flow to call for blocks of the same categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. as something already existing in the user’s directory.
@michael-arestad also talked about a proposal by @melchoyce for a block directory. There is already a lot of work done in there, so he will be working on updating it and see if he can take it further.
Components in Figma Library
@ibdz asked about source of truth when it comes to WordPress components and styles, as he has seen too many sources and options out there. Since there is no source of truth, he plans on running an audit for tracTracTrac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. tickets and look into the last release (5.5 at the time of this post) and begin from there.
Another question is if it is necessary to separate desktop and mobile components and styles? It was suggested that having the WP-admin frame for both desktop and mobile would be very useful. As for components and styling, if there are differences, it is good enough to show them side by side.
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. editor issue
@mapk showed the work he has done revamping the widget editor. His proposal is to make it look like the block editor and using the same workflows. We are looking into merging the widget editor in release 5.6. If you have any comments, please add them here.
Design team goals for 5.6 release
There is a lot of rambling on my part but basically, I would like to get some specific goals for the design team that are focused on the release or how can we participate more. I shall discuss this with @karmatosed as she returns from sabbatical.
During the month of August, both triages (coreCoreCore is the set of software required to run WordPress. The Core Development Team builds 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/) will be short, for 30 mins only. We will resume our normal, one hour long triage session on 1 Sept. Also, if anyone would like to volunteer to take notes or lead a triage session, please lleave a comment or reach out to @mapk (for Gutenberg triage) or @estelaris for core triage.
If you are new to the design team, go ahead and click on those links, check out the great work the design team is doing 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.
The WCUS team has reached out to ask if the design team is interested in participating on a 24hrs contribution day. There are no details yet, they are asking around to find out how many teams would be interested.
The Theme team has also been interested in participating and would love it if we could team up and work through some designs for long outstanding tickets they have been wanting to get through.
So we can say there is interest in this, and we’ll keep bringing this up in the next few meetings to get more input. If you have thoughts about this, please leave a comment.
Open floor
@mapk was wondering how we might get more people working on Gutenberg issues. What can we do to share more current work, and request feedback or even use some time to help community designers jump into specific Gutenberg tasks? The triage sessions have been wonderful, but those tend to focus on older issues, and the Gutenberg updates don’t really spawn much activity.
The idea of a design mentorship or dedicated Gutenberg sessions during our design meetings was floated. What do you think? What would you need to start contributing (more) to the visual development of the block editor? Let us know in the comments.
Lastly, @aristath brought up the point that the font size on .org is too small. This is a point that has been raised by accessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) experts before in regards to the WP interface too. There has been work done to see if we can increase the size, but WordPress is a massive project, and not every area fully adheres to the style guidelines – insofar as those exist. We have guidelines for core, but not for 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.. @estelaris will take charge on writing a draft for those and bring them to the a11yAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) and meta team, and to us, next week in the design meeting.
We are still looking for volunteers to take notes and run triage (either coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. triage or 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/ triage). If you are interested, leave a comment!
There is a new proposal for integrating the media uploader/inserter into Gutenberg. It will be discussed in the #core-media channel June 18th at 4 PM UTC.
There have been some minor updates to the “Add template part” flow moving closer toward the proposal here.
For the discussion, we dove into how to improve and maintain our Figma library of design components. Main pain points are that it’s hard to navigate, not up-to-date, and nobody who’s responsible for maintaining it. @ibdz spearheaded a document to collaborate on and gather input from the likes of @noah @davewhitley @melchoyce, and YOU! If you work with Figma or another design library, leave your thoughts in that doc so we can figure this out.
Finally, @michael-arestad briefly discussed template parts in Gutenberg, and how to differentiate them from 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 in 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.. It’s hard because technically they are the same, but with different use cases. A post will be written soon with details.
You must be logged in to post a comment.