Make WordPress Core

Opened 3 years ago

Closed 3 weeks ago

Last modified 3 weeks ago

#52551 closed enhancement (fixed)

Twenty Twenty-One: Search box alignment

Reported by: vinita29's profile vinita29 Owned by: karmatosed's profile karmatosed
Milestone: 6.6 Priority: normal
Severity: minor Version: 5.7
Component: Bundled Theme Keywords: has-screenshots needs-testing has-patch commit
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 3 months ago.
Before patch, the input does not align with the label.
52552-after.png (17.6 KB) - added by poena 3 months ago.
The search block with PR 6287 applied
52551-before-patch.png (11.4 KB) - added by shailu25 2 months ago.
Search Box - Before Patch
52551-after-patch.png (11.1 KB) - added by shailu25 2 months ago.
Search Box - After Patch

Download all attachments as: .zip

Change History (28)

@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
3 months 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.


3 months 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
3 months ago

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

@poena
3 months ago

The search block with PR 6287 applied

#7 @poena
3 months 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
2 months 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
2 months ago

Search Box - Before Patch

@shailu25
2 months ago

Search Box - After Patch

#9 @poena
2 months ago

  • Keywords needs-refresh added

#10 @poena
2 months ago

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

#11 @makdiahussain
2 months ago

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

#12 @shailu25
2 months ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

#13 @poena
7 weeks ago

  • Keywords needs-refresh removed

We tried to test this during a contributor day, after which I added the needs-refresh keyword because we were not able to apply the patch with the grunt patch: 52551 command.
But the ticket has two patches, and this grunt command is trying to apply patch
https://core.trac.wordpress.org/attachment/ticket/52551/52551.patch, which is 3 years old.

To apply and test the latest PR 6287 instead, one can use this command with the complete link to the PR:

grunt patch:https://github.com/WordPress/wordpress-develop/pull/6287

and then follow the instructions in https://core.trac.wordpress.org/ticket/52551#comment:7

Because of that I am removing the needs-refresh keyword again.

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


4 weeks ago

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


4 weeks ago

#16 @imranhasanraaz
4 weeks 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.6-alpha-57778-src
  • PHP: 8.2.19
  • Server: nginx/1.25.5
  • Database: mysqli (Server: 8.0.37 / Client: mysqlnd 8.2.19)
  • Browser: Chrome 124.0.0.0
  • OS: Windows 10/11
  • Theme: Twenty Twenty-One 2.2
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.1.0

Before Patch: https://prnt.sc/Em9LPHTD34Vt
After Patch: https://prnt.sc/Xs8Y7HB-XBor
Issue Resolved With Patch. ✅

#17 @darshitrajyaguru97
4 weeks ago

Test Report

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

Environment:

OS: Windows
PHP: 8.2.12
WordPress: 6.5
Browser: Chrome
Theme: Twenty Twenty One
Plugins: None activated

Actual Results:

Before patch:
Frontend: https://prnt.sc/JLpd26iugvW5

After patch:
Frontend: https://prnt.sc/u_LwIk_moIyD

✅ Patch working well as desired solution

Last edited 4 weeks ago by darshitrajyaguru97 (previous) (diff)

#18 @lamarajan
4 weeks ago

Test Report
Patch tested: https://github.com/WordPress/wordpress-develop/pull/6287
Environment:
OS: Windows
PHP: 8.2.12
WordPress: 6.6-alpha-57778-src
Browser: Chrome, Edge
Theme: Twenty Twenty One
Plugins: None activated
Actual Results:
✅ screenshot : https://prnt.sc/8xpPVuvg-8J3
✅ Patch working well as desired solution

#19 @karmatosed
4 weeks ago

  • Keywords commit added
  • Owner set to karmatosed
  • Status changed from reopened to assigned

Thank you for testing, going to apply the commit keyword now and try and move it towards that.

#20 @karmatosed
3 weeks ago

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

In 58202:

Twenty Twenty-One: Fixes Search Box Alignment.

The search box alignment was not in alignment. This brings in a resolution for that through the margin.

Props vinita29, SergeyBiryukov, poena, shailu25, makdiahussain, imranhasanraaz, darshitrajyaguru97, lamarajan.
Fixes #52551.

#21 @karmatosed
3 weeks ago

In 58203:

Twenty Twenty-One: Test failure fix for theme [58202].

Compiling stylesheets to pass tests.

See #52551.

#22 @aishwarryapande
3 weeks ago

Test Report
Patch tested:
https://core.trac.wordpress.org/ticket/52551

Verified the patch and it is working fine ✅
Environment :
WordPress: 6.5.3
OS: Windows 11
Browser: Chrome
Theme: Twenty Twenty-One
Expected Result
The search block should be correctly aligned without any unintended left margin.
The search block should be consistent with the overall design of the Twenty Twenty-One theme.
Actual Result
The search block is correctly aligned without any unintended left margin.
The search block is consistent with the overall design of the Twenty Twenty-One theme.
Visual Comparison:
Before:https://app.screenclip.com/r9UP

After:

For Desktop

https://app.screenclip.com/iip2

For Tablet

https://app.screenclip.com/xr8X

For Phone/Mobile

https://app.screenclip.com/CTqA

Note: See TracTickets for help on using tickets.