Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Button alignment issue after update 13.7.2 #42720

Closed
Johanwalter opened this issue Jul 27, 2022 · 8 comments
Closed

Button alignment issue after update 13.7.2 #42720

Johanwalter opened this issue Jul 27, 2022 · 8 comments
Labels
[Block] Buttons Affects the Buttons Block Needs Testing Needs further testing to be confirmed. [Status] Needs More Info Follow-up required in order to be actionable.

Comments

@Johanwalter
Copy link

Description

After update Gutenberg to 13.7.2, button alignment on front end does not work
It is different than back end

Step-by-step reproduction instructions

On front end buttons are always aligned left and cannot be changed whatever is settings on back end
On back end alignment is correct, center and change if we modify settings

FRONT END https://ibb.co/5TWTH42
BACK END https://ibb.co/FYP3dJp

FRONT END https://ibb.co/BKXxd2r
BACK END https://ibb.co/y8w36qN

Buttons alignment were correct before update on 13.6.0

have managed to fix issue with the following custom css

[class*=wp-block-] [class*=wp-block-] {
text-align:center;
}
This CSS applies to all buttons, by chance all my button are centered.

I have updated this morning 13.7.3 it didn’t change anything

I have a stagging website that I always update before updating prod website, issue didn’t happen on stagging website, only on prod website.
I have an other website with same template, issue didn’t happen on this website (prod or stagging) but issue did happen on this other website on stagging website when updating Gutenberg 13.7.0. I edited page, saved page and it solved issue.
That’s first thing I have tried yesterday but it didn’t work.
I have also tried to place !important after align-items in .wp-block-buttons.wp-container-1, it didn’t work. It is like button block is “frozen” on front end and does not accept any css change.

.wp-block-buttons.wp-container-1 {
align-items: center !important;
}

Screenshots, screen recording, code snippet

No response

Environment info

Wordpress 6.0.1
Gutenberg Version 13.7.3
Issue is on all browser

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@paaljoachim paaljoachim added [Block] Buttons Affects the Buttons Block Needs Testing Needs further testing to be confirmed. labels Jul 27, 2022
@paaljoachim
Copy link
Contributor

paaljoachim commented Jul 27, 2022

Originally reported here: https://wordpress.org/support/topic/button-alignment-issue-after-update-13-7-2/

Testing as I understand it. Please adjust @Johanwalter

WordPress 6.0.1
Gutenberg plugin 13.7.3
Theme: Twenty Twenty One

  1. Went to a current page.

  2. Added two buttons.

  3. In the top parent Buttons block I aligned right.
    Screenshot 2022-07-27 at 09 52 13

  4. Checked the frontend and both buttons are aligned right.
    Screenshot 2022-07-27 at 09 52 37

I assume there are some steps that I am missing so I need you to write a step by step test instructions so that I can figure out what is going on.

@Johanwalter
Copy link
Author

You did testing right
Issue happened after update from 13.6 to 13.7.2 on my prod website
On my stagging website, I updated from 13.6 to 13.7 to 13.7.1 to 13.7.2, I didn't have the issue

On an other website with same template and WP + Gutenberg version, I had issue on stagging website when updating from 13.6 to 13.7
issue disappeared when I edit the page and saved it.
On this other website, when updating from 13.6 to 13.7.2, issue didn't happen

I have noticed this issue only from 13.7 and it happens just after update and not on all websites, no issue before 13.6
Back end shows correctly, front end does not show like back end.

Which modification have been made on button block between 13.6 and 13.7 ?
text-align:center in custom CSS solve issue, why do I need to add text-align now?

@getdave
Copy link
Contributor

getdave commented Jul 27, 2022

@Johanwalter Please can you try the same thing on a test site with another Theme installed? For example Twenty Twenty Two.

Also it's highly likely that this is a Plugin related Issue so I would also try (in a test environment) disabling Plugins and renabling one by one to identify the culprit.

@Johanwalter
Copy link
Author

Issue happened right after update from 13.6 to 13.7.2, no issue while on 13.6 so issue is from Gutenberg update

@paaljoachim
Copy link
Contributor

paaljoachim commented Jul 27, 2022

What is sometimes difficult is that different sites with the same setup can behave differently.
As we are working on figuring out where the error is. It would be helpful to get feedback if you test with another theme, and also deactivate all plugins and then reactivate the Gutenberg plugin. Then check the results.

@github-actions github-actions bot added the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Aug 27, 2022
@kathrynwp kathrynwp added the [Status] Needs More Info Follow-up required in order to be actionable. label Sep 19, 2022
@kathrynwp
Copy link

I was not able to replicate the issue with:

WordPress 6.0.1
Gutenberg 14.1.0 active or inactive
No other plugins active
Twenty Twenty-Two 1.2

@Johanwalter Are you able to replicate the issue with the same settings above?

@github-actions github-actions bot removed the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Sep 20, 2022
@Johanwalter
Copy link
Author

No I cannot replicate the issue.
I have another website with same plugin and template, I don't have the issue.
On demo of website, I don't have the issue, issue is only on prod.
I m still looking where issue can come from
I found that on this website I have 2 scheduled tasks that failed which are not failed on any other website
woocommerce_run_product_attribute_lookup_update_callback
adjust_download_permissions

Not sure if can be the cause


--

@kathrynwp
Copy link

@Johanwalter Thanks for re-testing and letting us know that you cannot replicate the issue.

Since it's not a theme-specific issue, I'm going to go ahead and close this out, but you're welcome to post in the WordPress.org support forums if you'd like further help with troubleshooting.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Buttons Affects the Buttons Block Needs Testing Needs further testing to be confirmed. [Status] Needs More Info Follow-up required in order to be actionable.
Projects
None yet
Development

No branches or pull requests

4 participants