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.

[colorful-tones]

Yes, after each review, you just move it to the next status.

Thanks for clarifying. I was uncertain as to the expectations: self-triage or editorial team triages. 👍 Just as I'm always unclear whether I should mark a code review as addressed after I push an update or let the original code reviewer have the privilege of reviewing and marking it as addressed.

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

I'm not sure whether I've received two reviews at this point. I know that @bph did a review, and @justintadlock also did one. @bph, did you feel that your review was a full one?

[abhansnuk]

Hi I wanted to look up one thing as part of my review, and then will update this ticket. Just coming out of the release party. Really like the updated post. Thanks everyone who has worked on this.

[bph]

My review Turned out to be just a first glance. I am in Torino this week for WordCamp Europe so, @abhansnuk can be your second reviewer, I'll connect again for publishing with you.

[colorful-tones]

@abhansnuk I saw that you left some feedback. I addressed most of the items. Please let me know if I can review or address anything further. Thanks!

[bph]

Seems you are ready to move your article to the blog! You should have access to the developer blog now: Use your wp.org credentials to login at https://developer.wordpress.org/news/wp-admin

Here is also the checklist pre- and post-publishing. As I invited you to this repo as a contributor, you should be able to check off the items.

Pre-publishing checklist: (updated 1/29/2024)

• Post Title and subheaders in sentence case
• Are Category or Categories selected?
• Are Tags identifies?
• Is there an explicit Excerpt?
• Are all images files uploaded to the media library
• Do all images have an alt-text?
• For TOC us the Pattern under Developer Blog > Table of contents
• Assign or upload a featured image
• Props added? (See Guidelines)
• add copy for a social post as comment to this issue (example)

As it's your first article, please let me know at this stage, so I can review the post on site, and publish it.

Post-publishing checklist

• add Props for reviews to #props channel in WP Slack (Example) (use Slack handles)
• Add the label "post to social" to the issue
• close the issue with a comment to link to the published post
• close the accompanying discussion with the link to the published post.
• add link to published post in the WPTrainingTeam GitHub repo's 'Website' field

[colorful-tones]

Copy for a social post:

Learn to create an animating timeline effect by extending core blocks and adding in some custom CSS and JavaScript.

https://developer.wordpress.org/news/2024/06/13/how-to-create-an-animated-timeline-plugin/)

@bph this is ready for a pre-publish review. Here is the public preview: https://developer.wordpress.org/news/?p=3753&preview=1&_ppp=3b7e182dca

[justintadlock]

@bph is currently at WCEU, so I did a final pre-publishing check. @colorful-tones - You're good to publish when you're ready.

I made one small change to the formatting of the props, but I didn't see anything out of place otherwise. Good job!

[colorful-tones]

This has been published. Thanks everyone for your support! 🫶
https://developer.wordpress.org/news/2024/06/13/how-to-create-an-animated-timeline-plugin/

[bph]

social post scheduled for July 20