WordPress.org

Making WordPress.org

Opened 3 weeks ago

Closed 3 weeks ago

#5320 closed defect (fixed)

Slack links not wrapping on Make blogs on mobile

Reported by: justinahinon Owned by: dd32
Milestone: Priority: normal
Component: WordPress.org Site Keywords: has-screenshots
Cc:

Description

Links to Slack threads, messages or channels do not wrap properly on mobile on Make blogs.

I feel like it's deliberate because of this line:

a [href * = ". slack.com"] {
  white-space: nowrap;
}

But I don't quite understand why.

Setting the white-space property to normal fixes the issue.

Attachments (4)

Capture d’écran 2020-07-18 à 00.10.34.png (197.9 KB) - added by justinahinon 3 weeks ago.
Default behaviour, links not wrapping
Capture d’écran 2020-07-18 à 00.10.34.2.png (197.9 KB) - added by justinahinon 3 weeks ago.
Slack links wrap correctly after changing white-space property value to normal
Capture d’écran 2020-07-18 à 00.10.27.png (190.1 KB) - added by justinahinon 3 weeks ago.
Here's the good screenshot for the links not wrapping correctly
Screen Shot 2020-07-20 at 3.38.32 pm.png (67.4 KB) - added by dd32 3 weeks ago.

Download all attachments as: .zip

Change History (10)

@justinahinon
3 weeks ago

Default behaviour, links not wrapping

@justinahinon
3 weeks ago

Slack links wrap correctly after changing white-space property value to normal

@justinahinon
3 weeks ago

Here's the good screenshot for the links not wrapping correctly

#1 @Otto42
3 weeks ago

Can you provide a link to an example of this behavior instead of a screenshot of it?

#2 @justinahinon
3 weeks ago

Sure.

On Themes team homepage for instance https://make.wordpress.org/themes

Also this post that contains a Slack link https://make.wordpress.org/themes/2020/07/13/proposal-allow-themes-to-add-a-top-level-admin-menu/

This post too on Core blog https://make.wordpress.org/core/2020/07/13/css-chat-summary-9th-july-2020/

I assume it's the same on all posts/pages that has a Slack link.

Happening on Android, Chrome(83.0.4103.106) and Firefox Nightly.

#3 follow-up: @dd32
3 weeks ago

But I don't quite understand why.

Whitespace is set to nowrap to prevent the slack icon appearing on the line above the link that's inserted.

Example, if you set the wrapping to normal on https://make.wordpress.org/themes/2020/07/13/proposal-allow-themes-to-add-a-top-level-admin-menu/ you'll see that the icon is on the line previous.

This isn't an issue when the link text contains spaces, but is an issue when it doesn't (ie. a URL)

#4 in reply to: ↑ 3 @justinahinon
3 weeks ago

I'm not sure I understand what you mean here:

Whitespace is set to nowrap to prevent the slack icon appearing on the line above the link that's inserted.

I've duplicated the Slack link node on this page and change the content to text with the inspector on the page you linked above. Here's what I get https://prnt.sc/tkzjgz (screenshot).

#5 @dd32
3 weeks ago

Replying to justinahinon:

I'm not sure I understand what you mean here:

If you set white-space: normal you'll get Screen Shot 2020-07-20 at 3.38.32 pm.png

#6 @dd32
3 weeks ago

  • Owner set to dd32
  • Resolution set to fixed
  • Status changed from new to closed

In 10082:

Make Sites: alter the Slack link wrapping to break words rather than forcing it to remain on one line.

Props justinahinon.
Fixes #5320.

Note: See TracTickets for help on using tickets.