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

Widgets in WordPress 5.8 and Beyond

WordPress 5.8 (released last week 🎉) brings the power of 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/ blocks to widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. areas — which means highly customizable layout and styling options, and a more WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. editing experience. I made a test site based on oldie-but-goodie Twenty Sixteen theme, which has 3 separate widget areas to work with. In this post, I’ll highlight a few cool things that are now possible to do with your widgets, and a take a look at where things may be heading next.

Zoomed-out view of a single post with one sidebar widget area and two footer widget areas. The site content is about Marine Park Salt Marsh. There are is a “List view” of blocks floating next to each widget area showing how the design is constructed.

Create interesting visual effects with overlapping layouts and Duotone images

Appearance-wise, users have a lot more control over widgets areas than ever before — especially through the use of blocks with tons of customization options like the Cover and Image 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.. Here’s what I’m able to create in the classic widgets editor (above) versus what I’m able to create in the new block-based widget editor (below).

Intersperse widgets and custom code throughout your visual designs

Container blocks like Cover and Columns make it really easy to weave dynamic or interactive elements into your designs. While dynamic/interactive elements are sort of a given for many types of widgets, the block versions of widgets can be easily wrapped and layered within container blocks to more fully integrate them into your layout.

In the example below, I tried placing a Search block in front of a Cover block, which creates a nice layered effect. I also tried inserting Custom HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. blocks within a Columns block to display different messaging depending on the time of day. (jQuery script here)

Use traditional widget layouts (or not) with lots of flexibility over title and structure

Classic widgets have always had a lockup that includes a widget title. One cool thing about having blocks in widget areas is that you have complete flexibility over how titles appear. For example, you might choose to have a title over every widget, you might only want one title at the top of each widget area, or your design might not need titles at all.

Note: Some themes, like Twenty Twenty-One, are designed to flow content horizontally within widget areas. If you’re having trouble with a theme splitting your layout into columns, you could try keeping the lockup together by containing it within a Group block.

Side-by-side comparison of List view of a Sidebar widget area with and without grouped/nested lockups.
Ungrouped layouts (left) versus grouped layouts (right)

Copy & paste existing layouts from the WordPress Pattern Directory

While patterns haven’t been fully integrated into the widget editors yet, one thing you can do is copy and paste patterns from the game-changing new WordPress Pattern Directory into your site’s widget areas. I used this horizontal call to action pattern from the directory almost exactly as is, with minor color and copy adjustments:

Footer widget area with a black box that reads, “Become a monthly Patron” with paragraph text and a “Join now” button in a separate column. A painted image of a waves hitting rocks is directly below with no space between.
FYI: Patterns have not been curated for or integrated into widget areas yet, so you may run into some unexpected behavior!

Inserting widget patterns

There is some early discussions about how patterns can begin to be integrated into the widget editors in GitHub issue #26170. Some of the conversation has been around introducing a Patterns tab into the inserter, which would allow users to browse patterns the same way as in the post editor.

Three side-by-side views of the inserter: in the first, the Search bar is focused and “text” block icons displayed. In the second, the Patterns tab is selected and patterns are shown in a list. In the third, the drop down menu open with the “Sidebar” option hovered/active.

A couple of goals for introducing pattern insertion UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. into the widget editors are:

  • Display patterns that make sense to use in a constrained 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. or footer area, depending on the type of widget area being edited.
  • Surface patterns in a extra discoverable way for users (including classic widget users who want to quickly recreate a traditional layout).

Based on this, I’ve been exploring ways that patterns could be surfaced in the quick inserter as a default/resting state as soon as the popover is opened:

Footer widget area with a search bar and block options in the top section and pattern options in a section below. There's a black “browse all” button that stretches across the bottom of the popover.
Currently, patterns are surfaced below quick inserter options after the user begins typing in the search box. Perhaps a couple of patterns could be visible by default.
Footer widget area with a search bar and block options in the top section and pattern options in a section below. There's a black “browse all” button that stretches across the bottom of the popover.
The quick insterter could display a list of patterns that show a fly-out preview when hovered. A similar style has previously been explored for the block switcher menu.
Footer widget area with a search bar and block options in the top section and pattern options in a section below. There's a black “browse all” button that stretches across the bottom of the popover.
The quick inserter could contain a single large preview with carousel navigation to browse through patterns. This mimics the pattern placeholder setup UI.

Thoughts?

How would you like to see patterns incorporated into the new block-based widget editors? Join the discussion by opening a new issue on GitHub or commenting below!

#blocks, #design, #gutenberg, #widgets

A Walk Around… The Search Block

Welcome to a new installment of the series where I look at the current state of 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/ blocks and propose improvements.

In my previous post, I talked about the Table 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.. This time I’ll be discussing another important component: the Search block.

Since search is a central activity for blogs and other sites that index content, it’s essential to give users the ability to customize the appearance of their search bars so that they don’t look alien or feel disconnected from the design of their sites.

The Search block options are pretty limited at the moment, and the block can only offer a short range of styles. The good news is that just by adding a small group of settings (many of which already exist for other blocks), users will be able to customize their search boxes in many different ways:

With that in mind, let’s have a look at this block.

Toolbar

The current toolbar has three main buttons that perform the following actions:

  • Showing and hiding the search label.
  • Changing the position of the search button (outside, inside, or no button).
  • Toggling between a search button with text or an icon.

To be more consistent with the way other blocks present the options and also to simplify the toolbar, we could move the second and third buttons (“Change button position” and “Use the button with icon”) from the toolbar to the 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.. In the case of “Use button with icon”, I think this is not a primary action, and also the icon itself doesn’t convey the actual operation behind the button.

We could also add a setting to modify the alignment of the text inside the input field and the position of the text button. Controlling the alignment would allow users to create bars like these ones:

For languages that use right to left scripts like Arabic, Hebrew, or Urdu, we automatically switch the alignment of the text and the position of the search button.

To allow having styles that use the writing direction defined by the language, we could offer four alignment options:

  • Default (it uses the direction of the selected language)
  • Left
  • Center
  • Right

The last three options would overwrite the direction defined by the selected language.

Sidebars

Let’s review how the sidebar could look like and the sections that it would include:

Styles

This section would replace the “Change button position” that we removed from the sidebar, and add a new option: Button only. There’s an open issue that discusses this option here.

When users add a new search bar, they’ll get the default setting (Button outside), but will have the other styles visible on their sidebars for a quick switch.

Display settings

This section would allow adjusting the general width of the block (a feature that is currently present) and also toggling the following settings:

  • The icon inside the search input.
  • The icon inside the search button.

Here is a list of variations that those two settings would produce:

Spacing

In this section, users could change the padding of the item and also affect the spacing (the distance between the button and the input field).

There’s an interesting conversation around contextual padding controls in this GitHub issue, which could probably be applied to this block.

Depending on the style (button outside or button inside) the padding could behave differently:

  • If the style button outside is selected, the padding will affect both the input field and the button.
  • If the style button inside is selected, the padding will affect the outermost element.

The spacing setting could also be adjusted using a handle in the block itself. The control between the input field and the button would change the spacing, whereas the control in the button would allow resizing the whole block (which is the current behaviour).

Border

I think we should allow users to modify the border of the input field and the button independently for each of the four sides. That would give them great control to create different styles. For instance, they could create search bars with just a bottom border.

There’s an open PR that deals with border color support and border style here.

Typography

Depending on what element is selected, the typography section would affect the font and style of the input field, the text button, or the label.

Color

Like in the typography section, this one would affect the text and background colors of both the input and the button (again, depending on the selection).


As I mentioned at the beginning of this post, if we implement these changes, users will be able to customize their search bars in many different and exciting ways and have more control over the design of their sites.

You can check all the designs I presented in this post in this Figma file and follow the development status in this GitHub search.

And as always, if you have any thoughts or feedback for this block, please drop a comment below. Thank you!

#blocks, #design, #gutenberg, #search, #site-editor

Side-by-Side Image Challenge

Drag and drop is known for being one of the most intuitive interaction patterns there is. One behavior that users might expect to find 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/ is the ability to create side-by-side images by dragging and dropping an image next to an existing one.

Note: This behavior has previously been explored in 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/ issue #13202 and perhaps elsewhere!

The Current Behavior

Right now in Gutenberg, you can drag an image on top of an existing 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 will upload the new image and replace the current one. The drop zone covers the full area of the block and is indicated by a blue overlay color with a CTA.

image-drag
gallery-drag

Image block and Gallery block with drop zone overlay shown at 75% opacity.

The drop zone looks exactly the same on the Gallery block, covering the full area of the block, but the behavior is slightly different there. Instead of replacing, the new image is added to the gallery.

The current overlay behavior works great for each of these singular interactions. The key design challenge is finding a way to offer both options so that a user can replace an image or add another image within a single drag motion.

Transforming an Image block into a Gallery block

indicator

The blue overlay color could be reserved for replacing an image, with a new treatment introduced for transforming the Image block into a Gallery block to achieve a side-by-side effect. I used a 4px vertical line to indicate the position of the new image — this is the same visual treatment used for the “move to” indicator (but I can also see a conceptual argument for using a 1px line like the sibling inserter).

snackbar-1

We could show a snack bar after the user completes the transform via drag and drop, as it’s not explicitly clear that this action will change the block type. A snack bar offers the opportunity to undo the transform, and could also be a way to call more attention to the new block type through the use of a block icon.

Adding and replacing images in the Gallery block

It would be nice to extend the same behavior to the Gallery block so that a user can seamlessly go from one image to two images, and from two images to three images, using the exact same interaction pattern. This could be a part of larger efforts to unify the Image block and Gallery block more closely.

Implementation

I imagine this could work by identifying separate drag zones within the area of the existing image for replacing/transforming but it would be helpful to play around with this in a PR to see what feels right.

Another option that would introduce slightly more friction to this interaction would be for the transform-related drop zones to only “unlock” after a long hover over the area. In this scenario, a quick drag and drop would always default to an image replacement with a longer hover opening up additional options (but I think the simpler interaction described above is closer to the expected behavior).

On GitHub

  • Use drag and drop to transform an Image block → Gallery block #32819
  • Unify drag and drop behavior across Image block and Gallery block #32820

Thoughts?

Please feel free to leave a comment below or drop a message 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/.. Looking forward to hearing your feedback, thanks for reading!

#blocks, #design, #gutenberg

A Walk Around… The Table Block

In this post I’d like to talk about the Table 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 propose several improvements and enhancements. Many of these changes require implementing one important feature: multi-cell selection. Others, like improving the initial placeholder state, could be addressed independently.

If you want to check out all the designs mentioned in this post, here’s the Figma file that contains all the designs covered below, along with some explorations and references. I’ve also opened a tracking issue on GitHub to organize the work around this block.

I’ve centered my work around these five main areas:

Placeholder

The current placeholder state is simple: users can set the number of columns and rows they want their table to have.

But these two numbers don’t give a clear picture of the kind of table the user is about to create, and since we don’t have a quick way to add new columns or rows (more on that later), creating the right table from the start is really important.

To solve this problem, we could offer an automatic preview that reflects the information entered by the user so that they can immediately see what the shape of their table will be.

Here’s an example of how this interface could look like:

  • The table in the preview gets updated whenever the user adds or removes rows and columns.
  • The height of the preview window is fixed, so the input elements below won’t move.
  • If the user creates a large table, we can show an ellipsis implying that the table contains rows or columns that are not being shown.

Another idea based on this UIUI UI 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. is the possibility to resize the table using the preview interface itself: if the user hovers the cells and then clicks one of them, the table gets resized automatically.

Related

Multi-cell selection

This is the biggest change in the Table block and would allow creating more complex designs than the ones that are possible right now.

Adding this feature would require refactoring the block and use inner blocks, so that cell is a block of its own. There’s been some talk around this topic in this issue.

To illustrate how this feature could work, here’s how Google Docs and TinyMCE do multi-cell selection.

Google Docs

The nice thing about multi-cell selection in Google Docs is that it’s possible to select one single cell. However, it’s not possible to select the entire table in an easy way (except, obviously, by highlighting all the cells with the mouse cursor).

TinyMCE

In contrast, in the TinyMCE editor it’s possible to select the whole table by clicking on it. Strangely, you can’t select just one single cell.

I believe our tables should support these two basic use cases: single-cell selection and the highlighting of the whole table. That would make the styling process much easier.

Two other handy features we could offer would be: merging and splitting.

Merging

Some apps like Google Spreadsheets offer several types of merging: horizontal, vertical, or full merge, depending on the direction in which the cells get merged.

I think we could start by offering the full merge (which combines a group of cells into one single element), as shown in the example below.

image

Google Spreadsheets also offers the option of “unmerging” a previously merged group of cells, which is a way to reconstruct the previous structure of a table. This is an advanced use case that we don’t probably need to cover, at least initially.

Splitting

Microsoft PowerPoint also allows to customize the splitting of cells. In our case, we could offer two options for splitting: horizontal or vertical. The reason to offer two ways and not automatically divide rows horizontally and columns vertically is to support the case where a user just want to split a single cell. In that case, it makes sense to give them the option to pick the method they prefer.

image
Related

Right now is only possible to change the text and background colors of all the cells at the same time. If we had mulit-cell selection in place, users would be able to customize their tables in many different and interesting ways.

These are the sections I think we should include in the sidebar:

Let me review them:

Styles

This section could show four several common table styles. Instead of using gray to color the cells, we could use the default main color defined by the current theme (which means that those previews should be generated using code).

These styles set and combine basic elements like stripes, and the presence of 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., and footer rows. In the case of the last one (‘Left column’), it also sets the background color of a group of cells.

Table settings

In this section, I would add a controller to modify the dimensions of the table, since the only way to do this at the moment is using the toolbar (and that requires two clicks to add or remove a column or row of cells), which makes the process of modifying the dimension of a table a bit tedious.

Besides this section, another handy way to add more rows to a table could just be pressing the tab key in the last cell, as other apps do. I would also allow using the Tab key to traverse the cells.

Border Settings

This section would allow users to change the border settings for each cell or if it’s selected, the whole table.

With the idea to allowing to style tables in many different ways, we could also offer a special control (similar to the padding one) that would allow setting the width of each of the selection borders independently.

Color settings

Instead of changing the color settings of the whole table, this section would only affect the selected cells. This section would also offer the possibility to create a zebra-striped table (important thing though: the user could still overwrite the stripe color setting the background color with the control above).

Typography

Nothing shocking or revolutionary here: we should allow changing the style of the text for each cell and the table caption.

Related

The toolbar

If we were to implement all these changes we would end up having at least 10 actions that could go in the toolbar. Instead of having one single option that gives access to all the available actions, we could group them by categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging..

We could have three categories: insert, remove, and cell operations.

  • Insert would give access to all the additive operations: insert row before, insert row after, insert column before, and insert column after.
  • Delete would give access to all the destructive operations: delete row, delete column, and delete selected cells.
  • Cell operations would give access to merge, and split horizontally & vertically.

Icons

I’m also proposing to update several icons to make them faster to read and use the same kind of design language (i.e.: border radius, line widths, etc.) as other current icons. Here’s a first exploration:


Notice that, in the case of the four insert icons, the weight of the elements indicates the direction (before or after) in which the action will take place, while the current icons use the plus symbol instead. This is a delicate distinction that probably requires some careful consideration. Please, share your opinion and ideas in the comments of this post or in this GitHub issue.

And here’s the full set of icons (again, an initial exploration) that also include the Split, Merge, and Remove cells icons.

Related

I’ll continue working to improve this block. If you have any thoughts or feedback, please drop a comment below. Thank you!

#blocks, #design, #gutenberg

Design Team Meeting Notes: June 2, 2021

These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel and find the meeting’s agenda here. 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.

Housekeeping

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

Announcements

WordPress has turned 18
Last week we celebrated the 18th anniversary of WordPress’ launch, a day that we can fondly refer to as WordPress’ birthday.

Since our last birthday we developed our 40th release and now also support over 40% of the web. So it seems fitting that this year’s celebration should be a list of 40 milestones that have helped us get there.

Bug Scrub Schedule for 5.8
As we are at feature freeze for 5.8 release the next milestone is the BetaBeta A 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. 1 which is set for June 8. I along with  @lukecarbis are leading scheduled bug-scrubs that usually happen twice a week. For the most part, they’re scheduled for Tuesdays and/or Wednesdays at 4:00 UTC for APAC time zones and 20:00 UTC for US /EU regions, though there are some adjustments to accommodate religious and national holidays. The next one is on June 8, Tuesday at 2000 UTC. Come join if you can as we look to address a few bugs and defects for 5.8 🎉

Proposal to tweak existing icons and add new ones
There is a proposal by @keoshi on the existing icons. The discussion goes back a couple of weeks over Slack that has been documented in the Meeting Notes. We would love to hear your thoughts, concerns, and suggestions on the above. If there are no major disagreements or changes to be done, the next step would be create a PR to submit all of these to the repo.

WordCamp Europe 2021
As we are just days away from WCEU 2021 which is set to take place between 7 and 9 June, we wanted to remind everyone to get their tickets before it runs out. Noting that 2 #design team members talking this year:

  1. @javierarce will present Using Figma in the Design Team Workshop on Monday, June 7 at 18.00 CEST
  2. @estelaris will be part of a panel discussion on How contributors make WordPress – Wednesday, June 9 at 16:00 CEST

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blog highlights

Discussion

@estelaris suggested that we add a link to the handbook that references the fact that Figma now provides a link to give view access to the WP library. This way we can remove the note about emailing invites. @karmatosed, @kellychoffman, and @melchoyce agreed. Estela will do the update.

Further reading

Design Team Meeting Notes March 17, 2021

These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel and find the meeting agenda here. 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.

Attendees: @estelaris, @chaion07, @ibdz, @ashiquzzaman, @hedgefield,

Housekeeping

  • Design Handbook Pages on TrelloTrello Project management system using the concepts of boards and cards to organize tasks in a sane way. This is what the make.wordpress.com/marketing team uses for example: https://trello.com/b/8UGHVBu8/wp-marketing.: We would like to ask for contributors who would like to review the pages that have already been written and to write any other missing pages. @ibdz, @chaion07, @estelaris & @hedgefield have already volunteered to work on this. If you are interested then please let us know in the #design channel over Slack.
  • Looking for a Figma maintainer: @ibdz volunteered to maintain the components in Figma and add any changes necessary from now on.
  • Adding Note-takers to the Team Page: In an effort to recognize the regular contributors better, the team decided to add the note-takers to the list on the Handbook. We have an open call for note-takers and triage facilitators. These are both 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 pingPing The 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.

Announcements

#meeting-summary, #meeting-notes, #weekly-design-chat

Design Team Meeting Notes January 20, 2021

These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel and find the meeting agenda here. 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.

Attendees: @chaion07, @paaljoachim, @kellychoffman, @karmatosed, @arpitgshah, @habib919000, @estelaris, @hedgefield

Housekeeping

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

Announcement

  • WordPress 5.6.1 just days away
  • A few stale issues 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/ repository: https://make.wordpress.org/core/2021/01/14/stale-issues-in-gutenberg-repository/
  • Test Scrub Schedule for 5.7: https://make.wordpress.org/core/2021/01/15/test-scrub-for-wordpress-5-7/
  • Shared Bug Scrub for design and a11yAccessibility Accessibility (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): The joint Bug Scrub will take place on Wednesdays at 17:00 UTC, so one hour before our meeting. The location of the meeting will alternate between #design and #accessibilityAccessibility Accessibility (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), so we can get both teams involved and working together to bring some nice improvements to 5.7.

Updates

Open Floor

@justinahinon is seeking feedback from the team on 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. editor handbook homepage https://developer.wordpress.org/block-editor/. Justin is working closely with @paaljoachim on improving the content of the handbook, and would like to take this opportunity to add some design changes as well. Specifically, now, on the homepage https://github.com/JustinyAhin/gutenberg/blob/gutenberg-hanbook-intro-page/docs/readme.md They would like to use cards for the headings like on Gatsby docs https://make.wordpress.org/core/files/2021/01/Screenshot_2021-01-20-Welcome-to-the-Gatsby-Way-of-Building-Gatsby.png 

One suggestion made by @kellychoffman was to identify which info and content we want to be displayed in cards. that might be easier to provide a re-usable design that could be easily applied and styled in the theme.

@estelaris also suggested it would be a good idea to have a wire-frame so that we can understand what content is going to be added where. Questions like, are you moving the menu from the left column? will a new menu be introduced? However, if nothing from the frame will change, then shouldn’t be any issues in modifying the style for the content. Additionally, identifying and justifying the use of cards, what is the purpose? we should remember that adding extra graphic elements to such small area with existing images, can be overwhelming.

@karmatosed inquired on who the audience is going to be, whether existing users or designers and are we looking to change it to become a reference there? Tammie agreed with Kelly and pointed focus would on the paths over the design as a starting point. Just having a more usable handbook in the same style can be a huge win for everyone.

#meeting-summary, #meeting-notes

Show and Tell January 27, 2021

This year, we will continue with our Show and Tell on the last Wednesday of the month. This is a Zoom meeting where contributors have the opportunity to share their work and ask for feedback from the design team or simply show whatever they are working on.

Zoom link will be posted on 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/. #design channel and recorded for those that cannot attend. A summary will also be posted in the meetings notes.

If you would like to share your work, let us know in the comments.

#meeting-agenda

Design team meeting notes Dec. 16, 2020

These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel and find the meeting’s agenda here. 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.

Housekeeping

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.

Announcements

This is the last design team meeting for 2020. We will be back on 15 January with a design triage.

Don’t forget to tune into Matt Mullenweg’s State Of The Word on the 17th of December (tomorrow).

Learn WordPress is live now. Whether you are new to WordPress or a seasoned developer/designer, there is always something to learn.

Updates

@estelaris (that’s me) was invited to WC Sevilla on 26-29 December to lead the Documentation table and work with both the documentation and polyglots teams to understand what features are needed for better translations in HelpHub.

Discussion

Last month we made changes to our triage sessions and agreed to have only one session and do a review of labels and keywords to move the tickets. The length of the triage session was also shortened. The idea was to have fewer meetings and work more efficiently.

After a few weeks, we have noticed that contributors expect working sessions and we have had to add unscheduled sessions to review tickets. Also, the number of tickets and PRs that are not being worked on has increased, both in Track and 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/.

Our idea is to keep to only one session, increase it as need it, between 30-45 minutes and give feedback/assign design work.

One of the questions focus on the reason why triage is not working, is it due to the length of time, or time when triage is run and content?. There were several points made and expect a post about how to run triage in the next few days.

#meeting-notes

#design