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.
As an experiment, we met at 16 UTC rather than 18 UTC today — several folks mentioned that the earlier meeting time was extremely helpful and would allow them to be able to attend more regularly
There seems to be a consensus (in the meeting today and in discussion in the Design channel) that an earlier meeting time would work better for many attendees
It would also be great if there could be alternate meeting times scheduled to accommodate folks in other time zones — we would need a volunteer to facilitate those meetings
Based on this discussion, I’d like to propose that we change the meeting time to be at 15 UTC moving forward (3 hours earlier than the previously scheduled time).
“What’s New 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/” release post assets
@fcoveram shared some assets he’s been creating for the next “What’s New in Gutenberg” release post. You can check out his latest designs in the Figma file.
Improvements to entity-saving
We also discussed potential improvements to multi-entity saving, including some issues that have already been opened around improving saving flows. The biggest takeaway was that it would be nice if multi-entity saving could be less complicated and more intutive, perhaps requiring less decision-making by the user when they click the Save button.
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
Modal component update PR
@jameskoster opened a PR to try some design updates for 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/ modal component.
@javiarce designed some communication stickers for the upcoming 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. Those designs can be adapted and reused for future WordCamps.
WordPress 6.0 design assets
@fcoveram has been working on designing the assets for the next WordPress 6.0 release. The graphics include the design for the About page (including the 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. artwork for all sections) and the welcome banner for the Dashboard.
If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. or message @critterverse.
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
Status & visibility panel improvements
@javiarce shared some explorations to improve the ‘Status & visibility’ panel in the inspector 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.on this issue. You can also use this prototype to learn about its context and interact with the solution.
Adding post categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. templates
@jameskoster has been looking at how we might enable the creation of post category templates 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/ issue #37407.
Page start options
@jameskoster is also exploring a pattern-centric view of edit mode for PR #39147.
Style variation hover animation
Gutenberg PR #39322 introduced a hover frame containing extra information about individual style variations. @critterverse and @joen have been helping to explore designs for the secondary frame as well as animation options in issue #39700.
Group, Row and Stack icons
@joen worked on new icons for “Row” and the incoming “Stack” 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., as well as how those group block variations could show up in the multi-select toolbar and inspector.
Comments query loopLoopThe Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop., default design mockups
If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. or message @critterverse.
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
Backgrounds & Overlays
@javiarce and @joen discuss the background and overlay properties of the Cover 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., and how they might be simplified so they can apply across other blocks as well (Figma file). These explorations have been shared on GitHub, and are related to to recent discussions around background block support.
Openverse 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.
@fcoveram has been working on a second iteration of the Openverse header. This time, he’s exploring two navigational layouts and adding a profile area for future features.
If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. or message @critterverse.
Hey all 👋 Here are a few projects the Design Team has contributed to over the past couple of weeks.
Site Editor navigation
@joen is tinkering with @jameskoster on wild ideas for 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 #36667: a dedicated space for navigation.
Cover 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.
@javiarce and @joen started collaborating on improving the Cover Block to support multiple overlays.
As part of the redesign of end user documentation, the docs team is looking into changing the hashtag # used at the end of the headlines in the articles. The hashtag nowadays has a different connotation but mainly because it is not accessible. The aria label applied to the hashtag makes screen readers duplicate the headline without warning or explanation.
The purpose is to remove the character # but not the functionality of an anchor link.
3D model icon
@fcoveram started exploring an icon for the 3D models content type Openverse is discussing displaying in a separated result.
WordPress Design Library
@javiarce started improving the WordPress Design Library. He upgraded the containers used to showcase the components and the examples, added descriptions, cleaned up some components, and refined the information blocks. He also analyzed the state of the components and variants, wrote a to-do list to highlight the pending work, and drafted a plan to deprecate the old components.
If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. or message @critterverse.
Hey all 👋 I’m sharing a handful of “snapshot” style updates from the Design team from the past couple of weeks. I’d like to try sharing these updates for a couple of months and see if it’s useful!
Here are a few things that have been worked on recently:
Advanced template creation
@jameskoster explored how we might expand the template creation 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. to accommodate more advanced templates. Discussion is ongoing 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/ issue #37407.
Designing the State of the WordState of the WordThis is the annual report given by Matt Mullenweg, founder of WordPress at WordCamp US. It looks at what we’ve done, what we’re doing, and the future of WordPress. https://wordpress.tv/tag/state-of-the-word/.
Openverse — New 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. design
@fcoveram explored a new header idea to solve usability, internationalization, and consistency problems, and also designed a new version of reporting content popover considering usability and 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) concerns.
These projects are just a small sample of recent design work happening in the WordPress community. Have you contributed to the Design team lately? The Make blog is a great place to share process and updates! Feel free to use the comments section below to share your work ⬇️
We had our team meeting a few days ago (Oct 6) in #design on Slack. One of the topics was around the scheduling of our meetings. Currently, we do a weekly meeting with the last meeting of the month being on Zoom.
One of the agenda items for our meeting was to discuss moving to a bi-weekly schedule. Since everyone in attendance seemed to be in favor of the change we’ll be starting this new schedule immediately. Next week (Oct 13) there will be no formal meeting. Our next meeting (Oct 20) will take place at the normal time (18:00 UTC) and will be on Zoom.
While there will be less formal, synchronous time, I encourage everyone to continue to share progress, suggest issues, and ask for help 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/. at any time.
In addition to informal Slack chatter, there’s also some ongoing “Hallway Hangout” sessions happening throughout each week. These casual hangout sessions usually take place on Zoom and topics vary. Sometimes they are planned ahead, and other times they’re spur of the moment sessions announced in Slack.
Come join us in Slack and I hope to see you at a future meeting.
Our monthly “Show & Tell” Zoom call took place yesterday. This video chat is a place for designers to share their in-progress work and an opportunity for anyone to give feedback.
This months chat covered the following:
@karmatosed is planning to look into 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. support and will likely have a #hallway-hangout soon.
@javiarce shared his designs for background images.
@critterverse shared her designs for theme switching.
Next week we’ll have our regular, text-based SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. meeting.
As this is the last meeting of the month, we will be gathering on Zoom for our “Show & Tell.”
The agenda is open and we encourage anyone to share their design work with the team. If you have design work you’d like to share, or a topic you’d like to discuss together, please leave a comment below or in the #design channel of the WordPress Slack.
You must be logged in to post a comment.