search

Automattic / newspack-listings

Reusable lists using the block editor.
GNU General Public License v2.0
20 stars 6 forks source link

Front-end styles for featured listings #131

Closed dkoo closed 2 years ago

dkoo commented 3 years ago

124 adds two class names to featured listing article elements when shown in Homepage Posts, Post Carousel, or Curated List blocks; archive pages; search results; or to the body on singular listings.

As mentioned in that PR, we need to come up with a universalish way to style these featured items so they're visually distinct from non-featured/regular items. GDG uses what we call "pseudo-labels" which are shown alongside the post's category labels, but this isn't universal enough because many sites choose not to show categories in their blocks. A CSS-only treatment would be cleaner and more customizable, if possible.

dkoo commented 2 years ago

@laurelfulford let's brainstorm on this when you're available! This is going to be in beta status shortly so we'll want to have a solution before any publisher sites start using it.

laurelfulford commented 2 years ago

@dkoo Ooof, sorry it's taken me so long to circle back to this!

I've messed around a bit with the CSS, and the two different common blocks that this could be helpful with (Homepage Posts and Curated List).

I put together some screenshots here -- the options include:

I also included a text label version before it dawning on me that that wouldn't be doable with CSS alone and have it be something that could be translated. I do think having a text label will be the clearest way to indicate that the listings are featured, but it'll also definitely take more work/code changes. Perhaps it's something we could iterate on if clarity becomes a concern.

I'm personally leaning towards the ribbon, but would appreciate your thoughts!

I'm also curious if these styles should be applied on the single view of the listing, or just the block/archive view? I didn't find a ton of varied examples of featured classifieds-like styles, but they seemed to just be on the list-like view -- I just want to make sure I'm not missing something in this case, though, as I think the ribbon won't scale quite as nicely.

Lastly, I haven't addressed the featured-priority at all with these styles; I don't believe that's a needed feature yet, but let me know if I've missed anything!

Anyway -- please let me know what you think and if you have any questions at all about the above!

laurelfulford commented 2 years ago

A draft PR of the 'ribbon' styles has been added to the theme repo here: https://github.com/Automattic/newspack-theme/pull/1877 This seemed like the best location since the styles span elements in the listings plugin, Newspack Blocks and theme, but I'm open to feedback on moving it!

dkoo commented 2 years ago

@laurelfulford thanks so much for the various options and screenshots, as well as the draft PR. I agree with you that we should keep this feature as simple as possible for now, and I like the "ribbon" style that can be done via CSS only. I also saw you filed #282, which is a result of the the fact that only publishers who currently use Featured Listings not using Curated List blocks. #285 adds the missing support for Curated List blocks.

Let's move forward with the ribbon style, for now. If we get a lot of requests to add customizable text elements to the labels, we can revisit at that time.

laurelfulford commented 2 years ago

Thanks @dkoo!

I've marked https://github.com/Automattic/newspack-theme/pull/1877 as ready for review, and should be able to look at https://github.com/Automattic/newspack-listings/pull/285 in the next day or so, if no one gets to it first (thanks for tackling that so quickly!).

laurelfulford commented 2 years ago

Since https://github.com/Automattic/newspack-theme/pull/1877 is now merged, I think this issue can be closed for now.

@dkoo Any reason to keep this one open that I'm not thinking of?

dkoo commented 2 years ago

Nope, thanks for the reminder!