Skip to content

Block supports: allow overriding prettify options for enqueued CSS#44248

Merged
ramonjd merged 1 commit intotrunkfrom
update/enqueue-stored-styles-arguments
Sep 19, 2022
Merged

Block supports: allow overriding prettify options for enqueued CSS#44248
ramonjd merged 1 commit intotrunkfrom
update/enqueue-stored-styles-arguments

Conversation

@ramonjd
Copy link
Copy Markdown
Member

@ramonjd ramonjd commented Sep 19, 2022 •
edited
Loading

What?

Allowing gutenberg_enqueue_stored_styles() to pass down formatting options to gutenberg_style_engine_get_stylesheet_from_context().

Context: WordPress/wordpress-develop#3259 (comment)

Why?

So tests and other usages of gutenberg_enqueue_stored_styles() can bypass, or at least don't have to rely on, the global constant SCRIPT_DEBUG to determine whether the output is prettified.

How?

See "What?"

Testing Instructions

Run the tests!

npm run test:unit:php /var/www/html/wp-content/plugins/gutenberg/phpunit/script-loader.php

Smoke test a development site by creating a post with some block support styles, and checking the resulting styles in the frontend.

For example,

This example block code 
<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","right":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50"},"blockGap":"var:preset|spacing|60"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>test</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"},"blockGap":{"top":"var:preset|spacing|60","left":"var:preset|spacing|60"}}}} -->
<div class="wp-block-columns" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"},"blockGap":"var:preset|spacing|60"}}} -->
<div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:paragraph -->
<p>test</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Should generate the following CSS in development mode:

<style id='core-block-supports-inline-css'>
/**
 * Core styles: block-supports
 */
.wp-block-columns.wp-container-4 {
	flex-wrap: nowrap;
}
.wp-block-column.wp-container-5.wp-block-column.wp-container-5 > * + * {
	margin-block-start: var:preset|spacing|60;
	margin-block-end: 0;
}
.wp-block-columns.wp-container-8 {
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--60);
}
.wp-block-group.wp-container-9.wp-block-group.wp-container-9 > * + * {
	margin-block-start: var(--wp--preset--spacing--60);
	margin-block-end: 0;
}
.wp-block-column.wp-container-5 > *,
.wp-block-group.wp-container-9 > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

</style>

@ramonjd
Allowing gutenberg_enqueue_stored_styles() to pass down formatting op…
4a9c2ef 
…tions to gutenberg_style_engine_get_stylesheet_from_context().

This is so tests and other usages of gutenberg_enqueue_stored_styles() can bypass, or at least don't have to rely on, the global constant `SCRIPT_DEBUG` to determine whether the output is prettified.
@ramonjd ramonjd self-assigned this Sep 19, 2022
@ramonjd ramonjd added Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement. labels Sep 19, 2022
@ramonjd ramonjd mentioned this pull request Sep 19, 2022
Closed
andrewserong
andrewserong approved these changes Sep 19, 2022
View reviewed changes
Copy link
Copy Markdown
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 following up @ramonjd! I really like this approach, makes it easier to test, and also opens up the function to support more options in the future, too.

✅ Tested that by default prettify is still set to off
✅ Tested that by defining SCRIPT_DEBUG as true in wp-config.php the prettified output is switched on as before
✅ Manually updated tests to set prettify to true to confirm that it correctly fails the updated tests

LGTM! ✨

@ramonjd ramonjd merged commit 9b79fb1 into trunk Sep 19, 2022
@ramonjd ramonjd deleted the update/enqueue-stored-styles-arguments branch September 19, 2022 04:51
@github-actions github-actions bot added this to the Gutenberg 14.2 milestone Sep 19, 2022
This was referenced Sep 19, 2022
Closed
Merged
ockham pushed a commit that referenced this pull request Sep 19, 2022
@ramonjd @ockham
Allowing gutenberg_enqueue_stored_styles() to pass down formatting op…
964827e 
…tions to gutenberg_style_engine_get_stylesheet_from_context(). (#44248)

This is so tests and other usages of gutenberg_enqueue_stored_styles() can bypass, or at least don't have to rely on, the global constant `SCRIPT_DEBUG` to determine whether the output is prettified.
@ockham
Copy link
Copy Markdown
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: 964827e

markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Sep 19, 2022
@audrasjb
Editor: Backport block supports filter callback, registrations and te…
130e13e 
…sts to 6.1.

This changeset backports the following changes:

- Implement [WordPress/gutenberg#42880 gutenberg#42880]: Backport script loader: enqueue stored block supports styles
- Allow a way to bypass `SCRIPT_DEBUG` in tests. See [WordPress/wordpress-develop#3259 (comment) comment] and the related [WordPress/gutenberg#44248 Gutenberg pull request]

Props ramonopoly, gziolo, bernhard-reiter, audrasjb, costdev.
See #56467.

Built from https://develop.svn.wordpress.org/trunk@54214


git-svn-id: http://core.svn.wordpress.org/trunk@53773 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot pushed a commit to platformsh/wordpress-performance that referenced this pull request Sep 19, 2022
@audrasjb
Editor: Backport block supports filter callback, registrations and te…
b928c4a 
…sts to 6.1.

This changeset backports the following changes:

- Implement [WordPress/gutenberg#42880 gutenberg#42880]: Backport script loader: enqueue stored block supports styles
- Allow a way to bypass `SCRIPT_DEBUG` in tests. See [WordPress/wordpress-develop#3259 (comment) comment] and the related [WordPress/gutenberg#44248 Gutenberg pull request]

Props ramonopoly, gziolo, bernhard-reiter, audrasjb, costdev.
See #56467.

Built from https://develop.svn.wordpress.org/trunk@54214


git-svn-id: https://core.svn.wordpress.org/trunk@53773 1a063a9b-81f0-0310-95a4-ce76da25c4cd
@ramonjd
Copy link
Copy Markdown
Member Author

ramonjd commented Sep 19, 2022

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

Sorry @ockham there's a small update to this code in #44254

The change is reflected in the Core patch

#44254 just syncs the two.

I was going to cherry pick but I see from the commit history you've been doing them so I didn't want to mess up the process.

@ockham
Copy link
Copy Markdown
Contributor

ockham commented Sep 20, 2022

@ramonjd Thank you for the ping! The "Backport to WP Beta/RC" label you added to #44254 ensures that we'll include it in our next round of npm publishing 👍

ootwch pushed a commit to ootwch/wordpress-develop that referenced this pull request Nov 4, 2022
@audrasjb
Editor: Backport block supports filter callback, registrations and te…
78460cc 
…sts to 6.1.

This changeset backports the following changes:

- Implement [WordPress/gutenberg#42880 gutenberg#42880]: Backport script loader: enqueue stored block supports styles
- Allow a way to bypass `SCRIPT_DEBUG` in tests. See [WordPress#3259 (comment) comment] and the related [WordPress/gutenberg#44248 Gutenberg pull request]

Props ramonopoly, gziolo, bernhard-reiter, audrasjb, costdev.
See #56467.


git-svn-id: https://develop.svn.wordpress.org/trunk@54214 602fd350-edb4-49c9-b593-d223f7449a82
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@andrewserong andrewserong andrewserong approved these changes

@spacedmonkey spacedmonkey Awaiting requested review from spacedmonkey spacedmonkey is a code owner

@ockham ockham Awaiting requested review from ockham

Assignees

@ramonjd ramonjd

Labels

Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

Gutenberg 14.2

Development

Successfully merging this pull request may close these issues.

3 participants

@ramonjd @ockham @andrewserong