Block-based Theme Meeting Notes 3 June, 2020

This post summarizes the latest biweekly 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 Themes 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/. channel on Wednesday, June 3, 2020, 16:00 UTC . See the agenda.

Key take-aways

1. 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.2.1 was released. It brings:
   • New internal alignment controls for the Cover block. These should work out of the box, but test them with your themes. 
   • You can now specify a category for block patterns.
   • The Query Block is live! Now is the time to start testing it and sharing your feedback.
   • Updates to the Navigation screen and to Global Styles (more below).
2. Navigation has seen big updates in 8.3.1. As well as an improved Navigation block, a new Navigation screen is ready to try. Learn how to test it and share feedback below.
3. The experimental-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. behind Global Styles has been reworked with global and per-block settings categorized as styles, presets, and features. Learn more below.
4. Carolina Nymark’s Full-site Editing course is in-progress. It’s a promising primer for those new to full site editing, and is free until January 2021. Tell your friends!

A reminder that you can stay up to date with the latest on Gutenberg and themes in the weekly Gutenberg roundups.

Features ready for your feedback

These pull requests and features in preview stages would benefit from your feedback:

• Share bug reports as new Gutenberg repo issues.
• Share snags, wishlist items, and ideas and suggestions in the #design or #core-editor WordPress Slack channels.

Template part previews

PR 22760 Addison Stavlo has an implementation of template part previews for the placeholder block.

A warning notice for block-based themes running without Gutenberg

PR 40 Ari Stathopoulos created a class for block-based themes to show a warning in the admin area if they’re active without 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.

Help to improve the Query Block

The Query Block is ready to test. It serves as a replacement for the WordPress post loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop., and will be essential to all block-based themes. Start testing it today.

Navigation needs your feedback

The navigation block and Navigation screen are ready for feedback.

General navigation block updates

The latest includes work to improve sub-navigation, along with some gentle iteration:

Navigation block in the WP admin menus screen

Now that the block is a little more stable, it’s time to bring this into the menu screen.

Visit Gutenberg → Experiments, tick “Enable Navigation screen”, then go to Gutenberg → Navigation (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.) to try it out.

Although it’s experimental, you can start to see the possibilities.

Known Navigation issues

One thing to keep in mind as you test is that this is still being worked on, so some things (in particular drag & drop) aren’t quite working yet.

And also, while testing, consider that the goal is the minimum needed for the initial release. So think about what must be there for release, and what could be added later.

Follow along and find all the associated issues for Navigation work on the Navigation Project board (labels: Feature navigation screen, Block navigation).

Global styles are revised and ready for your thoughts

There are now global and per-block settings. Settings include styles, presets, and features:

• Presets are transformed to predictably named CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. variables.
• Styles are how you define groups of CSS properties.
• Features give authors the ability to configure block settings. (e.g. should the drop cap be enabled?)

Check out this block style system and block templates pull request to learn how this looks in a theme.

See the block style attributes issue to learn what features block plugins can declare and how themes would override block styling defaults. This issue will be kept up to date as work continues.

Open discussion

Navigation screen feedback

For the navigation screen, it looks like there are 2 different ways of creating menus on that screen, yeah?

My personal preference would be to have 1 way to do something, as following/writing/maintaining documentation is much easier. But that’s just me. I personally really like the flow on the left over the flow on the right. It feels much clearer to me. Is reducing the number of ways to create a menu down from 2 to 1 a possibility? Or is having both flows pretty nailed-down at this point?

Phil Johnston

Discussion between Andrei Draganescu, Paal Joachim Romdahl, Kjell Reigstad, William Patton, Mel Choyce, and Themebeez seemed to reach a consensus that offering one path for menu creation instead of many was worth exploring.

William Patton noted that Tammie Lister had already acknowledged that there were too many ways to create menus, and that we needed to “untangle the yarn”.

Phil has since opened issue 22865, “Reduce the number of ways to create a menu”.

One thing I’m still not clear on is how this block will get to a point where it can support the wide variety of menus used in various themes — horizontal, vertical, hidden behind a hamburger icon, etc.

That’s not necessarily a V1 issue, but I’m still having trouble wrapping my head around a great solution.

Kjell Reigstad

William Patton offered a potential solution:

I have not looked at the code for a while however I think custom walkers for it could be good if that’s able to be supported. Developers can handle vertical vs horizontal vs center logo with their own walker choice.

And Themebeez another:

Yes the ability to toggle left side menu items container to make it 100% would work. It would look exactly like a traditional menu with few 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. changes.

Global styles feedback

Are the global style controls also in their panel now?

Carolina Nymark

The UI controls are not yet in. Current work status is unknown.

Am I right in assuming that blocks will be able to define which presets they want to utilize?

Is the idea that the user then overrides that preset by choosing another preset?

Phil Johnston

Jeff Ong replies that, “themes provide presets (transformed to CSS variables) that overwrite the block’s defaults”, and linked to PR 22698. He notes that:

My overall impression is that it feels a bit clumsy to declare styles this way, and hard to wrap the mind around the relationship between a feature and a preset without more support

Say I want to fully disable gradients via the theme.

In the global presets, do I have to supply an empty array to gradients , in addition to features, set gradients to disabled?

BUT if the system can guarantee that blocks are styled predictably and consistently, it’s a worthwhile tradeoff.

There is general consensus that the new global styles system will require more exploration and play to generate further feedback.

Proofread by @williampatton