Gutenberg Phase 2 Friday Design Update #60

Welcome to the weekly account 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/ design updates!

Recently merged

In progress

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. Editor & Legacy Widget 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.

The Widget screen and the process for adding widgets to the document is undergoing some design revisions. We’re hoping to get this completed soon and making these more visible in the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party.

Navigation Editor & Navigation block

The Navigation screen recently got some updates and a prototype. Take a look and provide some feedback!

Template parts

Working with template parts in full site editing is tricky. A user flow for this process is being explored.

Block Directory

The Block Directory just got an updated prototype exploring new 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.


Get involved

Now is a great time to get involved. While the work on this project is intense, it is always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details, contribute, and leave feedback.

Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update #59

Gutenberg 8.8 was released this week! While there was no “Features” categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. in the changelog, there were plenty of “Enhancements.” Two of the more visual enhancements included:

  • The mover icons were separated from 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. icon in the block toolbar.
  • The top toolbar button color was made to look clickable now.

In Progress

Two features aimed for the 5.6 release are the Widgets and Menu screens in wp-admin. These are undergoing a large amount of redesign right now to include blocks in intuitive ways while still supporting the wonderful features everyone is accustomed to within those screens.

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

The Widget Editor is being explored as a single widget area editor that offers a way for users to switch between areas.

Navigation block

The Navigation block is seeing some alternative display explorations like a full-screen overlay as an option.

Block Directory

Recent flows around the Block Directory are being redesigned.


Get involved

Now is a great time to get involved. While the work on this project is intense, it is always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details, contribute, and leave feedback.

Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update #58

Hey there! Gutenberg 8.6 released on July 22. Let’s review some of those features and then dive into some design 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/ 8.6

  • All the updated patterns are included.
  • The Cover blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. now supports focal point for video backgrounds.
  • Site icon is displayed in the topbar of the Editor in full-screen mode.
  • For anyone converting Classic editor content to Gutenberg blocks, the button on the Classic block has been surfaced higher for easy access.
  • etc.

Work in progress

Document display & settings

The recent iterations have explored moving the settings out of 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. and into another location.

https://github.com/WordPress/gutenberg/issues/20877

Multi-entity saving

While making changes to content, templates, and template parts, WordPress should communicate these changes and what is being saved to the user. Recent iterations explored how a user might save out their changes separately.

https://github.com/WordPress/gutenberg/issues/20474

Icons

The new icons in the Block Editor are wonderful. However, many additions are needed to support the work being done on full-site editing. Some recent explorations are focused on the Post blocks which will be used in creating templates.

https://github.com/WordPress/gutenberg/issues/24175

Browse mode

This particular issue aims to aide in browsing one’s site by clicking links on their page to jump to those pages and posts. Some prototypes have been posted recently and can use some feedback.

https://github.com/WordPress/gutenberg/issues/23328


Get involved

Now is a great time to get involved. While the work on this project is intense, it is always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details, contribute, and leave feedback.

Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update #57

Happy Friday. Gutenberg 8.5 was released last week on July 8 just in time to get into WordPress 5.5 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..

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

No more cloned element while dragging and dropping.

  • Easy upload from external sources.
  • Add an edit button to the gallery images.
  • Move zoom control to toolbar of 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..
  • Polish the document 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. controls.
  • Redesign the transform menu.
  • Redesign the canvas inserter. 

Work in progress

New sidebar menu to navigate within FSE. This new menu concept will make FSE navigation much easier. Pulling it into a new sidebar menu makes a lot of sense here.

Block patterns went through a few revisions in time for WP 5.5. These revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. help tighten up the overall design aesthetic. The Quote pattern below is a great example.

An Accordion block is being discussed. There’s been several requests to get a native form of this block into CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. Here’s how that might look.

List view design updates. The List View is another term for the Block Navigator. With all the upcoming features, a redesign is underway.


Get involved

Now is a great time to get involved. While the work on this project is intense, it is always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details, contribute, and leave feedback.

Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update #56

Happy Friday! Gutenberg 8.4 was recently released. Let’s take a look at some features that got into 8.4, and then we’ll dive into some new features currently being worked on.

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

  • Inline image editing
  • Multi-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. controls
  • Block Directory
  • Improved drag and drop
  • Visible movers next to block switcher

Work in progress

Some of the latest work being explored includes these below.

Longpress to trigger drag and drop

Creating a template from scratch

Navigation block placeholder

What’s coming


Get involved

Now is a great time to get involved. While the work on this project is intense, it is always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details, contribute, and leave feedback.

Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update #55

There have been a lot of efforts to tighten up 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/ in preparation for the WordPress 5.5 release. This post highlights a few.

Moving blocks

The movers are now more visible and aligned tightly with 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.’s icon. And there’s a PR that explores hiding the block’s content when being dragged.

Resize component

The resize component is getting a tooltip that communicates the pixel size when being resized.

Parent block selection

Selecting the parent block has been difficult for a long time. The current iteration to improve this experience includes a parent selector that appears in the block’s toolbar.

Superscript and Subscript

A few rich text additions include superscript and subscript to allow more editing capabilities.


Get involved

Now is a great time to get involved. While the work on this project is intense, it is always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details, contribute, and leave feedback.

Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update #54

Happy Friday! This post should catch you up with the latest design updates 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/ right now. Let’s jump in.

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.

Improvements to the Cover block are underway. These include padding controls, color controls, and background controls. If you haven’t noticed, a really cool position control was introduced recently.

Cover block

Rich image editing

The Image block is getting some additional image editing features.

Rich image editing

Site navigation

Navigating through the full-site editing experience is coming along. This can be tested in the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party right now.

Site navigation

Multi-entity saving

Also recently merged is a first pass at multi-entity saving. It allows the user to see a list of larger changes (especially global changes) that they did to their site before publishing them.


Ways to keep up with FSE

If you didn’t catch it, Anne posted recently about the various ways you can keep up with the work happening on full-site editing.


Get involved

Now is a great time to get involved. While the work on this project is intense, it is always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details, contribute, and leave feedback.

Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update #53

Howdy! Gutenberg 8.1 was released this past Wednesday. Some of the recent features include:

  • New patterns.
  • Ability to search patterns.
  • Ability to copy individual blocks.

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

The Query block is coming along in this PR. This is HUGE for pages that want to display posts with specific categories, tags, etc.

The Query Block allows users to create a search on the site and choose blocks to display content from the matching posts. This allows users to highlight specific content or areas of their sites.

Block Navigator

The Block Navigator is getting some features that allow moving blocks and other common actions.

Welcome Guide

The new Welcome Guide redesign is about to be merged.

What’s New modal

A “What’s new” 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. has been proposed for GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ recently. This will help convey any user-facing changes to users who don’t frequent the make blogs. I particularly love this idea!

Template parts

Continued efforts are explored through design work about how to add template parts, how to select existing template parts, etc.

Prototype


Get involved

Now is a great time to get involved. While the work on this project is intense, it is always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details, contribute, and leave feedback.

Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update #52

Happy Friday, everyone! I’ve got some interesting design updates today regarding full-site editing with 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/.

Page & Template Navigation

Initially, I had assumed the two dropdowns in the middle of the top toolbar were primarily for navigating between pages or templates. Turns out we are going to try another direction. Matias expressed an interest to utilize these two dropdowns as a way to modify the page or template – not necessarily for navigation. So something more like this:

So where does navigation live? I hear you asking. This can happen in two different places. First, the new “W” option that slides open the wp-admin which @shaunandrews has been exploring.

The second works similarly to 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.. Users would be able to use a modifier key + click on a navigation item in the page to jump to that page. Or there may be a way to click the menu item and click the link appended to it like in Google docs.

The Navigator

The Navigator is getting some revisions lately. We are adding movers to the blocks and will add the ability for dragging and dropping. There’s even some talk about adding an ellipses menu for more options. With these additions, the Navigator is becoming a significant way to work with your content. @michael-arestad explored the Navigator as a persistent slideout panel similarly to the outline panel in Google docs.

Template parts & Patterns

The relationship between template parts and patterns does leave one feeling a bit confused because they are so similar. One defining difference is that template parts are global and patterns are local, but what happens when we start talking about 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 patterns? Yesterday, @michael-arestad brought up that template parts are really just containers that hold patterns. This means we don’t need another tab in the Inserter for template parts! Basically, when editing a Header template part, the user will see Header patterns appear first in the Inserter.

This means that categories for Patterns will definitely include Headers, and Footers among other things.

Building templates

The last thing today was about building templates. Figuring out this 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 is important. Right now we are leaning toward a flow that includes some sort of step process that provides a skeleton for users to click and manipulate. Imagine creating a new template and seeing a screen that already lays out a Header, Content area, and Footer. Clicking on the Content area provides an option of a SidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. or not. This is still just being thought through… nothing solid yet.


Get involved

Now is a great time to get involved. While the work on this project is intense, it is always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details, contribute, and leave feedback.

Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update #51

Happy Friday! 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/ 8.0 just dropped this last Wednesday. This release included the new Inserter which now contains Patterns.

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

Probably one of the most significant updates to Gutenberg’s 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. in relation to the G2 changes is how the Inserter works now. Not only does it slide out from the left side instead of as a popover, but it also includes Patterns!

Navigation block

Looking at redesigning the Navigation block placeholder screen to allow for existing menus to be selected.

There’s also lots of exploration around the subnav.

Get involved

Now’s a great time to get involved. While the work on this project is intense, it’s always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details and contribute.

Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2