Making WordPress.org

Opened 11 months ago

Closed 6 weeks ago

#7141 closed defect (bug) (fixed)

Huge Emojis in Support Forum

Reported by: talextech's profile talextech Owned by: dd32's profile dd32
Milestone: Priority: high
Component: Support Forums Keywords:
Cc:

Description

For the past few days we've been seeing huge emojis in the support forum (basically they have no width set and the full image size is showing. https://prnt.sc/cWAjuDkhAh-1

I'm not sure where this CSS should be added but something like this fixes the issue:

#bbpress-forums div.bbp-reply-content img.emoji {
    width: 1em;
    vertical-align: middle;
}

Attachments (1)

ksnip_20230714-135000.png (63.3 KB) - added by talextech 11 months ago.

Download all attachments as: .zip

Change History (9)

#1 @dd32
11 months ago

The page in question: https://wordpress.org/support/topic/error-for-site-owner-invalid-key-type-10/

This appears to need the WordPress core emoji fallback code to trigger, as it's just a plain emoji for me.

Twemoji/WordPress should be handling the styles for this I thought.

Upstream issue in Blocks Everywhere has some more information, but I think is probably unrelated: https://github.com/Automattic/blocks-everywhere/issues/135

Last edited 11 months ago by dd32 (previous) (diff)

#2 @dd32
11 months ago

  • Owner set to dd32
  • Status changed from new to accepted

#3 @dd32
11 months ago

Just noting I threw some CSS into the Customizer temporarily for this.

/* https://meta.trac.wordpress.org/ticket/7141 */
#bbpress-forums div.bbp-reply-content img.emoji {
   height: 1em;
   width: 1em;
   margin: 0 .05em 0 .1em;
   vertical-align: -0.1em;
}

That's based on the CSS that twemoji suggest.

It looks like something is setting the wrong styles in certain browsers, see https://wordpress.slack.com/archives/C02RQC6RW/p1689333732120879

#4 @dd32
11 months ago

In 12748:

Support: Define some base styles for emoji fallback images.

Props talextech.
See #7141.

#5 @talextech
11 months ago

Thank you :)

#6 follow-up: @dhruvishah2203
11 months ago

I think we need to find some different ways to identify the emoji because sometimes emoji are added to the text and at that time we do have classes like img.emoji So can we have any other options? @dd32 @talextech

Last edited 11 months ago by dhruvishah2203 (previous) (diff)

#7 in reply to: ↑ 6 @dd32
11 months ago

Replying to dhruvishah2203:

I think we need to find some different ways to identify the emoji because sometimes emoji are added to the text and at that time we do have classes like img.emoji So can we have any other options?

@dhruvishah2203 Do you have an example of that?

Emojis should only fall into two groups:

  • Literal Emoji characters
  • img.emoji fallback images created by Twemoji when the browser cannot display the literal emoji characters.

#8 @dd32
6 weeks ago

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

Marking as resolved; Not aware of any recent reports.

Note: See TracTickets for help on using tickets.