Inconsistent nested container alignment

  • Resolved frzsombor

    (@frzsombor)


    1 year, 4 months ago

    I have a few top level Containers on a page (sections) and in each “Container”, there is an “Inner Container” (also a GB Container). They both are display:block by default. Each “Inner Container” has a similar named global class .inner-container, which has margin-left:auto and margin-right:auto set to center them. With this, the “Inner Container” is automatically positioned to center on the frontend. However, if I don’t set the “auto” margins explicitly on the “Inner Container” blocks in the Block Editor, the container floats to the left, because in Block Editor, there is also a hardcoded .gb-container>.wp-block { margin-left:0; margin-right:0 } css, coming from “generateblocks/dist/blocks.css”, which overwrites the Global Style’s CSS.
    See: https://imgur.com/a/udJV9DJ

    Is this something you are aware of? I’ve tried temporarily disabling .gb-container>.wp-block CSS in inspector, and this way some containers showed up correctly, but also others are don’t. I realized that the reason is that WP Block Editor’s default CSS also defines margin-left:auto for all .wp-block and in the Block Editor (and only there) all .gb-container are also a .wp-block. This causes inconsistency with margins on blocks in the Block Editor and the Frontend.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support ying

    (@yingscarlett)

    1 year, 4 months ago

    Hi there,

    Global styles are a GB Pro feature, we are not allowed to offer support to questions related to the pro version per WP’s regulation.

    Any chance you can post the question in GB’s pro forum? Thanks for your understanding!

    Btw I’m not aware of this issue before, would be happy to take a look!

    Thread Starter frzsombor

    (@frzsombor)

    1 year, 4 months ago

    Hi @yingscarlett,

    Thanks for your reply, I understand.

    However, just for future reference, in the meantime, I was able to verify that this issue seems like fixed in v2.0 Beta! I have also verified that the issue was using :where(.editor-styles-wrapper) .my-global-style-class in v1, but in v2 the style is defined as .editor-styles-wrapper .my-global-style-class, which has higher priority than the other styles.

    Marking as “resolved” for now.

    Plugin Support ying

    (@yingscarlett)

    1 year, 4 months ago

    Glad to hear that 🙂

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Inconsistent nested container alignment’ is closed to new replies.