Feedback on adding a background image to a template part

[annezazu]

What problem does this address?

Right now, if you want to add a cover block to your header, it's a fairly painful experience requiring you to add a Cover block above your content within the template part, setting an image or background color, and then add a column block to separate out the Site Title, Site Tagline from the navigation block before adding in the content you want.

Here's a video of the current experience using the TT1 Blocks theme and Gutenberg 10.1:

https://cloudup.com/c1p8v_ybzp1

This was first brought up as part of the FSE Outreach Program here.

What is your proposed solution?

cc @kjellr this might be neat to explore as a theme pattern. Otherwise, making it easier to add a cover block to a template part and/or set a background image for a template part seems like a good alternative!

[overclokk]

This should be the behavior of the Global Style where you can change bg color and image, bg image is an option in the customizer and GS will replace the customizer.

If you want to add a bg image inside the header or in others files other than GS with cover block is a best way, also with a custom block if you want.

I don’t want to see this behavior in the template-part block.

[Sandstromer]

Rather than adding in a column block to the cover, and then adding in your content (Site Title, Tagline and Navigation) to the new column block, it is possible to drag-drop the whole of the current columns block into the cover block, greatly reducing the number of steps required.

With this in mind, it seems the issue is that it is not immediately obvious which block is selected/selectable or that the List View is maybe not prominent enough?

[annezazu]

Appreciate you all chiming in and sharing more ideas around how best to approach this.

it is possible to drag-drop the whole of the current columns block into the cover block, greatly reducing the number of steps required.

Yes, you can drag a column block but there's also a level of needing to imagine building this from scratch.

This should be the behavior of the Global Style where you can change bg color and image, bg image is an option in the customizer and GS will replace the customizer.

This wouldn't work well as it would set the background for all template parts rather than just that specific template part!

[overclokk]

A template part should only do one thing, include a template and nothing others, so a bg image should be added or from a block or from a GS (GS is also global style for specific blocks).

[carolinan]

I am not sure that block patterns for the header and and footer area is the best solution,
because it is simpler, fewer steps, to preview and replace an entire template part,
than deleting existing content and selecting and adding a new pattern.

But both template parts and patterns are added by the theme author, and the theme author will never know exactly what the user wants.

The user can create new blank template parts from scratch, but that does not solve the problem of a level of needing to imagine building this from scratch.

Perhaps we need a more advanced walkthrough, a set up wizard, where the user is asked what they would like to see in their header.

[carolinan]

On the other hand, the pattern directory is coming, so maybe this is what really needs to be addressed:
it is simpler, fewer steps, to preview and replace an entire template part,
than deleting existing content and selecting and adding a new pattern.

Maybe we need to both "add" a pattern and "add and replace"

[annezazu]

To help make some connections to other work that's happening around this same area, I wanted to cross link this issue with this effort to add background tools to more blocks beyond just the cover block: #28643 Hopefully, in time, it becomes easier for more blocks to have the same background options as the Cover block whether through block supports, sidebar settings, toolbar settings, etc (TBD there!).

[annezazu]

This came up in the fourth call for testing too with feedback in this WP Tavern Post:

I did want to spruce my restaurant page header up a bit with a custom background. To do that, I added the primary elements inside a Cover block. Currently, the only way to do that is to copy all of the blocks, delete the old ones, and paste them into a new Cover block. A welcome enhancement to the editor would be an option for “grouping” blocks into a Cover like what is possible with the Group block.

Sharing here for posterity :)

[kjellr]

Currently, the only way to do that is to copy all of the blocks, delete the old ones, and paste them into a new Cover block. A welcome enhancement to the editor would be an option for “grouping” blocks into a Cover like what is possible with the Group block.

On a related note, it feels like it should be possible to "Group" your selected blocks, and then convert that group into a Cover block. I've opened #30445 to track that.

[annezazu]

This came up as part of the latest FSE Outreach Program's All Things Media exploration once more:

I was not able to create a header background. I expected it to act similar to other blocks, but template parts do not have any sidebar options. I explored adding a background image to a Group block, but that is not possible at this time.

&

This is tricky and I bet is the hardest step. “Header” is not clearly defined. I bet most folks would go into the Site Editor and try to add a background image to the Header template part block. Also most block-themes have a Group block wrapping the inner content of the Header part, and Group blocks also do not support image backgrounds (yet). So you have to modify the content in your Header by placing it inside of a Cover block and then add a background image to the Cover block. This takes a LOT of in depth knowledge of the Site Editor to accomplish.

I expect this to be a fairly common workflow folks will want to have so it would be great to get what seems to be mostly some technical solutions in place.

[jordesign]

Hey @annezazu quick gut check on whether we should keep this Issue open, as distinct from #28643 ?

[annezazu]

I actually think we can close out in favor of this: #53934 :) I'll note it there for consideration/feedback loop closing.