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. Resources
  2. ๐Ÿ”Œ Third Party Integrations
  3. ACSS integration with GutenBricks

ACSS 2.8.0 Section padding missing

PreviousACSS integration with GutenBricksNextACF / Meta Box integration

Last updated 1 year ago

Reported by Dave Foy.

[RESOLVED] Issue with sections with no paddings

ACSS 2.8.0 introduced a new CSS rule that removes padding from a section nested in another section. This caused an issue when the user used the Post Content element to render WordPress content while wrapping the Post Content element with a section. This will remove all the padding within all the otherwise top-level sections.

:where(section:not(section section)) {
    padding-block: var(--section-space-m);
    padding-inline: var(--section-padding-x);
}

Since GutenBricks 1.0.0-rc2.6 we've decided to add the following CSS for ACSS > 2.8.0 to solve this issue:

/* GutenBricks ACSS nested section patch */
:where(.brxe-post-content section:not(.brxe-post-content section section)) {
  padding-block: var(--section-space-m);
  padding-inline: var(--section-padding-x);
}

A special thanks to Dave Foy and Chad Botha for spotting and debugging this bug.

๐Ÿคน