Background image: add support for relative theme path URLs in template and pattern files

[ramonjd]

Part of:

• Background Image block support follow-up tasks #54336

What problem does this address?

Since #61271, themes can define relative paths to background images in theme.json files.

The same functionality does not yet exist for other theme assets, namely:

• template/template parts
• patterns

For these assets, theme authors should be able to add relative paths to background images, for example, in Group block attributes.

This impacts the portability of themes.

What is your proposed solution?

Parse block attributes and replace the relative URIs with absolute URIs using get_theme_file_uri.

Where this is done — on the frontend or clientside — is to be decided.

#61401 is a working example that runs clientside, but it will be worth investigating whether backend pre-processing is viable pursuant to #61271.

Related

• Add/background image theme source #61401 (Experimental, prior attempt)

[annezazu]

Just a quick alert to @WordPress/block-themers who I think will be excited to see this.

[creativecoder]

A couple points of context:

1. I think it would be best to solve this for all images, including both background images and regular <img src=> image tags at the same time.
2. For templates and patterns, "bits" may serve as an alternative to relative urls, by dynamically replacing the current site domain and/or theme path in the url. See Bits: Dynamic replacement of server-provided content (tokens, "shortcodes 2.0") #39831 -- I don't think they're usable right now, but I believe this concept is being actively experimented with (cc @dmsnell @ellatrix )

[dmsnell]

For templates and patterns, "bits" may serve as an alternative to relative urls, by dynamically replacing the current site domain and/or theme path in the url. See #39831 -- I don't think they're usable right now, but I believe this concept is being actively experimented with (cc @dmsnell @ellatrix )

100% @creativecoder - thanks for the link. I tried to open up the ability to store Bits in Core for 6.6 but that may not happen (could still happen 🤞)

6.7 is a much bigger target for working Bits code.

[ramonjd]

Thanks for the context, folks.

6.7 is a much bigger target for working Bits code.

Great to hear. I'll try to keep with progress on it. It sounds it'd suit this use case perfectly. 👍🏻

I think it would be best to solve this for all images, including both background images and regular <img src=> image tags at the same time.

+1