Block-based Theme Meeting Notes 1 July, 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 @kjellr.

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

Gutenberg 8.4 has been released. This is the second-last 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. before WordPress 5.5. The full-site editor now includes an “export theme” option. This will download all of the block templates and template-parts that you’ve created or edited in the full-site editor. It’s really useful for creating block-based themes. This can eliminate a lot of copying and pasting when created block-based themes.

Export Tool in Gutenberg 8.4

Issues for Comments

The following issues are open for comments. If you’re looking to contribute to the next generation of theme creation, this is a good place to provide input.

  • Issue 23324 Conditional logic within 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.. This arose from a discussion in a previous meeting.
  • Issue 22759 HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. output of all the full-site editing blocks (this is particularly useful for themes to cut down on CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.).
  • Issue 23228 Feature requests for the site title block.

External Resources

During a recent online event in conjunction with the Gutenberg Times @kjellr, @poena and @itsjusteileen discussed Full Site editing and Block-based Themes and @kjellr gave a demo of creating a theme from within the editor.

Discussion: Documentation

This week’s discussion centered around improving existing documentation that is currently available at

The team agreed the existing documentation is adequate to allow users to get started testing and experimenting with Full Site Editing for Block-based themes.

Some improvements could be:

  • to add a list of available features and the development of the status of those items.
  • adding a getting started section to the experimental-theme.json docs
  • linking to the Experimental Theme repo.
  • providing more links or fleshing out of what is a block template.
  • it is not clear how to include a template part in a template or if it is not templates and parts that are saved will be used if you switch themes.
  • how to create and edit templates needs to reflect the new export theme button. At should also note that it is recommend that you can edit things directly in the full-site editor.
  • include when exporting what to do with the post IDs that are created
  • the wp-admin/edit.php?post_type=wp_template screens, there should also be a note that those don’t reflect any templates that are bundled with the actual theme.
  • the the “Theme Blocks” section could list currently available FSE blocks but this will need to be updated. Everyone working in #core-editor should be notified to make sure PRs involving blocks for block-based themes are tagged in the repo.
  • an FSE tutorial can be added.

Open Floor

The theme experiments repo is open for submissions. Four themes are looking for feedback on open PRs that try implementing the theme.json

Two new issues were opened for creating and using templates in FSE:

Gutenberg + Themes: Week of June 22, 2020

Hi everyone! Here’s the seventh 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/

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

  • Hexadecimal colors in gradient presets break the 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. preview. 23361
  • Discussion around adding font unit options to the font size selector. 23323
  • Button Block: Lighten the DOM in the editor. 23222
  • Limit display of block patterns if their included blocks are not available. 23275 
  • 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
  • Fixes for the issue where custom theme colors don’t work in the editor after Gutenberg 7.9.1. 22356
  • Add a way to 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. CSS classes for blocks using 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. 23223

Block-based Themes

  • Consider renaming experimental-theme.json documentation to “Global Styles” 23307
  • Discussing the use of conditional logic in experimental-theme.json 22324
  • Issue where HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. file updates are not being reflected in the full site editor. 23106
  • Tracking issue for Template Tags in Full Site Editing 22724 
  • Template Part: Improve insertion flow 22395

FSE Blocks

A set of blocks are available 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 to enable building templates in FSE.

  • HTML and CSS not present/inconsistent for FSE Blocks 22759
  • Suggestion for Site Title styling options. 23228
  • Group block is missing alignment options in the full-site editor. 23431
  • Add a Site Logo Block 18811

Global Styles

  • Discussion about presets for line-height, padding and margin. 23111
  • Recap and next steps for Global Styles. 22296
  • Tracking and consolidating style attributes for blocks. 22700 

Navigation

  • This board tracks Navigation Screen and Navigation Block issues that are important for the WordPress 5.5 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.. Project Overview

Merged:

General

  • Allow block attributes to be modified while multiple blocks are selected. 22470
  • Add image editing. 23349
  • Enable block directory. 23389
  • Add additional top margin to the post title. 23447
  • Fix a bug with color saturation in the color pick. 23272
  • Add hexadecimal support to gradient presets. 23363
  • Button Block: Fix for legacy button alignments. 23381
  • Button Block: Reduce unnecessary specificity. 23246
  • Removal of extra canvas padding in the editor. 22213

Block-based Themes

  • Clarification to wp-block-styles documentation. 23359

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

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

Gutenberg + Themes: Week of June 15, 2020

Hi everyone! Here’s the sixth 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/

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

  • Button 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.: Legacy buttons don’t appear center-aligned by default 23291
  • Button Block: Reduce unnecessary specificity. 23246
  • Button Block: Lighten the DOM in the editor. 23222
  • Limit display of block patterns if their included blocks are not available. 23275 
  • 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
  • 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 (almost ready to merge). 22213

Block-based Themes

  • Potential issue where HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. file updates are not updating in the full site editor.
  • Tracking issue for Template Tags in Full Site Editing 22724 
  • 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

A set of blocks are available 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 to enable building templates in FSE.

  • Latest Posts Block: HTML/CSS output not consistent. 22759
  • Latest Posts Block: Last element has incorrect right margin. 22911
  • FSE blocks are missing classnames on the front end. 21903
  • Site Title: Add support settings for colors, fonts, and line height. 23007

Global Styles

  • Discussion about presets for line-height, padding and margin. 23111
  • Recap and next steps for Global Styles. 22296
  • Tracking and consolidating style attributes for blocks. 22700 

Navigation

  • This board tracks Navigation Screen and Navigation Block issues that are important for the WordPress 5.5 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.. Project Overview

Merged:

General

  • New padding control to cover block. (21492, 23041)
  • New link color control to paragraph, heading, group, columns, and media-text blocks. (22722, 23025, 23049)

Block-based Themes

  • Fixing a bug when themes provided index.html but no front-page.html. 22954

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

Block-based Themes Meeting Agenda for June 17, 2020

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

Time: Wednesday, June 17, 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.3
    • In-progress issues and PRs to keep an eye on
  • Discussion
    • How should global styles support declaring fonts?
    • Calls for help / what are you working on?
  • Q&A / Open Floor

Please comment if you have any topics or demos you’d like to see covered in future meetings!

We also need a volunteer to take notes.

+make.wordpress.org/core/ #agenda