Block-Based Themes Meeting Notes

This post summarizes the latest bi-weekly 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.-Based Theme meeting, held in the #themereview 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/., on Wednesday, 18 March, 2020, 16:00 UTC. These meetings coordinate collaboration in the development evolution of the 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/ project as related to development of Block-Based Themes geared to support Full Site Editing. Moderated by @jffng.

New Gutenberg 7.7 User 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.

It’s lighter and tighter. Feedback and iteration are on-going, but huge kudos to the design team for this evolution.

Block Patterns 

The first patterns are live in Gutenberg 7.7, and can be accessed in their own 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. panel:

Screen Shot 2020 03 16 at 11 56 35 AM

Lighter DOM 

This should make blocks easier to style moving forward because the markup in the editor mirrors the front-end  PR 19910 and PR 20658

Block Alignments

Supporting block alignment is a challenge for theme authors today. There is a proposal around re-thinking how block alignments are composed PR 20650  making it possible to write a theme that actually supports all the varieties of block alignments.

Full Site Editing UI

Review the following items and add comments:

PR 20478 Explores how users may select and preview templates and template parts.

Issue 20477 Shows how adjusting global styles could affect multiple page templates at a glance. 

Issue 20476 Mockups for seeing which page templates use a single template part

Block Based Themes Glossary

Theme authors need a glossary of terms as they begin creating block-based and Gutenberg enabled themes. A beginning list is here and should be crossed referenced with the existing glossary. An alignment of terms across teams can help in the understanding of theme development. Additionally, defining different types of themes like “Classic Theme”, “Block Enabled Theme” and “Block-Based Theme” would be a good differentiation to make for users when selecting themes from the repo. Currently, the only tag is “Block Editor Styles” which is the description / tag for themes that have support for the block editor. The Next step after building out the glossary will be to add a page to the Theme Handbook.

Open Floor

Dynamic URLs
Creating dynamic URLs within static templates Issues 20966 . It’s suggested that static templates are already being processed via PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. https://www.php.net/manual/en/preface.php. in order to combine the template and the template-parts. Local theme data could be parsed via an already established templating mechanism. 

Wanted Features
Part of the many folks hope for Gutenberg is that it becomes easier to create visually stunning, unique websites. For that to become a reality, the editor needs to provide more and better tools for design. For example:

  • finer grain controls on letter-spacing Issue 20796 
  • support for free rotating text and other blocks Issue 20926 

What features and tools would you want to see introduced? Which ones would you want to avoid? Why? There is a label created for this in Gutenberg called Design Tools and the team is encouraged to add their thoughts.

@kjellr mentions prototype tools for

  • Ability to adjust corner radius for buttons/images/etc.
  • Ability to set a site-wide grid, align items to it.
  • It would be cool to be able to draw simple shapes, and place blocks inside them — ovals, rectangles, etc. 

Additional items discussed include:

  • font control. 
  • background colors. 
  • standardization of controls across blocks. 
  • blocks that encourage more free-form layouts would be helpful. I don’t always want to design to the table-like grid that Gutenberg effectively imposes. It makes block-based themes look too similar.
  • a text and media block style where the text overlaps the image https://github.com/WordPress/gutenberg/issues/20193.
  • a “freeform” layout block that let users drag internal blocks within a fine grid would help create overlapping blocks too.
  • blocks inside table cells.
  • Global Styles should be extensibleExtensible This is the ability to add additional functionality to the code. Plugins extend the WordPress core software. by themes and plugins Issue 20449,
    Issue 19611 and PR 19611.

@aristath notes tickets for adding dozens of new options, border-radiuses, line-height, letter-spacing, word-spacing, font-family a bunch of others that don’t make sense for day-to-day use. Gutenberg is steering away from the “Decisions, not Options” philosophy and that is a really, really bad thing. More options is not the same as more freedom. @kjellr points out that doesn’t necessarily mean that the editor shouldn’t support them, but at the very least, they just need to be handled in a way that won’t get in the way of most users.

The next meeting will be 1 April, 2020 at 16:00 UTC.