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

Global Styles: Re-add third party blocks #44018

Merged
merged 5 commits into from
Sep 14, 2022
Merged

Conversation

scruffian
Copy link
Contributor

@scruffian scruffian commented Sep 9, 2022

What?

This outputs Global Styles CSS for third party blocks.

Why?

Third party blocks should be able to consume Global Styles settings as well as core blocks.

How?

Since we can't predict the name for CSS files used for third party blocks, we need to add the block CSS to the global-styles inline CSS.

Testing Instructions

  1. Add some third party blocks to a post (I'm using the Woo mini cart and Jetpack Tiled Gallery)
  2. Add this code to your theme.json:
			"jetpack/tiled-gallery": {
				"color": {
					"background": "yellow"
				}
			},
			"woocommerce/mini-cart": {
				"color": {
					"background": "purple"
				}
			}
  1. Or use the Global Styles interface to modify the settings for some third party blocks
  2. Confirm that the blocks look correct in the frontend and the editor.

Screenshots or screencast

Screenshot 2022-09-09 at 09 33 46

@WordPress/block-themers

@scruffian scruffian added the Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json label Sep 9, 2022
@scruffian scruffian self-assigned this Sep 9, 2022
@carolinan
Copy link
Contributor

carolinan commented Sep 9, 2022

On the front, I am seeing the following:

Warning: Undefined array key "name" in /wp-content/plugins/gutenberg/lib/compat/wordpress-6.1/get-global-styles-and-settings.php on line 48

I tested three different blocks from two different plugins and the styling worked on two of them. I don't believe that is a problem with this PR but possibly with how that third block is built.

@t-hamano
Copy link
Contributor

A rebase might be necessary because wp_add_global_styles_for_blocks has changed gutenberg_add_global_styles_for_blocks by #44052.

@ajlende ajlende force-pushed the add/third-party-blocks branch from d270ecc to ffa4c95 Compare September 13, 2022 20:31
@ajlende
Copy link
Contributor

ajlende commented Sep 13, 2022

@carolinan I think I fixed the warning you were getting. Give it another try.

@ajlende ajlende force-pushed the add/third-party-blocks branch from ffa4c95 to fd60049 Compare September 13, 2022 23:01
Copy link
Contributor

@draganescu draganescu left a comment

Choose a reason for hiding this comment

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

Tested this and works! The code LGTM

@scruffian scruffian merged commit 9a345b7 into trunk Sep 14, 2022
@scruffian scruffian deleted the add/third-party-blocks branch September 14, 2022 14:39
@github-actions github-actions bot added this to the Gutenberg 14.2 milestone Sep 14, 2022
@bph bph added Needs Dev Note Requires a developer note for a major WordPress release cycle and removed Needs Dev Note Requires a developer note for a major WordPress release cycle labels Sep 14, 2022
@bph
Copy link
Contributor

bph commented Sep 14, 2022

@priethor @michalczaplinski @ockham should this be backport to 14.1, so it makes it into WP 6.1?

@bph bph added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Sep 14, 2022
@ockham
Copy link
Contributor

ockham commented Sep 14, 2022

cc/ @c4rl0sbr4v0

@ockham
Copy link
Contributor

ockham commented Sep 14, 2022

should this be backport to 14.1, so it makes it into WP 6.1?

cc/ @oandregal for general Global Styles expertise and @sunyatasattva for Woo counseling 🙂

@scruffian
Copy link
Contributor Author

I think this needs to be in 6.1

cbravobernal pushed a commit that referenced this pull request Sep 14, 2022
* Global Styles: Add support for third party blocks

* Append style to the global styles stylesheet as we can't rely on third party blocks having predictable file names

* Update lib/compat/wordpress-6.1/get-global-styles-and-settings.php

Co-authored-by: Ari Stathopoulos <[email protected]>

* refactor for readability

* Fix undefined array key "name" warning

Co-authored-by: Ari Stathopoulos <[email protected]>
Co-authored-by: Alex Lende <[email protected]>
@cbravobernal
Copy link
Contributor

Cherry-picked for 14.1

@bph bph mentioned this pull request Sep 14, 2022
89 tasks
@ockham ockham added Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta Backport to Gutenberg Minor Release Pull request that needs to be backported to a Gutenberg minor release labels Sep 15, 2022
ockham pushed a commit that referenced this pull request Sep 19, 2022
* Global Styles: Add support for third party blocks

* Append style to the global styles stylesheet as we can't rely on third party blocks having predictable file names

* Update lib/compat/wordpress-6.1/get-global-styles-and-settings.php

Co-authored-by: Ari Stathopoulos <[email protected]>

* refactor for readability

* Fix undefined array key "name" warning

Co-authored-by: Ari Stathopoulos <[email protected]>
Co-authored-by: Alex Lende <[email protected]>
@ockham
Copy link
Contributor

ockham commented Sep 19, 2022

I just cherry-picked this PR to the wp/6.1 branch to get it included in the next release: 3b4341d

@ockham ockham removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Sep 19, 2022
@michalczaplinski michalczaplinski removed the Backport to Gutenberg Minor Release Pull request that needs to be backported to a Gutenberg minor release label Sep 26, 2022
@oandregal
Copy link
Member

Hey, did we backport this one? I don't see this changes in the current source at core https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/global-styles-and-settings.php#L210

@ockham
Copy link
Contributor

ockham commented Oct 26, 2022

Uhhh, looks like we missed this one, since it's PHP code that requires manual backporting 🤦‍♂️

We'll file a PR now. I hope we'll manage to get it into 6.1 🤞

cc/ @c4rl0sbr4v0

@ockham
Copy link
Contributor

ockham commented Oct 27, 2022

We'll file a PR now. I hope we'll manage to get it into 6.1 🤞

Handled in WordPress/wordpress-develop#3529, which was merged to Core trunk in r54703, and to Core's 6.1 branch in r54705.

This means the fix should make it into 6.1 😌

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 Needs Dev Note Requires a developer note for a major WordPress release cycle
Projects
No open projects
Development

Successfully merging this pull request may close these issues.