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:
  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:

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:

Adding sub-navigation in the revised Navigation block.

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.

The new flow for creating and previewing navigation menus.

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 releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software.. 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

Themes Team Meeting Notes for Tuesday 26 May 2020

Meeting was held based on the proposed agenda

Weekly updates

In the past seven days

  • 297 tickets were opened.
  • 299 tickets were closed.
  • 287 tickets were made live.
  • 12 new themes were made live
  • 275 theme updates were made live
  • 1 more was approved but are waiting to be made live
  • 12 tickets were not-approved
  • 0 tickets were closed-newer-version-uploaded

Thanks to all reviewers who did hard work and contribution last week.

Making an exception to the “no required 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” requirement for full site editing themes.

We had a long discussion on the alternative options to allowing FSE and arrived at the conclusion that Full site editing themes will be allowed to require 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/, while it is needed.

Block-based Themes Meeting Agenda for June 3, 2020

Below is the agenda for this week’s Block-based Themes meeting.

Time: Wednesday, June 3rd 2020, 16:00 UTC
Channel: #themereview

Agenda

  • Welcome
  • Status updates for 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 efforts 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/:
    • Features and fixes in Gutenberg v8.2
    • In-progress issues and PRs to keep an eye on
  • Notes on the new experimental-block.json changes + documentation, from @jffng
  • Update on Navigation Block efforts, from @karmatosed
  • Q&A / Open Floor

As always, if you have any topics or demos you’d like to see in future meetings, please share below.

We also need a volunteer to take notes!

+make.wordpress.org/core/ #agenda

Gutenberg + Themes: Week of May 25, 2020

Hi everyone! Here’s the third weekly roundup of theme-related discussions, fixes, and developments 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/. We’re going to try something new out this week, and highlight one issue/thread in particular. If you’re only going to look at one issue today, we recommend this one: 

  •  🌟 A new iteration of experimental-theme.json, complete with draft documentation. This merged PR establishes a new baseline for how 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 might end up defining styles in the context of Global Styles. 20290 (Documentation)

Since conversations are ongoing, some of the issues & PRs mentioned were also present in previous weeks. We’ve tried to put brand new ones at the top of each of the bulleted lists. 

Please weigh in on the tickets below — your voice and feedback are welcome! 

In progress / Discussions:

General

  • PR to remove form control resets and include in components instead. 22596
  • PR to adjust max-width setting for reusable blocks. 22632
  • PR for adding color controls to the list block. 21387
  • PR to change CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. specificity of default font-size rules. 22671
  • New issue to discuss themes setting font-styles rules for the heading block. 22641
  • Issue & PR to fix the appearance of Group block children in the editor. 22742 22746
  • Fixes for the issue where custom theme colors don’t work in the editor after Gutenberg 7.9.1. 22356
  • An attempt to remove some of the extra canvas padding in the editor. 22213
  • A conceptual discussion about removing all default margins for blocks in the editor. 22208
  • A discussion around standardizing classnames for blocks with backgrounds. 21439
  • A draft for converting pixel values to rem 22505
  • A PR to add darker colors to the blockquote + pullquote blocks when a theme opts into default block styles and dark mode. 22451

Block-based Themes

  • Tracking issue for Template Tags in Full Site Editing 22724 
  • Issue noting that the featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. block is available in the full-site editor, even when a theme does not declare support for featured images. 22313
  • Issue discussing the ability for theme files to be edited externally and synced with the full-site editor. 22469
  • Issue for creating a new Post Title block. 22621 
  • Syncing theme templates to the block editor in all contexts: 22469
  • Figuring out a way to handle inline dynamic content in theme templates. 21932
  • FSE blocks are missing classnames on the front end. 21903

Global Styles

  • Recap and next steps for Global Styles. 22296
  • Allowing themes to override global defaults & block settings using Global Styles. 22655 22657
  • Keep track of what block style attributes are supported. 22700
  • Take block data for Global Styles from block.json. 22698
  • Document how “features” works in theme.json. 22622 

Merged:

General

  • A new option for alignment in cover blocks. 21091
  • Sync up Group block markup in the editor with the front end. 21867
  • Use theme color for focus states. 22261
  • Fix for broken default color palettes. 22526
  • Fix for gradient presets that use named orientations and colors. 22239
  • Fix CSS bleed in button component. 22460
  • Fix visual bug in buttons that had a border radius of zero. 22293

Global Styles

  • A new iteration of experimental-theme.json, complete with draft documentation. 20290 (Documentation)

General Resources:


Thanks to @itsjusteileen, @jffng, and @joen for help pulling this post together. Please let us know if it was helpful in the comments!

#gutenberg-themes-roundup

Theme Review Team Meeting Agenda for May 26

Theme review team (TRT) conducts a meeting on the second and fourth Tuesday of the month. Along with the fixed agendas, we have open floor meeting at the end where you can ask or share anything related to themes.

We encourage all members and anyone interested to attend.

Channel: #themereview | Time: Tuesday, 26th May 2020, 17:00 UTC

Meeting Agenda

  1. Weekly Updates
  2. Making an exception to the “no required 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” requirement for full site editing themes.

The discussion about the meeting agenda can be held in the comments below. You are encouraged to propose topics.

Meetings usually last around 60 minutes. Attend and share your valuable feedback and suggestions.

#agenda#meeting#trt

#agenda, #meeting