UI issue when reinstalling WordPress

[sumitsingh]

Hi

We need to fix this small UI issue on the update page. For more information, you can see mentioned screenshot.

[sumitsingh]

We need to add word-wrap: break-word; in .code class.

[costdev]

Thanks for opening this ticket @sumitsingh!

• The <span class="code"> element was introduced in [11295]. Updating the Version property.
• Bringing this into the Upgrade/Install component which is where this screen is maintained.
• Milestoning for 6.3 as this should be a quick one to resolve.

[sumitsingh]

Thank you for sharing the class name "code". just we need to add a "pre" class in the span tag then it will fix this small issue @costdev.

You can see mentioned screenshot.

[sumitsingh]

here solution for fix this small things

[costdev]

That works for me @sumitsingh!

We should also patch Language_Pack_Upgrader, Plugin_Upgrader and Theme_Upgrader as all of these pass a <span class="code"> element to their feedback skin.

Are you preparing a patch, or would you like me to?

[sumitsingh]

@costdev I am doing right now :). this is my first patch :)

[costdev]

Awesome @sumitsingh! Looking forward to reviewing and testing it!

[sumitsingh]

Here .diff file

[costdev]

Test Report

Patch tested: https://core.trac.wordpress.org/raw-attachment/ticket/58477/58477.diff

Steps to Reproduce or Test

1. Navigate to Dashboard > Updates.
2. Open DevTools and switch to a mobile-sized screen.
3. 🐞 Click Re-install <version>.

Expected Results

When reproducing a bug:

• ❌ The URL in the Downloading update from string should partially extend beyond the edge of the viewport before wrapping.

When testing a patch to validate it works as expected:

• ✅ The URL in the Downloading update from string should wrap before it reaches the edge of the viewport.

Environment

• WordPress: 6.3-alpha-55505
• PHP: 7.4.33
• Server: Apache/2.4.56 (Ubuntu)
• Database: mysqli (Server: 5.7.41-0ubuntu0.18.04.1 / Client: mysqlnd 7.4.33)
• Browser: Chrome 114.0.0.0 (Windows 10/11)
• Theme: Twenty Twenty-Three 1.1
• MU-Plugins: None activated
• Plugins: None activated

Actual Results

When reproducing a bug/defect:

• ❌ The URL in the Downloading update from string partially extended beyond the edge of the viewport before wrapping. Issue reproduced.

When testing the bugfix patch:

• ✅ The URL in the Downloading update from string wrapped before it reached the edge of the viewport. Issue resolved with the patch.

---

• As this issue is more of a manual testing scenario and the test suite passes locally, I'm removing needs-unit-tests.
• Adding for commit consideration.

[audrasjb]

Self assigning for review 👀

[audrasjb]

In 55899:

Upgrade/Install: Improve WP_Upgrader strings rendering on small screens.

This changeset adds a pre class to "Downloading update from…" user facing strings located in Core_Upgrader, Language_Pack_Upgrader, Plugin_Upgrader and
Theme_Upgrader classes.

Follow-up to [11295].

Props sumitsingh, costdev.
Fixes #58477.

[Ankit K Gupta]

This ticket has been merged already but I was testing this so adding my report here. :)

Test Report

Patch tested: https://core.trac.wordpress.org/raw-attachment/ticket/58477/58477.diff

Env

• WordPress - 6.3-alpha-55892
• Web Server: Nginx
• Chrome Version - 114
• OS - macOS
• Theme: Twenty Twenty-One
• PHP - 7.4.0
• Active Plugin - None

Steps to test

1. Go to WordPress Dashboard
2. Go to the Updates tab
3. Click the Update button to update WordPress
4. Notice the Update URL appearance

Test result

The test was conducted to verify the URL is appearing fine within the width of the screen.

• ✅ Issue resolved with patch.

After-