Twenty Seventeen: Search block is having issue when you apply width and alignment.

[nidhidhandhukiya]

Steps to reproduce the issue :-

1. Activate Twenty Seventeen theme.
2. Choose Search block.
3. Apply width
4. Now apply alignment left or right.

You can able to see that the applied width is not looking proper when alignment has been choosen.
I have attached video for better understanding.
Video URL :- ​https://share.cleanshot.com/xNx3pKbZ2znyhz4l58CT

[sabernhardt]

The video shows Twenty Sixteen's styles in the editor and Twenty Seventeen for the front end, and the patch edits block styles within Twenty Sixteen's editor-style.css.

I do not recommend removing the float in the editor when the search block floats on the front end, which would create a discrepancy. Leaving the editor styles as they are might help the user determine whether setting a width and/or alignment is appropriate with these themes.

The editor does not show the button element background colors and other styles from Twenty Sixteen or Twenty Seventeen, which I think should be a higher priority.

Related: #53146

[sainathpoojary]

I tried to reproduce the issue, but it appears to no longer exist. I was able to apply the alignment successfully with the width option enabled.

Video: ​https://rioudcpuyg.ufs.sh/f/PL8E4NiPUWyOr3KUJ1tMk7y2dfFYKmqLWZt4AHpRVDaCBlso

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 135.0.0.0
• OS: macOS
• Theme: Twenty Seventeen 3.9
• MU Plugins: None activated
• Plugins: Test Reports 1.2.0

[SirLouen]

Reproduction Report

Description

✅ This report validates that the issue can still be reproduced.

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 137.0.0.0
• OS: Windows 10/11
• Theme: Twenty Seventeen 3.9
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Test instructions

• Followed the ones provided in the OP

1. Create the Search blog
2. Assign a 25% width manually
3. Align to the right
4. 🐞 It doesn't fully allign

Actual Results

1. ✅ Error condition occurs (reproduced).

Additional Notes

• I've been able to reproduce this issue again to verify if @sainathpoojary report was correct or not. It seems that the issue is still there

• I have not tested the 58413.patch because of this @sabernhardt concern:

Replying to sabernhardt:

I do not recommend removing the float in the editor when the search block floats on the front end, which would create a discrepancy. Leaving the editor styles as they are might help the user determine whether setting a width and/or alignment is appropriate with these themes.

• What do you propose to sort this instead?

Supplemental Artifacts

Here the screenshot with the issue reproduced: