Update Block: Archives

[melchoyce]

Moved over from #1464.

I wanted to take a look at rethinking the Archive widget rather than just porting it over. I ended up with two ideas: an archive list, and an archive grid.

Archive List

The current archive widget seems to be popular on blogs, especially things like food/craft/lifestyle blogs. However, if you've been running your blog for a while, you end up with a gigantic list of months. Additionally, there's no way to see what posts were written within that month — just the number. To see the posts, you need to click into the archive for that month. What if you could see which posts were written that month?

To solve these problems, I:

• Swapped links to the month archives for accordions.
• Started with months from your current year, then dropped down to the year for older posts. Previous years have an extra level of depth, so you open them and see the available months from that year.

This should help both condense the lists for long-time bloggers, and help people find the posts they're browsing for faster.

Archive Grid

While a list is great for a sidebar or a narrower widget area, blocks can also exist within post and page content. This is where a grid comes in handy, so you can have a more dynamic approach to listing out your archive without needing to code up a custom template.

This particular mockup is inspired by Tumblr's default archive pages. Thinking that we could load the current year, then include a "load more" button or year-based pagination at the end of the current year's list.

We could maybe do something like https://en.blog.wordpress.com/2018/, which shows the featured image as the background of the post block. It's very subtle, but helps you distinguish between posts and brings in some extra character.

---

Both of these still need some work — for example, you can see neither has settings yet — but I wanted to get the conversation started as soon as I had something to show.

[richtabor]

I think this is a great idea @melchoyce. Having both a list and grid view has precedence, as that capability already exists in the Latest Posts block - which also displays blocks.

The featured image suggestion is awesome!

I wonder if using similar styling/markup (for the grid) as the Latest Posts block would be helpful for theme developers to apply similar custom styling relatively easily for both the Archives and Latest Posts blocks. If so, then perhaps the grid layout for the Latest Posts block should be updated with the same featured image suggestion as you've presented? 🤔

[mizejewski]

👍🏼@melchoyce on rethinking the Archive widget rather than just porting it over. The improved accordion design is much more useful for long lists. Adding an option for a visual card style display is great too. I especially like the example with featured image as background, though that should probably be a setting, in case the user has not applied featured images to their posts.

[afercia]

Discussed during today's accessibility bug scrub:

• accordions will need some specific markup and interaction for good accessibility, but they're pretty OK so no big objections
• not sure if there's the need for additional accessibility feedback, please do feel free to comment if so

[anevins12]

Looks good, I can not envisage any a11y issues though I have some queries about the ellipsis added to the long titles. This won't be achievable in the front-end because it's a multi-line sentence. Instead we'll have to add an ellipsis for all breakpoints via the backend. Or we could avoid the ellipsis.

[melchoyce]

Maybe instead of ellipses, we could use grid or flex to expand the height of an entire row to fit the longest title in that row?

[joyously]

Seems like a lot of data for a block. (all the post titles of the whole blog)
How does that affect SEO? (to have links to all those on one page)

[ZebulanStanphill]

Concerning a grid style, I think it should be implemented as a block style, rather than a block option. The markup would be the same regardless of how the block is styled, right?

I think it was a mistake to have the list/grid option in the Latest Posts block implemented the way it was; it should have been a block style like how the Separator block implements its default variations.

[LukaszJaro]

@melchoyce I just built a very similar archive list as your first example, I first searched around but couldn't find anything that fit the requirements that our UI designer came up with:

I'm using the details disclosure element which can be styled and toggle animation with no JS requirement. I first created it in shortcode format as it takes more effort to figure out in block format, but that will be my next step.

It would be nice to make core archive block have some more variations or more flexible in general. Maybe have most common and useful variations trending on the web.