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

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/

Ari Stathopoulos 10:53 am on September 25, 2020

New package to allow locally hosting webfonts

The current guidelines for themes prohibit the use of CDNs to load assets due to privacy/tracking concerns. The only exception to that rule is Google-Fonts.

Historically, google-fonts have been used as a way for themes to provide more appealing typography options. They are widely used and though there were always privacy & tracking concerns, we could not remove the exception until we had a viable alternative for theme-authors.

To that end, the Themes Team has built an easy-to-use implementation that themes can start using and you can get it on our GitHub repository.

The intention is to remove the Google-Fonts exception soon from our guidelines. When that happens, themes that use Google-Fonts will need to implement a way to locally host the fonts.

Our hope is to see a similar method implemented in WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., as there is a discussion on Trac. This is just the first step to what we hope will be a more unified approach.

Usage

A WordPress theme will typically enqueue assets using the wp_enqueue_style function:

function my_theme_enqueue_assets() {

	// Load the theme stylesheet.
	wp_enqueue_style(
		'my-theme',
		get_stylesheet_directory_uri() . '/style.css',
		array(),
		'1.0'
	);

	// Load the webfont.
	wp_enqueue_style(
		'literata',
		'https://fonts.googleapis.com/css2?family=Literata&display=swap',
		array(),
		'1.0'
	);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );

To locally host the webfonts, you will first need to download the wptt-webfont-loader.php file from the repository and copy it in your theme. Once you do that, the above code can be converted to this:

function my_theme_enqueue_assets() {

	// Include the file.
	require_once get_theme_file_path( 'inc/wptt-webfont-loader.php' );

	// Load the theme stylesheet.
	wp_enqueue_style(
		'my-theme',
		get_stylesheet_directory_uri() . '/style.css',
		array(),
		'1.0'
	);

	// Load the webfont.
	wp_add_inline_style(
		'my-theme',
		wptt_get_webfont_styles( 'https://fonts.googleapis.com/css2?family=Literata&display=swap' )
	);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );

Supporting IE

The wptt_get_webfont_styles will – by default – download .woff2 files. However, if you need to support IE you will need to use .woff files instead. To do that, you can pass woff as the 2nd argument in the wptt_get_webfont_styles function:

wptt_get_webfont_styles( 'https://fonts.googleapis.com/css2?family=Literata&display=swap', 'woff' );

Licensing

We believe that locally hosting webfonts will benefit the whole ecosystem by improving performance for visitors and increasing privacy online.

WordPress themes hosted in the official repository are required to be GPL2.0-compatible, but there is a wider community of WordPress themes out there, and they are not always GPL2.0-compatible.

We chose to license this script under the MIT license, which is GPL2.0-compatible. Every theme, 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, or other script can use the code without any restrictions as to the license they use.

Lance Willett 10:38 pm on September 18, 2012
Tags: default-theme ( 2 ), history, kubrick, twentytwelve ( 2 )

Why Default Themes Change Each Year

Since Twenty Twelve is coming very soon to the Extend directory, I wanted to share a bit of background on default themes and why they change from year to year.

In 2005 Kubrick launched as the new default theme, then didn’t change for five years. It became a punchline for the project. With Twenty Ten a new pattern started, with every single year having a new theme, naming it by the year. Twenty ___. This gives the theme an expiration date and it doesn’t have the pressure to be the end-all theme for the ages, because it’ll be replaced in the next year rather than in five years.

In the time between Kubrick and Twenty Ten the default theme efforts didn’t work too well as there were too many conflicting things. The efforts tried to please everyone: show off everything that’s possible in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., fully educational in every aspect, super nice-looking, and try to solve all the problems a theme can solve.

Big shoes to fill, as it turns out. Even if one theme can’t do it all, though, the default theme can still strive to be as simple as possible while still sticking to important principles. For example, default themes are coded to be fully internationalized and ready for translation. Even though this effort makes the code more complicated, it’s an important principle in an increasingly globalized world where many people don’t interact with WordPress in English.

The default theme should show off the latest and greatest features, be flexible enough to gracefully support child themes and encourage customization, work well for a blog or a website, and sport a design that is aesthetically pleasing and a bit different from the last design. Under the hood it should represent the best in coding practices and technical excellence. That said, the default theme isn’t trying to be an end-all-be-all theme. It won’t please everyone.

To get an idea of how Twenty Twelve is intended to differ from its predecessors, here’s the the core team’s post on which key features they want to see implemented: Core Team Meetup Recap: Default Theme “Twenty Twelve”. Note things like the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. image off by default, promoting a static front pageStatic Front Page A WordPress website can have a dynamic blog-like front page, or a “static front page” which is used to show customized content. Typically this is the first page you see when you visit a site url, like wordpress.org for example., and no 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. in the header. A new look by a different theme designer.

I think a lot of people are going to really like Twenty Twelve. And Twenty Thirteen. And Fourteen. And … you get the idea.

#default-theme, #history, #kubrick, #twentytwelve

kafleg 4:11 pm on September 21, 2020
Tags: Agenda ( 35 ), Meeting ( 43 ), Themes team ( 10 )

Themes Team Meeting Agenda for September 22

The themes team conducts a meeting on the second and fourth Tuesday of the month.

Along with the fixed agendas, we have an open floor 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, September 22nd 2020, 17:00 UTC

Meeting Agenda

Weekly Updates
Open floor

Weekly Updates

Current statistics can be found on: https://themes.trac.wordpress.org/ Themes TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. ticket graph: https://themes.trac.wordpress.org/ticketgraph

Please comment in the comment box below if you have anything to discuss in the meeting.

#agenda, #meeting, #themes-team

WordPress.org

Make WordPress Themes

Welcome to the Themes team!

Handbooks and review requirements

Coding standards and plugins

Code Packages

Communication

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

Block-based Themes and WordPress 5.6

Existing Themes

Block Templates

Global Styles

Learn More & Get Involved

New package to allow locally hosting webfonts

Usage

Supporting IE

Licensing

Why Default Themes Change Each Year

Themes Team Meeting Agenda for September 22

Meeting Agenda

Weekly Updates

WordPress.org

Welcome to the Themes team!

Handbooks and review requirements

Coding standards and plugins

Code Packages

Communication

presets and features merged to settings

Custom CSS Variables

Change in key/value pairs

Existing Themes

Block Templates

Global Styles

Learn More & Get Involved

Usage

Supporting IE

Licensing

Meeting Agenda

Weekly Updates

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