Make WordPress Core

Opened 3 years ago

Last modified 9 hours ago

#52551 reopened enhancement

Twenty Twenty-One: Search box alignment

Reported by: vinita29's profile vinita29 Owned by:
Milestone: 6.6 Priority: normal
Severity: minor Version: 5.7
Component: Bundled Theme Keywords: has-screenshots needs-testing has-patch needs-refresh
Focuses: css Cc:

Description

I was Customized theme twenty twenty-one search-box on tablet and smartphones view. here search-box text field and button are not in correct alignment.

Attachments (6)

search_box.png (37.8 KB) - added by vinita29 3 years ago.
52551.patch (349 bytes) - added by vinita29 3 years ago.
52552-before.png (17.8 KB) - added by poena 5 weeks ago.
Before patch, the input does not align with the label.
52552-after.png (17.6 KB) - added by poena 5 weeks ago.
The search block with PR 6287 applied
52551-before-patch.png (11.4 KB) - added by shailu25 13 days ago.
Search Box - Before Patch
52551-after-patch.png (11.1 KB) - added by shailu25 13 days ago.
Search Box - After Patch

Download all attachments as: .zip

Change History (18)

@vinita29
3 years ago

@vinita29
3 years ago

#1 @SergeyBiryukov
3 years ago

  • Component changed from Themes to Bundled Theme
  • Summary changed from Search box alignment on twenty twenty-one theme. to Twenty Twenty-One: Search box alignment

#2 follow-up: @poena
3 years ago

Hi!

I think you are right that this margin can be safely removed from the search input field.

This margin was added to the input elements to give room for the focus outline, but the search input field has a negative outline offset and the margin is not needed there.

Twenty Twenty-One uses sass, the change needs to be made to the .scss file.

The margin is added here:
https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/forms.scss#L21

And I suggest adjusting it for the search input here:
https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/forms.scss#L41

#3 @poena
3 years ago

  • Focuses ui administration removed
  • Keywords needs-refresh added

#4 in reply to: ↑ 2 @vinita29
3 years ago

Hi @poena

Exactly, there is no need of margin for search input field. this margin can be safely removed from the search input field. You did Excellent!!

#5 @poena
5 weeks ago

This issue is a bit tricky to test on the latest WordPress versions.
For example on 6.5 RC, the search block does not split into two rows. When the browser window width is reduced, it only reduces the width of the input field.

On WordPress 5.7, I can reproduce it if I set the browser width just right, for example 381px, 953px.

This ticket was mentioned in PR #6287 on WordPress/wordpress-develop by @poena.


5 weeks ago
#6

  • Keywords has-patch added; needs-refresh removed

Remove the left margin on the search block input field. The margin that was originally set on the search input fields placed the search block slightly to the left which was unintended.

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

@poena
5 weeks ago

Before patch, the input does not align with the label.

@poena
5 weeks ago

The search block with PR 6287 applied

#7 @poena
5 weeks ago

  • Milestone changed from Awaiting Review to 6.6

Testing instructions

Apply PR 6287 linked above.
Open the theme folder in a termninal
Build the CSS files from the scss files with these npm commands:
npm install
npm run build

Create a new post and add a search block.
Save and view the front.
If you have better eye sight than me, confirm that the input field aligns with the label.
Or use your browser tools to confirm that the input field has no left margin.

Expected result:
The input field aligns with the label.
The input field has no left margin.

#8 @shailu25
13 days ago

Test Report

This Report validates that the indicated patch addresses the issue.✅

Patch Tested: https://github.com/WordPress/wordpress-develop/pull/6287

Environment:

WordPress - 6.5
OS - Windows
Browser - Firefox
Theme: Twenty Twenty One
PHP - 8.1.23
Active Plugin - Test Reports

Actual Results:

  • Issue Resolved With Patch. ✅

@shailu25
13 days ago

Search Box - Before Patch

@shailu25
13 days ago

Search Box - After Patch

#9 @poena
38 hours ago

  • Keywords needs-refresh added

#10 @poena
38 hours ago

I have added needs-refresh keyword because the PR does not apply cleanly anymore.

#11 @makdiahussain
12 hours ago

  • Resolution set to invalid
  • Status changed from new to closed

#12 @shailu25
9 hours ago

  • Resolution invalid deleted
  • Status changed from closed to reopened
Note: See TracTickets for help on using tickets.