Make WordPress Core

Opened 20 months ago

Closed 18 months ago

Last modified 17 months ago

#54254 closed defect (bug) (fixed)

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

Reported by: multidots1896's profile multidots1896 Owned by: audrasjb's profile 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 20 months ago.
I have added patch for it and modify the button alignment
style-editor.css.2.patch (595 bytes) - added by multidots1896 20 months ago.
I have added patch for it and modify the button alignment
54254.patch (595 bytes) - added by multidots1896 20 months ago.
(Final patch)
2021-editor-image-block.png (7.4 KB) - added by sabernhardt 20 months ago.
54254.2.patch (71.6 KB) - added by sabernhardt 20 months ago.
text-align: inherit
imageblockalignment.PNG (3.6 KB) - added by Boniu91 19 months ago.
Correct alignment of the image block
54254.3.patch (1.5 KB) - added by sabernhardt 19 months ago.
using :not() selector
Capture d’écran 2021-11-25 à 23.02.23.png (357.3 KB) - added by audrasjb 18 months ago.
Before PR#1947
Capture d’écran 2021-11-25 à 23.02.38.png (238.8 KB) - added by audrasjb 18 months ago.
After PR#1947

Download all attachments as: .zip

Change History (24)

@multidots1896
20 months ago

I have added patch for it and modify the button alignment

@multidots1896
20 months ago

I have added patch for it and modify the button alignment

@multidots1896
20 months ago

(Final patch)

@sabernhardt
20 months ago

text-align: inherit

#1 @sabernhardt
20 months 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
20 months 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 20 months ago by sabernhardt (previous) (diff)

#3 @Boniu91
20 months ago

  • Keywords has-testing-info needs-testing added

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


20 months ago

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


19 months ago

@Boniu91
19 months ago

Correct alignment of the image block

#6 @Boniu91
19 months 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
19 months ago

#54427 was marked as a duplicate.

@sabernhardt
19 months ago

using :not() selector

#8 @sabernhardt
19 months 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.


19 months ago

#10 @justinahinon
19 months 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.


18 months ago

#13 @audrasjb
18 months 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
18 months 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.