Block save as template and add in new page dont change the class

Not interested in fixing this? This is what my CSS looks like now:

@media (min-width: 768px) {
.block-302ef559-3708-42a3-83a5-d6ecdab28408 {
padding-right: 60px;
}
}
@media (min-width: 768px) {
.block-302ef559-3708-42a3-83a5-d6ecdab28408 {
padding-right: 60px;
}
}
@media (min-width: 768px) {
.block-302ef559-3708-42a3-83a5-d6ecdab28408 {
padding-right: 60px;
}
}
@media (min-width: 768px) {
.block-302ef559-3708-42a3-83a5-d6ecdab28408 {
padding-right: 60px;
}
}

• This reply was modified 5 months ago by frontendbaer.

Hi @frontendbaer

Thank you for reaching out and apologies for the delayed response.

I’m not 100% sure what you mean. It sounds like you have converted a block to a pattern, then added that pattern to another page and then attempted to change settings on the block. When you do this it then changes the settings across your site because it has the same class as other instances of your pattern. If this is the case, below details how you can resolve this, however, if I have misunderstood the issue please let me know the exact steps you have taken so that I can recreate the issue and do further investigation.

Because you have created a pattern all of the block attributes from the original block are stored within the pattern and each time you add that pattern to a page those attributes are included on the block. This includes a block_id attribute which is used to generate the class. Without this attribute a class couldn’t be generated and therefore styles couldn’t be applied on the front end of the site.

It sounds like you want to add a pattern to a page and then for it to work independently from other instances of that pattern eg: if you update a style on one instance it shouldn’t update the others. To achieve this you need to regenerate a new class specific for that instance of the pattern.

You can do this by editing the page where you have added the pattern and going to the code editor view. On your block you will see there is a block_id attribute (see image below). If you remove that and then exit the code editor view a unique block_id will be generated and that instance will have a unique class added which should allow you to change the settings for that individual instance.

Hopefully this helps solve your issue. But, as I say if I have misunderstood please let me know and I will do my best to help.

Thanks
Miles

Hi Miles,

thanks for your reply, you have described the problem correctly. Thanks for the tip with the code editor, it’s certainly not the best solution, can you perhaps write the ID in a field on the right so that it’s easier to get to it? Especially for people who can’t coding ??

Hi @frontendbaer

Just wanted to let you know, I have released an update and you can now manage the block ID in the settings panel. There’s a new section labelled Block ID, if you open that you will see a blocks current ID, you can either change it or delete it completely and a new ID will be automatically generated. Hopefully this makes it easier for you in future.

Thanks
Miles

Hi Miles,

very nice, thank you.

Regards