travel icon indicating copy to clipboard operation
travel copied to clipboard

[Gutenberg] Build a "Featured Destinations" block for Homepage

Open postphotos opened this issue 6 years ago • 8 comments

part of the components listed in #12.

As requested (and detailed) by @miina here.

Mockups are available here:

  • https://www.figma.com/file/L14jTE7iNGOE7DH57Ro7ncyu/Travel-Theme
  • https://ampstart-iframes.firebaseapp.com/templates/travel/travel.amp

Some notes from #9 apply here:

Would be used for the display post (next to "Discover Adventures"), for Top Adventures Near You; Would have controls to choose: How many posts to show; Which category posts to show; How to sort (e.g. by meta value X); Layout / or which fields to display. For example for the post next to "Discover Adventures" you could choose layout A; 1 post; category "Food", for the the Top Adventures Near You" could choose layout B; 3 posts; category "Adventure"; sort by meta value Review; Question: Does this make sense for these two sections from the editor's point of view?

Category/taxonomy list block: Would be used for "Browse by activity" and "Featured destinations"; Would have option to choose which fields to display (e.g. meta value such as icon / background image; count of posts Option to choose how many categories to display; Perhaps option to filter by "featured" Option to sort by ... ?

postphotos avatar Apr 03 '18 15:04 postphotos

See Weston's comment on the possible approach: https://xwp.slack.com/archives/C75JEPFDZ/p1522856822000257

Let a user upload a photo of any dimensions. If it is a portrait photo, try to display it in the grid as a portrait slot. If that's not possible, then allow a landscape photo to be cropped to portrait dimensions. The block could try sorting the destinations so that the photos are sorted as (1 portrait|2 landscape)+ But then otherwise fallback to forcing a portrait to be rendered in a landscape slot if otherwise not available.

miina avatar Apr 04 '18 15:04 miina

Hi @miina, I'll turn this into real ACs shortly, but just dropping in from yesterday's meeting.

Featured Destinations
- taxonomy checkbox
- Popular rating
- edit page of a term for location
- upload image in term page

postphotos avatar Apr 05 '18 14:04 postphotos

Moving To "QA" Column

The "Featured Destinations" block was part of the merged PR #13. So I'm moving this issue into the "QA" column.

kienstra avatar Apr 11 '18 21:04 kienstra

@kienstra This ticket actually has a separate PR as well which is currently still WIP: #34. What #13 included was displaying static block, however as far as I understand, this ticket is for pulling the content dynamically and is still in process.

miina avatar Apr 12 '18 06:04 miina

Thanks for clarifying that, @miina. I moved this back to "In progress."

kienstra avatar Apr 12 '18 18:04 kienstra

Request For Testing

Hi Claudio, Could you please test this block?

  1. Create a new page
  2. Add a "Featured Destinations" block
add-featured-dest

Expected:

  • It matches the design for desktop and mobile
  • It's responsive in the editor and the front-end
  • The heading is editable: featured-dest-editable

kienstra avatar Apr 27 '18 21:04 kienstra

Background image not appearing in IE11: image

csossi avatar May 10 '18 12:05 csossi

Question About Images

Hi @csossi, Thanks for testing this. Could you elaborate on "background image not appearing"?

IE11: http://dev-amp-start-travel.pantheonsite.io/ bs_win10_ie_11 0

kienstra avatar May 11 '18 21:05 kienstra