Title: gutenberg – Make WordPress Design

---

#  Tag Archives: gutenberg

 [  ](https://profiles.wordpress.org/matveb/) [Matias Ventura](https://profiles.wordpress.org/matveb/)
11:55 am _on_ June 13, 2022     
Tags: gutenberg, [phase-3 ( 3 )](https://make.wordpress.org/design/tag/phase-3/)

# 󠀁[Thinking Through the WordPress Admin Experience](https://make.wordpress.org/design/2022/06/13/thinking-through-the-wordpress-admin-experience/)󠁿

These are some _very early_ concepts around evolving the admin interface which are
meant to spark conversations towards defining the outline of **Phase:3**. Some of
the ideas presented here emerged when trying to solve problems around the site editor
but have much wider breadth and consideration.

Given the [third phase of the current WordPress roadmap](https://wordpress.org/about/roadmap/)
has a focus around workflows and multiplayer, considerations around the various 
admin flows become all the more important. Also, as the component language introduced
through wordpress/components becomes more established, we need to contemplate its
coherent expansion outside the editor views.

Please, note that nothing here is meant to be settled in any way; it’s just a gathering
of thoughts and possible paths to be explored in the future for early feedback.

## The Shell and the Canvas

The 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 introduced a full-screen view as the default experience. Any such presentation
faces the challenge of how to contextually access information outside the main frame.
In the site editor context, this meant accessing templates and navigation. For the
post editor, it might be accessing the list of posts or pages. This is generally
characterized as “going back” but such a characterization falls a bit short and 
should be challenged.

One idea that has been surfacing is that we are dealing with two materials at different
layers of focus or distance: the admin frame (or shell) and the canvas that contains
the content or site representation. The canvas could be in a zoomed state — essentially
taking the available space of the screen — but it doesn’t mean the navigation tools
are in some “back” state, they are just off view at the present moment. If we were
to zoom out from the full-screen state we would naturally get to see where we currently
place in the stack.

Two materials: the **shell** (wayfinder with drill-down panels) and the **canvas**(
the place to browse, manage, edit, customize).

For a practical application of some aspects of this idea see: https://github.com/
WordPress/gutenberg/issues/36667

Articulating these materials in ways that can go from an edge to edge screen representation
to complementary partial displays within one system becomes an interesting way of
thinking through the problem of achieving focus, context, and clarity. This obviously
has further implications on how we reason about keyboard navigation and screen regions.

In the context of the block editor, the canvas is naturally a representation of 
the site or content, but the canvas frame should be flexible enough to accommodate
other types of admin views that are oriented towards management or settings. This
also has implications for backwards compatibility since the expectation is that 
existing views can be automatically accommodated.

## The Home Button

Since we are articulating different levels of focus, the home button (represented
by the site icon on these prototypes) aims at being a permanent fixture that allows
escaping the inner most level of focus and jump upwards in the navigation stack 
as needed.

When in full-screen, the home button reduces the frame to a smaller footprint and
displays the current level of navigation within the shell. The home button is thus
defined as a contextual interface element, that can be pressed further to go all
the way back in the stack to the initial dashboard. The aim of this interface element
is to both give control and build familiarity to navigate away from any context.
There are some details of this mechanic to consider and refine if it were to serve
its purpose.

## Make it ExtensibleExtensible This is the ability to add additional functionality to the code. Plugins extend the WordPress core software.

The system needs to be naturally extensible. The basic mechanisms for registering
menu items are already in place, but we’d need to reason and give more formal access
to the canvas and shell properties, as well as the ability to model its various 
states.

There are many ideas left to explore here. For example, plugins that might need 
to operate like applications could colorize different sections. They’d get access
to the frame in its various configurations so it can use it as primary 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. for management
views, or as an editor canvas, etc.

Worth noting that some activities — like dealing with the theme design, for example—
might clash with user chosen color schemes on a fundamental level. However, given
the shell is adaptable, sections such as “design” could establish themselves with
its own muted palette, either dark or light variants, and so on.

## Make it Personal

Almost every computing context of sufficient scope and generality would eventually
recognize that to be the best experience for every user it needs to allow some degree
of personalization. The WordPress admin has allowed this primarily through code 
APIs and in ways that are not generally the most intuitive or that require effort
to coordinate. This brings a tension in discoverability and how overwhelming the
navigation experience might get to be.

One important idea embedded in this proposal is allowing the set of main navigation
items to be configurable, either as shortcuts or as pinned items, similar to how
the block editor handles 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/](https://wordpress.org/plugins/)
or can be cost-based plugin from a third-party. extensions in 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.. This
would allow a more systematic and maleable approach to choosing what are the most
important items for a given site or a given user flow.

A corollary is that different users could have different admin experiences based
on what flows they use and care the most within the same site.

## There and Back Again

There are various cases where jumping transversally from one area of the admin to
another become important. It’s not generally convenient to map all the path combinations
for going from point A to point Z (and everywhere in between) without also exploding
the cognitive complexity.

It would be interesting to consider recently visited areas as some sort of stack,
similar to Command/Control+Tab interfaces in operating systems, but operating for
recently visited sections of the admin interface. This is just a the pie in the 
sky thing for now, but imagine if the few places you visited where represented in
the frame stack somehow (as dots, as stacked frames, etc) so you could easily swap
places without having to traverse layers of menus each time if you need to be bouncing
between a couple specific flows.

## Search

The ability to jump to a section, plugin area, or content piece is a powerful model
that has become more ubiquitous in modern applications, often in the form of a “
command palette” or equivalent quick-access interfaces. It’d be worth mapping how
a feature like this could work in WordPress and how it could leverage the very same
APIs we use to define menus, locations, settings, and content types to become extensible.
While this is becoming a more familiar pattern for going to a specific location 
or entity, it’d probably remain an advanced feature in nature and thus a secondary
affordance.

## Multiplayer

When Phase:3 is mentioned there is a strong emphasis in the ability to work with
others. This means both real time collaboration as well as asynchronous ongoing 
collaboration by multiple user roles. Taking these capabilities into account into
the very fabric of the admin experience is one of the reasons for considering the
admin flows as all encompassing. Multiplayer might be reflected in both the editor
frame and the management views. Imagine not just being able to collaborate on a 
page or a design but to also be able to follow the avatarAvatar An avatar is an 
image or illustration that specifically refers to a character that represents an
online user. It’s usually a square box that appears next to the user’s name. of 
a person and jump straight to where they are in the admin so you can collaborate
on any activity. There’s a lot there left to explore and unpack.

---

_Thanks to [@jameskoster](https://profiles.wordpress.org/jameskoster/) and [@joen](https://profiles.wordpress.org/joen/)
for the work on some of these early prototypes._

[#gutenberg](https://make.wordpress.org/design/tag/gutenberg/), [#phase-3](https://make.wordpress.org/design/tag/phase-3/)

### Share this:

 * [  Threads ](https://make.wordpress.org/design/2022/06/13/thinking-through-the-wordpress-admin-experience/?share=threads)
 * [  Mastodon ](https://make.wordpress.org/design/2022/06/13/thinking-through-the-wordpress-admin-experience/?share=mastodon)
 * [  Bluesky ](https://make.wordpress.org/design/2022/06/13/thinking-through-the-wordpress-admin-experience/?share=bluesky)
 * [  Facebook ](https://make.wordpress.org/design/2022/06/13/thinking-through-the-wordpress-admin-experience/?share=facebook)
 * [  X ](https://make.wordpress.org/design/2022/06/13/thinking-through-the-wordpress-admin-experience/?share=x)
 * [  Reddit ](https://make.wordpress.org/design/2022/06/13/thinking-through-the-wordpress-admin-experience/?share=reddit)
 * [  Email ](https://make.wordpress.org/design/tag/gutenberg/?subject=%5BShared%20Post%5D%20Thinking%20Through%20the%20WordPress%20Admin%20Experience&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2022%2F06%2F13%2Fthinking-through-the-wordpress-admin-experience%2F&share=email)

 [  ](https://profiles.wordpress.org/javiarce/) [Javier Arce](https://profiles.wordpress.org/javiarce/)
1:55 pm _on_ November 2, 2021     
Tags: cover block, cropping, [design ( 217 )](https://make.wordpress.org/design/tag/design/),
design tools, gutenberg, image block   

# 󠀁[Background editor improvements](https://make.wordpress.org/design/2021/11/02/background-editor-improvements/)󠁿

This post presents an analysis that [Channing Ritter](https://critterverse.blog/)
and I have made of the Cover and Image blocks and offers some ideas to improve the
user workflow and streamline some of the basic operations, like cropping, image 
placements, and rotation.
We’ll also offer an idea to integrate Fill modes into 
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.
settings. The designs, prototypes, and an analysis of the current functionalities
are available [on this Figma file](https://www.figma.com/file/HihVVJO53NZORinJqptSJ6/Background-Editor-improvements?version-id=1257703292&node-id=0%3A1).

[[

Our intention with this exploration is twofold. We’d like to:

 * Simplify the way Image and Cover blocks work.
 * Offer image editing functionalities so that users don’t need to resort to outside
   tools.

Besides these objectives, our work tries also to address [this issue created by Matías Ventura](https://github.com/WordPress/gutenberg/issues/20193)
regarding the improvement of the Cover block:

[[

## Cropping issues

Before we present our designs, let’s see some of the current problems with the cropping
tool.
The first one we encounter when using this tool appears right after the user
clicks the crop icon. We go from this toolbar:

[[

To this one:

[[

We think this change is quite disorienting because the toolbar gets reorganized,
adding new icons and removing the cropping and link icons in a very abrupt way. 
We’ll show a possible solution to this problem in a minute.
But there are some other
problems with the cropping functionality. Let’s see a video of the cropping tool
in action:

As you can see in the previous video:

 * It’s impossible to revert a change made inside the cropping mode. Clicking “apply”
   inside this mode essentially creates a new image and replaces the original one.
   This means that every time users make a change and go back to the cropping mode,
   they can only edit the new cropped image.
 * The rotation option is limited to just 90º increments.
 * The zoom only allows zooming in, and it only goes from 100% to 300%.
 * In order to zoom in, the user needs to click the crop icon.

But the main problem is that the cropping mode works in a convoluted way: instead
of selecting a rectangle and extracting the content inside, the cropping tool defines
a viewport (using the set “Aspect ratio”) that will be used for the crop. Users 
can move the image inside, but this movement is restricted to one direction and 
limited by the outer bounding box of the block.

Once the user applies a crop to the image, the image then expands to fill up the
entire space of the block using the selected aspect ratio. This is confusing since
the user sometimes interacts with a small image that suddenly grows and fills the
whole block.

## Secondary toolbars

A solution to the problem we mentioned above about the confusing toolbar could be
to use dedicated toolbars for certain groups of actions.
These new toolbars would
present a title indicating that the user is now inside a different mode, the set
of options for the functionality, and links to apply and discard the changes.It 
could look like this:

[[

And here’s a list of explorations we did for the placement of the elements:

[[

## Walkthroughs

We’ve created three walkthroughs that explain several aspects of our proposal:

 * How to integrate the cropping tool and other editing background functionalities
   inside the Cover block.
 * How different Fill Modes could work.
 * How could we add the cropping tool inside the Image Block.

These prototypes are self-guided, just open each of them and advance to the next
slide clicking each screen. A series of notes will explain each concept.

### Cover Block

[[

A question we haven’t addressed on this exploration is what happens with the focal
point functionality this block offers.
On the one hand, it could make sense to keep
this feature, because it allows centering an image that is larger than its container.
On the other hand, however, this block’s new background editing capabilities would
make it very easy to enter inside the Edit background mode, reposition the image
or crop it, and apply the changes.

### Fill modes

[[

### Image Block

[[

## Thanks!

We hope you like these explorations and help us with comments and suggestions.

[#cover-block](https://make.wordpress.org/design/tag/cover-block/), [#cropping](https://make.wordpress.org/design/tag/cropping/),
[#design](https://make.wordpress.org/design/tag/design/), [#design-tools](https://make.wordpress.org/design/tag/design-tools/),
[#gutenberg](https://make.wordpress.org/design/tag/gutenberg/), [#image-block](https://make.wordpress.org/design/tag/image-block/)

### Share this:

 * [  Threads ](https://make.wordpress.org/design/2021/11/02/background-editor-improvements/?share=threads)
 * [  Mastodon ](https://make.wordpress.org/design/2021/11/02/background-editor-improvements/?share=mastodon)
 * [  Bluesky ](https://make.wordpress.org/design/2021/11/02/background-editor-improvements/?share=bluesky)
 * [  Facebook ](https://make.wordpress.org/design/2021/11/02/background-editor-improvements/?share=facebook)
 * [  X ](https://make.wordpress.org/design/2021/11/02/background-editor-improvements/?share=x)
 * [  Reddit ](https://make.wordpress.org/design/2021/11/02/background-editor-improvements/?share=reddit)
 * [  Email ](https://make.wordpress.org/design/tag/gutenberg/?subject=%5BShared%20Post%5D%20Background%20editor%20improvements&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2021%2F11%2F02%2Fbackground-editor-improvements%2F&share=email)

 [  ](https://profiles.wordpress.org/critterverse/) [Channing Ritter](https://profiles.wordpress.org/critterverse/)
3:34 pm _on_ July 27, 2021     
Tags: [blocks ( 5 )](https://make.wordpress.org/design/tag/blocks/),
[design ( 217 )](https://make.wordpress.org/design/tag/design/), gutenberg, [widgets ( 15 )](https://make.wordpress.org/design/tag/widgets/)

# 󠀁[Widgets in WordPress 5.8 and Beyond](https://make.wordpress.org/design/2021/07/27/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/](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](https://wordpress.org/themes/twentysixteen/), 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.⌉⌊
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](https://stackoverflow.com/questions/31242051/show-content-based-on-time-of-day-timing-changes-on-different-days-of-the-week))

## 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.
⌉⌊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](https://wordpress.org/patterns/)
into your site’s widget areas. I used this [horizontal call to action](https://wordpress.org/patterns/pattern/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.⌉⌊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](https://github.com/WordPress/gutenberg/issues/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.⌉⌊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.⌉⌊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.⌉⌊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](https://github.com/WordPress/gutenberg/issues/27870#issuecomment-750107274)
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.⌉⌊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](https://github.com/WordPress/gutenberg/issues/new?assignees=&labels=&template=Feature_request.md)
or commenting below!

[#blocks](https://make.wordpress.org/design/tag/blocks/), [#design](https://make.wordpress.org/design/tag/design/),
[#gutenberg](https://make.wordpress.org/design/tag/gutenberg/), [#widgets](https://make.wordpress.org/design/tag/widgets/)

### Share this:

 * [  Threads ](https://make.wordpress.org/design/2021/07/27/widgets-in-wordpress-5-8-and-beyond/?share=threads)
 * [  Mastodon ](https://make.wordpress.org/design/2021/07/27/widgets-in-wordpress-5-8-and-beyond/?share=mastodon)
 * [  Bluesky ](https://make.wordpress.org/design/2021/07/27/widgets-in-wordpress-5-8-and-beyond/?share=bluesky)
 * [  Facebook ](https://make.wordpress.org/design/2021/07/27/widgets-in-wordpress-5-8-and-beyond/?share=facebook)
 * [  X ](https://make.wordpress.org/design/2021/07/27/widgets-in-wordpress-5-8-and-beyond/?share=x)
 * [  Reddit ](https://make.wordpress.org/design/2021/07/27/widgets-in-wordpress-5-8-and-beyond/?share=reddit)
 * [  Email ](https://make.wordpress.org/design/tag/gutenberg/?subject=%5BShared%20Post%5D%20Widgets%20in%20WordPress%205.8%20and%20Beyond&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2021%2F07%2F27%2Fwidgets-in-wordpress-5-8-and-beyond%2F&share=email)

 [  ](https://profiles.wordpress.org/javiarce/) [Javier Arce](https://profiles.wordpress.org/javiarce/)
3:25 pm _on_ July 13, 2021     
Tags: [blocks ( 5 )](https://make.wordpress.org/design/tag/blocks/),
[design ( 217 )](https://make.wordpress.org/design/tag/design/), gutenberg, [search ( 2 )](https://make.wordpress.org/design/tag/search/),
[site editor ( 2 )](https://make.wordpress.org/design/tag/site-editor/)   

# 󠀁[A Walk Around… The Search Block](https://make.wordpress.org/design/2021/07/13/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/](https://wordpress.org/gutenberg/)
blocks and propose improvements.

In [my previous post,](https://make.wordpress.org/design/2021/06/15/a-walk-around-the-table-block)
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](https://make.wordpress.org/design/tag/gutenberg/?output_format=md#styles)
 * [Display Settings](https://make.wordpress.org/design/tag/gutenberg/?output_format=md#display)
 * [Spacing Settings](https://make.wordpress.org/design/tag/gutenberg/?output_format=md#spacing)
 * [Border Settings](https://make.wordpress.org/design/tag/gutenberg/?output_format=md#border)
 * [Typography](https://make.wordpress.org/design/tag/gutenberg/?output_format=md#typography)
 * [Color](https://make.wordpress.org/design/tag/gutenberg/?output_format=md#color)

### 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](https://github.com/WordPress/gutenberg/issues/31128).

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](https://github.com/WordPress/gutenberg/issues/33221),
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](https://github.com/WordPress/gutenberg/pull/31783).

[[

### 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](https://www.figma.com/file/ULWDWBaxA5S61RnDYAFQ6W/Search-Block?node-id=379%3A336)
and follow the development status [in this GitHub search](https://github.com/WordPress/gutenberg/issues?q=is%3Aissue+is%3Aopen+label%3A%22%5BBlock%5D+Search%22).

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

[#blocks](https://make.wordpress.org/design/tag/blocks/), [#design](https://make.wordpress.org/design/tag/design/),
[#gutenberg](https://make.wordpress.org/design/tag/gutenberg/), [#search](https://make.wordpress.org/design/tag/search/),
[#site-editor](https://make.wordpress.org/design/tag/site-editor/)

### Share this:

 * [  Threads ](https://make.wordpress.org/design/2021/07/13/a-walk-around-the-search-block/?share=threads)
 * [  Mastodon ](https://make.wordpress.org/design/2021/07/13/a-walk-around-the-search-block/?share=mastodon)
 * [  Bluesky ](https://make.wordpress.org/design/2021/07/13/a-walk-around-the-search-block/?share=bluesky)
 * [  Facebook ](https://make.wordpress.org/design/2021/07/13/a-walk-around-the-search-block/?share=facebook)
 * [  X ](https://make.wordpress.org/design/2021/07/13/a-walk-around-the-search-block/?share=x)
 * [  Reddit ](https://make.wordpress.org/design/2021/07/13/a-walk-around-the-search-block/?share=reddit)
 * [  Email ](https://make.wordpress.org/design/tag/gutenberg/?subject=%5BShared%20Post%5D%20A%20Walk%20Around%E2%80%A6%20The%20Search%20Block&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2021%2F07%2F13%2Fa-walk-around-the-search-block%2F&share=email)

 [  ](https://profiles.wordpress.org/critterverse/) [Channing Ritter](https://profiles.wordpress.org/critterverse/)
9:36 pm _on_ June 22, 2021     
Tags: [blocks ( 5 )](https://make.wordpress.org/design/tag/blocks/),
[design ( 217 )](https://make.wordpress.org/design/tag/design/), gutenberg   

# 󠀁[Side-by-Side Image Challenge](https://make.wordpress.org/design/2021/06/22/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/](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 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 by the repository owner. [https://github.com/](https://github.com/)
issue [#13202](https://github.com/WordPress/gutenberg/issues/13202) and perhaps 
elsewhere!_

[https://make.wordpress.org/design/files/2021/06/image-transform.mp4](https://make.wordpress.org/design/files/2021/06/image-transform.mp4)

### 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⌉⌊image-drag⌉[
 [⌊gallery-drag⌉](https://i0.wp.com/make.wordpress.org/design/files/2021/06/gallery-drag.jpg?ssl=1)

_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⌉⌊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⌉⌊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.

[https://make.wordpress.org/design/files/2021/06/gallery-add-replace.mp4](https://make.wordpress.org/design/files/2021/06/gallery-add-replace.mp4)

### 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](https://github.com/WordPress/gutenberg/issues/32819)
 * Unify drag and drop behavior across Image block and Gallery block [#32820](https://github.com/WordPress/gutenberg/issues/32820)

### Thoughts?

Please feel free to leave a comment below or drop a message in the [#design](https://make.wordpress.org/design/tag/design/)
channel on the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform
[https://slack.com/](https://slack.com/). The WordPress community has its own Slack
Channel at [https://make.wordpress.org/chat/](https://make.wordpress.org/chat/).
Looking forward to hearing your feedback, thanks for reading!

[#blocks](https://make.wordpress.org/design/tag/blocks/), [#design](https://make.wordpress.org/design/tag/design/),
[#gutenberg](https://make.wordpress.org/design/tag/gutenberg/)

### Share this:

 * [  Threads ](https://make.wordpress.org/design/2021/06/22/side-by-side-image-challenge/?share=threads)
 * [  Mastodon ](https://make.wordpress.org/design/2021/06/22/side-by-side-image-challenge/?share=mastodon)
 * [  Bluesky ](https://make.wordpress.org/design/2021/06/22/side-by-side-image-challenge/?share=bluesky)
 * [  Facebook ](https://make.wordpress.org/design/2021/06/22/side-by-side-image-challenge/?share=facebook)
 * [  X ](https://make.wordpress.org/design/2021/06/22/side-by-side-image-challenge/?share=x)
 * [  Reddit ](https://make.wordpress.org/design/2021/06/22/side-by-side-image-challenge/?share=reddit)
 * [  Email ](https://make.wordpress.org/design/tag/gutenberg/?subject=%5BShared%20Post%5D%20Side-by-Side%20Image%20Challenge&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2021%2F06%2F22%2Fside-by-side-image-challenge%2F&share=email)

 [  ](https://profiles.wordpress.org/javiarce/) [Javier Arce](https://profiles.wordpress.org/javiarce/)
2:18 pm _on_ June 15, 2021     
Tags: [blocks ( 5 )](https://make.wordpress.org/design/tag/blocks/),
[design ( 217 )](https://make.wordpress.org/design/tag/design/), gutenberg   

# 󠀁[A Walk Around… The Table Block](https://make.wordpress.org/design/2021/06/15/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](https://www.figma.com/file/Lac6TBUSZjbv3KyR26xiIi/Table-Block?node-id=281%3A1140&viewport=781%2C479%2C1.2193548679351807)
that contains all the designs covered below, along with some explorations and references.
I’ve also opened [a tracking issue on GitHub](https://github.com/WordPress/gutenberg/issues/32400)
to organize the work around this block.

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

 * [The placeholder state](https://make.wordpress.org/design/tag/gutenberg/?output_format=md#placeholder)
 * [Multi-cell selection](https://make.wordpress.org/design/tag/gutenberg/?output_format=md#multicell)
 * [The sidebar](https://make.wordpress.org/design/tag/gutenberg/?output_format=md#sidebar)
 * [The toolbar](https://make.wordpress.org/design/tag/gutenberg/?output_format=md#toolbar)
 * [Icon improvement](https://make.wordpress.org/design/tag/gutenberg/?output_format=md#icons)

### 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

 * Related issue: [#16355 Consider bringing in layout options to table block](https://github.com/WordPress/gutenberg/issues/16355)
 * [Placeholder page in Figma](https://www.figma.com/file/Lac6TBUSZjbv3KyR26xiIi/?node-id=367%3A513)

---

### 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](https://github.com/WordPress/gutenberg/issues/18768).

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](https://i0.wp.com/user-images.githubusercontent.com/4933/120459422-7b89b600-
c398-11eb-8fa3-a500ec558d5f.png?w=776&ssl=1)

**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](https://support.microsoft.com/en-us/office/merge-split-or-delete-table-cells-d58e60ea-8994-4356-b1ef-5437ea59fd9b).
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](https://i0.wp.com/user-images.githubusercontent.com/4933/120459438-7f1d3d00-
c398-11eb-96a3-2e2338c31b03.png?w=776&ssl=1)

##### Related

 * [Multi-cell page in Figma](https://www.figma.com/file/Lac6TBUSZjbv3KyR26xiIi/?node-id=375%3A2631)

---

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

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:

 * [Styles](https://make.wordpress.org/design/tag/gutenberg/?output_format=md#styles)
 * [Table Settings](https://make.wordpress.org/design/tag/gutenberg/?output_format=md#table)
 * [Border Settings](https://make.wordpress.org/design/tag/gutenberg/?output_format=md#border)
 * [Color Settings](https://make.wordpress.org/design/tag/gutenberg/?output_format=md#color)
 * [Typography Settings](https://make.wordpress.org/design/tag/gutenberg/?output_format=md#typography)

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

 * [Sidebar page in Figma](https://www.figma.com/file/Lac6TBUSZjbv3KyR26xiIi/?node-id=398%3A950)

---

### 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](https://github.com/WordPress/gutenberg/issues/32556).
And here’s the full set of icons (again, an initial exploration) that also include
the Split, Merge, and Remove cells icons.

[[

##### Related

 * [Icons page in Figma](https://www.figma.com/file/Lac6TBUSZjbv3KyR26xiIi/?node-id=398%3A3)
 * [Related issue for the icons](https://github.com/WordPress/gutenberg/issues/32556)

---

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

[#blocks](https://make.wordpress.org/design/tag/blocks/), [#design](https://make.wordpress.org/design/tag/design/),
[#gutenberg](https://make.wordpress.org/design/tag/gutenberg/)

### Share this:

 * [  Threads ](https://make.wordpress.org/design/2021/06/15/a-walk-around-the-table-block/?share=threads)
 * [  Mastodon ](https://make.wordpress.org/design/2021/06/15/a-walk-around-the-table-block/?share=mastodon)
 * [  Bluesky ](https://make.wordpress.org/design/2021/06/15/a-walk-around-the-table-block/?share=bluesky)
 * [  Facebook ](https://make.wordpress.org/design/2021/06/15/a-walk-around-the-table-block/?share=facebook)
 * [  X ](https://make.wordpress.org/design/2021/06/15/a-walk-around-the-table-block/?share=x)
 * [  Reddit ](https://make.wordpress.org/design/2021/06/15/a-walk-around-the-table-block/?share=reddit)
 * [  Email ](https://make.wordpress.org/design/tag/gutenberg/?subject=%5BShared%20Post%5D%20A%20Walk%20Around%E2%80%A6%20The%20Table%20Block&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2021%2F06%2F15%2Fa-walk-around-the-table-block%2F&share=email)

 [  ](https://profiles.wordpress.org/estelaris/) [Estela Rueda](https://profiles.wordpress.org/estelaris/)
1:03 pm _on_ January 16, 2020     
Tags: auto-update, [design ( 217 )](https://make.wordpress.org/design/tag/design/),
gutenberg, themereviews, volunteers   

# 󠀁[Design Meeting Notes for 15 January 2020](https://make.wordpress.org/design/2020/01/16/design-meeting-notes-for-15-january-2020/)󠁿

These are the weekly notes for the design meeting that happens on Wednesdays. You
can read the [full transcript on our Slack channel](https://wordpress.slack.com/archives/C02S78ZAL/p1579114834177700)
and [find the meeting’s agenda here](https://make.wordpress.org/design/2020/01/14/design-meeting-agenda-for-wednesday-15th-january/).

## Housekeeping

Last week there was a call for both notetakers and triage facilitators. The call
is still open, if you are interested, leave a comment after these notes or announce
yourself in the [#design Slack](https://wordpress.slack.com/archives/C02S78ZAL) 
channel.

## Updates

### 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/](https://wordpress.org/gutenberg/)󠁿 updates

[@mapk](https://profiles.wordpress.org/mapk/) let us know that the workaround [full-site editing is moving forward](https://make.wordpress.org/design/handbook/focuses/full-site-editing/).
Several issues have been identified and Gutenberg designers are reviewing UXUX UX
is an acronym for User Experience - the way the user uses the UI. Think ‘what they
are doing’ and less about how they do it. flows in relation to these issues. 

Other specific works happening around Gutenberg include usability testing on Columns
blocks, more work and design for 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. and global styles.

### Discussion

[@karmatosed](https://profiles.wordpress.org/karmatosed/) open discussion around
WP 5.4. And the [list created](https://docs.google.com/spreadsheets/d/1LP_Kzu5qnzJApnXJKQnWVYG5gbFxIT1U1efshejBt1c/edit#gid=0)
of items the [#design](https://make.wordpress.org/design/tag/design/) team would
like to include. The list is very optimistic and needs prioritizing.

We ask people to review the list and let us know in the comments what do you think
should be worked out for 5.4.

### Open Floor

We reviewed two tickets:[ #48850: Plugins Screen: introduce “Automatic updates” column/option](https://core.trac.wordpress.org/ticket/48850)
and [#49199: Introduce Automatic update opt-in setting for themes](https://core.trac.wordpress.org/ticket/49199).
Both tickets are part of the 9 priorities for 2019-2020.

We talked about options in text and toggles like “on/off”. See examples on the SlackSlack
Slack is a Collaborative Group Chat Platform [https://slack.com/](https://slack.com/).
The WordPress community has its own Slack Channel at [https://make.wordpress.org/chat/](https://make.wordpress.org/chat/)
chat. You can leave your thoughts on both tickets. [@kjellr](https://profiles.wordpress.org/kjellr/)
is back and retaking the topic of[ how themes work with Gutenberg](https://github.com/wordpress/theme-experiments).
Follow up his experiments on the mentioned repository. In the future, there will
be more updates in [#themereviews](https://make.wordpress.org/design/tag/themereviews/)
and make/themes if people want to follow this topic.

 [#meeting-notes](https://make.wordpress.org/design/tag/meeting-notes/)

[#auto-update](https://make.wordpress.org/design/tag/auto-update/), [#gutenberg](https://make.wordpress.org/design/tag/gutenberg/),
[#volunteers](https://make.wordpress.org/design/tag/volunteers/)

### Share this:

 * [  Threads ](https://make.wordpress.org/design/2020/01/16/design-meeting-notes-for-15-january-2020/?share=threads)
 * [  Mastodon ](https://make.wordpress.org/design/2020/01/16/design-meeting-notes-for-15-january-2020/?share=mastodon)
 * [  Bluesky ](https://make.wordpress.org/design/2020/01/16/design-meeting-notes-for-15-january-2020/?share=bluesky)
 * [  Facebook ](https://make.wordpress.org/design/2020/01/16/design-meeting-notes-for-15-january-2020/?share=facebook)
 * [  X ](https://make.wordpress.org/design/2020/01/16/design-meeting-notes-for-15-january-2020/?share=x)
 * [  Reddit ](https://make.wordpress.org/design/2020/01/16/design-meeting-notes-for-15-january-2020/?share=reddit)
 * [  Email ](https://make.wordpress.org/design/tag/gutenberg/?subject=%5BShared%20Post%5D%20Design%20Meeting%20Notes%20for%2015%20January%202020&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2020%2F01%2F16%2Fdesign-meeting-notes-for-15-january-2020%2F&share=email)

 [  ](https://profiles.wordpress.org/mapk/) [Mark Uraine](https://profiles.wordpress.org/mapk/)
12:55 pm _on_ April 24, 2019     
Tags: gutenberg, [widgets ( 15 )](https://make.wordpress.org/design/tag/widgets/)

# 󠀁[Widgets to Blocks UX Flow Proposal](https://make.wordpress.org/design/2019/04/24/widgets-to-blocks-ux-flow-proposal/)󠁿

As noted in an [earlier Gutenberg design update](https://make.wordpress.org/design/2019/04/12/gutenberg-phase-2-friday-design-update-14/),
I wanted to communicate a proposed UXUX UX is an acronym for User Experience - the
way the user uses the UI. Think ‘what they are doing’ and less about how they do
it. flow for rolling out the widgets-to-blocks interface changes. It’s a proposal
and still up for discussion along with further communication in the GithubGitHub
GitHub 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 by the repository owner. [https://github.com/](https://github.com/)
PR, [Add blocks in widget areas RFC](https://github.com/WordPress/gutenberg/pull/14812).

The Github issues include: [wp-admin interface](https://github.com/WordPress/gutenberg/issues/13204)
and [the Customizer](https://github.com/WordPress/gutenberg/issues/13205).

## Problem

Widgets are now blocks which require a new 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/](https://wordpress.org/gutenberg/)
interface to help people transition to this new paradigm. What is the best way to
introduce the new 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.-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. screens to users? How can we do this with the least amount of development
time, use existing patterns, and clearly communicate the gradual transition to blocks?

## Diverging to explore solutions

I began by segmenting the use cases:

 1. Users with existing widgets
 2. Users without widgets
 3. New users

My initial work included using different menu items in wp-admin and the 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. based on if the user
had existing widgets in their site. A user with existing widgets would need more
help transitioning to a new interface than a user without any prior widget paradigms.

[[

Segmentation notes

After further investigation of this, I opted out. If the menu items segmented, it
might cause more confusion because there would be some users with the new menu items
while another may have the old. Documentation and internet tutorials could get difficult
to follow at that point. I’d like to do this with the least amount of development
time, and confusion on the user’s end.

## Converging on a solution

#### wp-admin

To achieve a simple and non-confusing rollout, keeping the wp-admin menu items the
same might be the best option. The user would still see “Widgets” under the “Appearance”
menu item. When clicking that to view the widgets, the user would now get the new
Gutenberg **Widget Areas** screen.

[⌊A mockup of the new widget area screen in wp-admin.⌉⌊A mockup of the new widget
area screen in wp-admin.⌉[

The new Widget Area screen

We’d need to make sure the proper messaging or tips are displayed on this page to
help orient the user to the new layout.

[[

Tips in the Widget Areas screen

#### Customizer

This scenario would work similarly to the one above. When clicking into the Customizer,
the user would still see “Widgets” as an option if the Theme provides it. This shouldn’t
require any additional work on the part of the theme outside what is currently required.
Once clicked the user sorts through the blocks and can add 3rd party unconverted
widgets with the Legacy Widget block.

 * ![](https://i0.wp.com/make.wordpress.org/design/files/2019/04/gp2-customizer-
   01.png?fit=776%2C512&ssl=1)
 * ![](https://i2.wp.com/make.wordpress.org/design/files/2019/04/gp2-customizer-
   02.png?fit=776%2C512&ssl=1)
 * ![](https://i2.wp.com/make.wordpress.org/design/files/2019/04/gp2-customizer-
   03.png?fit=776%2C512&ssl=1)
 * ![](https://i0.wp.com/make.wordpress.org/design/files/2019/04/gp2-customizer-
   04.png?fit=776%2C512&ssl=1)

## Feedback

So that everyone’s aware, the discussions around why blocks are being introduced
in the widget screens is already explained in the Github issues, and in comments
on other sites. This is one of the 9 projects for 2019, and aims at helping everyone
slowly make the transition to the block paradigm.

The feedback I’m looking for here is:

 1. How do you feel about keeping the “Widgets” menu item through the transition even
    though these really aren’t widgets anymore?
 2. Does it make sense to call these “Widget Areas” through this transition phase?
 3. Is there anything I may have missed or not thought of?

[#gutenberg](https://make.wordpress.org/design/tag/gutenberg/), [#widgets](https://make.wordpress.org/design/tag/widgets/)

### Share this:

 * [  Threads ](https://make.wordpress.org/design/2019/04/24/widgets-to-blocks-ux-flow-proposal/?share=threads)
 * [  Mastodon ](https://make.wordpress.org/design/2019/04/24/widgets-to-blocks-ux-flow-proposal/?share=mastodon)
 * [  Bluesky ](https://make.wordpress.org/design/2019/04/24/widgets-to-blocks-ux-flow-proposal/?share=bluesky)
 * [  Facebook ](https://make.wordpress.org/design/2019/04/24/widgets-to-blocks-ux-flow-proposal/?share=facebook)
 * [  X ](https://make.wordpress.org/design/2019/04/24/widgets-to-blocks-ux-flow-proposal/?share=x)
 * [  Reddit ](https://make.wordpress.org/design/2019/04/24/widgets-to-blocks-ux-flow-proposal/?share=reddit)
 * [  Email ](https://make.wordpress.org/design/tag/gutenberg/?subject=%5BShared%20Post%5D%20Widgets%20to%20Blocks%20UX%20Flow%20Proposal&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2019%2F04%2F24%2Fwidgets-to-blocks-ux-flow-proposal%2F&share=email)

 [  ](https://profiles.wordpress.org/tinkerbelly/) [sarah semark](https://profiles.wordpress.org/tinkerbelly/)
10:06 pm _on_ March 14, 2019     
Tags: gutenberg, [research ( 19 )](https://make.wordpress.org/design/tag/research/)

# 󠀁[Ask me anything about: The site building study!](https://make.wordpress.org/design/2019/03/14/site-building-study-walkthrough/)󠁿

As you may remember, back in December a small group of curious-minded people embarked
on a research study with the aim to learn more about how end users think about site
building.

Since the results have been out for a little while now, [@jarahsames](https://profiles.wordpress.org/jarahsames/)
and I are going to be hosting a walkthrough of the results as well as a Q&A session,
live on video! Join us at **19:00 UTC, Monday, 18 March** to learn more and ask 
all your burning questions.

The session will cover:

 * The goals and aims of the study
 * How the research was planned and performed
 * Findings and insights
 * How you can get involved with future research efforts
 * Answers to all your burning questions!

The session will be recorded and shared here, so if you can’t make it live, you 
can always catch up later. It should take around an hour, depending on how many 
questions there are. If you can’t make the session or would like to pre-share your
question(s), please drop them in the comments below, and Sarah and I will be sure
to answer them during the Q&A portion.

The Zoom link for the session is [here](https://get10up.zoom.us/j/5038677145), and
will also be shared to [#research](https://wordpress.slack.com/messages/#research)
just prior to the session. See you Monday!

[#gutenberg](https://make.wordpress.org/design/tag/gutenberg/), [#research](https://make.wordpress.org/design/tag/research/)

### Share this:

 * [  Threads ](https://make.wordpress.org/design/2019/03/14/site-building-study-walkthrough/?share=threads)
 * [  Mastodon ](https://make.wordpress.org/design/2019/03/14/site-building-study-walkthrough/?share=mastodon)
 * [  Bluesky ](https://make.wordpress.org/design/2019/03/14/site-building-study-walkthrough/?share=bluesky)
 * [  Facebook ](https://make.wordpress.org/design/2019/03/14/site-building-study-walkthrough/?share=facebook)
 * [  X ](https://make.wordpress.org/design/2019/03/14/site-building-study-walkthrough/?share=x)
 * [  Reddit ](https://make.wordpress.org/design/2019/03/14/site-building-study-walkthrough/?share=reddit)
 * [  Email ](https://make.wordpress.org/design/tag/gutenberg/?subject=%5BShared%20Post%5D%20Ask%20me%20anything%20about%3A%20The%20site%20building%20study%21&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2019%2F03%2F14%2Fsite-building-study-walkthrough%2F&share=email)

 [  ](https://profiles.wordpress.org/tinkerbelly/) [sarah semark](https://profiles.wordpress.org/tinkerbelly/)
2:42 pm _on_ March 12, 2019     
Tags: gutenberg, [research ( 19 )](https://make.wordpress.org/design/tag/research/)

# 󠀁[Open invitation: Become a WordPress researcher!](https://make.wordpress.org/design/2019/03/12/become-a-wordpress-researcher/)󠁿

User research is key to ensuring that software meets users’ needs. With user research
efforts ramping up across the project, now is a great time to get involved!

You don’t need to be a designer (or a developer, or a tester!) to become a researcher.
All you need is a curious mind and a desire to help improve products for users.

## Upcoming studies

With the [site building study](https://make.wordpress.org/design/2019/01/31/sitebuilding-research-background/)
wrapped up, the next research efforts will be focussing on usability testing of 
new features. Coming up this month:

 * [testing the proposed navigation menu block design](https://paper.dropbox.com/doc/Navigation-menus-usability-study-plan--AZK09ogh6SmfIl6smwPUejwqAg-aPiY2F2OCsxic9SYuKZO9)
 * [testing responsive controls](https://make.wordpress.org/design/2019/03/08/testing-simple-responsive-controls-for-blocks/)(
   may be combined with another test)

## Get involved!

Anyone can become a researcher! You can start as a silent observer. This is the 
easiest way to get involved. You join the call as a silent, invisible participant
to see how it works, and you can share your observations with us in SlackSlack Slack
is a Collaborative Group Chat Platform [https://slack.com/](https://slack.com/).
The WordPress community has its own Slack Channel at [https://make.wordpress.org/chat/](https://make.wordpress.org/chat/)
after the session.

If you’re ready for the next step, you can help by taking notes or even running 
a session. You can also help by contributing your observations after the fact, watching
video recordings, or compiling results. There are guides and support available for
all of these tasks, as well as lots of friendly faces in the [#research channel in Slack](http://wordpress.slack.com/messages/research/)
to answer any questions you may have.

If you’d like to be involved in one of the research studies listed above, please
comment here or 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.” myself, @sarahmonster in Slack, and I’ll get you set
up and ready to go.

[#gutenberg](https://make.wordpress.org/design/tag/gutenberg/), [#research](https://make.wordpress.org/design/tag/research/)

### Share this:

 * [  Threads ](https://make.wordpress.org/design/2019/03/12/become-a-wordpress-researcher/?share=threads)
 * [  Mastodon ](https://make.wordpress.org/design/2019/03/12/become-a-wordpress-researcher/?share=mastodon)
 * [  Bluesky ](https://make.wordpress.org/design/2019/03/12/become-a-wordpress-researcher/?share=bluesky)
 * [  Facebook ](https://make.wordpress.org/design/2019/03/12/become-a-wordpress-researcher/?share=facebook)
 * [  X ](https://make.wordpress.org/design/2019/03/12/become-a-wordpress-researcher/?share=x)
 * [  Reddit ](https://make.wordpress.org/design/2019/03/12/become-a-wordpress-researcher/?share=reddit)
 * [  Email ](https://make.wordpress.org/design/tag/gutenberg/?subject=%5BShared%20Post%5D%20Open%20invitation%3A%20Become%20a%20WordPress%20researcher%21&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2019%2F03%2F12%2Fbecome-a-wordpress-researcher%2F&share=email)

# Post navigation

[← Older posts](https://make.wordpress.org/design/tag/gutenberg/page/2/?output_format=md)