CoBlocks 3.0.1 appears to break Elementor page builder stylesheet order

  • Resolved Angela Bowman

    (@askwpgirl)


    1 year, 8 months ago

    CoBlocks 3.0.1 effects the order in which Elementor css files are loading on the page causing layouts to break on sites dramatically. This is because styles need to load in a particular order in order to cascade properly. This problem occurs with any theme and with only Elementor and CoBlocks active. This problem did not occur with CoBlocks 2.25.5.

    To test:

    1. Edit a page with Elementor and add an icon box widget to the page.
    2. In the icon box widget styling, set the styling to be Centered.
    3. View the page.
    4. The icon box widget will show its content centered. https://www.evernote.com/shard/s20/sh/4c0dd1f2-5e70-4db3-b473-3699601a8ea4/llfcNSWJI0WcCWl8BURpQpEMfhjlgEsOJCX_f0ORmoSWLmP1_LJRYX3qFQ
    5. View the page source of the page. Take note of the order in which the Elementor stylesheets are loading. See screenshot: https://www.evernote.com/shard/s20/sh/633acd60-8de2-4c56-842e-c8989ac59851/tBZGw26WsYMzHjqZwzxTYxOA2hQ87NSl9jsl41DJ6M-kTVf3euu6HdNF-w
    6. Activate CoBlocks 3.0.1 plugin.
    7. Refresh the above page. The icon box items will no longer be centered. https://www.evernote.com/shard/s20/sh/16391c93-390d-43f2-b6e4-0f22e538b790/SmLtIAygPk87KEiHGoaz8VuvfDBOAzD8NCqQ9ZUYQaxpOH0Wr6D6YHAsgw
    8. View the page source of the page. Take note of the order in which the Elementor stylesheets are loading. Notice, the are in a complete different order thus wrecking the cascading of the styles correctly resulting in broken layouts. See screenshot in step 5.
    9. Revert CoBlocks to 2.25.5.
    10. Refresh the above page. Note that the styling is correct.
    11. View the page source. Note that the stylesheets are loading in the correct order as they should.
    12. CoBlocks 3.0.1 appears to be changing the order in which other plugin’s stylesheets are loading. This may effect more than Elementor. I have not tested on other hosts or with other page builders.

    Please note, in the above example, I am using the simple example of the icon box so people can replicate the problem. However, since this effects many styles on each page, the impact can be catastrophic on the site in terms of breaking layouts and designs.

    I don’t know if the stylesheet file orders is the specific cause of the styling issues, it’s just what jumped out. There are also inline styles that are out of order with the 3.0.1 CoBlocks installed. So someone needs to dig a bit deeper to see what is really breaking the styles. The stylesheet and inline styles order is certainly important, though.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Evan Herman

    (@eherman24)

    Hi @askwpgirl

    I’ve been trying to reproduce this, but I can’t seem to even following your steps exactly. I am running a local instance of WordPress 6.1.1, PHP 8.1, the free version of Elementor (https://www.ads-software.com/plugins/elementor/) and CoBlocks 3.0.1. I’ve tested with Go (https://www.ads-software.com/themes/go/) and TwentyTwenty.

    I’ve added the icon block, centered it and then viewed the editor and front of site with and without CoBlocks 3.0.1 active, but I’m not seeing any changes visually.

    Those are the only two plugins I have active on the site, and have tried a few different themes but can’t get the same issue you are seeing.

    I’ll keep testing and see I can reproduce it, because I’m very curious as to what the issue may be that you are seeing.

    Thread Starter Angela Bowman

    (@askwpgirl)

    @eherman24

    On further evaluation, it appears CoBlocks appearance issue is related to Elementor’s Improved Asset Loading Setting under Elementor > Settings > Features > Improved CSS Loading

    If Improved CSS Loading is Active, then the issue with CoBlocks 3.0.1 arises.

    However, please inspect your page source to be sure that you are also taking note of the HTML source code and the impacts CoBlocks is having on the ordering of stylesheets REGARDLESS of whether the styling is correct on the front-facing page. CoBlocks should not be changing the order of these CSS files.

    Thread Starter Angela Bowman

    (@askwpgirl)

    Please see write up here as well:

    https://github.com/elementor/elementor/issues/21802

    Plugin Author Anthony Ledesma

    (@paranoia1906)

    Hi @askwpgirl,

    Thanks again for taking the time to write up this issue. We are still not sure what is causing this behavior and are still working on it. I’ve taken the liberty to re-create this issue on GitHub for our development team and possibly the Elementor development team to collaborate. For your reference here is the issue I created based on your report: https://github.com/godaddy-wordpress/coblocks/issues/2517

    Best regards,
    Anthony

    Thread Starter Angela Bowman

    (@askwpgirl)

    While Improved CSS Loading in Elementor settings makes any issues obvious, there is also the other underlying issue of CoBlocks changing the entire order of how CSS stylesheets load REGARDLESS of whether the Improved CSS Loading is active or not.

    So be sure your GitHub ticket includes this because of CoBlocks is impacting the order in which Elementor’s stylesheets are loading, it could impact the order in which other plugins’ stylesheet are loading, which can be problematic even if people don’t immediately notice a visual issue with this. Eg they may find certain settings to override certain styles don’t work.

    Plugin Author Anthony Ledesma

    (@paranoia1906)

    Hi @askwpgirl,

    You are correct that specifically altering a plugin’s load order is not an acceptable practice. That would, for instance, likely cause issues with CoBlocks if another plugin were to alter our load order purposefully. I can tell you there are zero intentional changes that might affect the plugin load order. For that reason looking for something that explicitly changes load order would be dead-end I can say that as a developer of CoBlocks. However, I believe that something somewhere is affecting the load order. Possibly a side-effect, a bug, something that should not be happening. I think it may even be a core bug that we have inadvertently raised somehow by using a public API.

    At this point, we just do not know yet what is happening. If anything let me tell you that our team is aware of the issue and we are looking to understand why that is happening to you. If we can work with Elementor to find a solution, even better.

    Best regards,

    Anthony

    Thread Starter Angela Bowman

    (@askwpgirl)

    @paranoia1906 –

    This issue is now solved with CoBlocks 3.0.2 –

    Fix issue around missing loader dependencies. #2515

    I tested with the update, and the Elementor issues are all resolved with this update. The order of stylesheets is now correct and the Improved CSS Loading now works fine as well.

    Plugin Author Anthony Ledesma

    (@paranoia1906)

    Hi @askwpgirl,

    Glad to hear the issue was resolved with the patch version. Indeed the changes really had nothing to do with loading of assets but rather was a bug relating ‘the loop’ around posts. Pretty strange indeed. Hopefully we never see this issue again.

    Best,
    Anthony

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘CoBlocks 3.0.1 appears to break Elementor page builder stylesheet order’ is closed to new replies.