Reusable templates + ajax loading results in styling issues.

  • Hi there, thank you for the incredible plugin!

    I believe I understand why this bug happens but I want to confirm if this is indeed the only possible result so far.

    I’m using the amazing reusable template parts + ajax loading solution. As an extra note, I’m making my Reusable Templates (now called Patterns) Synced.

    The dynamic loading works. however, If the ajax loading is used, some styling goes broken. Specially those related to core container classes, such as .wp-container-core-group-is-layout-<some-index> from a Group Block. The reason seems obvious… when I inspect the browser I can see that there are two elements with the same class, one from one reusable template part, another from the lazy-loaded one. So it looks that the way WordPress renders the dedicated css for each of these classes won’t work because not all page is loaded from start, thus it cannot properly parse the content to create the indexes.

    Is that it? Do you see any alternative approach for that?

    Thanks for any clarification.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author wpsoul

    (@wpsoul)

    unfortunately, that’s true, it’s because core blocks use style rendering before block is loaded. As you understand, in ajax loading, block is not presented on page so styles are not loaded.

    But you can use GS blocks instead core blocks, in this case, all styles will be loaded correctly

    Thread Starter Mateus Machado Luna

    (@wetah)

    Sadly I’m working on a project where tens of Core Blocks are being used in multiple sections, it would be really hard to migrate them and reliably assure that future updates won’t insert Core Blocks. I believe this would be easier if we could guarantee that block variations would migrate every aspect of configuration when transforming from Core to GS ones, but that is also hard to assure.

    Would you see any technical hack, something that would required me to put hands on code to overcome this? I’m willing to implement something on the theme side if necessary.

    Plugin Author wpsoul

    (@wpsoul)

    The only thing in mind is that you can load block without ajax, check which styles they use on page, then, save styles separately from block. But I think that this task is more harder than migration to GS blocks.

    Also, you can use it without ajax.

    Thread Starter Mateus Machado Luna

    (@wetah)

    Thanks for the help, I’m using without Ajax by now. But the feature is too nice to be left out, I’ve decided to open an issue in core to see if they come up with anything that could solve this… not sure it end up in something but it is worth a try:

    https://github.com/WordPress/gutenberg/issues/64070

    Thread Starter Mateus Machado Luna

    (@wetah)

    Sorry for bringing more trouble than solutions… The Template Part feature is such a powerful tool that it ends up bringing these challenges… I think I noticed one problem that will happen even if we’re not working with Ajax…

    If I have a GreenShift Row block inside template part “A” and apply some settings to it, for example, define a max-width, the plugin will automatically render some css like:

    #gspb_row-id-gsbp-f91b30f > .gspb_row__content {
      max-width: 870px;
      justify-content: center;
    }

    Then if I copy this block and paste it in another template part “B”, and later tweak the max-width… rendering both templates in a single page, I’ll have conflicting styles, right? I suppose there is some logic that avoids this when we’re inside the same editor that obviously cannot be checked when loading from the template part shortcode…

    Plugin Author wpsoul

    (@wpsoul)

    please find solution in article https://greenshiftwp.com/documentation/troubleshooting/

    Plugin Author wpsoul

    (@wpsoul)

    closing

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