Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feedback on adding a background image to a template part #29238

Open
annezazu opened this issue Feb 22, 2021 · 9 comments
Open

Feedback on adding a background image to a template part #29238

annezazu opened this issue Feb 22, 2021 · 9 comments

Comments

@annezazu
Copy link
Contributor

@annezazu annezazu commented Feb 22, 2021

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
Copy link

@overclokk overclokk commented Feb 23, 2021

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
Copy link

@Sandstromer Sandstromer commented Feb 23, 2021

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
Copy link
Contributor Author

@annezazu annezazu commented Feb 23, 2021

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
Copy link

@overclokk overclokk commented Feb 23, 2021

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
Copy link
Contributor

@carolinan carolinan commented Feb 25, 2021

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
Copy link
Contributor

@carolinan carolinan commented Feb 25, 2021

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
Copy link
Contributor Author

@annezazu annezazu commented Mar 22, 2021

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
Copy link
Contributor Author

@annezazu annezazu commented Mar 31, 2021

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
Copy link
Contributor

@kjellr kjellr commented Apr 1, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants