Make WordPress Core

Opened 11 months ago

Closed 10 months ago

Last modified 10 months ago

#58462 closed defect (bug) (fixed)

Ignore unregistered style variations declared via `theme.json`

Reported by: oandregal's profile oandregal Owned by: oandregal's profile oandregal
Milestone: 6.3 Priority: normal
Severity: normal Version:
Component: General Keywords: has-patch has-unit-tests
Focuses: Cc:

Description

Unregistered block style variations declared via theme.json are considered to be valid. As a result,

  • The site editor does not load when one is found in a theme.json dataset.
  • The global styles stylesheet (front-end) contains a CSS rule that doesn't have a selector.

Proposed solution

Make sure style variations processed from theme.json are registered and ignore the ones that are not.

Change History (9)

#1 @oandregal
11 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 6.3
  • Owner set to oandregal
  • Status changed from new to assigned

This ticket was mentioned in PR #4554 on WordPress/wordpress-develop by @oandregal.


11 months ago
#2

  • Keywords has-patch has-unit-tests added; needs-patch removed

Trac ticket https://core.trac.wordpress.org/ticket/58462#comment:1
Backports https://github.com/WordPress/gutenberg/pull/49807

## What?

This PR makes sure unregistered block style variations are ignored before processing any data coming from theme.json.

## Why?

  • The current state prevents the site editor from loading when an unregistered style variation is found in a theme.json dataset.
  • It also enqueues CSS rules to the front-end that don't have a selector, so they are invalid.

## How?

By making sure the style variation is not added to the allowed list, unless it's registered for that particular block.

## Testing Instructions

  • Make sure your environment logs the errors to the screen by setting WP_DEBUG to true.
  • Add the following two variations to the theme.json of TwentyTwentyThree:

{{{json
{

"styles": {

"blocks": {

"core/quote": {

"variations": {

"plain": { "color": { "background": "indigo", "text": "gold" } },
"unregistered": { "color": { "background": "red", "text": "blue" } },

}

}

}

}

}
}}}

  • Create a post that contains a quote and style it with the plain variation.

The expected result is that:

  • The styles are applied to quote blocks with plain style variation in editors and front.
  • The site editor loads properly.
  • The front-end doesn't have a style rule such as { background-color: red; color: blue} (note the lack of CSS selector).
  • There is no error reported in class-wp-theme-json-gutenberg.php. In trunk, you'll see something like this:

https://i0.wp.com/user-images.githubusercontent.com/583546/231834523-6a5d31ab-8bbd-4a87-a632-b7bc1b7ea275.png

Verify that upon updating the colors of the style variation via the global styles sidebar (blocks > quote > style variation plain), the user-provided colors are rendered everywhere (front & editors).

@oandregal commented on PR #4554:


10 months ago
#3

@tellthemachines would you be able to test the site editor again and report back? It works fine for me.

#4 @oandregal
10 months ago

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

In 55912:

Ignore unregistered block style variations from theme.json.

This PR makes sure unregistered block style variations declared via theme.json are ignored. It fixes an issue by style variations don't work in the editor and CSS rules without a selector are output to the front-end.

Props isabel_brison.
Fixes #58462.

#6 @mukesh27
10 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Hi @oandregal, The @since is missing for new variable for the function and the indentation.

#8 @oandregal
10 months ago

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

In 55915:

Fix lint issues in WP_Theme_JSON::sanitize method.

Add @since tag and indent the parameter properly.

Props mukesh27.
Fixes #58462.

Note: See TracTickets for help on using tickets.