0

I'd like to place two items over a large banner image, for example:

  • Navigation menu (top-right)
  • Site Title (bottom-center)

I know a number of ways to do this with CSS, but can't figure out how to get this behavior in the Wordpress theme editor (I'm using Twenty-Twenty-Three in Wordpress 6.1.1).

I've attempted to place a variety of Row/Stack/Group hierarchies over a Cover Image, but the two items are then being positioned together, since Cover Image only has a single content positioning control. Is there an equivalent to css absolute positioning within the parent block, or do I need to write custom CSS to make this happen?

Example from a random site: enter image description here

3
  • have you tried multiple group blocks? A stack that spaces things out vertically that contains 2 rows sounds like it would do the trick
    – Tom J Nowell
    Mar 9, 2023 at 19:21
  • @TomJNowell Do you mean like this? So far, same result.
    – Akom
    Mar 9, 2023 at 19:36
  • maybe, I don't know how you have those blocks configured so I couldn't say by just looking at the outliner
    – Tom J Nowell
    Mar 9, 2023 at 20:15

1 Answer 1

2

You would do this with a stack block and 2 rows.

In WP v6.1 and Below

The missing part though, as that because the cover block does not use flex layout like the group block does, there's no way to put the extra height in that you need to separate the menu from the title.

So instead, insert a spacer block between the 2 rows:

enter image description here

<!-- wp:cover {"url":"https://example.com/wp-content/uploads/1/1901/1/example.jpg","id":26,"dimRatio":50,"align":"full"} -->
<div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-26" alt="" src="https://example.com/wp-content/uploads/1/1901/1/example" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"align":"full","layout":{"type":"flex","orientation":"vertical","verticalAlignment":"space-between","justifyContent":"stretch"}} -->
<div class="wp-block-group alignfull"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>I was going to be a menu but I changed my mind</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"226px"} -->
<div style="height:226px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:heading -->
<h2 class="wp-block-heading">I'm a heading</h2>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

WP v6.2+

v6.2 lets use drop the spacer block by setting a minimum height on the stack block!

enter image description here

enter image description here

<!-- wp:cover {"url":"https://example.com/wp-content/uploads/1/1901/1/example.jpg","id":26,"dimRatio":50,"align":"full"} -->
<div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-26" alt="" src="https://example.com/wp-content/uploads/1/1901/1/example.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"align":"full","style":{"dimensions":{"minHeight":"600px"}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"space-between","justifyContent":"stretch"}} -->
<div class="wp-block-group alignfull" style="min-height:600px"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>I was going to be a menu but I changed my mind</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:heading -->
<h2 class="wp-block-heading">I'm a heading</h2>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Flex controls for justifying and direction would be very nice on the cover block though, especially with the minimum height controls coming in WP 6.2, you should head to the Gutenberg GitHub repository and open an issue for that if one isn't already open.

4
  • Note the WP 6.2 at the time of writing has just had RC1 released and is expected to be released in April. You can also install the Gutenberg plugin to get minimum height early
    – Tom J Nowell
    Mar 9, 2023 at 20:26
  • Thanks for the samples. So far I have not been able to reproduce your results. Even when I paste the code verbatim, all the items are left aligned. The main Group is only content-wide, it does not expand to the width of the Cover block. I'll keep trying, or just hack it up with custom CSS.
    – Akom
    Mar 10, 2023 at 13:09
  • you should be able to reproduce this if you are using the latest WordPress, have you confirmed with the latest gutenberg also? And are you sure that editor styles are not interfering? I made the above using my frontenberg site which is a generic block editor instance anyone can visit, similar to the one at wordpress.org/gutenberg and it too happily accepted the HTML I shared and gave me what you wanted
    – Tom J Nowell
    Mar 10, 2023 at 14:24
  • as for the width that's heavily dependent on your theme, but also configurable in the editor. If it's content width, then don't use content width use full wide or the wide alignment, your question has no mention of width! This answer is purely about the layout of putting one thing in the top right, and another in the bottom left with a gap between them. Everything is an irrelevant tangent/a new question.
    – Tom J Nowell
    Mar 10, 2023 at 14:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.