Add Site wide background image to export

[Birgit Pauli-Haack]

With Gutenberg 18.1 comes side wide background image feature.

The set image should be part of the theme export

[Birgit Pauli-Haack]

Actually, I am not sure if that's actually necessary. It turns out when the theme is uploaded to a site that has the Gutenberg plugin enabled (18.1) then the site-wide background image shows out of the box. I just can't see the image file in any folder of the downloaded theme.
~~It's the most curious thing. ~~

[Birgit Pauli-Haack]

Of course, it showed up because the LocalWP site where I uploaded the background image was still active.   🤦‍♀️

It's hard-coded in the theme.json

"background": {		
        "backgroundImage": {
	"id": 195,
	"source": "file",
	"title": "3032452",
	"url": "http://localhost:10115/wp-content/uploads/2024/04/3032452-scaled.jpg"
	},
	"backgroundPosition": "28.000000000000004% 59%",
	"backgroundSize": "auto"

[Jason Crist]

We have added the theme-ization of SOME blocks such as image and cover block. We haven't added anything to theme.json yet though and this seems like it would be the best first candidate. It would be very similar and not terribly difficult.

[Birgit Pauli-Haack]

Hmm, I am not sure what your comments is getting at. And it seems I didn't make myself clear enought.

A side wide background image is not at a block level like an image or a cover block.

It influences the whole site and it a theme relevant new feature in the site editor. The export already puts the high-level settings into in the theme.json.

What did I expect?

That the background image was:

• downloaded into the /assets folder like fonts are downloaded in the /fonts folder and
• the location in the theme.json is adopted to the relative location in the asset folder.

{
"background": {
"backgroundImage": {
"id": 195,
"source": "file",
"title": "3032452",
"url": "../assets/2024/04/3032452-scaled.jpg"
},
"backgroundPosition": "28.000000000000004% 59%",
"backgroundSize": "auto"
}

How to test it:

• Needs Gutenberg 18.1.x
• Create a blank theme
• Add a background image to the site via Site Editor > Styles > Style Icon > see screenshot below for location.
• Save
• Save it in CBT
• Download in zip
• delete the background image from the media library
• upload the zip file to a different site.
• You will notice that the background image is not showing on the new site. The reason is that hardcoded link to the existing site in the theme.json file.

[Jason Crist]

Hmm, I am not sure what your comments is getting at. And it seems I didn't make myself clear enought.
A side wide background image is not at a block level like an image or a cover block.

I was just noting that the type of processing we do for blocks (download a linked asset to a local folder, changing the source to point to the now theme-local asset) is the same processing we would do for the sitewide background image in theme.json. We haven't done any type of processing like that on theme.json but it's very similar to what we are already doing for blocks and shouldn't be very difficult.

[Sarah Norris]

Related PR in Gutenberg: WordPress/gutenberg#60578