WordPress.org

Make WordPress Core

Opened 5 weeks ago

Closed 6 days ago

#53175 closed task (blessed) (fixed)

Block Editor: Include the theme.json infrastructure code and support

Reported by: youknowriad Owned by: youknowriad
Milestone: 5.8 Priority: normal
Severity: normal Version:
Component: Editor Keywords: has-patch has-unit-tests
Focuses: Cc:

Description

Now that Gutenberg has been updated with the final format for theme.json that is supposed to land in WordPress 5.8, we can start back porting the php changes and infrastructure code needed to support theme.json features in Core.

Also, doing this will allow us to do three things that were postponed during the precent package update in Core due to the lack of theme.json support.

  • Fully backport the layout block support.
  • Add a conditional check about the "classic.css" dependency in the style loader (only load it for themes without theme.json file).
  • Add the supportsLayout editor setting.

This ticket might potentially be blocked by the update to the Gutenberg 10.6 packages.

Change History (50)

This ticket was mentioned in Slack in #core by chaion07. View the logs.


4 weeks ago

#2 @youknowriad
3 weeks ago

In 50958:

General: Add _wp_array_set function.

This adds the _wp_array_set function, which is the counterpart of the existing _wp_array_get.
This utility is to be used by the Global Settings work.

Props nosolosw, jorgefilipecosta.
See #53175.

#3 @youknowriad
3 weeks ago

In 50959:

Block Editor: Add Global Settings support using theme.json file.

This is the first piece of landing the theme.json processing in WordPress core.
It allows themes to configure the different editor settings, allow cusomizations and define presets in theme.json file.

Props jorgefilipecosta, nosolosw.
See #53175.

This ticket was mentioned in PR #1262 on WordPress/wordpress-develop by nosolosw.


3 weeks ago

  • Keywords has-patch has-unit-tests added

Part of https://core.trac.wordpress.org/ticket/53175

This PR ports the first piece of landing the theme.json processing in WordPress core. It deals with merging the new settings (__experimentalFeatures) for all editors to access. The second piece would be to land the stylesheet engine.

## What this PR does

  • Adds a new setting __experimentalFeatures to the block editor settings. This data comes from theme.json (core and theme). See for the whole rationale about the theme.json file.
  • Adds a theme-i18n.json file to WordPress core, to be used by core, the plugin, and wp-cli for translations.
  • Adds the necessary code to make this work (namely the WP_Theme_JSON and WP_Theme_JSON_Resolver classes. These are used to pull settings from theme.json (core and theme). If you compare these with the ones that come with Gutenberg you'll note that this PR only includes the necessary bits for settings to work. Subsequent PRs will deal with adding styles, etc.

## How this can be extended

There are a few ways:

  • For major changes (change how core and theme data is merged, changes to the shape of theme.json file, etc): because we're adding new data under settings.__experimentalFeatures this can be filtered by the existing block editor filters.
  • To add more settings and its default values: two new filters are introduced.
    • theme_json_allowed_schema: to modify the schema used in sanitize the theme.json data.
    • theme_json_core_data: to set defaults for core data, including new settings added via the previous filter.

## Related work

Dependant PRs:

Follow-ups:

## How to test

A theme without theme.json:

  • Activate the TwentyTwentyOne theme (doesn't have a theme.json).
  • Go to the editor and make sure that there's a new key __experimentalFeatures available under settings in the core/block-editor store and that it contains the ALLOWED_SETTINGS (see)
  • A good litmus test is that the color palette is shown properly in the UI controls. Verify it's the same defined by the theme.

A theme with theme.json support (but doesn't provide specific color palette):

  • Install and activate the emptytheme.
  • Go to the editor and make sure that there's a new key __experimentalFeatures available under settings in the core/block-editor store and that it contains the ALLOWED_SETTINGS (see)
  • Check that the color palette shown is the one by core.

A theme with theme.json support (but does provide a color palette):

  • Install and activate the TT1-blocks theme.
  • Go to the editor and make sure that there's a new key __experimentalFeatures available under settings in the core/block-editor store and that it contains the ALLOWED_SETTINGS (see)
  • Check that the color palette shown is the one by the theme.

With the Gutenberg plugin active:

  • Use this branch https://github.com/WordPress/gutenberg/pull/32059
  • Go to the editor and make sure that there's a new key __experimentalFeatures available under settings in the core/block-editor store and that it contains the allowed settings passed from the plugin (see gutenberg_global_styles_theme_json_allowed_settings method).

This ticket was mentioned in PR #1263 on WordPress/wordpress-develop by nosolosw.


3 weeks ago

Part of https://core.trac.wordpress.org/ticket/53175

This pull request adds the _wp_array_get function, which is the counterpart of the existing _wp_array_set. This is to be used by https://github.com/WordPress/wordpress-develop/pull/1262

#6 @gziolo
3 weeks ago

In 50962:

Editor: Rename the unit test file for _wp_array_set function

Follow-up [50958].
See #53175.

This ticket was mentioned in PR #1287 on WordPress/wordpress-develop by nosolosw.


3 weeks ago

Part of https://core.trac.wordpress.org/ticket/53175
Follow-up to https://github.com/WordPress/wordpress-develop/pull/1262

## To do

  • port tests
  • prepare corresponding Gutenberg PR

## How to test

A theme without theme.json (use the TwentyTwentyOne theme):

  • Load the front. Look for a global-styles-inline-css embedded stylesheet. The expected result is that none should be found.
  • Load the post editor. Search for --wp--preset--color. The expected result is that none should be found.

A theme with theme.json support:

  • Instructions TBD.

#8 @prbot
3 weeks ago

nosolosw commented on PR #1287:

Need to update the unit tests and prepare the corresponding Gutenberg PR, but the code is ready for review.

#9 @SergeyBiryukov
3 weeks ago

In 50965:

General: Some documentation and test improvements for the _wp_array_set():

  • Update the function DocBlock per the documentation standards.
  • Move the unit tests to a more appropriate place.
  • Rename and reorder the tests for consistency with _wp_array_get() tests.

Follow-up to [50958], [50962], [50964].

See #53175, #52625.

#10 @SergeyBiryukov
3 weeks ago

In 50966:

Tests: Correct description for the Tests_Functions_wpArraySet class.

Follow-up to [50958], [50962], [50964], [50965].

See #53175, #52625.

#11 @SergeyBiryukov
3 weeks ago

In 50967:

Docs: Some documentation and test improvements for WP_Theme_JSON and WP_Theme_JSON_Resolver classes:

  • Add missing @since tags.
  • Update some DocBlocks per the documentation standards.
  • Rename test files and classes per the naming conventions.
  • Fix some code alignment issues reported by WPCS.

Follow-up to [50959], [50960].

See #52991, #53175.

#12 @prbot
3 weeks ago

nosolosw commented on PR #1262:

As per the follow-ups on this PR:

This ticket was mentioned in PR #1289 on WordPress/wordpress-develop by nosolosw.


3 weeks ago

Part of https://core.trac.wordpress.org/ticket/53175

Follow up to https://github.com/WordPress/wordpress-develop/pull/1262 which landed in https://github.com/WordPress/wordpress-develop/commit/ef3da3363a94a85b664c1ac945eb7e920c541c17

The issue happens because the npm packages in use were published a few hours ago, which include some changes to how we manage colors. This PR adds the corresponding PHP changes.

## How to test

This fixes this issue.

  • Use the latest wordpress-develop
  • Update and install the Gutenberg plugin from this branch.
  • Install and activate tt1 blocks from the theme install screen (installs from the theme's repo, not GitHub).
  • Observe the color palette contains only the theme palette.

#14 @prbot
3 weeks ago

nosolosw commented on PR #1289:

cc @jorgefilipecosta @youknowriad @ntsekouras

#15 @jorgefilipecosta
3 weeks ago

In 50973:

Block Editor: Add Global Styles support using theme.json file.

This is the second piece of landing the theme.json processing in WordPress core.
It includes the mechanism that outputs the CSS styles of a theme.json file.

Props nosolosw, youknowriad.
See #53175.

#18 @prbot
3 weeks ago

youknowriad commented on PR #1290:

This is looking good.

#19 @jorgefilipecosta
3 weeks ago

In 50977:

Block Editor: Update color merging algorithm.

The npm packages in use were published a few hours ago, which include some changes to how we manage colors. This commit adds the corresponding PHP changes.

Props nosolosw.
See #53175.

This ticket was mentioned in PR #1295 on WordPress/wordpress-develop by nosolosw.


3 weeks ago

Part of https://core.trac.wordpress.org/ticket/53175

This PR adds support for the layout hook. Blocks can declare via supports.__experimentalLayout and themes can use the theme.json to provide the values for contentSize and wideSize.

#22 @youknowriad
3 weeks ago

In 50991:

Block Editor: Add the layout block support.

The layout block allows containers to define the size of their inner blocks
and the allowed allignments.
It's only enabled for themes with theme.json files.

Props nosolosw.
See #53175.

#23 @youknowriad
3 weeks ago

In 50992:

Block Editor: Load the classic layout stylesheet conditionallty.

Historically, the block editor has been opinionated about the size of the canvas and the alignments.
Themes with theme.json will have to define a "layout" in their settings and the classic stylesheet won't be loaded anymore for this.

Props nosolosw.
See #53175.

#24 @prbot
3 weeks ago

youknowriad commented on PR #1290:

committed

#25 @prbot
3 weeks ago

youknowriad commented on PR #1295:

committed

#26 @youknowriad
3 weeks ago

  • Resolution set to fixed
  • Status changed from new to closed

This is now backported fully I think.

#27 follow-up: @noisysocks
3 weeks ago

Hey @youknowriad, [50992] breaks style concatenation. You can see this by navigating to /wp-admin/load-styles.php?load=wp-components. This should show the CSS for @wordpress/components but instead results in an empty page with status 500.

The reason is because the file which defines WP_Theme_JSON_Resolver won't be imported by load-styles.php (and load-scripts.php) which bypasses the usual WordPress initialisation steps (wp-settings.php).

You'll need to wrap the call to WP_Theme_JSON_Resolver with a class_exists or import class-wp-theme-json-resolver.php in load-styles.php and load-scripts.php.

This is what is causing the failures in https://github.com/WordPress/gutenberg/pull/32176/checks?check_run_id=2663937068.

#28 @noisysocks
3 weeks ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

#30 @youknowriad
3 weeks ago

  • Owner set to youknowriad
  • Resolution set to fixed
  • Status changed from reopened to closed

In 51001:

Block Editor: Load theme resolver class in script loader.

script-loader.php is sometimes called directly and in these situations, the Theme_JSON_Resolver class was not defined.

Props nosolosw, noisysocks.
Fixes #53175.

#32 @desrosj
3 weeks ago

In 51007:

Coding Standards: Apply some minor coding standards adjustments.

Follow up to [50977], [50987], and [50995].

See #41683, #53156, #53175.

#33 @SergeyBiryukov
3 weeks ago

In 51013:

Block Editor: Only load the WP_Theme_JSON_Resolver class once.

Since the class is now loaded via wp-includes/script-loader.php, which is required earlier in wp-settings.php, loading it again in wp-settings.php is redundant.

Follow-up to [50992], [51001].

See #53175.

#34 in reply to: ↑ 27 @SergeyBiryukov
3 weeks ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Replying to noisysocks:

[50992] breaks style concatenation. You can see this by navigating to /wp-admin/load-styles.php?load=wp-components. This should show the CSS for @wordpress/components but instead results in an empty page with status 500.

[51001] seems to work on PHP 7.4, but I still get a fatal error on PHP 8.0. While the get_stylesheet_directory() function is now available, it also calls get_theme_root(), which uses the WP_CONTENT_DIR constant, not defined at that point.

In PHP 7.4 it just silently works, causing a PHP warning hidden by error_reporting( 0 ) early in load-styles.php:

Warning: Use of undefined constant WP_CONTENT_DIR - assumed 'WP_CONTENT_DIR' (this will throw an Error in a future version of PHP)

In PHP 8.0 it is now a fatal error:

Fatal error: Uncaught Error: Undefined constant "WP_CONTENT_DIR"

See Backward Incompatible Changes in PHP 8.0:

Attempting to access unqualified constants which are undefined. Previously, unqualified constant accesses resulted in a warning and were interpreted as strings.

This ticket was mentioned in Slack in #core by sergey. View the logs.


3 weeks ago

#36 @TimothyBlynJacobs
3 weeks ago

I'm not sure loading these files manually is the right fix. The site won't be properly loaded during script-loader.php, even if include those theme API functions. So the output would be incorrect. I think we should try the class_exists check @noisysocks suggested.

#37 @jorgefilipecosta
3 weeks ago

In 51031:

Block Editor: Fix logic to enable custom colors, gradients, and font sizes.

The logic to enable or disabled colors, gradients, and font sizes missed a negative operator, so when things should be enabled they weren't and they should be disabled they were enabled. This commit fixes the logic.

Props ntsekouras.
See #53175.

#38 @SergeyBiryukov
2 weeks ago

#53304 was marked as a duplicate.

This ticket was mentioned in PR #1325 on WordPress/wordpress-develop by nosolosw.


2 weeks ago

Fixes https://core.trac.wordpress.org/ticket/53175#comment:34
Alternative to https://github.com/WordPress/wordpress-develop/pull/1324

Steps to reproduce:

  • Use a WordPress environment with PHP 8.
  • Activate the debug logs.
  • Set error_reporting( -1 ); at the head of load-styles.php.
  • Visit /wp-admin/load-styles.php?load=wp-components

The expected result is that the styles load and that there's no message in the log.

Previous to this change, the styles won't load and you'll see this error in the log Fatal error: Uncaught Error: Undefined constant "WP_CONTENT_DIR".

#40 follow-up: @nosolosw
2 weeks ago

I've prepared a fix for https://core.trac.wordpress.org/ticket/53175#comment:34 at https://github.com/WordPress/wordpress-develop/pull/1324

I've also prepared an alternative PR at https://github.com/WordPress/wordpress-develop/pull/1325 that moves the dependencies to the specific files that need them (wp-settings, load-styles) instead of loading them via script-loader.

This ticket was mentioned in PR #1326 on WordPress/wordpress-develop by nosolosw.


2 weeks ago

Part of https://core.trac.wordpress.org/ticket/53175

Global settings are filterable by hooking into the block_editor_settings filter. Global styles in the front end are filterable as well by getting the global-styles style handle (see). However, there's no mechanism to filter the global styles that come with the editor.

This PR allows third-party to identify the styles that are going to be sent to the editor, so they can filter them.

## How to test

  • Using WordPress 5.8, activate a theme with theme.json support.
    • Alternatively, using the TwentyTwentyOne theme, create a file named theme.json in the top-level folder of the theme and paste the following contents {"version": 1}.
  • Load the post editor. Open the devtools and in the inspector search for --wp--preset--color.
  • The expected result is that there are two occurrences: the wp-edit-post-js-after script and within a <style> tag in the body of the document, just before the editor-styles-wrapper node.

Now, install and activate the Gutenberg plugin from the plugin repository and do the same. What happens is that there will be three occurrences, the wp-edit-post-js-after embedded script and two identical <style> tags.

## Changes introduced

It adds a __experimentalGlobalStyles key to the styles so they can be inspected by others.

## Alternatives I've considered

I haven't seen many options to do something like this. A similar approach could be to add some sort of metadata in the first lines of the stylesheet instead. While feasible it seems more error-prone than this.

#42 in reply to: ↑ 40 @SergeyBiryukov
2 weeks ago

Replying to nosolosw:

I've also prepared an alternative PR at https://github.com/WordPress/wordpress-develop/pull/1325 that moves the dependencies to the specific files that need them (wp-settings, load-styles) instead of loading them via script-loader.

Thanks! That seems like a much better option to me than keeping adding things to wp-includes/script-loader.php that don't quite belong there :)

#43 @SergeyBiryukov
2 weeks ago

In 51056:

Block Editor: Load the WP_Theme_JSON_Resolver class in wp-admin/load-styles.php.

This ensures correct load order when style concatenation is used, e.g. when SCRIPT_DEBUG is off.

Additionally, make sure the WP_CONTENT_DIR constant is defined for use in get_theme_root() via get_stylesheet_directory().

Follow-up to [50992], [51001], [51013].

Props nosolosw.
See #53175.

#44 @prbot
2 weeks ago

SergeyBiryukov commented on PR #1324:

Thanks for the PR! Closing in favor of #1325, which seems like a better option :)

#46 @prbot
13 days ago

nosolosw commented on PR #1326:

Pushed a change to make this general and use a __unstableType that is added to styles that come from core (__unstableType = core), the theme (__unstableType = theme), or global styles (__unstableType = globalStyles).

#47 @youknowriad
7 days ago

In 51090:

Block Editor: Add a type property to allow Core to identify the source of the editor styles.

Gutenberg plugin need to override the editor styles provided by core selectively,
this added property allows it to do so without committing to a public API.

Props nosolosw, jorgefilipecosta.
See #53175.

#48 @prbot
7 days ago

youknowriad commented on PR #1326:

Committed

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


6 days ago

#50 @hellofromTonya
6 days ago

  • Resolution set to fixed
  • Status changed from reopened to closed

As 5.8 Beta 1 is today and it looks like all work is done on this ticket, closing it. If more work or followup is needed, please reopen.

Note: See TracTickets for help on using tickets.