Multiple content areas with Gutenberg – Transparent areas mid content

Nested group and cover blocks are the solution, and since you created your question the block editor has improved enough that your design can be created with group and cover blocks, with spacing rules via global styles. No code is necessary.

E.g. I was able to create this using just the editor, and no CSS or code:

enter image description here

I used a cover block for the background, then used a group block for layout, giving it a maximum width, a white background, and black text.

You could copy paste those blocks and use them to register a block pattern so that users would never have to create it themselves.

Likewise you could set it as a template for the inner block, but the solution is still the same, you do what you’d do in HTML and nest tags/blocks. Having a block with more than one internal area is just as incomprehensible as having a tag that has multiple separate insides without using <div> or other tags to create them.

Related Posts:

  1. Custom Blocks as part of a theme
  2. When to use is_home() vs is_front_page()?
  3. Using classes instead of global functions in functions.php
  4. What are the ADVANTAGES of ORIGINAL wordpress template structure?
  5. Change admin bar to default:off
  6. Proper, exhaustive documentation for wp.editor etc
  7. Edit srcset and sizes attributes in Gutenberg image, cover and gallery – blocks
  8. How to change admin bar color scheme in MP6 / WP 3.8 front end?
  9. Template for individual post designs
  10. When to use esc_url, esc_html, esc_attr, and friends?
  11. Best practices – Should I create a child theme vs. customizing a framework theme? (such as HTML5 reset)
  12. How can you develop on a live WordPress installation that is using W3 Total Cache? [closed]
  13. Add colors to existing color palette without replacing it
  14. How to disable 3.1 “Admin Bar” via script for the admin user?
  15. What is the best practice for customizing a plugin’s JavaScript/jQuery?
  16. Front End Post Submit Form
  17. Can you filter posts by meta key with the getEntitityRecords selector?
  18. Feature Survey – What would you want in a resume theme?
  19. How the WordPress sidebar works
  20. WP Gutenberg custom block – generate theme colors from SASS and use them in the inspector and php callback
  21. Should we localize custom-made themes / plugins?
  22. Change loop order via form or link (jquery, not URL)
  23. Extend walker – navigation, adding data attribute to a tag
  24. How can I remove the Static Front Page option from the Customizer
  25. create blocks programmtically on theme activation
  26. Set front page as static page [closed]
  27. How to programmatically bring back “excerpts” field in post editor in WP 3.1+
  28. How can i customize the comment list
  29. How to add custom template tag in wordpress theme?
  30. How should I store global information such as a phone number so that it is editable through the CMS?
  31. When developing a distributable Theme, does it HAVE to be “inheritable”?
  32. How to handle theme customization and sass variables
  33. wp_enqueue_scripts not called on search page?
  34. wp_head() not inserting the default stylesheet style.css
  35. Upgrading a custom theme through the Dashboard
  36. First completely customized theme, where should I start?
  37. WordPress how to override function adjacent_posts_rel_link_wp_head() in link-template.php the correct way
  38. Theme Customizer not loading
  39. Can I customize any WordPress parent block-based theme template files by child theme like a parent classic theme?
  40. How to support Lazy Loading Assets in a WordPress Theme?
  41. Responsive Images – Generating multiple images from Theme Customizer control upload?
  42. How to retrieve an image from a post and display it before excerpt of a post? [duplicate]
  43. Modify Javascript Configuration Options for Theme Customizer Colour Picker
  44. Best practices: Custom theme sidebar menu – hardcode or widget?
  45. Best approach to create sites with Modular Content? [closed]
  46. Modify the Additional CSS section (adding a disclaimer)
  47. What’s the best action to use when you want to do something only once per theme setup?
  48. WordPress Gutenberg Theme: Structure, Hierarchy and Custom Templates
  49. Gutenberg Reusable Block as part of WordPress Theme page
  50. Version control for both Vagrant config and themes being developed [closed]
  51. Customizer API and add_panel(). Panel doesn’t show
  52. How to correctly add JQuery in a WP theme?
  53. Creating multiple hooks for theme
  54. What is the best way to handle multiple calls to get_template_directory_uri() and similar functions?
  55. Why is the Links Manager visible?
  56. Custom button block doesn’t work
  57. How to float an image in Gutenberg
  58. Gutenberg – editor-font-sizes in functions not working
  59. Best way to start becoming a wordpress developer
  60. How to add a second stylesheet to the editor
  61. Removing non native customizer settings from a child theme
  62. How to reorganize the items returned by wp_list_comments()?
  63. which is the best way to customize nav-menu-template.php?
  64. Where should I update_options in a theme?
  65. WP 3.1 upgrade breaks AutoFocus+ theme
  66. Can’t select my block by clicking on it
  67. How to use get_theme_mod in gutenberg editor wordpress?
  68. Which file handles the block latest posts, I want to examine excerpt handling
  69. create-guten-block in wordpress theme?
  70. Displaying recent post excerpts on static front page
  71. Customizer: Unique identifier that distinguishes which image upload control is uploading an image
  72. Conditional statement to show pagination
  73. How to make theme elements customizable in wordpress?
  74. How to create a custom template to admin dashboard
  75. How do I Add images uploaded in the post to a default custom field
  76. How to add a button which saves the post then executes a function
  77. Limitations when modifying wp_title with a filter
  78. What VSCode extensions are there for working with block themes? [closed]
  79. How to make animated intro?
  80. What is the “correct” way to add hooks or similar PHP behavior to a blocktheme?
  81. How to edit theme functions file to modify pagination?
  82. Not able to select width of blocks inside of cover block
  83. How to check if a WordPress core block is active in sidebar
  84. gutenberg add classes to list items
  85. How do you replace content generated by custom fields with custom blocks in Block Editor?
  86. How to display all subpages and short by year
  87. Getting custom posts by post id from cutomizer text input
  88. Disabling Customizer Selective Refresh shortcut icons for selected controls
  89. JavaScript stops working on selectively refreshed sections one inside the other
  90. StoreFront product pages: Turn the Short Description section into a kindred tab section [closed]
  91. “Add A Widget” button in the Customizer
  92. Zoom on custom theme without child
  93. Customizer: save setting/control content to post/page
  94. Q: How to pull data from custom table to populate zustomizer setting/control select options
  95. Move default page templates to sub directory
  96. Changing a slider to a grid [closed]
  97. Custom Navigation build using wp_nav_menu and walker
  98. Using My Own Classes On Wp Unit Tests
  99. Is it possible to visually group items on the theme customizer?
  100. Customize how a WordPress theme looks like in the Theme Selector
Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)