Make WordPress Core

Opened 3 years ago

Closed 3 years ago

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

Download all attachments as: .zip

Change History (24)

@multidots1896
3 years ago

I have added patch for it and modify the button alignment

@multidots1896
3 years ago

I have added patch for it and modify the button alignment

@multidots1896
3 years ago

(Final patch)

@sabernhardt
3 years ago

text-align: inherit

#1 @sabernhardt
3 years 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
3 years 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;
}
Version 0, edited 3 years ago by sabernhardt (next)

#3 @Boniu91
3 years ago

  • Keywords has-testing-info needs-testing added

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


3 years ago

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


3 years ago

@Boniu91
3 years ago

Correct alignment of the image block

#6 @Boniu91
3 years 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
3 years ago

#54427 was marked as a duplicate.

@sabernhardt
3 years ago

using :not() selector

#8 @sabernhardt
3 years 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.


3 years ago

#10 @justinahinon
3 years 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.


3 years ago

#13 @audrasjb
3 years 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
3 years 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.