Make WordPress Core

Opened 4 weeks ago

Closed 3 weeks ago

Last modified 3 weeks ago

#61273 closed enhancement (fixed)

Background image: add support for relative theme path URLs in top-level theme.json styles

Reported by: ramonopoly's profile ramonopoly Owned by: ramonopoly's profile ramonopoly
Milestone: 6.6 Priority: normal
Severity: normal Version: trunk
Component: Themes Keywords: has-patch gutenberg-merge has-unit-tests commit
Focuses: Cc:

Description

This is a ticket to track the syncing of the Gutenberg PR Background image: add support for relative theme path URLs in top-level theme.json styles

Background

To ensure that themes with background image values in theme.json are portable — a theme developer can set a relative path to an image asset as a background image value, and that path will resolve correctly to absolute path of the file in the theme directory no matter where the theme is installed.

Contrast this with absolute image paths: every installation of the theme would point to single image files sitting somewhere on the internet.

How

Paths to images residing in the theme directory can be set in theme.son using the file: syntax, a convention already used in Core for web fonts.

The path is relative to the theme root. For example:

	"styles": {
		"background": {
			"backgroundImage": {
				"url": "file:./img/untitled.png"
			}
		}
	}

Change History (14)

This ticket was mentioned in PR #6608 on WordPress/wordpress-develop by @ramonopoly.


4 weeks ago
#1

### Work in progress

This PR syncs the PHP changes from:

More to come....

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

@noisysocks commented on PR #6608:


3 weeks ago
#2

I created a local branch containing this PR and https://github.com/WordPress/wordpress-develop/pull/6482 and tested a new block theme I created that uses a local file:./ image and the relative URL was not being turned into an absolute URL in the site frontend.

I think you're missing this change:

https://github.com/WordPress/gutenberg/pull/61271/files#diff-b49a48d455acd888a968ee6facf9fb00d9c3de6f91d2818bbe9ddaa4b812dd55

@ramonopoly commented on PR #6608:


3 weeks ago
#3

I created a local branch containing this PR and https://github.com/WordPress/wordpress-develop/pull/6482 and, with the Gutenberg plugin disabled, I tested creating a new block theme that uses a local file:./ image. The relative URL was not being turned into an absolute URL in the site frontend.

Ah, nice spotting. Thanks! 🙇🏻

I'll update and push quickly.

TBH I'd stopped working on this in anticipation of https://github.com/WordPress/wordpress-develop/pull/6482 getting in first.

@noisysocks commented on PR #6608:


3 weeks ago
#4

You asked me to test these two PRs, so ready or not, I'm testing these two PRs 😛

@ramonopoly commented on PR #6608:


3 weeks ago
#5

You asked me to test these two PRs so, ready or not, I'm testing these two PRs

🍺 You got me. 😄

@noisysocks commented on PR #6608:


3 weeks ago
#6

Looking good. Would you mind adding step-by-step instructions for how to test the changes to class-wp-rest-global-styles-controller.php and class-wp-rest-global-styles-revisions-controller.php? I couldn't quite figure it out from hitting API endpoints locally.

@noisysocks commented on PR #6608:


3 weeks ago
#7

Thanks! LGTM 👍

#8 @noisysocks
3 weeks ago

  • Component changed from Themes to REST API
  • Keywords has-unit-tests commit added

#9 @noisysocks
3 weeks ago

  • Component changed from REST API to Themes
  • Owner set to ramonopoly
  • Status changed from new to assigned

#10 @noisysocks
3 weeks ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 58262:

Block Themes: Add support for relative URLs in top-level theme.json styles

Allow using relative file: URLs in top-level theme.json properties such as
styles.background, and modify the REST API to provide clients with the
absolute URLs via a 'https://api.w.org/theme-file' attribute in the _links
array.

Props ramonopoly.
Fixes #61273.

@noisysocks commented on PR #6608:


3 weeks ago
#11

Committed in r58262.

#13 @noisysocks
3 weeks ago

In 58263:

Remove extraneous spaces from WP_Theme_JSON_Resolver

Follows r58262.
See #61273.
Props mukesh27.

@noisysocks commented on PR #6688:


3 weeks ago
#14

Committed in r58263.

Note: See TracTickets for help on using tickets.