Block-based Meeting Notes — July 7

Important: this meeting will now occur once a month, rather than bi-monthly. The calendar and make pages have been updated accordingly, thanks @kafleg @kjellr.

Meeting location #themereview make 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/..

Facilitated by @scruffian

Full transcript starting here: https://wordpress.slack.com/archives/C02RP4Y3K/p1625670047176500

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/ + Theme Updates

11.0.0 was released, here are some relevant highlights:

  • PR that allows left/right/centre alignments inside “use default layout” containers
  • PR that allows 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. templates to be filtered, it could be useful for more advanced theming
  • PR  customize Global Styles…
  • Color palettes in Global Styles discussion: https://github.com/WordPress/gutenberg/issues/29568
  • Trying a few approaches to internationalization within a “pattern block” or as a standalone block.

Open Floor

  • Please join or check out the Hallway Hangout at 5pm UTC today (July 7) focused on exploring the Thrive theme with theme.json test: https://make.wordpress.org/test/2021/06/24/call-for-testing-thrive-with-theme-json/
  • There is a patch to add support for the new block-templates functionality to twenty twenty-one: https://core.trac.wordpress.org/ticket/53564. It could use additional reviews.
  • There was consensus among the group that since TT1 Blocks has been mostly stable, bi-monthly meetings are not as useful. We will shift to monthly meetings instead!

Please comment below if you have anything to add or a question about the above 🙂 Thank you!

#block-based-meeting, #block-based-themes

Block-based Theme Meeting Notes — June 16, 2021

You can find the full meeting transcript on Slack (login required)

Meeting coordinator: @kjellr
Notes kept by @ashiquzzaman

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

  1. 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. no longer fails silently if you miss a comma: https://github.com/WordPress/gutenberg/pull/3240
  2. On FSEFSE Short for Full Site Editing, a project for the Gutenberg plugin and the editor where a full page layout is created using only blocks. adoption and “universal” themes, this issue has gained some additional traction this week: https://github.com/WordPress/gutenberg/pull/31235. This filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. would allow themes with 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. templates to opt in or out of using the full-site editor. This would allow universal themes to support the 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. while FSE is under development (even with 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 installed), and then gracefully enable the full-site editor when it’s ready.
  3. A call to attention on how block themes look in 5.8 (without the Gutenberg plugin active). Today, some block themes have implemented fallbacks or messages about requiring the plugin. But it varies per theme. From the discussion, it sounds like themes might get better built-in messaging like that for the 5.8 release. You can follow along with that or weigh in here: https://core.trac.wordpress.org/ticket/53410

Open Floor/ Q&A:

@scruffian highlighted the process on how authors are using Global Styles (especially – colors) as a mechanism for customizing their site. If you have a color that is used extensively in your site and then you want to change it, the only way to do so is to update that color in every place it’s used, which is quite laborious.

@onemaggie voiced the same concern with fonts, if a theme uses two fonts through multiple blocks, the user needs to go block by block if they want to change both

@aristath highlighted an update from GutenbergLand: theme.css files now also have the ability to be “lazy-loaded” when a block gets rendered, and there’s a PR to allow adding multiple stylesheets per-block. https://github.com/WordPress/gutenberg/pull/32510

#block-based-meeting, #block-based-themes

Block-based Meeting Notes — May 19, 2021

You can find the full meeting transcript on Slack (login required)

Meeting coordinator: @jffng
Notes kept by @ashiquzzaman
Time: Wednesday, 19 May 2021, 21:00 GMT+6
Channel: #themereview

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/ + Themes Updates:

The feature freeze for Gutenberg 10.7 is today

  • You can now remove the experimental prefix from your 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. files: https://github.com/WordPress/gutenberg/pull/29981

A fallback was added so it’s not going to break if you still have the experimental-theme.json file name.

  • There is on-going discussion and work about how the theme color palette and coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. color palette interact and are surfaced to users. Very interesting reading and progress: https://github.com/WordPress/gutenberg/pull/31669

In the Full Site Editing project, the template resolution logic was simplified for its inclusion in core: https://github.com/WordPress/gutenberg/pull/31604

TT1 Block Updates

@poena highlighted that the theme needs to be tested and packaged for release to .org . It becomes more difficult to do the call for testing in the FSEFSE Short for Full Site Editing, a project for the Gutenberg plugin and the editor where a full page layout is created using only blocks. outreach program without the updated theme on .org. She is also working on removing the theme blocker. All the TT1 reupload to the theme directory can be tracked here – https://github.com/WordPress/theme-experiments/issues/264

Discussion: continue the Universal Themes conversation from last week’s hangout:

The global styles 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. will not be in 5.8. As 5.8 is a minimum viable productMinimum Viable Product "A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia.
@Grogou how can users configure global styles? @poena replied – Per block, per template, with reusable blocks, and patterns. or, why not let the theme author offer the templates that work well with the theme.

There are some ongoing experiments to see what else can be done (via 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.) but nothing concrete that can’t already be done 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. http://php.net/manual/en/intro-whatis.php. template pages.

So a mix (using theme.json to build a ‘base style’ with php template pages to execute logic from configuration options set in a classic way via Customizer) is the straightest line for 5.8 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 where Global Styles UI can be leveraged in the FSE.

@aristath mentioned that a lot of concern regarding feature parity between the customizer and the site-editor.
The fact that something can be edited in the site-editor doesn’t necessarily mean that it should also be editable from the customizer.
It is possible to expose all global-styles options in the customizer and save them the way that global-styles get saved, the customizer has the architecture to support that. But someone has to write that bridge, and tbh it’s just not a priority or necessity for anyone at this stage.

@scruffian shared an example of how to change Global Styles in the Customizer: https://github.com/Automattic/themes/pull/3856

@aristath is working on a package that will allow legacy themes to use theme.json : https://github.com/WPTT/theme-json-parser, Being able to use the theme.json file is one step closer to block themes and should allow theme authors to remove a lot of CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site..

#block-based-meeting, #block-based-themes

Gutenberg + Themes: Week of Apr 2, 2021

Hello! This is the 43nd 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/.  

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

Issues / Discussions & PRs

  • FSEFSE Short for Full Site Editing, a project for the Gutenberg plugin and the editor where a full page layout is created using only blocks.: Add do_block_template_part function 30345
  • FSE: Add a theme slug to nested template parts 30413
  • FSE: Add basic CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. to post comments 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. 30382
  • FSE: Finalizing the name and menu item placement proposal 29630
  • FSE: Post hierarchical Terms Block: add icon 30348
  • Global Styles: Add CSS vars for root level settings 29714

Merged/Fixed

  • Global Styles: Add padding server-side block support 30332
  • Restore the inner div of group block for classic themes 30453
  • Revert column-gap spacing for custom sized buttons 30449
  • FSE: Add gutenberg_support_block_templates 30465
  • FSE: Use WordPress 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. for query block 30405
  • FSE: Load block-editor scripts & styles in the site-editor 30448
  • FSE: Fix template hierarchy for custom, user-generated templates 30464

General Resources:

Thanks to @kjellr for help pulling this post together. Please let us know if it was helpful in the comments! 

#gutenberg-themes-roundup

#block-based-themes

Block-based Theme Meeting Notes 17 June, 2020

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 Themes meeting (agenda, slack transcript). This meeting was 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 17, 2020, 12:00 PM EDT and was moderated by @jffng.

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/ Update

New Features

Gutenberg 8.3.0 was released last week with a host of new features. Specifically for themes, two new experimental theme supports are available:

  • Cover Blocks experimental padding control. To enable this, themes need to declare add_theme_support( 'experimental-custom-spacing' ) to see the new controls. Documentation is forthcoming for the Theme Developer Handbook.
  • Control link color in the paragraph, heading, group, columns, and media & text blocks. This can potentially override a theme’s hover state, so theme developers may need to find a workaround. This enhancement sets the stage 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. to eventually handle link styles. Themes can opt-in by declaring add_theme_support( 'experimental-link-color' ) and get the following additional controls:

Also merged in 8.3 a FSE bug fix solving an issue that occurred when the theme supplied an index.html but no front-page.html, causing the site editor to appear blank. It also creates an index.html so that if the theme has no fallback template.

@aristath’s related utility code in the Theme Experiments repo helps with the opposite side of this problem — installing an experimental FSEFSE Short for Full Site Editing, a project for the Gutenberg plugin and the editor where a full page layout is created using only blocks. theme that doesn’t have Gutenberg installed.

In progress theme-based Gutenberg PRs and Issues

On the global styles / theme.json front, there is an issue that asks if theme presets be expanded to line-height, padding, and margin. Subsequent PRs trying out implementing presets for line-height and padding include PR 23177 and PR 23176. There is discussion around whether these presets should be added via add_theme_support (as they were for link color) or if working via theme.json is all that is needed.

This led to a discussion of the proposed hierarchy/relationship between theme.json and add_theme_support. @richtabor foresees theme.json being the owner of the vast majority of these sorts of design defaults, with add_theme_support as the “in-between” for now, or the logic-based overrides of theme.json. @kjellr, @poena, @aristath disagreed saying experimental-themes.json provided more flexibility for a clean start in FSE so long as it supports the logic provided currently by add_theme_support. An issue is now open in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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/ for wider discussion.

Open Floor

@prtksxna asked if themes should register block styles for full-site blocks like site-title or post-title. @acosmin pointed out theme authors can register any block styles but can’t register blocks in themes at the present time.

@poena asked if other FSE users have encountered an issue where changes to html files are not reflected in the site editor and is looking for additional testing.

@jffng reminded the group the #fse-outreach-experiment channel is open in Slack. If you have questions or want to provide feedback, join there.

#meeting-notes, #gutenberg, #full-site-editing, #block-based-themes