Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix theme supports for themes without theme.json #34955

Merged
merged 4 commits into from
Sep 20, 2021

Conversation

oandregal
Copy link
Member

@oandregal oandregal commented Sep 20, 2021

Fixes #34931
Fixes https://wordpress.org/support/topic/gutenberg-plugin-over-rides-custom-editor-color-palette/

#34334 introduced a bug by which settings provided via theme supports were not passed to the editor for themes without theme.json supports. This resulted in bugs like the palette of the theme not showing in the editor (it was shown the core palette instead) or that a plugin could not enable the custom-line-height support.

Tests

Activate TT1-blocks: a theme with theme.json support.

  • Visit the front end. Check the content of global-styles-inline-css is: both core & theme presets (classes and variables), the block gap styles (see), the theme styles.
  • Visit the editor and verify that the editor palette is the theme palette.

Activate the TwentyTwentyOne theme: a theme without theme.json but with experimental-link-color support.

  • Visit the front end. Check the content of global-styles-inline-css is both core & theme presets (classes and variables).
  • Visit the editor and verify that the editor palette is the theme palette.

Activate the TwentyTwenty theme: a theme without theme.json and no experimental-link-color support.

  • Visit the front end. Check the content of global-styles-inline-css is the core presets (classes & variables).
  • Visit the editor and verify that the editor palette is the theme palette.
  • Enable the custom-line-height and verify the control is shown in the editor. See full instructions or paste the following code in the global-styles.php file:
function test_modify_theme_support() {
	add_theme_support( 'custom-line-height' );
}
add_action( 'after_setup_theme', 'test_modify_theme_support', 11 );

@oandregal oandregal self-assigned this Sep 20, 2021
@oandregal oandregal added [Type] Bug An existing feature does not function as intended Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Sep 20, 2021
@oandregal
Copy link
Member Author

oandregal commented Sep 20, 2021

With this PR the stylesheet would contain the theme presets as well, which is not the expected behavior #34334

Themes without theme.json and no experimental-link-color support either: the stylesheet contains the core presets.

I'm looking at alternatives.

@oandregal
Copy link
Member Author

Pushed the necessary changes to make it work in all scenarios.

@oandregal oandregal requested a review from simison September 20, 2021 12:02
@oandregal oandregal changed the title Fix theme supports for themes without theme.json on legacy link color Fix theme supports for themes without theme.json Sep 20, 2021
* @return string Stylesheet.
*/
public function get_stylesheet( $type = 'all' ) {
public function get_stylesheet( $type = 'all', $origins = self::VALID_ORIGINS ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we adding more complexity to the caller by adding new options here instead of absorbing the logic inside the class? Maybe this is not the right level of abstraction I'm looking for. When I want the stylesheet of a theme, why should I need to specify a "type" (meaning do we have dedicated use case to retrieve two different stylesheets for the same theme) or "origins"

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

meaning do we have a dedicated use case to retrieve two different stylesheets for the same theme

Yeah, we have. The front enqueues a single stylesheet with all styles but the block editor needs two different stylesheets: one with the block styles that will be wrapped by .editor-styes-wrapper and the other with the CSS Custom Properties that won't be wrapped so they're available to the UI controls in the sidebar.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm troubled about the origins as well. However, this is the result of having added them to the existing format for each preset. We still have use cases when we only want one preset (stylesheet for themes without theme.json support, settings from the theme, etc).

I'll continue with the explorations at #34843 to create a higher-level API for consumers.

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How can we test this to avoid regressions?

@youknowriad
Copy link
Contributor

the block gap styles (see)

The block gap styles are not there but I think it's the right thing since now they are opt-in.

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is working as advertised (testing instructions).

A think some documentation or effort to clarify the backend APIs for themes would be great. #34843 is a good start in that aspect.

@chad1008
Copy link
Contributor

Being newer to the code base, I won't speak to the specifics of how the change is implemented, but it does test well, and fixes the issue raised with theme_support declarations on themes without a theme.json. 👍

Thanks @oandregal!

@fullofcaffeine fullofcaffeine merged commit e503f0f into trunk Sep 20, 2021
@fullofcaffeine fullofcaffeine deleted the fix/theme-supports branch September 20, 2021 15:08
@github-actions github-actions bot added this to the Gutenberg 11.6 milestone Sep 20, 2021
oandregal added a commit that referenced this pull request Sep 20, 2021
* Pull theme supports for all themes

* Enqueue only core presets for themes without theme.json

* Fix lint issue

* Fix lint issues
@oandregal
Copy link
Member Author

This has been cherry-picked to the release/11.5 branch.

@dennisheiden
Copy link

Thanks folks, this really saved us hours of overtime and helps planning for theme.json implementation in our theme.

@oandregal
Copy link
Member Author

How can we test this to avoid regressions?

I'm adding tests for this at #34998

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

add_theme_support() disabled for some editor options on without theme.json or experimental-link-color support
5 participants