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

  • 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 Mar 11 at 21:29
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.

  • 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 Mar 8 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 Mar 20 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 Mar 21 at 11:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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