Discussion: Requirements for full site editing themes

As explorations of the minimum viable full site editing theme continues and the outreach program is starting, it is time to have a first discussion about requirements 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 in the theme directory.

Having basic requirements is one of the steps needed for us to be able to open up theme submissions:

  1. Requirements
  2. Update the Theme Check 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 allow full site editing themes
  3. Strengthen reviewer knowledge
  4. Activate 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/ on the theme previewer -Completed

These are discussions points and not a complete proposal.

You can compare the items below with the current requirements.

New code requirements:

Valid 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. markup: There must be no block validation errors on theme switch.

For this requirement, we need to research if it is possible to validate the block markup automatically.

Minimum required files:

  • style.css
  • readme.txt
  • functions.php
  • index.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. (placed inside the block-templates folder)
  • Temporary: Comments.php is required as without it, a 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. warning is shown.
  • 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. (or experimental-theme.json).

Requirements that may need to be adjusted:

Plugins: Themes are allowed to require Gutenberg as long as Gutenberg is needed to enable full site editing.

Options and Settings
Theme options may only be included as:

  • Theme_support
  • Global style settings
  • Block patterns
  • Block variations
  • Block styles

Items under this requirement that become irrelevant or confusing because blocks are used instead of PHP functions:

  • Use 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. for implementing theme options
  • Save options in a single array
  • Don’t use transients for things they shouldn’t be used for, like storing theme options
  • Use sane defaults and don’t write default setting values to the database

Presentation vs Functionality: Images that are not plain placeholder images and essential for the design are allowed.

Items under this requirement that become irrelevant or confusing because blocks are used instead of PHP functions:

  • The theme options should not be pseudo custom post types and save non-trivial user data
  • Non-design related functionality is not allowed

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Functionality and Features

Items under this requirement that become irrelevant or confusing because blocks are used instead of PHP functions:

If incorporated, features must support the WordPress functionality:  

  • Sidebars
  • Navigation Menus
  • Post Thumbnails
  • Custom Headers
  • Custom Backgrounds
  • Editor Style
  • Logo

Use template tags properly

Include comments.php (via comments_template())

Requirements that remain the same:

  • Licensing
  • AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) (temporary exception for skip to content link)
  • Readme file
  • Importing or downloading
  • Documentation
  • Naming
  • Screenshot
  • Image guidelines (exception for placeholder images that are essential for the design)
  • Stylesheets and Scripts
  • Privacy
  • Selling, credits, and links
  • Child themes

Requirements that it is not currently possible to follow:

Language / translation ready


Request for feedback

  • Which of the current requirements are relevant for full site editing themes?
  • What new full site editing specific requirements needs to be added?
  • How do we best present the requirements for full site editing themes?
    • On a separate page
    • In a separate section of the current requirements page
    • Other, describe your suggestion in the comment

#full-site-editing, #guidelines, #themes

Developing the Full Site Editing version of Twenty Twenty-One

Twenty Twenty-One Blocks is the name of the official Full Site Editing version of the upcoming default theme.

Twenty Twenty-One Blocks is an experimental theme created as an example to highlight what is possible with Full Site Editing.

The theme will need 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/ and the Full Site Editing experiment to be enabled. It will not be part of CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., but once complete it will be available in the theme directory.

During the theme creation process, the goal is also to help identify problems and limitations with Full Site Editing.

It is a unique opportunity to help shape and improve WordPress themes and the theme creation process.

The theme is part of the theme experiments repository on 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/.
The development of the theme started this week, and the target release date is December 2020.

Everyone is welcome to contribute to the theme by creating issues or pull requests to the theme experiments repository, and take part in the discussions.

Discussions and bug scrubs for Twenty Twenty-One Blocks will take place during 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 theme meetings, twice monthly at Wednesday @ 16:00 UTC 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. The next meeting is scheduled for Nov 4th.

#full-site-editing, #themes

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