Global styles: block background UI controls by ramonjd · Pull Request #6836 · WordPress/wordpress-develop

ramonjd · 2024-06-17T02:11:34Z

Syncing source code changes from WordPress/gutenberg#60100

Enables background images for supported blocks in global styles.

Testing

This PR adds the backend functionality only, which means the editor UI isn't yet available.

To test, define some background images for blocks. Here's an example using some of the images in src/wp-content/themes/twentytwentyfour/

{
	"$schema": "../../schemas/json/theme.json",
	"version": 3,
	"settings": {
		"appearanceTools": true
	},
	"styles": {
		"blocks": {
			"core/verse": {
				"background": {
					"backgroundImage": {
						"url": "file:./assets/images/art-gallery.webp"
					}
				}
			},
			"core/quote": {
				"background": {
					"backgroundImage": {
						"url": "file:./assets/images/building-exterior.webp"
					}
				}
			},
			"core/pullquote": {
				"background": {
					"backgroundImage": {
						"url": "file:./assets/images/hotel-facade.webp"
					}
				}
			},
			"core/post-content": {
				"background": {
					"backgroundImage": {
						"url": "file:./assets/images/windows.webp"
					}
				}
			}
		}
	}
}

Here is some test HTML to create a test post:

<!-- wp:verse {"style":{"elements":{"link":{"color":{"text":"var:preset|color|base-2"}}},"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60","left":"var:preset|spacing|60","right":"var:preset|spacing|60"}}},"textColor":"base-2","fontSize":"x-large"} -->
<pre class="wp-block-verse has-base-2-color has-text-color has-link-color has-x-large-font-size" style="padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)">Verse</pre>
<!-- /wp:verse -->

<!-- wp:pullquote {"style":{"elements":{"link":{"color":{"text":"var:preset|color|base-2"}}}},"textColor":"base-2","fontSize":"x-large"} -->
<figure class="wp-block-pullquote has-base-2-color has-text-color has-link-color has-x-large-font-size"><blockquote><p>Pullquote</p></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60","left":"var:preset|spacing|60","right":"var:preset|spacing|60"}},"elements":{"link":{"color":{"text":"var:preset|color|base-2"}}}},"textColor":"base-2","fontSize":"x-large"} -->
<p class="has-base-2-color has-text-color has-link-color has-x-large-font-size" style="padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)">Quote</p>
<!-- /wp:paragraph --></blockquote>
<!-- /wp:quote -->

The editor and frontend should display the background images:

Trac ticket: https://core.trac.wordpress.org/ticket/61588

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

github-actions · 2024-06-17T02:23:42Z

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

The Plugin and Theme Directories cannot be accessed within Playground.
All changes will be lost when closing a tab with a Playground instance.
All changes will be lost when refreshing the page.
A fresh instance is created each time the link below is clicked.
Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

Tests to come

output any background styles, even if there's no background image - this is so users can extend/overwrite theme.json styles

github-actions · 2024-07-08T02:58:48Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props ramonopoly, aaronrobertshaw, noisysocks.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

aaronrobertshaw

Thanks for putting this together @ramonjd 👍

✅ Theme.json defined background images display in editors and frontend
✅ Code changes match GB PR

Editor	Frontend

I left a few minor nits as inline comments.

src/wp-includes/class-wp-theme-json-resolver.php

aaronrobertshaw · 2024-07-08T05:55:18Z

Thanks for adding the @ticket comments, missed those in my review, sorry.

Latest changes LGTM 🚀

ramonjd · 2024-07-08T05:56:55Z

I appreciate the quick review!

noisysocks · 2024-07-24T00:25:43Z

Committed in r58797.

mukeshpanchal27 · 2024-10-15T06:21:55Z

@ramonjd @joemcgill @felixarntz

I ran local Server-Timing benchmarks with and without these PR changes and found that the PR is responsible for ~3% regression.

Server-Timing benchmarks

Mertic	Beta 3	Beta 3 without these PR changes	Diff %	Diff abs.
Response Time	69.05	65.67	-4.90%	-3.38
wp-before-template	30.94	29.67	-4.10%	-1.27
wp-template	35.45	34.15	-3.67%	-1.30
wp-total	66.87	63.97	-4.34%	-2.90

ramonjd · 2024-10-15T06:32:36Z

I ran local Server-Timing benchmarks with and without these PR changes and found that the PR is responsible for ~3% regression.

Interesting. Thanks for the ping!

I'm at the end of my day, but I wonder if the following needs to be cached:

https://github.com/WordPress/wordpress-develop/pull/6836/files#diff-1be8a8089d87d1b4b6e449c0967680d6f7c170d13f247180a975cbea5e54070fR310

@mukeshpanchal27 Are you comparing against local changes using https://github.com/mukeshpanchal27/compare-wp-performance? Could you share your workflow? Thanks!

mukeshpanchal27 · 2024-10-15T06:46:04Z

@mukeshpanchal27 Are you comparing against local changes using https://github.com/mukeshpanchal27/compare-wp-performance? Could you share your workflow? Thanks!

See https://make.wordpress.org/performance/handbook/measuring-performance/benchmarking-php-performance-with-server-timing/

felixarntz · 2024-10-15T15:32:41Z

@ramonjd @mukeshpanchal27

I'm at the end of my day, but I wonder if the following needs to be cached:

https://github.com/WordPress/wordpress-develop/pull/6836/files#diff-1be8a8089d87d1b4b6e449c0967680d6f7c170d13f247180a975cbea5e54070fR310

Good suggestion. Let's first verify that that method is indeed responsible for a notable performance decline. Maybe just comment it out and rerun the benchmarks to compare?

ramonjd · 2024-10-16T04:22:03Z

Let's first verify that that method is indeed responsible for a notable performance decline. Maybe just comment it out and rerun the benchmarks to compare?

Commented over here: WordPress/performance#1572 (comment)

I'm not sure there's much to see here yet.

I also mentioned that I think there needs to be a caching strategy for resolved URIs however:

I think perhaps caching them in WP_Theme_JSON_Resolver as is done with theme_json might work, using get_stylesheet() or get_stylesheet_directory() as a key. I'll add it to my list of things to look into.

Thank you!

ramonjd mentioned this pull request Jul 3, 2024

Global styles: block background UI controls WordPress/gutenberg#60100

Merged

ramonjd added 3 commits July 8, 2024 11:55

Syncing source code changes from WordPress/gutenberg#60100

49d4b8d

Tests to come

Add theme resolver tests

1ffb0b4

update tests

9b4a6eb

output any background styles, even if there's no background image - this is so users can extend/overwrite theme.json styles

ramonjd force-pushed the add/background-global-styles-panel-for-blocks branch from 210feca to 9b4a6eb Compare July 8, 2024 02:40

LINTY

700dcad

ramonjd self-assigned this Jul 8, 2024

ramonjd added the enhancement label Jul 8, 2024

ramonjd marked this pull request as ready for review July 8, 2024 02:58

ramonjd requested review from aaronrobertshaw, andrewserong and noisysocks July 8, 2024 02:59

aaronrobertshaw approved these changes Jul 8, 2024

View reviewed changes

src/wp-includes/class-wp-theme-json-resolver.php Outdated Show resolved Hide resolved

src/wp-includes/class-wp-theme-json-resolver.php Show resolved Hide resolved

src/wp-includes/class-wp-theme-json-resolver.php Outdated Show resolved Hide resolved

ramonjd added 2 commits July 8, 2024 15:38

Implement review feedback

739df06

Add ticket to tests

bfd46dd

ramonjd mentioned this pull request Jul 22, 2024

Background: add background attachment support to theme.json styles #6991

Closed

github-actions bot mentioned this pull request Jul 23, 2024

PHP backports for WP 6.7 WordPress/gutenberg#63827

Closed

noisysocks closed this Jul 24, 2024

mukeshpanchal27 mentioned this pull request Oct 15, 2024

Performance Benchmarks for WordPress 6.7 WordPress/performance#1572

Closed

ramonjd deleted the add/background-global-styles-panel-for-blocks branch October 16, 2024 00:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Global styles: block background UI controls#6836

Global styles: block background UI controls#6836
ramonjd wants to merge 6 commits intoWordPress:trunkfrom
ramonjd:add/background-global-styles-panel-for-blocks

ramonjd commented Jun 17, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Jun 17, 2024

Uh oh!

github-actions bot commented Jul 8, 2024 •

edited

Loading

Uh oh!

aaronrobertshaw left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aaronrobertshaw commented Jul 8, 2024

Uh oh!

ramonjd commented Jul 8, 2024

Uh oh!

noisysocks commented Jul 24, 2024

Uh oh!

mukeshpanchal27 commented Oct 15, 2024

Uh oh!

ramonjd commented Oct 15, 2024

Uh oh!

mukeshpanchal27 commented Oct 15, 2024

Uh oh!

felixarntz commented Oct 15, 2024

Uh oh!

ramonjd commented Oct 16, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

ramonjd commented Jun 17, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Testing

Uh oh!

github-actions bot commented Jun 17, 2024

Test using WordPress Playground

Some things to be aware of

Uh oh!

github-actions bot commented Jul 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aaronrobertshaw left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aaronrobertshaw commented Jul 8, 2024

Uh oh!

ramonjd commented Jul 8, 2024

Uh oh!

noisysocks commented Jul 24, 2024

Uh oh!

mukeshpanchal27 commented Oct 15, 2024

Server-Timing benchmarks

Uh oh!

ramonjd commented Oct 15, 2024

Uh oh!

mukeshpanchal27 commented Oct 15, 2024

Uh oh!

felixarntz commented Oct 15, 2024

Uh oh!

ramonjd commented Oct 16, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

ramonjd commented Jun 17, 2024 •

edited

Loading

github-actions bot commented Jul 8, 2024 •

edited

Loading