WordPress.org

Make WordPress Core

Opened 8 weeks ago

Closed 13 days ago

#54254 closed defect (bug) (fixed)

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

Reported by: multidots1896 Owned by: audrasjb
Milestone: 5.9 Priority: normal
Severity: normal Version: 5.8.1
Component: Bundled Theme Keywords: has-patch has-testing-info commit
Focuses: ui, css Cc:

Description

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

Attachments (9)

style-editor.css.patch (595 bytes) - added by multidots1896 8 weeks ago.
I have added patch for it and modify the button alignment
style-editor.css.2.patch (595 bytes) - added by multidots1896 8 weeks ago.
I have added patch for it and modify the button alignment
54254.patch (595 bytes) - added by multidots1896 8 weeks ago.
(Final patch)
2021-editor-image-block.png (7.4 KB) - added by sabernhardt 8 weeks ago.
54254.2.patch (71.6 KB) - added by sabernhardt 8 weeks ago.
text-align: inherit
imageblockalignment.PNG (3.6 KB) - added by Boniu91 6 weeks ago.
Correct alignment of the image block
54254.3.patch (1.5 KB) - added by sabernhardt 4 weeks ago.
using :not() selector
Capture d’écran 2021-11-25 à 23.02.23.png (357.3 KB) - added by audrasjb 13 days ago.
Before PR#1947
Capture d’écran 2021-11-25 à 23.02.38.png (238.8 KB) - added by audrasjb 13 days ago.
After PR#1947

Download all attachments as: .zip

Change History (23)

@multidots1896
8 weeks ago

I have added patch for it and modify the button alignment

@multidots1896
8 weeks ago

I have added patch for it and modify the button alignment

@multidots1896
8 weeks ago

(Final patch)

@sabernhardt
8 weeks ago

text-align: inherit

#1 @sabernhardt
8 weeks ago

  • Component changed from General to Bundled Theme
  • Focuses coding-standards removed
  • Milestone changed from Awaiting Review to 5.9
  • Summary changed from Twenty Twenty One theme Image block button alignment issue while using inside column to Twenty Twenty One: Image block control button alignment issue while using inside column

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;
}

#2 @sabernhardt
8 weeks ago

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;
}
Last edited 8 weeks ago by sabernhardt (previous) (diff)

#3 @Boniu91
7 weeks ago

  • Keywords has-testing-info needs-testing added

This ticket was mentioned in Slack in #core-test by boniu91. View the logs.


7 weeks ago

This ticket was mentioned in Slack in #core-test by boniu91. View the logs.


6 weeks ago

@Boniu91
6 weeks ago

Correct alignment of the image block

#6 @Boniu91
6 weeks ago

@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:
Correct alignment of the image block

#7 @sabernhardt
4 weeks ago

#54427 was marked as a duplicate.

@sabernhardt
4 weeks ago

using :not() selector

#8 @sabernhardt
4 weeks ago

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

This ticket was mentioned in Slack in #core-test by justinahinon. View the logs.


4 weeks ago

#10 @justinahinon
4 weeks ago

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

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


13 days ago

#13 @audrasjb
13 days ago

  • Keywords commit added; needs-testing removed
  • Owner set to audrasjb
  • Status changed from new to assigned

Self-assigning this ticket for commit.

#14 @audrasjb
13 days ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

Note: See TracTickets for help on using tickets.