UI Modernization Posts: Update post list layout

[zwarm]

Fixes #19341

This PR is the second in a series dedicated to updating the post list layout. This PR focuses on updating to the new design for the list. See eYeHXEMDbnFptE40xUqZ2T-fi-951%3A43566 for design details

Includes

• Remove buttons from row
  Change postInfo from List to List
  Move info labels out of statuses to the postInfo line
• Adjust the title and excerpt logic around untitled posts. It is possible to create a post with no title and no excerpt, so Untitled should show in this case
• Hide/show author filter when search is expanded/collapsed
• Update unit tests

---

The following decision were made here on 23 Oct 2023 p1697809073777199-slack-C04SFL0RP51

• Reapply the existing production logic for showing info labels in the bottom line
• Reapply the existing production logic for showing status labels in the top line when search

---

Not Included

• This PR does not include any context menu changes. They will be handled in the next PR of the series.
• This PR will need a design review

Merge Instructions

• Ensure UI Modernization Post: Remove post list compact layout #19424 has been merged
• Make sure the target branch is feature/ui-modernization-posts-and-pages
• Remove the Do Not Merge label
• Merge as normal

Published Dark	Published Light

Example set one:
Row 1: Post with a title, no excerpt, and no featured image
Row 2: Post with no title, no excerpt, and no featured image
Row 3: Post with a title that takes up 3 lines, no excerpt shown, and a featured image
Row 4: Post with a title, excerpt, and a featured image
Row 5: Post with no title, an excerpt, and no featured image.

Published Dark	Published Light

Example set two:
Row 1: Post with a title, excerpt, and blocks that don't translate to text and/or empty lines between text, a status message, no featured image
Row 2: Post with title, excerpt, featured image, and two info labels (private + sticky)
Row 3: Title, no excerpt, and a featured image

Search Dark	Search Light

Example set three:
Row 1: Post with a title that >= 3 lines, no excerpt, featured image, and published label on top line
Row 2: Post with no title, excerpt, no featured image, and two info labels (private + sticky)
Row 3: Post with a title, excerpt, blocks that don't translate to text and/or empty lines between text, a status message. no featured image, and published label on to top line
Row 4: Post with title, excerpt, featured image, two info labels (private + sticky), and private label on top line

To test:

• Install the Jetpack app
• Login
• Select a site
• Navigate to My Site > Post
• ✅ Verify the loading view shows when the list is loading and that there is placeholder for the image
• ✅ Verify the post list is shown and you can navigate through all the tabs
• ✅ Verify the design matches the figma design: eYeHXEMDbnFptE40xUqZ2T-fi-836%3A5909 and the example sets above
• ✅ Verify the "more" button launches when tapped and you can navigate as expected
• ✅ Verify the bottom action buttons are not shown

Regression Notes

1. Potential unintended areas of impact
   The post list doesn't work as expected

2. What I did to test those areas of impact (or what existing automated tests I relied on)
   Manual and unit testing

3. What automated tests I added (or what prevented me from doing so)
   PostListItemUiStateHelperTest and view model tests

PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

UI Changes testing checklist:

• Portrait and landscape orientations.
• Light and dark modes.
• Fonts: Larger, smaller and bold text.
• High contrast.
• Talkback.
• Languages with large words or with letters/accents not frequently used in English.
• Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
• Large and small screen sizes. (Tablet and smaller phones)
• Multi-tasking: Split screen and Pop-up view. (Android 10 or higher)

[osullivanchris]

Great start! There's a lot to love. Looks fresh overall. There's a lot going on here, so I'll also have a few notes as you probably expect.

• The padding at the top and bottom of the cells looks larger than expected in real build. If we defined as 12, can we try 8 instead?
• The skeleton/shimmer state has no left padding which makes it look a little bit broken.
• I am seeing situations where there is 2 lines of heading and 3 lines of excerpt and the cell is getting quite long. We can discuss how we resolved this on iOS per a recent discussion on Slack. But ideal state is for the height of the text to be capped similar to the height of the image.
• What is the horizontal padding between the text and the image? Can we increase slightly?

Thank you for capturing all the different states so thoroughly. Very helpful. a couple details looking at those:

• In search can the state (published, draft, etc) come earlier in that string? Before the author at least?
• In example set two, row 1 we see the example with spaces or different blocks. Is there anything we can do there, like truncate after the viable text or similar, rather than showing a gap and ... ?

[zwarm]

Thanks for the feedback @osullivanchris

Published	Search

• The padding at the top and bottom of the cells looks larger than expected in real build. If we defined as 12, can we try 8 instead?

I dropped it down to 8dp.

• The skeleton/shimmer state has no left padding which makes it look a little bit broken.

I set a 16dp margin to the start/end

• I am seeing situations where there is 2 lines of heading and 3 lines of excerpt and the cell is getting quite long. We can discuss how we resolved this on iOS per a recent discussion on Slack. But ideal state is for the height of the text to be capped similar to the height of the image.

I thought it was: show only the title if it took up >=3 or more lines of the space (and only use three lines), but both excerpt and title had a max of 3 lines each. So if title had 1 line, and excerpt 3 lines, then take all of it. If I understand correctly now, it sounds like there is a max of 3 lines total? (I haven't supplied an update for this yet)

• What is the horizontal padding between the text and the image? Can we increase slightly?

It was set to 4dp, I increased it to 8dp. It may look larger/smaller based on how the words on the line fit within the text space.

• In search can the state (published, draft, etc) come earlier in that string? Before the author at least?

Current prod position is after the author, but I agree, it would look better earlier in the line. I moved it to before the date so it’s easy to spot. I can definitely move it to before the author too, but wanted to give this a try first.

• In example set two, row 1 we see the example with spaces or different blocks. Is there anything we can do there, like truncate after the viable text or similar, rather than showing a gap and ... ?

Yeah, glad you picked up on this on too. In the latest update, I am only showing the text prior to the large space gap. wdyt?

[peril-wordpress-mobile]

	Warnings
⚠️	PR has more than 300 lines of code changing. Consider splitting into smaller PRs if possible.

Generated by 🚫 dangerJS

[zwarm]

@osullivanchris - I changed the title/excerpt logic. Title is a max of 3 lines, title will have priority, excerpt will take up the remaining number of lines that title does not take up. Let me know what you think. 👍

[osullivanchris]

@zwarm thanks for all those fixes. Will they be reflected if I install the build again?

All sound good. Including moving the status before the date in search, 4-8 padding change, only showing text in excerpt.

Just double checking with the iOS folks what we decided on the heading/excerpt logic before I nod to that.

[zwarm]

@zwarm thanks for all those fixes. Will they be reflected if I install the build again?

Yes, reinstall the build to get all the changes.

[zwarm]

@osullivanchris - okie dokie, I think we are set with title and excerpt. If both are present, title will take priority at two lines and excerpt will take 1. If title has only 1 line, then excerpt will take the two (if there is enough for two). Total of both is a max of three lines. :)

[osullivanchris]

Everything looking much better now except 2 minor padding details:

1. In each cell (except the top one) the top padding looks to be 16 while the bottom padding is 8. Can we make sure the top is also 8?
2. In the top cell, the spacing is 8 and 8, so it seems to somehow appear differently than the rest. So just to make sure it doens't "lose" its top padding if we reduce all by 8 from 16->8.

[AjeshRPai]

Hey @zwarm
Can we re-use the more icon from dashboard or someother place instead of adding a new one?

File: ic_more_vert_white_24dp?

I think the existing usage is by setting the icon and then applying a tint at the usage but may be we can set the color of the more icon to "?attr/colorOnSurface" at all places or use the ic_more_vert_white_24dp and set a tint in post_list_item

[zwarm]

👋 @AjeshRPai - I started in that direction, but then I pulled the svg from the GB icon set and they are different. A future PR will be changing the name of that icon to use the following pattern: "gb_ic_iconname".

[AjeshRPai]

Do we need this actions variable anymore? 🤔 . I think the actions and the tests related to the actions is not needed. Let me know If i misunderstand/you plan to remove them in a future PR

[zwarm]

@AjeshRPai No, we do not need these anymore. I have it on my task list to address separately. This PR was getting to big. Thanks for the reminder 👍

[zwarm]

@osullivanchris

1. In each cell (except the top one) the top padding looks to be 16 while the bottom padding is 8. Can we make sure the top is also 8?

2. In the top cell, the spacing is 8 and 8, so it seems to somehow appear differently than the rest. So just to make sure it doens't "lose" its top padding if we reduce all by 8 from 16->8.

I need to go back and rework the layout, even though I am adding 8dp of spacing it's 16dp. I'm going to merge this PR so the base is set, then I'll address this separately. I'll tag you in the followup PR. 🙇 Thanks!!