Design Share: Sep 12 – Sep 23

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

Integrating Document Outline into list view

A couple of explorations on how the List View might look if we integrated the Document Outline into it. This would simplify the top toolbar. GH Issue.

Continuing on Placeholders

Continuing with making placeholders that work well in patterns, one PR expands the minimalist style to the Video blockBlock Block 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 another refreshes the appearance from that of a dashed border to a simpler style. In progress here and here.

Updating link/unlink buttons

The link/unlink buttons have been updated to be regular icon buttons. Completed here.

Split inserter

The inserter for patterns is being split into a column of categories and a column of previews. In progress PR, and original design.

More Safari text selection fixes

Previously thought to have been fixed, the selection issue now has a new patch applied, that should be more resilient. Completed with more to come.

Media Library Inserter

New work started to on a new Media tab in the Inserter, which will help users adding images to the content without having to open the Media Library. It could also offer an option to search Openverse.

Image dropping modal

Idea: a small modal that appears when users drop a file outside of a drop area, offering them three options: save the file to the Media Library, append it to the post, set it as Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.. Original issue.

Refreshing patterns for the Query LoopLoop The 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. block

A proposed refresh of the patterns that come bundled with the Query Loop block.

WordPress.orgWordPress.org The 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/ Design Library update

Updates to the WordPress.org Design Library with components for the recently redesigned Global navigation and also improved the footer components with some variations.

WordPress.org/mobile

There’s a new design for the wordpress.org/mobile page.

Progress on Twenty Twenty-Three theme

Selected style variations have been added to the TT3 theme with edits that were suggested during the curation round. So now would be a great time to test, test, test all variations!


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 SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

#design#design-share

Design Share: Aug 15-26

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

New Homepage and Download pages for WordPress.orgWordPress.org The 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/

New designs for two of the most high-traffic pages on the WordPress.org site — the Homepage and Download page. The new look & feel builds on the updates that rolled out to the News section last year, putting a more modern and jazzy spin on the WordPress brand.

Making the Site Editor feel more like a design tool

Inspired by the style variation video we’ve been looking at ways to elevate key site editing features (styles specially) in the overall experience, so that the site editor feels more like a holistic design tool rather than a template editor.

Rethinking WordPress.org Navigation

Inspired by some discussion on the Make Meta blog, we’ve been exploring how to clean up and simplify the navigation on the WordPress.org site.

Copy improvements in Openverse

As a quick win in the openverse search experience, we shared a design idea to improve the copy on some pages and make Openverse more clear. Having the search engine inside the WordPress site makes it difficult to convey what is about.

Styles update in Openverse

In the current version of Openverse, text styles are defined per component and differ when placed together. We started exploring a style update to clean and centralize all styles to make the search more consistent.

Placeholders

A literal placeholder style with a dashed line has been used in a few places to indicate the ability to add a featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. or a a site logo. This style has been expanded to the Image blockBlock Block 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., which now visualizes an inherited duotone filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output.. The placeholder also features a blurred background to set it apart in stacked contexts. Tickets/PRs: ImageSite Logo/Featured ImageImage radius and duotone + more

Inspector grid

With ongoing component work and cleanup, here’s a visualization of how inspector components should naturally lay themselves out.

Pre-publish sidebarSidebar A 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. summary section

We continued exploring the pre-publish sidebar with a version that improves the readability of the sidebar by integrating the suggestions inside the main summary section.


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 SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

#design, #design-share

‘Open Floor’: Design Team Bi-weekly Meeting 10 August 2022

Its been a while since we’ve had an agenda based P2P2 P2 or O2 is the term people use to refer to the Make WordPress blog. It can be found at https://make.wordpress.org/. published on the Make Design Blog. The most recent one dates back to October 2021. I want to invite contributors to attend the bi-weekly meeting today at Wednesday, August 10, 2022, 15:00 UTC in the #design channel on the WordPress Slack. Learn how to join by following the instructions in the handbook.

We’ll have an ‘open floor’- type meeting as seemed most effective for almost an year now to discuss the following items:

  • Design Table Lead for WordCamp US 2022
  • Design Team RepTeam Rep A Team Rep is a person who represents the Make WordPress team to the rest of the project, make sure issues are raised and addressed as needed, and coordinates cross-team efforts.
  • Big Picture Goals
  • Bi-Weekly Meeting

Hoping to see you all there!

#agenda, #meeting-agenda, #weekly-design-chat

Design Share: July 4–15

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

WordPress.orgWordPress.org The 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/ redesign — call for input

A kickoff post for the redesign of the WordPress.org Homepage and Download pages was shared on the Make Design blog recently:

With a new design style making an appearance in various places across the site, it seems like a good time to turn our attention to the home and download pages, two of the most-visited pages on WordPress.org and a well-worn path for those coming to experience WordPress.

@eidolonnight

Please share your ideas about how you envision these two pages taking shape directly on the post!

Design Library updates

Several new popovers have been added to the WordPress Design Library, like the “Publish” and “Color” popovers. They can be found in the “Views & Stickers” page of the library.

Navigation blockBlock Block 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. bulk insert

@javiarce shared a prototype for inserting several items at once for the Navigation Block to ease the creation of new menus. Check out the design and prototypes, or weigh in on the original issue.

FSE usability testing

A number of design contributors volunteered to run usability testing sessions as a part of this month’s Full Site Editor outreach call for testing. @annezazu published an excellent recap of the testing sessions that’s full of valuable insights about some of the difficulties users encountered. Huge thanks to @javiarce @estelaris @ericcarco and @colourpress for conducting these sessions!


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 SlackSlack Slack 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.

#design#design-share

Design Share: May 9–20

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

Multi-entity Saving: drafting and scheduling changes

@javiarce revisited his original design proposal to add drafting and scheduling capabilities to the site editor. Design of the second iterationPrototype.

Controls for interactive states

@javiarce submitted a proposal for an interface to enable interactive states (:hover, :active, :focused, etc.) to specific blocks’ properties. Design and prototype.

Creating a Template Part from scratch

@jameskoster explored how we can improve the experience when creating template parts from scratch in Gutenberg issue #41008.

Pattern modal

@jameskoster is working on designs to consolidate the various pattern browsing experiences into a single component.

PluginPlugin A 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 Dependencies project

@shaunandrews shared some early thoughts in the Design channel about the Plugin Dependencies project, specifically how we can improve the flow of installing a plugin that requires additional plugins.

3D model support

@fcoveram has been working on integrating 3D model content in Openverse results by creating new components and layouts for results and single result view.

Openverse Design Library updates

@fcoveram started updating the Openverse Design Library by using the WordPress Design Library utility components. This sync aims to ease the design contribution onboarding.


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 SlackSlack Slack 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.

#design#design-share

Poll: Finding a new meeting time

Hi, all. As mentioned in the meeting notes from our Show & Tell call earlier this week, the team has been discussing the possibility of moving our regular meeting to an earlier time on Wednesdays.

I’ve created a Doodle poll to try to get as many responses as possible about what time would work best for folks. The options I’ve included are the existing meeting time at 18 UTC, and options that would move the meeting up to 4 hours earlier. Please comment on this post if another time would work better outside of the proposed options!

Please respond by next Friday, May 20th so we can make a decision and announce it on the Make blog before our next text-based meeting on the 25th.

Thank you!

Design Team Show & Tell — May 2022

Here’s a recap of our Show & Tell call today ✨

Attendees: @beafialho, @jameskoster, @saif2002, @javiarce, @shaunandrews, @fcoveram, @critterverse

General admin/housekeeping

  • 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 GutenbergGutenberg The 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.

Here’s a recording of the call in case you missed it. See you next month!

Design Share: Apr 25–May 6

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 GutenbergGutenberg The 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.

Text transform menu optimisation

@jameskoster worked on design options to update text transforms, prioritising more common transformations.

Communication & Covid Safety stickers for WCEU

@javiarce designed some communication stickers for the upcoming WordCampWordCamp WordCamps 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 headerHeader The 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 SlackSlack Slack 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.

#design#design-share

Design Share: Mar 14–25

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 sidebarSidebar A 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 categoryCategory The '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 GutenbergGutenberg The 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” blockBlock Block 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 loopLoop The 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

@joen mocked up a default style for the comments query loop block.


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 SlackSlack Slack 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.

#design, #design-share

Design Share: Feb 28–Mar 11

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 blockBlock Block 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 headerHeader The 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.

Process improvements

@fcoveram shared some ideas for improving current practices around the contribution process in a new blog post: Design contribution process

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 SlackSlack Slack 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.

#design, #design-share