How to position more than one item over an image in a Gutenberg WordPress block theme

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.

Related Posts:

  1. Add To Gutenberg Sidebar
  2. How to detect the usage of Gutenberg
  3. Possible to use @wordpress/create-block with multiple blocks?
  4. What is the advantage of ‘register_block_type’ (the PHP function) when creating custom blocks?
  5. The Block Editor: Disable “Color settings” in the specific block
  6. Add classname to Gutenberg block wrapper in the editor?
  7. Serialize custom block with InnerBlock
  8. What replaces wpColorPicker in Gutenberg?
  9. Help with using getBlockIndex
  10. Gutenberg Range Control default from meta value
  11. Find all the places where a block type is used
  12. Why is the new Gutenberg editor so narrow, and how to make it wider?
  13. WP Blocks – Gutenberg – not rendering $content
  14. Why does the custom HTML block not preserve the HTML characters?
  15. Best practices for CPT without using an editor [closed]
  16. Can’t get dynamic Gutenberg block to render on the frontend
  17. Gutenberg change/remove “Write your story” placeholder in custom blocks
  18. How do I listen for a change in an innerBlock child?
  19. How to enable Gutenberg Block Editor on taxonomy term pages?
  20. What’s the absolute minimum code that I need to create a dynamic block?
  21. How to make 2/3 width column in Gutenberg
  22. Change default colors in paragraph block settings
  23. Gutenberg Reusable Block of WordPress
  24. Add custom attributes to link in Gutenberg
  25. How do I add a Gutenberg editor to a custom options page
  26. Add a button to the toolbar of an existing Gutenberg block
  27. Custom Gutenberg Block: Excluding an allowed block from InnerBlock’s templateLock={‘all’}
  28. Determine if block has already been registered
  29. InnerBlocks breaks Flexbox and CSS Grid styles
  30. Is there a way to set the gutenberg color palette outside the theme?
  31. How to add a class to the element in a custom Gutenberg block
  32. Gutenberg get withState variable in save function
  33. Gutenberg block JavaScript localisation on Polyglots does not work
  34. Unable to override MediaPlaceholder component
  35. how define elements type in attributes type array of gutenberg blocks
  36. Convert GMT time to local time in Gutenberg Block Editor
  37. Restrict heading level in Gutenberg block `core/heading`
  38. How do I disable or hide the Layout block setting in the Group block
  39. Cleaning up after block dismount
  40. How to add a link in a translation in gutenberg
  41. I cant see Block Editor with v5.7
  42. How to update block attribute after format is applied?
  43. How to add a class to the link of the default Gutenberg Button block?
  44. How to identify what templates are being loaded in a block-based theme [closed]
  45. Check if current page is using blocks (Gutenberg) or is legacy
  46. Add support for ‘alignnone’ to Gutenberg block align controls?
  47. How do I replace a audio gutenberg block to native audio wordpress
  48. Converting a theme to Gutenberg but some styles are missing in the front end [closed]
  49. React useEffect not work in frontend gutenberg blocks
  50. Gutenberg Block language translation does not work
  51. How to generate block ID for use in post_content JSON data
  52. Where in a WordPress installation is the code for the default Gutenberg blocks located? [duplicate]
  53. Display selected image in the MediaPlaceholder component
  54. ACF and Gutenberg block, how to use blocks without ?
  55. Submitting a block to the .org repo: do I submit compiled code, or source code? [closed]
  56. Using 2 HTML blocks in Gutenberg to wrap content with div
  57. Add button to Block toolbar: toggleFormat is undefined
  58. In a block transform, how do I insert innerBlocks?
  59. What is the name of the user capability to read a reusable block?
  60. Gutenberg – Prevent Column Nesting in the Visual Editor
  61. How to remove whitespaces from source of posts created through WordPress Gutenberg editor
  62. Gutenberg blocks (block editor) with get_the_excerpt and get_the_content, using ACF
  63. Basic use of useState
  64. Gutenburg: Remove border of selected block
  65. Sort Posts by Sticky then by Latest date using the Latest Posts Block
  66. Unwanted white space next to inputs added within `PluginDocumentSettingPanel` using “
  67. apiFetch() returns infinite requests
  68. ToolbarDropdownMenu component missing from @wordpress/scripts package
  69. Gutenberg Custom Block Not Validating – Ideas?
  70. Gutenberg dynamic block render_callback gives null for $post
  71. Editing HTML structure of Gutenberg layout recent post?
  72. How to add srcdoc attribute to YouTube oEmbed in Gutenberg oEmbed Block
  73. Pass props / function to InnerBlocks
  74. Do not wrap custom block in an additional DIV but instead use only the JSX I provide
  75. Categories in Gutenberg
  76. Block editor: content resets to the previous state in “Edit as HTML” by clicking somewhere outside of the editing window
  77. Possible to add the title of a custom gutenberg block to the edit screen?
  78. Post Format Link using Guttenberg
  79. How do I hide the UI for specific Gutenberg Blocks?
  80. Creating a Dynamic InnerBlock that updates depending on state
  81. Resizing images on page
  82. When to use removeEditorPanel()
  83. Error After Installing Gutenberg plugin (caused by attempt to stop WP from stripping out tags)
  84. Block validation failed – escaped HTML in content save
  85. Add media dynamically on gutenberg block
  86. FormTokenField passing objects to value property
  87. Trying to save an object into post meta with wp.data.dispatch(‘core/editor’).editpost
  88. Core Block Columns Attributes for Innerblocks Template
  89. WordPress – Increase number of posts in “Add Link” dialogue
  90. Change Featured image location from side to normal using react (gutenberg)
  91. Get postId in a wordpress pattern file?
  92. Remove placeholder from core/image in InnerBlocks template
  93. Gutenberg block not displaying prop values
  94. ACF InnerBlocks breaks css grid, How can we add classes to allowedblocks (WordPress Gutenberg)
  95. How to disable block directory?
  96. Dynamically add table of contents and add anchor based on heading innerHTML
  97. How to defer block.json scripts?
  98. Block validation: Block validation failed – Custom WordPress Gutenberg Block Fails In Editor when reloaded
  99. How can I prevent a user from selecting exactly one of two (not both or none) categories on a post?
  100. How to add a tooltip for MediaReplaceFlow from @wordpress/block-editor
tech