Issue when inserting synced pattern and then detaching

  • Resolved aaylasecura

    (@aaylasecura)


    5 months, 3 weeks ago

    Hi there, I noticed an issue when using detached Gutenberg synced patterns that contain Greenshift blocks. Changing the style of detached patterns applies those changes to all other instances of that patterns on the same page. Steps to reproduce issue are:

    1. create a synced pattern with a Greenshift block
    2. insert that synced pattern again on the page (or duplicate)
    3. detach the block so it’s no longer synced
    4. edit any on the now detached pattern, e.g. apply a rotation transformation
    5. the result is that the style is applied also to the synced pattern as if they are still connected

    The issue is coming from the fact that Greenshift assigns an element ID to each block and generates the CSS as specific to that ID, inserting it globally on the page under style with ID “greenshift-post-css-inline-css”; however when inserting synced patterns and then detaching them, the ID is not regenerated and remains the same as the ID of the block that is the block in the synced pattern.

    Some possible suggestions for fixing that come to mind:

    1. regenerate the block ID when a block is detached from the master synced one
    2. regenerate the block ID whenever any property on it is changed
    3. use some other means of applying the CSS to each block that doesn’t rely on the element ID; perhaps you can use scoped styles as you do in other places

    Perhaps there is a better way. For now my workaround is whenever I want to use a synced pattern but detach and modify that instance is to recreate the structure from scratch and copy/past style attributes. This creates the new blocks with unique IDs.

    I think in general it is best to avoid automatically assigning ID to blocks because when inserting a synced pattern multiple times on the page you end up with elements with duplicate IDs which is against the HTML spec, even if it doesn’t apparently cause issues until you detach a block and change it.

    Perhaps the best thing would be to instead generate a unique class rather than ID, and use that for styles. I.e. instead of <div .... id="gspb_container-id-gsbp-e8ae152"> insert that as a class, like <div class="... gspb_container-id-gsbp-e8ae152"> and define its style for .gspb_container-id-gsbp-e8ae152 rather than #gspb_container-id-gsbp-e8ae152. You would still need to regenerate the class whenever a block is detached or changed of course. Or if you use scoped styles, this might be another way.

    _____

    An interesting observation is that duplicating a block regenerates the ID, unless that block has come from a detached pattern. I.e. inserting a synced pattern, detaching it and then duplicating the block does not regenerate a unique ID, but duplicating a block that was never saved as a synced pattern, does recreate the ID as unique.

    • This topic was modified 5 months, 3 weeks ago by aaylasecura. Reason: Added further thoughts
    • This topic was modified 5 months, 3 weeks ago by aaylasecura.
Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter aaylasecura

    (@aaylasecura)

    The same issue happens with simple element blocks like a DIV container, even though they don’t have an element ID set; rather the block’s CSS is set as [data-style-id=gsbp-3df3e6b]{ ... } and that id is not regenerated for a block when it’s detached from a synced pattern. And even though the CSS for these is in fact a scoped style, it’s inserted in the parent element, so it applies also to siblings of the element. So I create a DIV container, save it as a synced pattern, duplicate it, detach the copy, apply color red to the detached copy and the result on the page is this:

    <div class="entry-content wp-block-post-content has-global-padding is-layout-constrained wp-block-post-content-is-layout-constrained"><style scoped="">[data-style-id=gsbp-3df3e6b]{color:red;}</style>
<div data-style-id="gsbp-3df3e6b"></div> <!-- this is a synced pattern with no style -->
<div data-style-id="gsbp-3df3e6b"></div> <!-- this is the same synced pattern but has been detached and has had color: red applied to it-->
</div>

    Both have the same ID and the style applied to the detached on is scoped to the parent that contains both block, so applies to both.

    Plugin Author wpsoul

    (@wpsoul)

    yes, ID will not be regenerated if you use synced pattern because it’s loaded from other page. But this can happen only if you deattach many the same patterns on the same page. But if you reload page, this should reassign IDs, also, you can simply duplicate block and this will also regenerate ids.

    Thread Starter aaylasecura

    (@aaylasecura)

    Hi there and thank you for replying. However this is not what I’m seeing. I just tested this on a new clean WordPress install with just Greenshift, even with refreshing the page at each step:

    1. Create a new page
    2. Insert a Container block and set size and background color for it
    3. Save and refresh the page
    4. Save the container as a synced pattern
    5. Save and refresh the page
    6. Duplicate the synced patter or reinsert it again
    7. Detach the clone
    8. Save and refresh the page
    9. Duplicate the detached clone
    10. Save and refresh the page
    11. Change the background color for the detached clone
    12. Save and refresh the page
    13. The detached and later duplicated clone still has the same ID as the original synced pattern and its new background color applies to both blocks

    There’s no way to force it to regenerate its ID once it’s been saved as a synced copy. This only happens if it has been saved as a synced copy; otherwise, as you say, it will regenerate its ID when it’s duplicated and page is refreshed and resaved

    Plugin Author wpsoul

    (@wpsoul)

    you are duplicated pattern that has no sense because pattern has no ID. You must detach pattern, then duplicate container.

    Thread Starter aaylasecura

    (@aaylasecura)

    I’m sorry, I’m confused… I’m saying I did detach the pattern, and then duplicated it (the detached container), and it still didn’t generate a new ID. Am I misunderstanding you? Did you try my steps above and confirm that it generated a new ID for you?

    Plugin Author wpsoul

    (@wpsoul)

    yes, I tried. Can you make video how you do this?

    Thread Starter aaylasecura

    (@aaylasecura)

    Hi there, sure, I just made a video: https://youtu.be/YocM393DVEE

    Thread Starter aaylasecura

    (@aaylasecura)

    Just to add, perhaps the misunderstanding is coming from the fact that if I detach ALL the instances of the synced on the page, then indeed they do get different IDs. But my issue comes from wanting to have a synced pattern on the page and have a detached copy of it that is then modified on the same page. Not sure if this is just a shortcoming of WordPress that the IDs seem to always be linked.

    Plugin Author wpsoul

    (@wpsoul)

    Unfortunately we can’t check if it’s detatched or not. We have this in past, but this creates infinite loop and block breaking because WP has dynamic loading of reusable templates and this checking creating infinite loop. So, the only thing what is possible is to use what I have described

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