0

I am trying to find a solution to a layout I have been tasked to build using 'Gutenberg' blocks. As far as I am aware there can only be one the_content(); per page.

The layout I am trying to achieve can be found below:

https://jsbin.com/vegotugayo/edit?html,output

The issue that I have is the breakout area for the quotes. These need to be transparent so the fixed image in the background can be seen. But from what I can work out, this would require breaking out of the content area.

What has been tried

A previous solution that has been tested is to surround each block with a containing div. This div would have background-color: white; applied by default, then set to transparent for blockquote. This worked to a point, but played absolute havoc with the blocks and the way they interact with each other.

Does anyone have a possible solution for this layout? I am concerned I cannot see the wood for the trees and overcomplicating things.

I am looking for solutions that use Gutenberg, I am not looking for a solution that requires plugins

Improve this question
1
  • It will be more helpful if you add your code in the answer. The current functionality that you have been showing can be easily added via custom Gutenberg block.
    – Mehmood Ahmad
    Commented Mar 11, 2019 at 21:29

2 Answers 2

Reset to default
2

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.

Improve this answer
0

For today, Gutenberg doesn't provide container blocks by default. Therefore you either need a 3rd party plugin like Atomic Blocks or you write your own.

But you can do a little hack. Upload a transparent png to your media library. Then use the cover block for each section. Give every cover block the transparent png as image and write your content above. For your sections with white background just add a white overlay color in the block settings and Background Opacity of 100%. Maybe the text doesn't look like you expect it, therefore you can add a css class to the block and do it with CSS.

I hope this helps.

Improve this answer
3
  • This may be a solution that I can look into but would need to fully test. From what I can see, for the moment, there is no easy solution to it.
    – Bagseye
    Commented Mar 8, 2019 at 9:07
  • 1
    In case you're still struggling with this: In todays release of Gutenberg (shipped within WP5.2) they announced "The release also includes the possibility to nest different kind of blocks in a Cover Block container." - make.wordpress.org/core/2019/03/20/…
    – chrisbergr
    Commented Mar 20, 2019 at 21:15
  • That looks like it could solve a few issues later on down the line. At least they are taking on feedback from the community quite fast. It gives me hope...
    – Bagseye
    Commented Mar 21, 2019 at 11:30

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.