Twenty Twenty One: Image block control button alignment issue while using inside column

[multidots1896]

In Twenty Twenty One theme Image block button alignment is not proper because we facing difficulty to identify button.
If we are not using column block so all buttons in image block align in horizontal form.
but when we are using image block inside two column block alignment of button are not in right way.
I have added for it and modify Button alignment is in vertical stack order.
Screenshot:​https://prnt.sc/1vy6ykr

[multidots1896]

I have added patch for it and modify the button alignment

[multidots1896]

I have added patch for it and modify the button alignment

[multidots1896]

(Final patch)

[sabernhardt]

text-align: inherit

[sabernhardt]

Hi and thanks for the report and patches!

The block editor specifies aligning those buttons left (or right in RTL languages):

.components-placeholder.components-placeholder {
    text-align: left;
}

However, Twenty Twenty-One tries to center the image in the editor and also centers these buttons.

.wp-block-image > div {
	text-align: center;
}

I did not expect .wp-block-image > div:not(.components-placeholder) to work with the patch on #53809, so 54254.2.patch​ inherits the alignment.

.wp-block-image > .components-placeholder {
	text-align: inherit;
}

[sabernhardt]

The :not() selector does seem to work when fixing both issues (here and #53809), if we want to consider this instead:

.wp-block-image,
.wp-block-image > div:not(.components-placeholder) {
	text-align: center;
}

[Boniu91]

Correct alignment of the image block

[Boniu91]

@sabernhardt Just checked the 54254.2, it fixes the initial problem here. Haven't tried it in conjunction with the #54254 though.

Leaving testing report for future references:

Test Report

Env

• WordPress 5.9-alpha-51272-src
• Theme: Twenty Twenty One
• Gutenberg Editor
• Plugin: WP Downgrade

Steps to test

1. Create a new page
2. Add a column 50/50
3. Add image block inside one of the columns
4. Make sure that buttons and links inside the image block are left-aligned
5. Try to find UI glitches

Correct view:

[sabernhardt]

#54427 was marked as a duplicate.

[sabernhardt]

using :not() selector

[sabernhardt]

Inheriting the alignment does not work with the change in r52142. So 54254.3.patch​ excludes the placeholder div from centering.

[justinahinon]

Just tested this ticket.

54254.3.patch​ didn't work on latest trunk but 54254.2.patch​ did.

Test Report

Env

• WordPress 5.9-alpha-51272-src
• Theme: Twenty Twenty One
• Plugin: No

Steps to test

1. Create a new page
2. Add a column 50/50
3. Add image block inside one of the columns
4. Make sure that buttons and links inside the image block are left-aligned

Trac ticket: https://core.trac.wordpress.org/ticket/54254

[audrasjb]

Before PR#1947

[audrasjb]

After PR#1947

[audrasjb]

Self-assigning this ticket for commit.

[audrasjb]

In 52250:

Twenty Twenty One: Remove Image block placeholder alignment override in editor styles.

This changes excludes the Image block placeholder from the default image centering in Twenty Twenty-One editor styles.

Props multidots1896, sabernhardt, Boniu91, justinahinon.
Fixes #54254.