Error with reusable blocks using blocks from Generate Blocks

  • Resolved jivelazquez

    (@josivela)


    3 years, 2 months ago

    I have the following error with reusable blocks using blocks from Generate Blocks.

    I create a composition with only blocks from Generate Blocks, save it and convert it to a reusable block.

    I insert that block in another page, I display it in the front and everything that is in a green color #07a36a (text, background, border) is replaced by the selectable blue that comes by default (var(–accent)).

    There is also a button, but it retains its color and does not change. I think it will be because I have defined the colors of the button through CSS in the style.css of Child Theme.

    If I edit the problem page, the reusable block looks perfect just like the original.

    If I edit that reusable block, make changes, they don’t update on the front of whatever page I’ve inserted it into. On the other hand, if I go to the back of those pages, it shows up fine.

    I don’t know if this is a Generate Block problem or a General problem.

    I hope this helps you continue to improve.

    Thanks for your great work.

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

    (@yingscarlett)

    3 years, 2 months ago

    Hi @josivela ,

    Can you link me to the page(s) where I can see the re-usable block?

    Let me know!

    Thread Starter jivelazquez

    (@josivela)

    3 years, 2 months ago

    Hi @yingscarlett,

    This is the link to the page showing the Reusable Block looking correctly.

    The block I am referring to is this:

    Image 1 – Correct

    On this link you can see the reusable block that is not displayed correctly.

    It’s almost at the bottom of the page and it’s this:

    Image 2 – Not correct

    • This reply was modified 3 years, 2 months ago by jivelazquez.
    • This reply was modified 3 years, 2 months ago by jivelazquez.
    Plugin Support ying

    (@yingscarlett)

    3 years, 2 months ago

    Did you insert same re-usable blocks twice to the same page, I’m seeing this one which has the exact ID of the one you attached:

    https://www.screencast.com/t/h8wnGQtfN5kF

    GB blocks generate CSS(style) dynamically based on the block IDs, but re-usable blocks have the same IDs. If more than 2 blocks on the same page have the same ID, their styles will try to override each other.

    To fix this issue:

    1. insert the re-usable block.
    2. convert it to a regular block.
    3. select the very outside container, click the 3 dots icon, duplicate.

    This duplicating process generates a new set of IDs for all the GB blocks inside the container block.

    Let me know if this helps!

    Thread Starter jivelazquez

    (@josivela)

    3 years, 2 months ago

    That was the mistake.

    I made the second reusable block (the one that gives problems) from the one with the same ID and that’s why they have the same ID.

    It keeps giving errors, if I copy or duplicate all or any part, be it a complete reusable block or a part of it. I can’t be sure what the error is, so there’s no other choice but to create them new from scratch, since I think there’s no way to change the id.

    Every time a block is duplicated (in any case or with any plugin) its ID should change, since the ID is for that, to identify an element as unique and if you are putting the same ID when duplicating you are not complying with this .

    In summary for any other that happens to him. If you want to be sure that you won’t have a problem inserting a reusable block, so far, you have to start creating each block from scratch. I have tried to duplicate, copy and paste a block (Example of a headline, an outline, etc) that gave me problems and if I use it it continues to give problems. I don’t know if this is because of how Generate Blocks works or if it’s a Gutenberg problem.

    It’s not the best solution as it removes a lot of functionality but at least it allows you to work.

    Thanks for your help, @yingscarlett

    Plugin Support ying

    (@yingscarlett)

    3 years, 2 months ago

    You are welcome, just be noted that copy/paste doesn’t generate new IDs, only duplicating would do so.

    And do not use a re-usable block inside another re-usable block, it might create infinite loop issue.

    Thread Starter jivelazquez

    (@josivela)

    3 years, 2 months ago

    I did not create a block inside another. What I did was the following.

    I inserted the reusable block into a page, converted it to a normal block, changed it, and created another reusable block.

    This shouldn’t cause a problem if each block you insert into another block prefixes it with the id of the parent block and adds the id of the child and so on. I don’t know if this can be possible, but as it is now it is ineffective and uncomfortable and above all if it gives you problems you don’t know what it is because it doesn’t notify you that something is being done wrong or inappropriately.

    Plugin Support ying

    (@yingscarlett)

    3 years, 2 months ago

    I inserted the reusable block into a page, converted it to a normal block, changed it, and created another reusable block.

    The above step will definitely cause issue.

    After converted it to a regular block, you need to duplicate (not copy/paste) the entire block in order to generate a new set of IDs for the block, then remove the original one.

    Now you can change it and convert it to another reusable block after.

    • This reply was modified 3 years, 2 months ago by ying.
    fernandoazarcon2

    (@fernandoazarcon2)

    3 years, 1 month ago

    Hi there! We haven’t heard back from you for a while now so we’re going to go ahead and set this topic as resolved. Feel free to reply if you need any more help.

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

The topic ‘Error with reusable blocks using blocks from Generate Blocks’ is closed to new replies.