Wp-calypso: Notifications: No quote indicator

[elibud]

Steps to reproduce

1. Create a new blog post in a blog you are subscribed to receive notifications from.
2. Add a quote to the blog post.
3. Check your Notifications.

What I expected

To see a quote indicator on the notification.

What happened instead

Ther's no indication that the text is a quote.

Browser / OS version

Safari 13.1.2

Screenshot / Video

Context / Source

[elibud]

Related: https://github.com/Automattic/wp-calypso/issues/41331

[getdave]

Looking into this

• Prior art D39223-code.
• Developer Console query - /notifications/?http_envelope=1&fields=id%2Cnote_hash%2Ccontent&number=20
• Output of do_blocks on the HTML string of a Note which contains a quote is:

<blockquote class="wp-block-quote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><cite>That’s a quote!</cite></p></blockquote>

• After "cleaning" with wp_kses the <cite> tag is removed but the <blockquote> is retained sans-classname.
• apps/notifications/src/panel/templates/summary-in-list.jsx is looking at the subject when it needs to look at the body of each Note.

[getdave]

@davemart-in I've been looking into this with @marekhrabe. We want to be clear on the task.

Is it:

1. Make quotes look like quotes in the Notification listing and detail (when you click on a Notification and it slides over to reveal more info) view?
2. Make quotes look like quotes in the Notification detail view _only_?

The listing is intentionally devoid of styling and HTML tags to avoid breaking the layout with images and other random HTML that could be in a post summary so this would break with convention if we go down that route.

[marekhrabe]

We have also check the behavior on mobile (it would be good to match it, I think) and on mobile the view in the list (small previews) is always plaintext without styling and only in the detail once you open it, you will see quote styles etc…

In this case my vote would be towards:

1. Make quotes look like quotes in the Notification detail view only?

[davemart-in]

@getdave @marekhrabe yes, it's option 2. The styling is only needed in the preview that slides out. The truncated list item on the right can remain unstyled.

[kwight]

Fixed by @blackjackkent in D49621-code and #45710 .