Block-based Theme Meeting Notes — July 15, 2020

Happened in #themereview, facilitated 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/ Roundup

Open Floor

  • Can we submit block-based themes to the themes directory yet?
    • The theme may not pass the themecheck due to experimental-theme.json but maybe an exception can be made?
    • May be good to allow Block-based themes in a little before FSE is merged in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. This is open to discussion.
  • There are some open PRs in theme-experiments that could use review:

#block-based-meeting

Block-based Themes Meeting Agenda for July 15, 2020

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

Time: Wednesday, July 15th 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.5
    • In-progress issues and PRs to keep an eye on
  • Sharing / Q&A / Open Floor

Rather than have a suggested discussion topic this week, we’re going to open the floor up for folks to share what block-based theme-related matters they’re working on and what they need help figuring out. If there are specific 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 or concerns you have that you’d like to see more attention on, bring those along too!

As always, if you have any topics or demos you’d like to see in future meetings, please share below.

#agenda +make.wordpress.org/core/

Proposal: allow themes to add a top-level admin-menu

The Themes Team would like to add the following requirements and we would also like to hear your opinions on this matter.

Themes should add a page under the Appearance menu using add_theme_page. If they need to have sub-pages (like for example documentation, FAQs, donation link etc), then they are allowed to use add_menu_page and add_submenu_page, provided they follow these requirements:
 * You are allowed to create only one (1) main page using `add_menu_page`. The recommended maximum number of sub-menu pages (`add_submenu_page`) is three (3).
 * The `$position` (priority) parameter must be `null` or only occupy the spot above the Appearance page (59). Check the code example on how to set the correct priority.
 * `add_submenu_page` must be used only on the page created using `add_menu_page`.
 * If you recommend plugins via TGMPA, you are required to use the `parent_slug` configuration option (this should be the top-level page's slug).
 * Core UI patterns must be used. You are not allowed to style the menu & submenu page links in any way. The admin color scheme must remain the same.
 * Use only monochromatic icons. It must account for the admin color scheme.
 * The title must be kept short and not include spam.
 * Child themes are allowed to add one extra sub-page or remove the parent's pages and add its own.

Before you start mentioning that this will be abused and it’s an open door for spam, please consider these:

  • You can only have one theme active, which means there can only be one top-level link and it will not occupy that much screen real estate.
  • Themes are not allowed to add a panel with information to 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. editor sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme./tools panel. Besides, 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. will be used less and less and theme authors need to have a visible way to list their theme’s documentation & information.

If you need more info, please check add_menu_page and add_submenu_page.

Added 15th July by @williampatton

For additional context about this idea we had a conversation in 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/. about this that started from this message and continued for quite some time – partially async.

https://wordpress.slack.com/archives/C02RP4Y3K/p1594225597110800 (slack account required)

Added July 18th by @acosmin

After a few discussions and taking @greenshady ‘s ideas into consideration, we’ve decided to:

  • remove the sub-pages limit, we recommend using a maximum of three (3)
  • the menu page priority can either be null or only occupy the position above the Appearance page. That’s 60 – 1, 59. This will also help users know where to look for this page. You can use this code to make sure your page will always be after Appearance:
function prefix_admin_menu() {
	$menus = $GLOBALS[ 'menu' ];
	$priority = array_filter( $menus, function( $item ) { 
		return 'themes.php' === $item[2];
	} );
	$priority = ! empty( $priority ) && 1 === count( $priority ) ? key( $priority ) - 1 : null;

	add_menu_page(
		__( 'Theme Name Title', 'textdomain' ),
		__( 'Theme Name', 'textdomain' ),

		'edit_theme_options',
		'theme-options.php',
		'',
		'dashicons-admin-customizer',
		$priority
	);
}
add_action( 'admin_menu', 'prefix_admin_menu' );

If you have suggestions on how to improve this code snippet, please do it in the comments.

X-post: Accessibility improvements to widgets outputting lists of links in 5.5

X-comment from +make.wordpress.org/core: Comment on Accessibility improvements to widgets outputting lists of links in 5.5

Gutenberg + Themes: Week of July 6, 2020

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

  • Custom gradients cannot be edited if there are no explicit stops specified. 23501
  • Gradient stops should be allowed to fully overlap in the gradient 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.. 23816 
  • Discussion around adding font unit options to the font size selector. 23323

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

  • Add a tutorial about how to build a block-based theme. 23732
  • Discussion about the support of shortcodes in block-based theme templates. 23626
  • Discussing the use of conditional logic in experimental-theme.json. 22324
  • Tracking issue for Template Tags in Full Site Editing. 22724 
  • Add Template lock to templates created in editor. 23532

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.

  • Add a site description block. 23788
  • 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. and CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. 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

Global Styles

  • 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
  • There is a new standing weekly meeting in #core slack specific to the Navigation block and screen. The first meeting was Wednesday July 8th. 

Merged:

General

  • Fixes for the issue where custom theme colors don’t work in the editor after Gutenberg 7.9.1. 22356
  • Fix centered legacy buttons. 23381
  • Add a default line height rule to the post title. 23656

Block-based Themes

  • Add a Site Logo Block. 18811
  • Expand and update Block-based Themes documentation page. 23750
  • Link to theme-experiments repo in block-based theme documentation. 23748
  • References to “Section” in the full-site editor were changed back to “Template Part” 23765

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