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

Designer Hallway Hangout – 8/20/2020

Below is a recording from today’s Hallway Hangout with some awesome folks from the community, hosted by Joen Asmussen and Noah Shrader. This was a casual, remote meetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. where we shared ideas and demos of some current design efforts in flight.

The topics of discussion were around the new WordPress Design Library, and some of the color refresh work being done to 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. If you’re a contributor, or want to be a contributor to the design of WordPress, you might find the content helpful!

Links referenced in the video:

You will need permission to view/edit the new Figma WordPress Design Library. To request access, 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.” the #design channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. and someone will get you added in Figma.

#colors, #figma, #hallwayhangout

Design meeting agenda for 19 august 2020

This week’s meeting will be held at 18:00 UTC tomorrow in the #design channel of the WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. You can join the Slack channel by following the instructions in our handbook.

Here are the suggested topics:

  • Housekeeping
    • We still need volunteers for note-taking
    • Next Show-And-Tell is on August 26
  • 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/
    • HelpHub
    • WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ styleguide
  • Calls for help
  • Main topics
    • Let’s discuss a strategy for unifiying the design elements of Gutenberg, the rest of the admin, and the Site Health area, into one consistent design language.
  • Open floor

If there is anything you would like to see added to the agenda, please leave a comment also.

#meeting-agenda

Design meeting agenda for 5 august 2020

This week’s meeting will be held at 18:00 UTC tomorrow in the #design channel of the WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. You can join the Slack channel by following the instructions in our handbook.

Here are the suggested topics:

If there is anything you would like to see added to the agenda, please leave a comment also.

#meeting-agenda

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

Design meeting agenda 29 July 2020

This week’s meeting will be held at 18:00 UTC tomorrow in the #design channel of the WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. You can join the Slack channel by following the instructions in our handbook.

This week the design team will have a Show & Tell meeting via Zoom in lieu of the weekly meeting. If you have something you would like to share, showcase, or are working on and would like input from the design team, please add a comment below.

The Zoom link will be posted on the #design Slack channel on Wednesday at 18:00 UTC. For those unable to attend a Zoom call, a link to the video and summary will be posted as meeting notes.

#meeting-agenda

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