Gutenberg Phase 2 Friday Design Update #37

There’s a lot of talk about Full Site Editing right now 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/. Let’s take this opportunity to get caught up on the work that is happening. Initially, Phase 2 was about bringing the editor to various sections within the current WordPress interface (ie. Widgets screen, Menu screen, 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.), and it still is, but Full Site Editing kind of reverses this by bringing the rest of the site into a single unified editing experience. This is a big project that will take some time, thorough design thinking and collaboration.

Full Site Editing

The future of WordPress was explored in a post recently by Matias Ventura. Key concepts to help shift the editor interactions include:

  • 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. areas help organize blocks within a full page, but also differentiates global (navigation, site title, etc.) and local elements (the content).
  • Full-page editing will provide a full view of the site, or various editor views of each Block Area.
  • Entities & Sources explain the way in which global content can be edited, saved, and then displayed across all areas on the site.
An exploration into full site editing

The majority of the work can be found on 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 be the repository owner. https://github.com/ under the label, [Feature] Full Site Editing.

  • Editing other content in the block editor [13489]
  • Exploring the editor outside post_content [16281]
  • Adding a default template with post title and content blocks [16565]
  • Custom entity sources [17368]
  • Site block [16998]
  • Block Templates [17512]

Modes

Modes are ways in which people can change the context of their editing experience within Gutenberg. For example, if you’re editing content, the tools available to you in that mode may differ than when editing the layout.

With the introduction of a Navigation mode for keyboard users, and the existing Code Editor mode, it’s important to see how these work within a mode system as well.

An exploration into modes
  • Selecting vs. Editing blocks [17088]

Block Patterns

Block Patterns are layout patterns. These can be full-page layouts with blocks preset in desired well-designed layouts, or they can be partial layout patterns that can be added to various pages.

An exploration into block patterns
  • Block patterns [17335]
  • Suite of post blocks [15623]

Get invovled

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