Support » Plugin: Gutentor - Gutenberg Blocks - Page Builder for Gutenberg Editor » Anyone else’s Advanced Columns get stacked instead of display as columns?

  • Resolved zigojacko

    (@zigojacko)


    This is how the Advanced Columns block looks.

    Instead of displaying as columns side by side, they’re being stacked on top of one another…

    Anyone else get this issue?

    See https://imgur.com/48nICpW

Viewing 13 replies - 1 through 13 (of 13 total)
  • Thread Starter zigojacko

    (@zigojacko)

    I have found out the cause.

    Lots of Gutentor styles are not loading on the homepage for some reason (but are on other pages) – why would the homepage specifically not be loading stylesheets from Gutentor…?

    Example: /wp-content/plugins/gutentor/assets/library/wpness-grid/wpness-grid.min.css?ver=1.0.0

    Because this is not loading, styles like display:flex are not being applied to the columns.

    I think it might be related to this thread.

    Plugin Contributor codersantosh

    (@codersantosh)

    Hello @zigojacko ,

    Gutentor does not load CSS/JS if the Gutentor Blocks are not used on the page/post.
    Can you share the home page link, I would like to see how you are using Gutentor on the Home page?

    Best Regards!

    Plugin Contributor codersantosh

    (@codersantosh)

    @zigojacko In addition you can force load CSS/JSS from Gutentor => Setting => Optimization => Resources Load from Dashboard.

    Thread Starter zigojacko

    (@zigojacko)

    @codersantosh I can’t share the link to this site publicly but I was just inserting a Gutentor block into the Fullpage for Gutenberg plugin (which just allows you to create sections on the page).

    I’d ideally not like to load on every page when this site is launched as it would be unecessary on any pages that don’t contain Gutentor blocks.

    Thread Starter zigojacko

    (@zigojacko)

    @codersantosh so I queried this issue with the developer of Fullpage for Gutenberg and I have included their response below – just to clarify what the problem here is first:-

    Fullpage for Gutenberg allows us to create sections on a page which can be scrolled to via various means which allow us to insert blocks into as you would do normally. When I insert a block from Gutentor into one of these sections, lot’s of required stylesheets do not load on the page at all meaning that the blocks cannot work (I’ve tested with several now and they’re all broken).

    I showed the developer of Fullpage for Gutenberg an example of a page which does not use their plugin but uses your blocks and Gutentor styles load fine and also showed them a page which uses their plugin and uses your blocks and various Gutentor styles do not load on the page in the head at all.

    Response from Fullpage for Gutenberg:-

    This is weird! I know for a fact that FullPage for Gutenberg plugin does not intercept any enqueued styles but I don’t see the styles either.

    So I installed Gutentor plugin, which I’ve never used before, saw the issue and investigated it further. I’m now 100% sure this is not an issue or a bug with FullPage for Gutenberg plugin. FullPage for Gutenberg plugin complies with Gutenberg standards 100% and it is actually working without problem.

    This issue is related to the inner blocks FullPage for Gutenberg uses (which is a feature of the WordPress) that Gutentor plugin does not seem to support. I’m sorry but I have nothing to do here. I recommend using another Gutenberg plugin such as Kadence or Ultimate Blocks or any other plugin that actually works.

    So before we drop Gutentor completely (which would be very frustrating for us), please can you investigate this and explain how you are enqueuing the styles based on what pages contain your blocks and let me know if you understand what is going on and if you can fix it?

    By the way, I’ve also tried by loading the styles on all pages regardless of what Gutentor blocks exist on the same page and we get the same issue so that doesn’t even resolve the problem neither.

    Plugin Contributor codersantosh

    (@codersantosh)

    Hello @zigojacko ,

    We checked the Gutentor with FSE themes. As mentioned found issues, particularly on template parts CSS.
    Gutentor saved CSS in the static files per page/post. The actual content and CSS are saved in different places, which is different from other regular blocks. It seems like it is missed while saving different template parts at once on FSE. The issue will be fixed in the next version. The next version will be released within a week or two. Thanks for pointing it out.

    Best Regards!

    Thread Starter zigojacko

    (@zigojacko)

    Hey @codersantosh ,

    Thank you for taking the time to actually investigate this and identify the problem and spend the time working on a fix.

    That’s great to hear if we can resolve this with the next update as will save me a lot of time.

    Thanks ๐Ÿ‘

    Plugin Contributor codersantosh

    (@codersantosh)

    Hello @zigojacko ,
    Please update the plugin to the latest version. The dynamic CSS in the latest version should be compatible with the FSE.
    We have also tried Gutentor FSE Demo 01 using Twenty Twenty Two Theme with no issues.
    Lets us know if you find any further issues or have any suggestions.

    Best Regards!

    Thread Starter zigojacko

    (@zigojacko)

    Hey @codersantosh – I installed the latest version of your plugin but I still have the same problem in the website frontend – the plugin stylesheets are not being loaded so blocks like my advanced columns are all broken…

    Plugin Contributor codersantosh

    (@codersantosh)

    @zigojacko , After installing the latest version of the Gutentor clear the cache, from the WordPress dashboard go to the FSE editor and resave the page. After resaving the page view frontend. Let me know if this works.

    Thread Starter zigojacko

    (@zigojacko)

    @codersantosh that’s made no difference I am afraid.

    Issue is still exactly like before, if Fullpage for Gutenberg is enabled on the page, then your styles for your blocks are not even called like the following example:

    .mcw-fp-section {
    .grid-container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
    }

    • This reply was modified 1 month, 2 weeks ago by zigojacko.
    Plugin Contributor codersantosh

    (@codersantosh)

    @zigojacko it seems like the issue has been resolved ๐Ÿ™‚

    Thread Starter zigojacko

    (@zigojacko)

    @codersantosh yeh we sorted it out by moving across code from a compatible theme with FSE and now it’s working – thanks for your earlier time looking into this ๐Ÿ‘

Viewing 13 replies - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.