Timeline block with animated line

[bph]

Discussed in #240

^{Originally posted by colorful-tones March 15, 2024}
I feel inspired by Keith Devon's (co-founder of Highrise Digital) original Twitter (X) share here: https://x.com/keithdevon/status/1764938947233263861?s=20

He shared a neat timeline feature he built. It is a series of grouped elements stacked vertically in reverse chronological order. Each grouped timeline event has a date, a brief description, and a picture. As the user scrolls down the page, a vertical line visually ties each event on the timeline together by animating down the page (when in scroll view).

This could be tied to a CSS class and applied to a Group or Query block wrapper, in which we could use a block variation to extend core blocks to apply the class and then utilize the Interactivity API to apply the animated line.

This would tie together a lot of new and recent stuff coming out, and I would be happy to dive in.

[colorful-tones]

I would be excited to write this, and I believe I would likely target late April or early May for publication. I'll likely look to reference and hopefully build off of knowledge shared in #188

[bph]

Thank you @colorful-tones for taking this on! Can't wait to see a great timeline block built!

[bph]

@colorful-tones Just wanted to check in with you to see if there are any blockers, I can help remove.

[colorful-tones]

Hi @bph - time is the only blocker for me. I believe that I should be able to have a draft ready by mid-May. I'll start in on it next week.

[royjemee]

Hi @colorful-tones
I am keeping my eye on this thread. I am happy to see it's in progress.

[colorful-tones]

@bph I've just about wrapped up prototyping the code base for addressing this timeline experience, and it was a fun exercise. However, utilizing the Interactivity API seemed unnecessary. The main reasons are overcomplexity and, similarly, too many steps to follow.

I've approached it with the mindset of extending core Group blocks with some light CSS and JavaScript that is enqueued only if a custom class (.timeline) is assigned to fade items per Group. It is a lightweight plugin, and I plan to push up the code by the end of the day today.

I wanted to seek guidance on whether I should re-submit this for consideration or proceed with creating a draft post for review. Then, we can consider whether the scope of the post has changed too much and should be re-submitted. 🤔

[bph]

Thanks for letting me know @colorful-tones - Will you still work on the Timeline Block and have animation via CSS? Then it might still be a good example of block development.

Share the draft in a Google Doc here the permission to "allow people with a link to view/comment" - then we can discuss it during editorial group meeting and change the title. :-)

The next editorial group meeting is on Jun 6, maybe that's enough time to provide the draft?
If not, July 4th is the next meeting.

[colorful-tones]

Will you still work on the Timeline Block and have animation via CSS? Then, it might still be a good example of block development.

I would not call it a Timeline Block. I am strategically extending the Group block.

I'm utilizing the WP_HTML_Tag_Processor to check if a Group block has a class assigned equal to .timeline. If it does then I queue up an additional JavaScript and CSS file.

The JavaScript mainly relies on the IntersectionObserver API to watch for scrolling coordinates and assign an additional .animate class when something is within the viewport. The CSS file assigns the animation for the line and fades some things in.

I would also like to offer some additional considerations for creating the final solution into a pattern or even a series of patterns so that content creators can choose from a few different Timeline appearances when adding it to their content.

Share the draft in a Google Doc here the permission to "allow people with a link to view/comment" - then we can discuss it during editorial group meeting and change the title. :-)

I will. 👍

The next editorial group meeting is on Jun 6, maybe that's enough time to provide the draft?

Yes, I will aim to have a draft complete and ready for consideration. Thanks!

[bph]

Sounds like a great plan!

[colorful-tones]

@bph Here is the draft post with the new working title (totally open to suggestions): Breaking down the barriers of block builds. It is ready for editorial review.

https://docs.google.com/document/d/1gnVWrVJU22qFcWF8iipPSdSI6h9BG6Gl-LkRfzGei7A/edit?usp=sharing

[bph]

Thank you @colorful-tones Could you, please modify the sharing setting to "Anyone with the link" to make comments.

[colorful-tones]

Could you, please modify the sharing setting to "Anyone with the link" to make comments.

Done. Sorry about that.

[bph]

No worries. Seems I didn't share these links with you before you started writing.

Tips and guidelines for writers
How to contribute
#242
Please let me know how I can assist or if you have questions.

[justintadlock]

Awesome work, @colorful-tones! This is really cool.

First review is finished.

[colorful-tones]

Ok, I addressed all of the feedback thus far. Things are in a good spot.

I'm currently investigating access to the WPTrainingTeam GitHub repo so I can create a corresponding Playground Blueprint repo and link to it in the post, but this should not be a blocker for publication.

Google Doc: WP Dev Blog – How to create an animated timeline plugin [draft]

What might be the next steps here? Shall I transition this to Needs 2nd Review status? @justintadlock @abhansnuk

[justintadlock]

@colorful-tones - I moved it to the 2nd review stage. Yes, after each review, you just move it to the next status.

If you've had two reviews, you'd move it to the Ready to Publish status after working through the notes.