Maximum width for cover block overlay?

  • I’m developing a custom block theme, and I’m trying to leverage the ability to overlay blocks on top of a cover block, when the cover is set to full-width.

    By default, the overlaid content also goes to full width, which I really don’t think looks great. Maybe there are uses for it, but in my mind the natural “default” would be that the overlaid content matches the regular content width unless you specify otherwise, that way the cover image serves its role as a background element, and the foreground content flows smoothly from the cover block to adjacent blocks.

    I’ve come up with a solution for now, but I don’t love it, and I’m wondering if someone has a better way.

    My solution is to add a custom setting in theme.json:

    "custom": {
    "core": {
        "cover": {
            "maxInnerWidth": "960px"
        }
    }
}

    And then in my CSS I’m doing this:

    .wp-block-cover.alignfull {
    padding-right: calc(calc(100vw - var(--wp--custom--core--cover--max-inner-width)) / 2);
    padding-left: calc(calc(100vw - var(--wp--custom--core--cover--max-inner-width)) / 2);
}

    It works! But it doesn’t feel right to me. Is there a better way to accomplish this? Is there a rationale for why cover blocks don’t work this way by default (or at least provide this as a built-in option)?

    • This topic was modified 2 years, 10 months ago by Jan Dembowski.
Viewing 5 replies - 1 through 5 (of 5 total)

  • Put a Group block inside of the Cover block. Then, make sure “Inherit default layout” is selected under the “Layout” panel in the sidebar. This will give the inner content the default content width.

    Thread Starter room34

    (@room34)

    @greenshady Thanks for the tip! Unfortunately it is not working for me… I wonder if there’s something I’m doing wrong with my theme. That’s for me to sort out, obviously, but if you don’t mind helping me with a follow-up question I should probably have already figured out on my own…

    I see that turning on this setting adds "layout":{"inherit":true} to the comment tag for the block, but I don’t see any additional CSS classes added to the actual HTML tag. So then how does this setting change the visual output of the page?

    Edit: Looks like this is a topic of discussion…

    https://github.com/WordPress/gutenberg/issues/36135#issuecomment-957315733

    • This reply was modified 2 years, 10 months ago by room34.
    Thread Starter room34

    (@room34)

    I should probably clarify, I’m aligning the overlaid content to the right. It’s the alignment that is shoving the content all the way to the edge of the full window width, rather than to the right edge of the standard content area.

    I wonder if there’s something I’m doing wrong with my theme. That’s for me to sort out, obviously, but if you don’t mind helping me with a follow-up question I should probably have already figured out on my own…

    When in doubt about how something should work, I’d test with the Twenty Twenty-Two theme. Archeo is also a really good one to see how things work.

    I see that turning on this setting adds "layout":{"inherit":true} to the comment tag for the block, but I don’t see any additional CSS classes added to the actual HTML tag. So then how does this setting change the visual output of the page?

    You should see a class that looks like wp-container-00000000 on the Group. WordPress will print CSS that specifically targets this container in the <head> area.

    I should probably clarify, I’m aligning the overlaid content to the right. It’s the alignment that is shoving the content all the way to the edge of the full window width, rather than to the right edge of the standard content area.

    Actually, yeah, I just tested this with the Archeo theme and a right-aligned image within Group block with an inherited layout, and it broke out of the container to the right. That doesn’t seem correct, but it may depend on the theme (I think I have some special rules for alignment in my custom theme that I tested with before).

    I was able to get it to work using:

    
- Cover
	- Group (inherit layout option set)
		- Group
			- Right-aligned image

    Also, I tested:

    
- Cover
	- Group (inherit layout option set)
		- Stack (justification set to right)
			- Image with no alignment

    Doubling up on the containers isn’t ideal, but it should work.

    Thread Starter room34

    (@room34)

    Thanks… I’ll give this a try.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Maximum width for cover block overlay?’ is closed to new replies.