I want to make some page layouts with the Gutenberg page builder so I can reuse them as sort of page templates.

An example:

  • banner image on top of the page
  • main title under the banner
  • 3 rows with each 2-columns with image on the left and text on the right

Example of output code: Screenshot

It is possible to add a class to the article-element, depending on which reusable block is used? So I can generally style the blocks and reuse them on different pages.

I Hope my question is clear because I kinda struggled writing it down ;)

  • 1
    Where are you wanting to add the CSS class? Do you want a specific CSS class added to each block, only when that full group of blocks is used together? Are you wanting a CSS class on a wrapper around that group of blocks? Or could you make use of the built-in body_class() so for example if you are on a single page you could target body.page .banner-block? Can you show an example of the HTML with CSS you are trying to achieve? Depending on where you want the class and what conditions you want it to appear in, there could be many different solutions. :) – WebElaine Apr 30 '19 at 13:06
  • I want to add a class to my content-area, so the container that contains all the items and content that I added on that page. For example: I have a reusable block named 'location detail' with the whole page layout for a location detail page. I want to add a specific class to every page where this 'location detail'-block is used, so I can style all the pages with the 'location detail'-block the same way. – Thessa Verbruggen Apr 30 '19 at 14:04
  • It sounds like you can use the "location detail" block's class. Or are you saying you want to affect other content that is outside of the location detail block? – WebElaine Apr 30 '19 at 14:58
  • My reusable block contains multiple elements. I want to add an extra class to the wrapper-element (for example the article-element on the screenshot) so I can address all the elements within that are used in the reusable block. Am I a bit more clear now? I'm struggling a bit writing down what I exactly need. – Thessa Verbruggen Apr 30 '19 at 15:04
  • That's much clearer now, yes. I'm not sure if there is any way in PHP to add a class to something that far outside of the blocks. You could write a custom jQuery script to enqueue across the site, and if it finds the "location detail" block's class anywhere on the page, then it can add a class to the article tag. – WebElaine Apr 30 '19 at 15:15

Your Answer

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

Browse other questions tagged or ask your own question.