Button group alignment doesn't work as expected

[mghenciu]

Repro:

1. Update Otter to version 1.5.6
2. Go to this demo https://demosites.io/laundry-services-gb/
3. Notice the Button group alignment, from the Header section on the Homepage

Expected

In version 1.5.6

[rodica-andronache]

might be related to Codeinwp/neve#1870. For me, after going into the editor and save the page, everything is ok

[mghenciu]

Thanks Rodica!

Yes, going into the editor and saving the page + Regenerate CSS from Otter options, fixes this problem.

[HardeepAsrani]

Should I close it then @mghenciu?

[selul]

this is still present and the regenerate issue is still present.

You can replicate this by building some button group block on the old version of otter and update to the new one after. The style for the button group is lost or somehow not applied.

It seems that it heals after you manually update the post, by going to editor and click update, BUT NOT when we regenerate the CSS style.

It seems that the action of updating inside the editor alters the post_content and fix the issues, action that is not done using the regenerate CSS since this is not being done in the backend.

I have attached the post_content before clicking the update and after and if you run a diff on it you can see that some ids are changed.
Archive.zip

@HardeepAsrani how we can fix this? It isn't a solution to ask people to go to their pages and click update.

[mghenciu]

After I started manually Re-saving the pages, the alignment for Button-groups it's fixed.
But there is another challenge with border-radius for button-groups. Basically buttons have a 3px border radius, even if in fron-end it looks ok (set to 0) and in customizer the border radius is set to 0.
The border-radius looks to be coming from here: https://s33834.pcdn.co/fitness-trainer-gb/wp-content/themes/neve/style.min.css?ver=2.7.7
@abaicus Maybe you have an idea if this comes from Neve or from Otter.

@selul
The question now it's should I continue Re-saving pages (to fix the alignment issue) and leave the border-radius for later, or?

Customizer

Front-end

Live site:

How it should look:

[mghenciu]

Another thing that's worth mentioning here (regarding the button-group style reset), is that there is a pattern, usually the Reusable Blocks have the style broken - even after you resave the page, but the other ones (not part of a Reusable Block) are fixed after resaving the page.

How it looks:

How it should look:

[selul]

@mghenciu how about if you click edit on the reusable block and save them?

[mghenciu]

Yep, @selul . Already doing this where we have Reusable blocks (and it works) and I am re-adding the buttons/sections were things don't get fixed after resave.
Just wanted to bring this up so everyone is aware. I am not sure if this affects users in any way.

[HardeepAsrani]

@mghenciu Did you click to Edit the Reusable blocks and then Save? Not the post but the Reusable Block. :)

[mghenciu]

@HardeepAsrani Yes, Edit the Reusable blocks and then Save.
And for the pages with no Reusable blocks, Re-saving the post/page fixed the problem (in most cases, because there were some instances where the buttons were empty, so they needed to be rebuild from 0).
And the border-radius issue is still there.

[HardeepAsrani]

@mghenciu That is fixed in development and will be fixed in the upcoming release. Hopefully this week.