Button Block alignment not working properly #39937

HILAYTRIVEDI · 2022-03-31T10:07:00Z

Description

The button block button is not aligning on the right side in the Twenty Twenty Two theme. It is aligning on the left and center but not on the right side.

Expected

Button should be aligned in all directions.

Step-by-step reproduction instructions

Activate the Twenty Twenty Two theme.
Add the button block on teh editor side of the Post or Page.
Try to change the alignment.
You will notice that we can make it center and left align but not right align.the on

Screenshots, screen recording, code snippet

https://www.awesomescreenshot.com/video/8161898?key=5213c5c3ccb17c0c2f23a3c97a583dae

Environment info

Gutenberg: 12.9
WordPress : 5.9.2

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

akasunil · 2022-03-31T13:13:54Z

The cause of this issue is justify control in gutenberg button block. Alignment stylesheet get override by Justify control styles. There is solution for this, it more like a patch.

Below style sheet will resolve the issue (See below screenshot for reference ) :

.wp-block-buttons>.wp-block-button.alignright{
    width: 100%;
    text-align: right;
}

While testing this issue, i found out that when we change the justify on button block, alignment control get hidden. not sure why. also not sure why alignment control is added with justify.

pattyok · 2022-04-15T15:56:12Z

I am seeing the same issue with left aligned buttons. Since there are no classes applied just inline styles (!@#$$%) There is no way to override with my own css.

I want two stacked buttons, left aligned.

This is the block editor:

This is the result:

Related: #38998, #38719

pattyok · 2022-04-15T16:42:55Z

As it turns out if you toggle to center and then back to left it works. So the issue is that the default css applied does not match the default setting in the block.

strarsis · 2022-05-12T16:09:05Z

core/buttons alignment doesn't work for me at all in latest WordPress (5.9.3) + Gutenberg Plugin (13.2.0).
No class or data- attribute (in editor/backend) is assigned, no indication an alignment is applied to the buttons block.
I have to manually assign a CSS class to that buttons block (aligncenter) to see an effect in editor/backend and frontend.

benknight · 2022-06-09T16:36:30Z

I'm having the same issue. Alignment doesn't work at all, no classes or attributes are appended in the output HTML after toggling these settings.

carolinan · 2022-09-01T10:54:50Z

I am not able to reproduce this in WordPress 6.0.2 with and without Gutenberg active.

kubiqsk · 2022-11-25T14:17:08Z

I have same issue on multiple websites after update to 6+.
In code editor it looks good - it has all needed values like

<!-- wp:buttons {"className":"","layout":{"type":"flex","justifyContent":"center","orientation":"horizontal"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"white"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-white-color has-text-color wp-element-button" href="#in-kurze">Übersicht</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

but on frontend it is like

<div class="wp-block-buttons">
<div class="wp-block-button">
<a class="wp-block-button__link has-white-color has-text-color wp-element-button" href="#in-kurze">Übersicht</a>
</div>
</div>

so there are missing classes like is-content-justification-center and is-layout-flex and wp-container-XXX

resaving does not help

kubiqsk · 2022-11-25T14:50:42Z

ok, my issue was, that I was using code to remove that Duotone SVG code generated below <body> and it was removing also some other functionalities probably...

currently I use this and everythign works:

remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
remove_action( 'in_admin_header', 'wp_global_styles_render_svg_filters' );
remove_action( 'wp_body_open', 'gutenberg_global_styles_render_svg_filters' );
remove_action( 'in_admin_header', 'gutenberg_global_styles_render_svg_filters' );
remove_filter( 'render_block', 'wp_render_duotone_support' );

I removed:

remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
remove_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );
remove_filter( 'render_block', 'wp_render_layout_support_flag' );

carolinan · 2023-02-07T09:39:45Z

Tested again n WordPress 6.2 alpha without Gutenberg active:

When I first add a button, the right align option is available.
If I select it, the button is not right aligned on the front. And the width settings does not work in the editor.

But if I then select the justify option, the right align option is gone from the toolbar.
And I can't get the align option back without deleting and adding the block again.

Screen.Recording.2023-02-07.at.10.35.55.mov

carolinan · 2023-02-07T09:41:02Z

@jasmussen Is the justification setting on the button block not intended to completely replace the align right/center/left option?

jasmussen · 2023-02-07T10:37:07Z

Yes I would think so, part of that was discussed in #44614 as well. That is, through justification, button width, and text align, you should be able to accomplish the use cases shown on that issue.

carolinan · 2023-02-07T10:40:43Z

OK, I will wait until beta 1 and then test again, it is not working right now unless Gutenberg is activate. But we need to make sure the fix is in 6.2.

carolinan · 2023-02-08T04:19:09Z

I can confirm that in WordPress 6.2 beta 1, the button can use the width setting (25-100%), be aligned left right and center, and have a text align. It works in the editor and front.

For example it is now possible to have a full with parent buttons block, with a 50% wide button block inside, that is justified to the right, with centered text:

Note that the classname is is-content-justification-right and not aligright

<div class="wp-block-buttons is-content-justification-right is-layout-flex wp-container-2">
<div class="wp-block-button has-custom-width wp-block-button__width-50"><a class="wp-block-button__link wp-element-button">default button</a></div>
</div>

The centered text does not have a class, but if I align the text to the right, there is the has-text-align-rightclass.

<div class="wp-block-buttons is-content-justification-right is-layout-flex wp-container-2">
<div class="wp-block-button has-custom-width wp-block-button__width-50"><a class="wp-block-button__link has-text-align-right wp-element-button">default button</a></div>
</div>

carolinan · 2023-02-08T04:21:25Z

@HILAYTRIVEDI are you able to confirm as well that the bug has been solved?

HILAYTRIVEDI · 2023-02-08T07:26:06Z

Hi @carolinan , Yes I can confirm that it is now fixed.

carolinan · 2023-02-08T07:33:04Z

Thank you, great, then we can close this issue.

ndiego added [Block] Buttons Affects the Buttons Block CSS Styling Related to editor and front end styles, CSS-specific issues. [Type] Bug An existing feature does not function as intended labels Apr 3, 2022

theminaldiwan mentioned this issue Aug 11, 2022

Fixed button right alignment issue in wp-5.9 version #43138

Closed

jasmussen mentioned this issue Sep 30, 2022

Buttons Block: Add text align to block toolbar, and replace align #44614

Closed

annezazu mentioned this issue Oct 12, 2022

Button with alignment and width - not work as expected. #44385

Closed

skorasaurus mentioned this issue Nov 28, 2022

button-width-with-alignment issue solve #44393

Closed

carolinan closed this as completed Feb 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Button Block alignment not working properly #39937

Button Block alignment not working properly #39937

HILAYTRIVEDI commented Mar 31, 2022

akasunil commented Mar 31, 2022

pattyok commented Apr 15, 2022

pattyok commented Apr 15, 2022

strarsis commented May 12, 2022 •

edited

Loading

benknight commented Jun 9, 2022

carolinan commented Sep 1, 2022

kubiqsk commented Nov 25, 2022

kubiqsk commented Nov 25, 2022

carolinan commented Feb 7, 2023

carolinan commented Feb 7, 2023

jasmussen commented Feb 7, 2023

carolinan commented Feb 7, 2023

carolinan commented Feb 8, 2023

carolinan commented Feb 8, 2023

HILAYTRIVEDI commented Feb 8, 2023

carolinan commented Feb 8, 2023

Button Block alignment not working properly #39937

Button Block alignment not working properly #39937

Comments

HILAYTRIVEDI commented Mar 31, 2022

Description

Expected

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

Environment info

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

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

akasunil commented Mar 31, 2022

pattyok commented Apr 15, 2022

pattyok commented Apr 15, 2022

strarsis commented May 12, 2022 • edited Loading

benknight commented Jun 9, 2022

carolinan commented Sep 1, 2022

kubiqsk commented Nov 25, 2022

kubiqsk commented Nov 25, 2022

carolinan commented Feb 7, 2023

carolinan commented Feb 7, 2023

jasmussen commented Feb 7, 2023

carolinan commented Feb 7, 2023

carolinan commented Feb 8, 2023

carolinan commented Feb 8, 2023

HILAYTRIVEDI commented Feb 8, 2023

carolinan commented Feb 8, 2023

strarsis commented May 12, 2022 •

edited

Loading