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
      • Value Binding
    • 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
    • 🧭Road Map
  • 🏀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.