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

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

Merged
merged 7 commits into from
Feb 21, 2022

Conversation

oandregal
Copy link
Member

Related thread #38039 (comment)

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 oandregal self-assigned this Feb 17, 2022
@oandregal oandregal added the Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json label Feb 17, 2022
@oandregal
Copy link
Member Author

cc a few folks for awareness/review.

@Mamaduka
Copy link
Member

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

@oandregal
Copy link
Member Author

oandregal commented Feb 17, 2022

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
Copy link
Member Author

oandregal commented Feb 17, 2022

🤔 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

Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

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

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:

image

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

image

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
Copy link
Contributor

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
Copy link
Member

ramonjd commented Feb 18, 2022

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:

Screen Shot 2022-02-18 at 1 06 06 pm

@andrewserong
Copy link
Contributor

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
Copy link
Member

ramonjd commented Feb 18, 2022

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.

Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

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

@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.
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 oandregal force-pushed the update/gs-server-code-to-use-plugin-classes branch from cf14180 to 9968127 Compare February 18, 2022 12:31
@oandregal
Copy link
Member Author

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

@oandregal oandregal mentioned this pull request Feb 18, 2022
7 tasks
Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

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

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!

@oandregal oandregal merged commit 74201da into trunk Feb 21, 2022
@oandregal oandregal deleted the update/gs-server-code-to-use-plugin-classes branch February 21, 2022 09:24
@github-actions 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 `get_stylesheet()` from WP_Theme_JSON_Gutenberg
ramonjd added a commit that referenced this pull request Feb 22, 2022
@cbravobernal 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 `get_stylesheet()` from WP_Theme_JSON_Gutenberg
ramonjd added a commit that referenced this pull request Mar 10, 2022
* 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.
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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants