Preliminary Road to 5.9

This is a quick overview of the main areas and features currently underway for 5.9 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/. Some are in more advanced stages than others, but together they paint a picture of what we are looking forwards to.

To dive deeper into concrete tasks and areas of work, this tracking issue is the best place to follow.

Blocks + intrinsic web design

Collection of various patterns displayed at mobile resolutions.
  • One of the biggest points of friction for pattern and theme builders are the lack of responsive tools available at a 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. level. This needs to be solved in a way that doesn’t disproportionally increase interface complexity.
  • The block model is a good case to apply some intrinsic design principles, since a block can occupy a place in many different layouts and containers, for which prescriptive media queries that don’t take context into account are inflexible.
  • Each block area should be intrinsically responsive allowing blocks to compose together, wrap, stack, and organize themselves to fit the different spaces and screens. For this to work well, container blocks need to absorb more layout controls. (Container queries might help expand this further in the future.)
  • Typography tools need to become more fluid and internally support algorithmic clamping. Whenever possible, patterns should just work and accommodate themselves.

Patterns

Mosaic galleries showing different design patterns.
  • With the initial rollout of the new directory there’s a growing need to expand the inserter integration to accommodate broader categories of patterns and the experience of browsing them.
  • There’s more work to be done within the setup flow of single and multi-block selections. This also includes improving the mechanisms for transforming to and from patterns, which are still nascent.
  • Creation flows with patterns also need expanding from template parts and blocks to pages and templates.

Navigation Menus

  • The navigation block and navigation screen projects have been underway for quite some time and are a main target for 5.9. With the principal tracking issue about to be completed, a large part of the remaining work is to improve the user experience, reduce complexity, and test as much as possible on themes.

An interface for theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML..

Global Styles panel showing the main area and the background color section.
  • 5.8 introduced the scaffolding necessary for themes to take the reins over how various aspects of blocks render and how the interface is controlled. The natural next step ahead is to develop the user interface that will allow users to interact with these style properties. This goes by the project name “global styles” and an updated design is currently in prototype stage.
  • It should be appreciated how important it is to leverage the global reach of CSSCSS Cascading Style Sheets. rules as we combine it with the power of blocks. The current structure deals with two large groups of design targets: blocks and elements. Elements represent things that can be styled globally and across blocks (such as “text”, “links”, “captions”, etc).

Design Tools: Colors, Typography, Spacing, Layout

Series of panels showing different configurations of the typography tools.
  • The effort to bring better and more consistent design tools continues to progress. These tools need to integrate smoothly with both the block APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. (through the “supports” mechanism) and theme.json. One of the main goals is consistent access to similar tools across blocks, including third-party ones.
  • Running parallel to this effort comes the work on the WordPress components system, refinements to color tools, interactivity, accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility), etc.

Formalize editing flows for block themes

Displays templates as small cards in a mosaic, connecting diagrams with the different flows.
  • A large percentage of the infrastructure and features needed to build block themes are established. The UXUX User experience and design needs the most attention, though, starting by mapping into a clearer information architecture all the possible flows that are to be supported (editing templates, parts, styles, pages, etc).
  • Continue to process and take into the design process all the feedback gathered from users and theme builders.
  • Begin defining transition flows from existing 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 to block areas when appropriate, and explore the various aspects of theme switching.
  • Finalize and commit all remaining blocks under the “theme” categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging..

#5-9, #gutenberg