Skip to main content
added 465 characters in body
Source Link
Tom J Nowell
  • 60.6k
  • 7
  • 77
  • 147

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.

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

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.

added 308 characters in body
Source Link
Tom J Nowell
  • 60.6k
  • 7
  • 77
  • 147

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

Nested 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.

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

Source Link
Tom J Nowell
  • 60.6k
  • 7
  • 77
  • 147

Nested 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.