Design welcomes Shaun Andrews as team rep

Today we closed the call for new team nominations and we only had one entry.

I would like to welcome @shaunandrews as the new 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.. Shaun is a designer who has focused on the new editor and has been collaborating with the design team for a few years now.

He has new ideas as to how the team will work better and be more succesfull in the future. Check the blog for ideas and new workflows that we will bring to the team.

Welcome to the team @shaunandrews!

#team-rep

Adventures in Block Theme Switching

FSE Outreach Program coordinator Anne McCarthy facilitated a recent call for responses (a slight change in format from the recurring FSE calls for testing) on the topic of 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. theme switching, which officially kicked off the process of “thinking long term about what folks would want to be able to have across themes.” According to Anne’s follow up summary:

When it came to ideas for how to best manage the switching process, it quickly became clear that there’s a balance to strike between not adding too much friction to the process while also offering users options to pick and choose what can come with them when they switch.

The call for replies resulted in some imaginative descriptions of how this all could work. The responses also raise some important questions: what role should themes play in the world of block themes, especially when users may want to mix & match styles and layouts from different themes? What does switching themes mean in this context, when you might be able to use aspects from several different themes?

I used some of the responses to Anne’s post as a starting point for a blue-sky exploration around what theme switching might look like in a world of highly flexible themes that — in the true spirit of WordPress — can be hacked and cobbled together to your heart’s content.

Approach

The flows shown below stem from on an ongoing series of posts by Javier Arce and I that explore the possibility of introducing a 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/-style mosaic interface across WordPress screens — including, for example, on the Appearance/Themes page. This is a thought experiment that we are excited to share more widely — please feel free to leave comments on the blog posts or message us directly in the Making WordPress Slack!

Idea 1

Redesign the current Live Preview theme switching flow to incorporate a process similar to multi-entity saving

Entry point: Appearance/Themes

First, I explored the most literal translation of the current theme switching flow as it exists today while incorporating the top bar and other familiar Gutenberg components.

Just like the Live Preview functionality works now, we could utilize a CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.-like preview that would allow users to preview and navigate the site before activating the changes. Selections regarding which styles and layouts to activate could be made in a 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. panel, similar to the one used for multi-entity saving.

Like the current flow, the default behavior is a one-click activation that would switch styles and layouts to the new theme’s defaults (or to the user’s prior customizations of that theme’s templates, where applicable). This is based on the assumption that the majority of users will want to switch everything to the new theme’s look — but the activation panel also provides an opportunity to offer more granular selections. 

We could utilize the thumbnail preview that appears within the Global Styles panel, and there could be a toggle allowing you to switch between the theme being previewed and the active theme on your site.

A close-up view of the upper right hand corner of a live preview screen. It shows a sidebar panel containing a toggle for switching between the preview and current theme, as well as activation options.

From there, it would be possible to drill down into more nuanced selections. For example, you might want to keep certain aspects of your active styles (e.g., just the color or typography) and have those be activated rather than the new theme’s defaults. Similar selections could be made for the layout by picking and choosing which Templates and Template parts to keep active on your site when switching.

A fun variation on this idea is to utilize a slider for comparing the before and after layouts (similar to an Image Compare block):

Idea 2

Make Theme management accessible directly from the Site Editor

Entry point: Global Styles panel

This approach utilizes a “design dashboard” focused on theme management. This idea was originally explored as part of an Appearance menu overview screen.

What if block theme switching could be integrated directly within the site editing flow? For example, a modal containing the Appearance/Themes page could be directly accessible from the Global Styles sidebar. This would allow theme switching to happen more seamlessly without ever leaving the site editor, and hopefully turn the sometimes stressful moment of theme switching into something more akin to changing settings — it’s a low effort modal to close, reopen, and keep tinkering with.

Idea 3

Reconceptualize themes to emphasize styles (with optional or de-emphasized Templates)

Entry point: Global Styles panel

Editing "Index" template in the site editor. Image shows the Global Styles panel with options for three different theme styles. The options are a yellow, white, or black background color palette with various type styles.

The last idea takes inspiration from a super interesting alternate range of color schemes shipping with the upcoming Twenty Twenty-Two theme. What if changing themes was about swapping styles, with template changes becoming something more seamlessly intertwined with existing editing flows? For example, maybe you could browse Template parts from other themes via the inserter or an in-canvas selector.

In this case, navigation between theme styles could happen directly from within the Global Styles panel. Utilizing the current Global Styles navigation pattern, perhaps you could drill down further to adjust and fine-tune after selecting a theme style.

What’s next?

While there’s a lot left unexplored in these flows, I hope these sketches can help serve as a starting point for design discussions around things we would like to see in the future of block theme switching! A great next step would be to start narrowing in on an iterative pathway towards enabling the mixing-and-matching of block themes — at the moment of the theme switch and potentially beyond.

#design, #site-editor, #theme-switcher

Moving to Bi-Weekly Meetings

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 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/. 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.

#meeting-agenda, #meeting-notes

Agenda for Design Team Meeting, Oct 6, 2021

We’ll be having our weekly 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/. meeting today at 18:00 UTC in the #design channel on the WordPress Slack. Learn how to join by following the instructions in the handbook.

Agenda

  • Discuss an alternate meeting schedule
    • Bi-weekly
    • Rotating timezones
  • Discuss using meetings as a way to brainstorm solutions to a specific design problem

I hope to see you there.

#meeting-agenda

Sept 2021 “Show & Tell” Recording

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 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. 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 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/. meeting.

#design, #meeting-notes, #show-and-tell

Design Team “Show & Tell” Meeting for September 2021

The Weekly Chat for WordPress Design team will take place on Wednesday, September 29, 2021, 18:00 UTC.

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.

A Zoom link will be shared in the #design Slack channel when the meeting starts.

You can join the 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/. channel by following the instructions in our handbook.

#meeting-agenda, #show-and-tell

Agenda for Design team meeting September 22, 2021

The Weekly Chat for design will take place Today, 22nd September 2021, 18:00 UTC in the #design channel of the WordPress Slack. You can join the 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/. channel by following the instructions in our handbook.

Agenda

  • Close of 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. nominations
  • With 5.9 on the horizon, how do we improve PRs and ticket review?
  • How to improve design meeting participation

Since we accomplish more while when we talk, this meeting will be a Zoom call. Please schedule accordingly. A summary and video recording will be posted for those who cannot attend.

Zoom link will be posted on the Slack channel at the meeting time.

If you have a topic, please add it to the comments and bring it during open floor in the meeting.

#agenda#design-agenda#meeting-agenda

Document Status and Visibility

If you’ve ever used WordPress to create a blog post, web page, or any other type of document, then you are likely familiar with 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.. The sidebar shows you information and controls related to the either the selected 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., or the document itself.

The sidebar hasn’t changed very much over the years, and in many ways still resembles the pre-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/ (Classic) WordPress editor. Here’s a side-by-side of the sidebar in the classic and block editors:

Over on GithubGitHub GitHub 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/, there’s an overview of design updates to the sidebar. The designs focus on block controls, specifically typography, color, and dimensions. The issue does propose a component system of controls for things like inputs, dropdowns, and sliders, but doesn’t explore how this system could apply to the document controls shown above.

Since we’re talking about sidebar controls, I think it’s helpful to also include the design of the so-called “Global Styles” project outlined on Github. This design uses a multi-level, nested interface to group controls into Color, Typography, and Layout sections.

With all this in mind, I’ve been looking at the document sidebar and how it could be improved. For this first pass, I’m focused on the “Status & visibility” and “Permalink” sections. Here’s a look at the current design alongside my proposed changes:

There’s quite a few changes. The first, and maybe most obvious is the lack of an accordion interface containing all the controls. Instead, controls are shown and hidden using the ellipses menu; Open the menu and you can choose what controls are hidden or shown. This reduces the overall footprint of the controls, but also allows people to customize the sidebar to their specific needs.

This menu is also a convenient place to find features and functions like viewing the document’s history, renaming the document, reverting publish documents to draft, and moving the document to trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days..

At the top of the section is the current document’s title. Here’s how that could look with a few different titles.

The title itself could also be interactive, and allow for renaming the document directly from the sidebar. This is helpful as the editor’s canvas may not always include the document title. You could initiate renaming from the ellipses menu, or double-click on the title itself.

Each control within the list would be clickable, opening a popover with more information and controls to change the value.

Here’s how each control’s popover would look:

There’s a lot more to do with the remainder of the document controls, like improving categories, tags, and the 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. controls. But for now, I think this is a good start and can hopefully lead towards improvements across the rest of the document sidebar.

Republished from my personal site.

#design, #document-sidebar, #status-and-visibility

Agenda for Design team meeting September 8, 2021

The Weekly Chat for design will take place Today, 8th September 2021, 18:00 UTC in the #design channel of the WordPress Slack. You can join the 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/. channel by following the instructions in our handbook.

Agenda

  • Call for 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. nominations
  • WP 5.9 planning – any design leads?
  • Open floor

If you have a topic, please add it to the comments and bring it during open floor in the meeting.

#agenda#design-agenda#meeting-agenda

Call for design team rep nominations

The time has come to open up nominations for one rep as I am rotating out. This is an opportunity to bring new ideas and create a new dynamic in the design team.

I have been on this role for about a year and a half and it has been a pleasure to support the team. It is the right time for me to step aside and continue growing as a contributor to WordPress in other areas.

The past few months have been very challening for both, Ahmed and myself, with illenss in our families. And we are both thankful that we always found someone to help with our duties as team reps. This is why is very important to mantain an open communication within the team.

This is a great opportunity for an existing 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. to onboard someone and gives someone the chance to grow into this role and work alongside Ahmed. Yet, I will be around to help with the onboarding until Ahmed returns.

So, let’s get on with the exciting possibility and explain a little about the role.

What does a team rep do?

In the WordPress open sourceOpen Source Open 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, each team has one or two (or more!) representatives, abbreviated to reps. The role goes way back to 2012 and is an established one across teams. You can learn more about the team rep role here.

A little note, it’s not called team lead for a reason. This section from the updates page explains team reps well:

“Team Rep is a leadership role that is mostly administrative in nature; it is not a Lead role. Letting go of the Team Rep title is not a loss of status, just a handing off of responsibilities. Someone who is a leader in a team can lead whether they are doing the team rep job or not.”

Here are the main tasks:

  • Ensuring a meeting agenda happens along with notes. We have note-takers who are not team reps and post agendas, so this is coordination. The team rep adds agenda items to a shared document.
  • Run the weekly design team meeting in 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/..
  • Co-ordinate the weekly triage meetings.
  • Write a biweekly update post for make.wordpress.org/updates?
  • Give quarterly updates on the team when asked.
  • Call for new team reps when the time comes at the end of year tenure.

As a team rep, other tasks might fall to you in order to keep the team running, but in general, it’s a support and coordination role. On average the estimated time you would need for this role would be a few hours a week. With another team rep though, that time is shared.

This role is open to contributors of any level, not just full-time contributors. Like many good open-source processes, this work is done openly and can be shared. Also, because WordPress is a globally-minded project, if the team rep that is selected can’t make the current time, we can always discuss changing the meeting time.

The process

Taking inspiration from teams that have done this before the suggested process would be:

  • A call for nominations in the comments on this post. Self-nominations are welcome. These will close in on September 22nd.
  • After the closing date, another post will highlight those nominated votes will be made on those nominations for a week. Currently, there is one team rep role available and the incoming rep will be working with Ahmed (and Estela in his absence.)
  • The votes will be tallied, the chosen team rep asked to confirm they want to do this process and then announced during the Show and Tell at the end of the month.
  • If there is only one nomination, we will skip the the voting week and still announce the new team rep during Show & Tell.

If you want to nominate someone in private, please reach out to me  (@estelaris or @chaion07) on Slack.

Disclaimer: if you get nominated, please don’t feel like you have to say yes! We will add to the polls only the names of the people that are responding positively to a nomination. So feel free to reply with a “Thank you, but no thank you”.

#team-rep