Section Background CSS Specificity

  • The inline CSS generated for Section background is not specific/localized enough to just the Section it’s supposed to applied to. For example, if I have a Section nested in another Section, and the parent section has a background, the CSS cascades down to the child Section because the selector is .parent-section-id .grids-s-w_i:before rather than only selecting the very next .grids-s-w selector.

    I resolved this by adding a > in between the two css classes in /src/Core/Blocks/Section.php line 231, like $style .= sprintf( '%s > .grids-s-w_i:before {', esc_attr( $selector ) );

    Not sure if this is a breaking change elsewhere, but worth considering adding to your next version as I’ve patched it locally.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Simone Maranzana

    (@simo_m)

    Hi there,

    thanks for reporting, we are working on a new Grids version in order to make it compatible with the new Site editor. We will definitely take a look at the nested sections in order to fix this issue.

    Best,

    Simone

    Thread Starter amddtim

    (@amddtim)

    This is still not scoped correctly in version >=1.3.0. We have the same issue with the css variables, that nested background pseudo elements look up the dom tree for the closest declaration of --grids-section-background.

    Plugin Contributor Simone Maranzana

    (@simo_m)

    Hi there,

    thanks for reporting, we are working to fix this specificity issue for the next update.

    Regards,

    Simone

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Section Background CSS Specificity’ is closed to new replies.