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

  • The post outlining July’s focuses has gone up.
  • Editor features update post for WP 5.5.
  • This coming Monday we’ll releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. Gutenberg 8.5 in time for inclusion in WP 5.5.

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 releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software.. 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 releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. 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

Gutenberg Phase 2 Friday Design Update #50

Welcome to the 50th 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 update y’all!

With that, here’s a video of the full site editing experience from @matveb during the WPBlock Talk online event.

Seeing this come together is amazing! Watch Matias navigate through the experience and easily build a site and edit crucial content within the same interface.

It’s blocks all the way down.

Work in progress

Dashicons

Gutenberg now has its own icons package. This allows Gutenberg to use SVG icons when needed without requiring an entire sprite of icons to load as Dashicons does.

This being said, there’s an interesting post from Joen about the future of Dashicons. Spoiler, they are not going away and will remain a vital part of WordPress. They’re just getting another 30-something icons and then moving to a maintenance mode wherein they will no longer accept further requests.


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

Gutenberg Phase 2 Friday Design Update #49

In an effort to share the most recent design work 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/, I’m pinging designers to get their latest explorations and visuals to share them with anyone who reads these updates. I am hoping this provides more insight into the work as it is happening. If you have got something to add, please share it below!

The W

With the introduction of the fullscreen default mode in 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, @shaunandrews has been exploring interactions to help surface the admin menu.

https://github.com/WordPress/gutenberg/pull/21121

The Block Inserter

The Block Inserter has also undergone some redesigns. Rather than a popover as you’re familiar with, it’s now a slideout from the left side. It also now includes the Block Patterns which used to be on the other side of the interface. It’s looking amazing!

Issue: https://github.com/WordPress/gutenberg/issues/21080
PR: https://github.com/WordPress/gutenberg/pull/20951

Full site editing

The above is a lot already, but I wanted to remind everyone about the issues getting the most attention right now from designers.

Site navigation when full site editing
https://github.com/WordPress/gutenberg/issues/19204

Site Editing: home page indicator
https://github.com/WordPress/gutenberg/issues/20788

The “Update” flow for entities and templates should allow creating variations
https://github.com/WordPress/gutenberg/issues/20474

Incorporate “Add new page” flow into “Add template” flow
https://github.com/WordPress/gutenberg/issues/20473

Menu screen

One recent addition to the Gutenberg 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 is the introduction of the Navigation block in the Menu screen. This is a response to the outlined focus of Phase 2.


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

Gutenberg Phase 2 Friday Design Update #48

Howdy! If you’ve been following along, 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 releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. is pushed back a week and will be coming out next Wednesday, April 15th. In the interim, the design updates are as follows.

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

Next steps on the Inserter: https://github.com/WordPress/gutenberg/issues/21080

Recent designs for the Inserter are focused on figuring out how to add Block Patterns, and eventually Template-parts. Basically, if everything is a block, then having one unified way to add these blocks feels right.

Inserter animation

Full site editing

Take a look at what’s coming!

Multi-entity saving
This gif below gives some insight into the saving process of multiple elements: templates, template-parts, content – all from one view.

https://github.com/WordPress/gutenberg/issues/20421#issuecomment-611102784

Creating a template-part
A look at how creating a template-part might work in the context of full site editing.

https://github.com/WordPress/gutenberg/issues/21526#issue-597583360

Adding a template-part
Imagine opening the Inserter and adding a 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. to your page, or swapping out your current Header with another one.

https://github.com/WordPress/gutenberg/issues/21218#issuecomment-611752344

Follow along!

In an effort to surface what the team is working on week by week, we’re labeling issues on the project boards with [Priority] High in GithubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ and moving them to an “in progress” column for easy identification.

In Progress for Patterns

In Progress for FSE


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

Gutenberg Phase 2 Friday Design Update #47

Howdy and happy Friday, everyone! How is 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/ coming along you ask? Version 7.8 was just released on Wednesday and focused mostly on the 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. refinements. This releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. included:

  • Adds a current menu class to the 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..
  • Adds a block outline when interacting with the block toolbar.
  • Polish around some icons.
  • Polish around the Date Picker.
  • and more…

Full site editing

Full site editing has seen some more design work recently. The extra effort reexamining the 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. and having multiple people review design work is paying off! I’m super impressed with the recent work being done in light of other site building software I’ve been testing.

Placeholder blocks
Currently, templates need some way to show where certain blocks would exist, without necessarily showing actual content in them. Thus, we’ve been exploring placeholder blocks for many of the Post blocks like: Post Title, Post Author, Post Date, Post Comments, etc. These are being refined in this PR. https://github.com/WordPress/gutenberg/issues/19256#issuecomment-604765696

A few UX flows are ready for development. How exciting!

Block Patterns

Patterns took a bit of a pivot recently. Figuring out imagery to include in the software is difficult. Do we want pictures of mountains? Or maybe natural patterns? Cars? We’re not settled on this. So rather than holding up our patterns, we’re working to build a few really nicely designed text-based patterns for now. These patterns should be customizable by themes, and not include custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. that makes for a difficult integration into websites.

New icons

There was a recent PR submitted that include several new icons that conform to the new G2 UI and the new icons being implemented throughout the interface. https://github.com/WordPress/gutenberg/pull/21209


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