Make WordPress Core

Opened 14 months ago

Closed 14 months ago

Last modified 14 months ago

#58477 closed defect (bug) (fixed)

UI issue when reinstalling WordPress

Reported by: sumitsingh's profile sumitsingh Owned by: audrasjb's profile audrasjb
Milestone: 6.3 Priority: normal
Severity: normal Version: 2.8
Component: Upgrade/Install Keywords: has-screenshots has-patch has-testing-info commit
Focuses: ui, accessibility, css, administration Cc:

Description

Hi

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

Attachments (3)

WordPress-Updates-‹-wptest-—-WordPress.png (25.0 KB) - added by sumitsingh 14 months ago.
We need to add word-wrap: break-word; in .code class.
image (9).png (196.2 KB) - added by sumitsingh 14 months ago.
here solution for fix this small things
58477.diff (5.3 KB) - added by sumitsingh 14 months ago.
Here .diff file

Download all attachments as: .zip

Change History (16)

@sumitsingh
14 months ago

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

#1 @sumitsingh
14 months ago

  • Keywords has-screenshots added

#2 @costdev
14 months ago

  • Component changed from Administration to Upgrade/Install
  • Milestone changed from Awaiting Review to 6.3
  • Version changed from 6.2.2 to 2.8

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.

#3 @sumitsingh
14 months ago

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.

Last edited 14 months ago by sumitsingh (previous) (diff)

@sumitsingh
14 months ago

here solution for fix this small things

#4 @sumitsingh
14 months ago

  • Keywords needs-patch added

#5 @costdev
14 months ago

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?

#6 @sumitsingh
14 months ago

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

#7 @costdev
14 months ago

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

@sumitsingh
14 months ago

Here .diff file

#8 @sumitsingh
14 months ago

  • Keywords has-patch needs-unit-tests added; needs-patch removed

#9 @costdev
14 months ago

  • Keywords has-testing-info commit added; needs-unit-tests removed

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.

#10 @audrasjb
14 months ago

  • Owner set to audrasjb
  • Status changed from new to reviewing

Self assigning for review 👀

#11 @audrasjb
14 months ago

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

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.

#12 @Ankit K Gupta
14 months ago

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-

https://i.imgur.com/91ZpnEV.jpg

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


14 months ago

Note: See TracTickets for help on using tickets.