GutenBricks
  • ๐Ÿš€ Getting Started
    • Next: Common Troubleshooting Issues
    • Next: Configure Page Template to render
    • Next: Manage Block using Template Bundles
    • ๐Ÿค”Most common troubleshooting step
  • ๐ŸŒŸFeatures
    • Working with Elements
    • Variants
    • InnerBlock
    • Fine-Tune Text Editing
    • Dynamic Class
    • Code Block with Dynamic Data
    • ๐Ÿ’กQuick Tips
      • Dynamic Short Code
      • Accordion Block using InnerBlock
    • โšกAdvanced
      • Custom Block HTML ID
      • Value Binding (coming soon)
      • Creating "comments and docs" inside a template
      • Globally Updating Block Styles
      • Block Wrapper Dynamic Class
      • Working with WPML or Polylang
  • ๐Ÿ€Dynamic Data
    • GB:Meta
    • ACF
      • Setting Up ACF
      • Post Object Field (in-progress)
    • Meta Box
      • Setting Up Meta Box (In-progress)
      • Post Field (in-progress)
    • Built-in GutenBricks Dynamic Data
  • ๐ŸฐClient Experience
    • Documenting Blocks
    • Custom Block Preview
    • Custom Pop-up Text
    • Default Page Template
  • ๐Ÿ› ๏ธCustomizing Gutenberg
    • Gutenberg Editor Custom CSS
      • CSS Snippet: Make the block section not full height for ACSS
  • ๐ŸคนResources
    • ๐Ÿ‘ฉโ€๐Ÿ’ป Developer API
      • echo:gb_current_element_id returns unique ID
      • GutenBricks Events for Gutenberg Editor
      • gb_get_field()
      • Unique IDs
      • Filter: gutenbricks_bricks_theme_name
    • ๐Ÿ”Œ Third Party Integrations
      • ACSS integration with GutenBricks
        • ACSS 2.8.0 Section padding missing
      • ACF / Meta Box integration
    • โค๏ธ Our Approach and Philosophy
  • ๐Ÿ“– Changelog
    • Known issues and bugs
    • Current Changelog
    • Past Changelog
      • v1.1-RC (Released as v1.1.0)
      • v1.0-RC (Released as v1.0)
Powered by GitBook
On this page
  1. Features
  2. Advanced

Block Wrapper Dynamic Class

PreviousGlobally Updating Block StylesNextWorking with WPML or Polylang

Last updated 7 months ago

The HTML structure inside the Block Editor may differ slightly from the one rendered on the frontend. Most notably, an extra wrapper <div> around the actual block content.

In this case, some CSS applied to the outermost element might not work. For eg, grid-column that requires the immediate parent to be a grid.

To solve this issue, users can add dynamic classes to outermost block wrapper using Block Wrapper Dynamic Class (under template settings -> Gutenbricks:Block.)

For example, you can declare something like cold-span-{dynamic_variable} and the dynamic class will be applied to the block wrapper like this:

Now you can see column-span working because the block wrapper which is the grid's immediate child has col-span-5 class.

๐ŸŒŸ
โšก
Inside Gutenberg editor, the <div> in the red box is a wrapper wrapping <section> which is the actual content. Of course the <div> wrapper is only for Gutenberg Editor to keep tracking and managing the blocks and not rendered in the frontend.
col-span-5 has been applied to the block wrapper where "5" is from dynamic_variable.