Jeff Ong 5:11 pm on October 7, 2020
Tags: Meeting Notes ( 37 )

Block-based Meeting Notes – Oct 7, 2020

Location: 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/. #themereview

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

An overview of FSE + block-based theming for 5.6 release was shared: https://make.wordpress.org/themes/2020/10/07/block-based-themes-and-wordpress-5-6/
Here’s a post about what’s new to Global Styles / theme.json: https://make.wordpress.org/themes/2020/10/01/gutenberg-9-1-new-json-structure-for-fse-theme-json-files/
Try this web-based GUI to generate a theme.json: https://gutenberg-theme.xyz
Twenty Twenty-One theme development is going strong! 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.-based version is set to begin after 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. 1 (Oct 20).

Discussion: which design tools should be enabled by default?

Gutenberg is building in a suite of design tools: https://github.com/WordPress/gutenberg/issues/20331. Some of these have already been implemented, and are available as theme options:

For these sorts of options, and upcoming ones like font weight, family, and expanded spacing controls, it would be helpful to get thoughts from theme authors about what should be enabled by default, versus having them be opt-in.

Full discussion begins here, but here are some highlights:

@aristath shared:

For 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. themes they should all be opt-out IMO… enabled by default and if defined as false in the theme.json file then disabled.
Note: I’m referring to FSE themes, not “classic” themes

Several folks agreed with this view, but @greenshady raised an important counterpoint:

Design features that may interfere with theme styles need to be opt-in by default… When it comes to theme-supported features in general, I tend to lean toward an opt-in approach. That gives themers the ability to explicitly make a choice.

Some of the discussion centered around whether add_theme_support should be used to control editor features:

I’m OK with going opt-out, but I don’t think we should misuse the theme supports system if it’s not genuinely meant to be a theme-supported feature.

@kjellr summarized the discussion saying:

If a theme has 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., it seems ok to have these be opt-out.
Otherwise, if the feature is expected to “just work” with themes without breaking something, it’s probably ok to enable it by default. Otherwise, they should be opt-in.
If these are “editor” features, and not something the theme needs to explicitly build in support for, then it may be confusing to use add_theme_support() for them.
If users move between block-based themes and non-block-based themes, it will likely be confusing for seemingly unrelated features to turn on and off.

A follow on discussion ensued about how to make the distinction between block-themes and classic themes, in the themes directory and wp-admin.

@kjellr opened a meta ticket that could house the discussion between themes, meta, and design teams: https://meta.trac.wordpress.org/ticket/5465

#meeting-notes

Kjell Reigstad 2:57 pm on October 7, 2020

Block-based Themes and WordPress 5.6

Hi everyone! I’ve seen a lot of folks asking questions about 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 fit into the upcoming 5.6 release. This post is an attempt to clarify the full picture of what’s expected to be in place for block-based theming at that time.

Full-site editing is still being iterated on in 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/ 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. It is expected to reach a testable state by the time WordPress 5.6 is released. You can follow the progress of the different Full-site editing sub projects on this overview issue.

It is important to note that the biggest part of the infrastructure is already in place. This means that the general structure and approach to block-based themes described below should be similar to the way it will work in the future. That said, the exact specifications are still considered experimental. Breaking changes are to be expected during this period.

The focus is now shifting towards polishing the user experience: using the site editor to create templates, using the query block, iterating on the post and site blocks, and implementing 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..

The main takeaway is that when 5.6 is released, the full-site editing feature set will look similar to where it is today, with added polish to the UI, and additional features in the Query block.

Existing Themes

All block-based theme features described below will be 100% opt-in when 5.6 is released. They will still only be available in the plugin, and only if users activate the Full Site Editing experiment.

There is currently no plan to deprecate the way themes are built today. Your existing themes will continue to work as they always have for the foreseeable future.

There have been suggestions that aim to help theme authors transition to block-based themes. This work is not expected to be completed by the time 5.6 is released. This topic could use additional feedback and discussion — check the bottom of this post for ways to get involved.

Block Templates

The coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. of a block-based theme are its block templates and block template parts. To date, block-based theme templates have been 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. files of block markup that map to templates from the standard WordPress template hierarchy. This will still be the case at the time of WordPress 5.6’s release, so any templates that you build today should still be valid then.

Much work has been done to ensure that theme authors will be able to emulate all applicable template tags in block based themes. As part of that effort, Gutenberg developers have been building a full suite of site-building blocks. At this point, most of the basics are in place: Site Title, Site Tagline, Post Title, Post Content, various metadata and Comments blocks, and more. A full list can be found in the Block Editor Handbook.

A Query block has been added, which handles much of the heavy lifting for a block based theme. That block is functional at this point, but is not feature complete. The plan is that most of these features will be added into the plugin by the time of the 5.6 release.

There is an open question around how dynamic content should be handled in block templates (For example: translatable elements, links to internal pages, and internal assets). There are two 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/ issues that discuss possible solutions to this problem:

The Gutenberg team does not expect a solution to be in place by the time of the 5.6 release. Block-based themes developed today will need to rely on static block content only until this is addressed.

Global Styles

In order to allow users to modify a theme’s global options in the full-site editor, block-based themes will need to include a global styles 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. file, named experimental-theme.json.

This file contains theme-specified settings for design “presets” like colors and default font sizes. These are equivalent to existing theme support options like editor-color-palette, editor-font-sizes, and editor-gradient-presets.

The file also allows themes to modify some of the default block settings. For example, it’s possible to determine whether or not the paragraph block should include its drop-cap feature, whether users should be able to use custom padding in the Cover block, or whether they’ll have the option to set a custom link color.

Gutenberg reads this file and translates it into user-editable settings in the block editor. All values entered here are compiled into CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. variables which can be leveraged by themes in both the editor and the front end.

The JSON file comes with a set of default values, and also lets theme authors provide their own custom theme-specific variables. These custom variables are not editable in the editor — they are intended to allow theme developers to define all of their theme’s style variables in a single place.

Learn More & Get Involved

The Block Editor Handbook includes documentation for block-based themes and for experimental-theme.json. It also features a tutorial for building a block-based theme. All of those resources are up to date as of this writing.

To keep up on block-based theme development, follow the Gutenberg + Themes updates, posted every Friday to make.wordpress.org/themes.

For questions, comments, or ideas, please refer to the Gutenberg issues linked above (or open a new one!). You’re also invited to attend the Block-based Themes meeting 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. This is held twice a month, on Wednesdays at 16:00 UTC.

The Core editor meeting is also useful to attend. That meeting occurs every Wednesday at 14:00 UTC, in the #core-editor slack channel.

The theme-experiments repository on GitHub contains a series of examples that use the features described above. These experiments are ongoing, and all are welcome to contribute.

Keep an eye out for progress on a block-based version of the Twenty Twenty-One theme. Work on this is slated to begin in earnest around the time of 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. 1.

Many thanks to @youknowriad for help pulling this post together.

+make.wordpress.org/core/

Kjell Reigstad 12:19 pm on October 6, 2020
Tags: Agenda ( 35 )

Block-based Themes Meeting Agenda for Oct 7, 2020

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

Time: Wednesday, October 7th 2020, 16:00 UTC
Channel: #themereview

Agenda

Welcome
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 related updates 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/
Discussion: Should any of the newer add_theme_support() customization tools (line height, custom units, custom spacing, link color) should be enabled by default?
Sharing / Q&A / Open Floor

If you have any topics or demos you’d like to see in this or future meetings, please share below. We also need a volunteer to take notes!

+make.wordpress.org/core/ #agenda

Kjell Reigstad 3:39 pm on October 2, 2020
Tags: gutenberg-themes-roundup ( 21 )

Gutenberg + Themes: Week of Sept 28, 2020

Hello! This is the 21st 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/.

If you’re working on 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, be sure to check out @aristath’s post detailing changes to theme.json file structure.

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

In progress / Discussions:

General:

Load only styles for existing blocks on the front end. 25742
Discussion: Should Gutenberg allow the use of a single-column columns block? 24711
Discussion: Is it okay to change the pullquote block’s default colors at this point? 25358

Block-based Themes

Template part has a double wrapper. 25610
Add content-width option to 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.. 25160
Discussing template handling on theme switches. 25071

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

Discussion about multi-column layouts in query blocks. 25462
Discuss how to allow the query block to inherit the global query. 25377
Consider not adding a self-link to the site-title block on the homepage. 25307
Allow using 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. as background for the Group block. 24660
The image from the site logo block can not be removed from 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.. 25173

Global Styles

Simplify the generation of CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. variables in theme.json. 25510
Discussion about having a variety of color palettes. 25613
Theme.json support for child themes. 25612
PR adding font family option to Global Styles. 24868
PR adding font-weight option to Global Styles. 24978

Merged:

General

Allow arbitrary widths for columns. 24711
Remove the right margin for the right-most list items in the latest posts block. 25688
Add a margin declaration for the gallery block’s figcaption. 25291

Overview Issues:

Full Site Editing Milestones. 24551
Template Tags in Full Site Editing. 22724
Tracking and consolidating style attributes for blocks. 22700
Missing query block functionality. 24934

General Resources:

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

#gutenberg-themes-roundup

Ari Stathopoulos 3:04 pm on October 1, 2020

Gutenberg 9.1: New JSON structure for FSE theme.json files

Following up from the post about the Gutenberg 9.1 release, there were a few changes that theme-authors experimenting with Full-Site-Editing (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. for short) themes should be aware of.

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/ 9.1 changed the structure of the theme.json files. This is a breaking change and previous Full Site Editing themes will need to make changes to these configuration files.

An example of how a theme.json file would look now can be seen below. Please note: For the time this file will have to be called experimental-theme.json since full-site editing is still experimental:

{
	"global": {
		"settings": {
			"custom": {
				"typo": {
					"rootSize": 16,
					"scale": 1.333
				}
			},
			"color": {
				"palette": [
					{
						"slug": "light",
						"color": "#f5f7f9"
					},
					{
						"slug": "dark",
						"color": "#000"
					}
				],
				"custom": false
			},
			"typography": {
				"fontSizes": [
					{
						"slug": "small",
						"size": "calc(var(--wp--preset--font-size--normal) / var(--wp--custom--typo--scale))"
					},
					{
						"slug": "normal",
						"size": "calc(var(--wp--custom--typo--root-size) * 1px)"
					},
					{
						"slug": "medium",
						"size": "calc(var(--wp--preset--font-size--normal) * var(--wp--custom--typo--scale))"
					},
					{
						"slug": "large",
						"size": "calc(var(--wp--preset--font-size--medium) * var(--wp--custom--typo--scale))"
					},
					{
						"slug": "huge",
						"size": "calc(var(--wp--preset--font-size--large) * var(--wp--custom--typo--scale))"
					}
				],
				"customFontSize": false,
				"customLineHeight": true
			}
		},
		"styles": {
			"color": {
				"background": "var(--wp--preset--color--light)",
				"text": "var(--wp--preset--color--dark)",
				"link": "var(--wp--preset--color--dark)"
			}
		}
	},
	"core/paragraph": {
		"styles": {
			"typography": {
				"fontSize": "var(--wp--preset--font-size--normal)",
				"lineHeight": "1.55"
			}
		}
	},
	"core/heading/h1": {
		"styles": {
			"typography": {
				"fontSize": "var(--wp--preset--font-size--huge)",
				"lineHeight": "1.4"
			}
		}
	},
	"core/heading/h2": {
		"styles": {
			"typography": {
				"fontSize": "var(--wp--preset--font-size--large)",
				"lineHeight": "1.4"
			}
		}
	},
	"core/heading/h3": {
		"styles": {
			"typography": {
				"fontSize": "var(--wp--preset--font-size--medium)",
				"lineHeight": "1.55"
			}
		}
	},
	"core/heading/h4": {
		"styles": {
			"typography": {
				"fontSize": "var(--wp--preset--font-size--normal)",
				"lineHeight": "1.55"
			}
		}
	},
	"core/heading/h5": {
		"styles": {
			"typography": {
				"fontSize": "var(--wp--preset--font-size--small)",
				"lineHeight": "1.8"
			}
		}
	},
	"core/heading/h6": {
		"styles": {
			"typography": {
				"fontSize": "var(--wp--preset--font-size--small)",
				"lineHeight": "1.8"
			}
		}
	}
}

The above configuration does the following:

Sets custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. variables for root font-size and a typography scale we are going to use.
Defines a color palette – in this case just 2 colors.
Builds the font-sizes using the typography scale we defined as custom properties. Though not required, in this example we show you how to implement a consistent typography scale with sizes for all headers. You can control the scale simply by changing the scale parameter in your 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 experiment with typography scales you can check out type-scale.com.
Adds defaults to 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. styles for paragraph and headers.

`presets` and `features` merged to `settings`

In previous versions the JSON file required a structure like this:

{
    "global": {
        "presets": {....},
        "features": {....},
        "styles": {....}
    }
}

In this latest release, presets and features were merged to settings:

{
    "global": {
        "settings": {....},
        "styles": {....}
    }
}

Custom CSS Variables

The custom section is new and allows themes to define any custom property they want. The names for custom CSS variables defined in the custom section are built with this convention:

--wp--custom--{$group}--{$property}

The group in the custom properties defined in the JSON example above is typo. It’s worth noting that while properties should be written in camelCase inside the JSON file (for example rootSize), when the css-variables are built these get converted to kebab-case (for example root-size).

With the above in mind, this:

{
    "global": {
        "settings": {
            "custom": {
                "typo": {
                    "rootSize": 16,
                    "scale": 1.333
                }
            }
        }
    }
}

will add the following CSS:

:root {
  --wp--custom--typo--root-size: 16;
  --wp--custom--typo--scale: 1.333;
}

Change in key/value pairs

Previous versions of the JSON files were using the value key to define values. For example to define a color we had to add this in our file:

{
    "slug": "light",
    "value: "#f5f7f9"
}

Now this would need to be written like this:

{
    "slug": "light",
    "color: "#f5f7f9"
}

Similarly, font-sizes will need to use size instead of value.

Thanks to @kafleg and @poena for reviewing this post

WordPress.org

Make WordPress Themes

Welcome to the Themes team!

Handbooks and review requirements

Coding standards and plugins

Code Packages

Communication

Block-based Meeting Notes – Oct 7, 2020

Discussion: which design tools should be enabled by default?

Block-based Themes and WordPress 5.6

Existing Themes

Block Templates

Global Styles

Learn More & Get Involved

Block-based Themes Meeting Agenda for Oct 7, 2020

Agenda

Gutenberg + Themes: Week of Sept 28, 2020

In progress / Discussions:

Merged:

Overview Issues:

General Resources:

Gutenberg 9.1: New JSON structure for FSE theme.json files

`presets` and `features` merged to `settings`

Custom CSS Variables

Change in key/value pairs

WordPress.org

Welcome to the Themes team!

Handbooks and review requirements

Coding standards and plugins

Code Packages

Communication

Discussion: which design tools should be enabled by default?

Existing Themes

Block Templates

Global Styles

Learn More & Get Involved

Agenda

In progress / Discussions:

Merged:

Overview Issues:

General Resources:

presets and features merged to settings

Custom CSS Variables

Change in key/value pairs

`presets` and `features` merged to `settings`