Update Global Styles code to continue adding settings & styles #38883

oandregal · 2022-02-17T12:13:57Z

This PR renames the wp_get_global_* functions to gutenberg_get_global_* and updates all the instances in which we use them in the plugin. The rationale for this change is that we're not done adding settings & styles to theme.json and we need the Gutenberg plugin to keep iterating while supporting WordPress 5.8 and WordPress 5.9.

Examples of PRs in which we may need these are #38039 #32499 #37770 #32502 #38319 Because there're so many of them and we don't know which PR will land first, I've gone ahead and prepared this PR to fast-track these changes so the PRs above can focus on feature work.

How to test

Automated tests should pass. Load a block-base theme and verify that it works as expected.

oandregal · 2022-02-17T12:15:37Z

cc a few folks for awareness/review.

Mamaduka · 2022-02-17T12:17:40Z

Should we move these functions out of the compat/wordpress-5.9 dir?

oandregal · 2022-02-17T12:22:26Z

Should we move these functions out of the compat/wordpress-5.9 dir?

Nah, we don't need to. This PR just renames things but does not make any behavioral change we need to port to 6.0 for these functions.

oandregal · 2022-02-17T12:27:10Z

🤔 Well, at the point the plugin minimum WordPress version is 5.9, the lib/compat/5.9 folder will be removed. However, at that point, we still want the plugin to use the plugin classes, hence, we'll need to move them to 6.0 then. We may as well move them now.

Pushed that change at 893e087

andrewserong

Thanks for opening this PR @oandregal! This is now allowing settings to be updated in the post editor, but it looks like updated settings in Gutenberg aren't being loaded in the site editor.

To test, I added a couple of changes from #38039:

Copied over the changes to lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php
In my theme.json file, added a settings.layout.position key set to value true.

In the post editor, I can call wp.data.select( 'core/block-editor' ).getSettings(); in the browser console and in the returned object under __experimentalFeatures I can see the position: true value:

However, in the site editor, that value isn't being returned:

I couldn't quite work out why, though, as I assumed the hook in block_editor_settings_all should have been allowing the GB settings to override those in core in edit-site-page.php where it calls get_block_editor_settings.

Is there something else we need to add in so that those settings are exposed in the site editor?

andrewserong · 2022-02-18T01:20:06Z

Should we move these functions out of the compat/wordpress-5.9 dir?

This is a really interesting idea / discussion. I've opened up a separate issue (#38900) for thinking a bit more about this 🙂

ramonjd · 2022-02-18T02:23:35Z

This is now allowing settings to be updated in the post editor, but it looks like updated settings in Gutenberg aren't being loaded in the site editor.

@andrewserong The Site Editor store settings appear to have the correct __experimentalFeatures but the results from useGlobalStylesOutput(); do not.

useGlobalStylesBaseConfig in global-styles-provider.js pulls its data via __experimentalGetCurrentThemeBaseGlobalStyles(), which fetches /wp/v2/global-styles/themes/${ currentTheme.stylesheet } (in packages/core-data/src/resolvers.js)

It's long and round about way of saying that you have to copy the public function get_theme_item from lib/compat/wordpress-5.9/class-wp-rest-global-styles-controller.php into the compat/6.0 equivalent. This is because get_theme_item refers to WP_Theme_JSON_Resolver_Gutenberg and, indirectly, your new properties :)

That should ensure the Site Editor knows about the settings. Here's how it looks for me:

…rties.

andrewserong · 2022-02-18T03:27:54Z

Nice one, thanks @ramonjd, that gets it working for me with both the block-editor and edit-site stores. E.g. calling the following now makes the position: true setting available, with that change applied:

wp.data.select( 'core/block-editor' ).getSettings();
wp.data.select( 'core/edit-site' ).getSettings();

@oandregal — can we add the get_theme_item, prepare_item_for_database, and prepare_item_for_response functions from the 5.9 rest controller for global styles to the 6.0 file? I wasn't sure if there are more functions we need than those three, but from a quick look they're the only ones that refer to Gutenberg-specific functions?

ramonjd · 2022-02-18T03:28:55Z

I've cherry picked these changes for a couple of PRs and things are working for me as expected:

For both the site and post editors, I can:

✅ See the new settings in __experimentalSettings and other global settings
✅ See the block and global classes and styles rendered in the page on the frontend
✅ Use new block supports in the editors, and see my changes reflected on the frontend.

All other functionality appears (at least to me) to work fine. Might need a more experienced eye to confirm this though.

🍺 Thank you again for confirming the approach on this one. Great to see that we were all on the same page to some extent.

aaronrobertshaw

@andrewserong and @ramonjd beat me to this.

Thanks for collecting all the required edits in this PR @oandregal 👍

I'd like to second @andrewserong's requests for additional functions to be copied to the global styles controller.

can we add the get_theme_item, prepare_item_for_database, and prepare_item_for_response functions from the 5.9 rest controller for global styles to the 6.0 file?

The get_theme_item and prepare_item_for_response functions were needed at a minimum for me to get PRs extending border support and adding height/width support back to working again in the Site Editor.

get_theme_item was needed to maintain the new settings
prepare_item_for_response fixes global styles "disappearing" after hitting save
prepare_item_for_database would pave the way for potential updates to the theme.json schema so I think makes sense to include now.

Thanks again everyone for working through these issues 🙇

Rename wp_get_global_settings to gutenberg_get_global_settings. In WordPress 5.9 the wp_* function is already defined, so we can't override them. It's calling the existing WP_Theme_JSON classes in WordPress core so it won't pick up the plugin modification. In the plugin, to make sure these changes work fine in 5.9 as well, we need to use the gutenberg_* function instead.

…e Gutenberg classes

While this PR does not do any behavioral change, we still need to call the plugin clasess when the minimum plugin version is 5.9 (at which point, the compat/5.9 is removed).

The endpoint landed in WordPress 5.9, so we need to make sure even in this environment the plugin will call the WP_Theme_JSON_* classes.

oandregal · 2022-02-18T12:32:29Z

Nice catch, @ramonjd ! Pushed that change as well 9968127

andrewserong

Excellent, thanks for following up @oandregal! This is working nicely for me now, manually applying my changes from #38039 to this changeset — the additional sticky position support (and settings) work within both the post and site editors, and custom global styles can still be saved and loaded from the site editor.

LGTM!

Removing `get_stylesheet()` from WP_Theme_JSON_Gutenberg

…rties.

Removing `get_stylesheet()` from WP_Theme_JSON_Gutenberg

* Layout doesn't take into account different writing modes, such as left-to-right, vertical and so on. With CSS logical properties, block and inline margins will apply to the appropriate side depending on the direction of the document flow. This change to the layout margins ensures that margins will adhere to the logic of current flow. For example, margin-block-start (instead of margin-top) will manifest itself as a top margin for `writing-mode: horizontal-tb;` but a right margin for `writing-mode: vertical-rl;`. * Fixing CSS error where I mean to use margin-inline-end for margin-right. Other minor formatting Taking a clumsy stab at compat files so we can load the global styles and settings. * Updated tests and removed var_dumpy * Removing reference to non-existent file after rebasing on top of #38883 Removing `get_stylesheet()` from WP_Theme_JSON_Gutenberg * Removing the CSS logical properties for styles that control horizontal page layout (left and right margins) so that any changes to the writing mode of blocks within wp-site-blocks and block containers still align themselves according to current horizontal rules.

oandregal requested review from spacedmonkey and TimothyBJacobs as code owners February 17, 2022 12:13

oandregal self-assigned this Feb 17, 2022

oandregal added the Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json label Feb 17, 2022

oandregal requested review from ramonjd, aaronrobertshaw, andrewserong, scruffian, ntsekouras, ajlende, youknowriad, jorgefilipecosta and a team February 17, 2022 12:14

oandregal mentioned this pull request Feb 17, 2022

[WIP] Try: Add sticky position support for the Group block #38039

Closed

8 tasks

oandregal mentioned this pull request Feb 17, 2022

Allow to extend the WP_Theme_JSON_Gutenberg class #38671

Merged

andrewserong reviewed Feb 18, 2022

View reviewed changes

andrewserong mentioned this pull request Feb 18, 2022

Consider renaming lib/compat PHP files and directories for evergreen overrides of core WordPress #38900

Open

ramonjd added a commit that referenced this pull request Feb 18, 2022

Pulling in changes from #38883 and adding the new block support prope…

1252ced

…rties.

This was referenced Feb 18, 2022

Layout: use CSS logical properties for margin top and bottom #38816

Merged

WIP Add/text orientation block support #38319

Closed

This was referenced Feb 18, 2022

Borders: Use new border control components in block support #37770

Merged

Block Support: Add height block support feature #32499

Closed

aaronrobertshaw mentioned this pull request Feb 18, 2022

Block Support: Add width block support feature #32502

Closed

8 tasks

aaronrobertshaw reviewed Feb 18, 2022

View reviewed changes

oandregal added 6 commits February 18, 2022 13:31

New styles (works in WordPress 5.9)

5c962cf

Fix for WordPress 5.9: gutenberg_get_global_stylesheet should call th…

10662a1

…e Gutenberg classes

Fix lint issues

c55e03a

Move functions to the compat/6.0 folder

3d5b881

While this PR does not do any behavioral change, we still need to call the plugin clasess when the minimum plugin version is 5.9 (at which point, the compat/5.9 is removed).

Use the plugin classes in the REST endpoint

9968127

The endpoint landed in WordPress 5.9, so we need to make sure even in this environment the plugin will call the WP_Theme_JSON_* classes.

oandregal force-pushed the update/gs-server-code-to-use-plugin-classes branch from cf14180 to 9968127 Compare February 18, 2022 12:31

Fix lint issues

b4eec10

oandregal mentioned this pull request Feb 18, 2022

Webfonts API #37140

Merged

7 tasks

andrewserong approved these changes Feb 21, 2022

View reviewed changes

oandregal merged commit 74201da into trunk Feb 21, 2022

oandregal deleted the update/gs-server-code-to-use-plugin-classes branch February 21, 2022 09:24

github-actions bot added this to the Gutenberg 12.7 milestone Feb 21, 2022

ramonjd added a commit that referenced this pull request Feb 22, 2022

Removing reference to non-existent file after rebasing on top of #38883

e242394

Removing `get_stylesheet()` from WP_Theme_JSON_Gutenberg

ramonjd added a commit that referenced this pull request Feb 22, 2022

Pulling in changes from #38883 and adding the new block support prope…

62f2e77

…rties.

cbravobernal added [Type] Code Quality Issues or PRs that relate to code quality and removed [Type] Code Quality Issues or PRs that relate to code quality labels Feb 27, 2022

ramonjd added a commit that referenced this pull request Mar 10, 2022

Removing reference to non-existent file after rebasing on top of #38883

c675f30

Removing `get_stylesheet()` from WP_Theme_JSON_Gutenberg

ramonjd mentioned this pull request Mar 21, 2022

Plugin: Document the project structure and conventions used in the lib folder for PHP code #39603

Merged

adamziel mentioned this pull request Apr 4, 2022

Plugin: Backport PHP changes for WordPress 6.0 release #39889

Closed

36 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Global Styles code to continue adding settings & styles #38883

Update Global Styles code to continue adding settings & styles #38883

oandregal commented Feb 17, 2022

oandregal commented Feb 17, 2022

Mamaduka commented Feb 17, 2022

oandregal commented Feb 17, 2022 •

edited

Loading

oandregal commented Feb 17, 2022 •

edited

Loading

andrewserong left a comment

andrewserong commented Feb 18, 2022

ramonjd commented Feb 18, 2022 •

edited

Loading

andrewserong commented Feb 18, 2022

ramonjd commented Feb 18, 2022

aaronrobertshaw left a comment

oandregal commented Feb 18, 2022

andrewserong left a comment

Update Global Styles code to continue adding settings & styles #38883

Update Global Styles code to continue adding settings & styles #38883

Conversation

oandregal commented Feb 17, 2022

How to test

oandregal commented Feb 17, 2022

Mamaduka commented Feb 17, 2022

oandregal commented Feb 17, 2022 • edited Loading

oandregal commented Feb 17, 2022 • edited Loading

andrewserong left a comment

Choose a reason for hiding this comment

andrewserong commented Feb 18, 2022

ramonjd commented Feb 18, 2022 • edited Loading

andrewserong commented Feb 18, 2022

ramonjd commented Feb 18, 2022

aaronrobertshaw left a comment

Choose a reason for hiding this comment

oandregal commented Feb 18, 2022

andrewserong left a comment

Choose a reason for hiding this comment

oandregal commented Feb 17, 2022 •

edited

Loading

oandregal commented Feb 17, 2022 •

edited

Loading

ramonjd commented Feb 18, 2022 •

edited

Loading