#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)
Change History (24)
#1
@
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
@
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; }
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
#6
@
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
- Create a new page
- Add a column 50/50
- Add image block inside one of the columns
- Make sure that buttons and links inside the image block are left-aligned
- Try to find UI glitches
#8
@
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
@
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
- Create a new page
- Add a column 50/50
- Add image block inside one of the columns
- 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
This ticket was mentioned in PR #1947 on WordPress/wordpress-develop by audrasjb.
3 years ago
#12
Trac ticket: https://core.trac.wordpress.org/ticket/54254
#13
@
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
.
hellofromtonya commented on PR #1947:
3 years ago
#15
Committed via https://core.trac.wordpress.org/changeset/52250.
I have added patch for it and modify the button alignment