Twenty Twenty-One: Search box alignment

[vinita29]

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.

[poena]

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

[vinita29]

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!!

[poena]

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.

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]

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

[poena]

The search block with PR 6287 applied

[poena]

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.

[shailu25]

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]

Search Box - Before Patch

[shailu25]

Search Box - After Patch

[poena]

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

[poena]

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.

[imranhasanraaz]

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:
After Patch:
Issue Resolved With Patch. ✅

[darshitrajyaguru97]

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

[lamarajan]

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

[karmatosed]

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

[karmatosed]

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.

[karmatosed]

In 58203:

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

Compiling stylesheets to pass tests.

See #52551.

[aishwarryapande]

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