Gutenberg + Themes: Week of Sept 21, 2020

Hello! This is the 20th 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! 

In progress / Discussions:

General:

  • Discussion: Is it okay to change the pullquote 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.’s default colors at this point? 25358
  • Add a margin declaration to the Gallery block. 25291
  • Allow arbitrary widths for columns. 24711

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
  • Missing query block functionality. 24934
  • 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

  • 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
  • Font stack options discussion. 25032
  • Global styles affecting non-FSE themes. 24326

Merged:

General

  • Cover block: Update the box-sizing attribute. 25515
  • Spacer block: Allow 1px tall spacers. 25528

Global Styles

  • Allow theme-only 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. 25446

Overview Issues:

  • Full Site Editing Milestones. 24551
  • Template Tags in Full Site Editing. 22724 
  • Tracking and consolidating style attributes for blocks. 22700 

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

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.

Meeting notes Tuesday September 22nd 2020

Agenda: https://make.wordpress.org/themes/2020/09/21/themes-team-meeting-agenda-for-september-22/

Weekly updates:

In the last 7 days,

– 277 tickets were opened
– 275 tickets were closed:
– 260 tickets were made live.
– 22 new Themes were made live.
– 238 Theme updates were made live.
– 5 more were approved but are waiting to be made live.
– 15 tickets were not-approved.
– 0 tickets were closed-newer-version-uploaded.

Open floor

Pushing for showing theme readme files in the admin

@joyously Asked:

If WP 5.6 is supposed to have 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., could we get some pushing for showing theme readme files in the admin? This transition time is ripe for a way for themes to show more information to the user in a standard format.

The background to this problem is that the readme that is included in themes is not visible in the WordPress admin interface or in the theme directory (compared to plugins).

Related tracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. tickets:

https://core.trac.wordpress.org/ticket/36971

https://meta.trac.wordpress.org/ticket/215#comment:42

There was a two part discussion about if FSE, full site editing, would be ready in time for 5.6, and if more exposure on the problem with the readme not being visible would help get a patches created and merged.

-The status right now is that a design proposal needs to be submitted for how the readme can be presented in the WordPress admin.
We are looking for contributors who would be interested in working on this.

Will FSE impact requirements for themes that are not full site editing themes?

@martingarello Asked:

I would be interested in the next meeting to give an opinion on the impact of the changes in wordpress 5.6 on the adaptability and new requirements of old themes due to 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/ FSE, and what would be those points to consider for those who make themes without thinking about Gutenberg ESF yet.

-There was a short discussion and the conclusion was that FSE should not impact the requirements for the old themes.

#meeting-notes, #themes-team

X-post: Introducing Twenty Twenty One

X-comment from +make.wordpress.org/core: Comment on Introducing Twenty Twenty One

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

  1. Weekly Updates
  2. 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