New tracking issue for a public 1.0 version of the interactivity API .

I can take this article

Thank you for raising your hand @magdalenapaciorek - I am excited to work with you on your first post @magdalenapaciorek

@magdalenapaciorek I was wondering if you think you have the bandwidth to work on this post before the release of WordPress 6.5 (March 26, 2024) maybe even before that, so it's available when the Interactivity API is first available as a public API.

@bph that is exactly my plan - to have it published by the 6.5 release :) I've been experimenting with the code, learning how the Interactivity API works. I plan to have a first draft of the article by mid-February, would that leave us enough time for the reviews, ect?

That sounds like a great plan! Please don't hesitate to reach out to either on the #core-dev-blog channel or the #core-editor channel with questions or if you need someone to test example code or if something in unclear and doesn't work.

Hi @magdalenapaciorek How are is your draft coming along? Is your original plan still relevant?

Hi @bph I'm working on the article, I should have the first draft ready by the end of the week

Wonderful! Can't wait to read it. (no pressure, though)

Hi@bph , it's taking me longer than I thought, but I'm almost there. I think I'm at 90% at the moment. Still need to write about one directive and a summary, polish the code, etc.

The draft is available here: https://docs.google.com/document/d/1Gwac3aVSIqcMvizU29ErB_BMU7ffuF-bWyprVon0G0c/edit?usp=sharing

I've created some gifs, but I'm uncertain whether it's the correct format for the media files attached to the article. The blocks are interactive, and I think it's better to make a screen recording rather than just a screenshot. Are there any specific requirements for creating screen recordings, like resolution, file format, etc.? Could you offer some advice?

Hi @magdalenapaciorek thanks for pushing it forward. I'll be traveling next week, but should be able to review your post.

@ndiego or @ryanwelcher please give it a technical review?

Animated Gifs are inaccessible as they can't be controlled, so we need videos. I don't think there are any other requirements for the site than what WordPress would need.

I took a look and it looks great 🙂

My only feedback is to introduce the derived state earlier, as it's important to teach people to avoid keeping redundant state. State (either global or local) should always be minimal. If a piece of state can be calculated from another, it should be removed in favor of derived state.

For example, data-wp-style--display="context.display should be state.display (or other name) and derived from context.isOpen .

 store (  '...' ,  {
   get  display ( )  {
     const  { isOpen }  =  getContext ( ) ;
     return  isOpen ? 'block' : 'none' ;
   }
 } )

The same happens in the trees example. There should be only one number stored in the context, and the math calculations should be done as derived state.

But other than that, I really like the examples and explanations!

@magdalenapaciorek I started my review of the post, and came across a lot of 'we'. I changed most of it to 'you' if it was possible from the sentence structure. Why would I do that? It's part of the guidelines for writers post and traces back to the posting guidelines from the Core Handbook.
I will continue with my review but leave it to you to replace your we's...

Reviewed to the bookmark. Need to get back to it tomorrow.

I hit a snafu on working through the code (see comment). Stopped at this bookmark.
@magdalenapaciorek can you take a look?

Another suggestion: For each directive, could you please link to the documentation of that particular directive.
Some more subheaders would help navigate, this as well

Observation, and I don't have a good handle on it.
It's difficult to modify previously copy/pasted code, when you don't know what exactly will be changed in the next section. Mostly you explain it very well, though...

This is a giant article for an introduction. If you change the task slightly and leave off the Tree Counter, it would be equally beneficial. You might need to update one or two screenshots, but then it's a bit more managable, I feel.

And lastly, it would be helpful if the final examples is placed in a GitHub repo on the Learn WordPress organization so it can be linked from the article. When you are ready, I'll invite you to the organization so you can create the rep there.

As for the snafu, I'd be happy to get on a screen sharing session so we can look over things together. This week, my calendar is pretty open.

hi @bph , I agree, it is giant, it makes sense to remove the second part, I'll do that. I will also try to rearange the code snippets, there is so many of them I also find it difficult to update and keep in synch. I'll aim for having one code snippet for one plugin file, this should make it more managable. So let me just try do that and then I'll be happy to meet on a screen sharing session, if that's ok.

@magdalenapaciorek I sent you a Slack message earlier to coordinate a screen sharing session...

@magdalenapaciorek hope you had a wonderful Easter holiday and were able to take a break from the computer screens.
How is your availability this week, should we work on getting your article over the finish line, as we talk about in our meeting?

Hi @bph , I'm working on finalizing the article. It should be ready by tomorrow. I'll ping you when it's ready for the next review.

Hi @bph I've finished editing.

I've included several recent links related to the Interactivity API in the summary. If there are any other interesting resources I may have missed, please feel free to suggest them.

The flashing effect on the first render was bothering me so I've just made a small update.

Hi @magdalenapaciorek I finished reviewing, had some more suggestions and i also added a few to the directive documentation at the end. You don't need a Summary headline to end the article :-)
I added "Resources to learn more" section.

Great work! This is a fabulous introduction.

Let me know one you feel it's ready you can move it to the Dev Blog, and save it in draft, Enable the Public preview link and share it in a comment.

@magdalenapaciorek - Great job with this! I expect that a lot of folks will enjoy reading it.

I just wrapped up the second review. The biggest thing I'd ask that you do is make sure to treat any code or values as code in the text. Some examples:

 This is a `<p>` tag. This is a `false` value. This is referring to `aVariable`.

There were quite a few referenced values, and I didn't want to make the doc too crazy with editing each. I showed a few examples, and will let you take it from here.

Also, a tip: keep the backtick characters in the Google Doc instead of letting Google convert them. It'll be easier to update each instance when you port everything over to a WordPress.

Hi @bph @justintadlock I've moved the article to WordPress, saved it as a draft, and added 3 subtitles to the last section. I haven't set the languages in the code blocks. The code is not easily readable now, especially in the longer snippets. Would it be possible to highlight it in some way?

I am working on getting the Code blocks fixed, a PR has been created with a temporary fix.

@magdalenapaciorek You are almost there!

Here are the two checklists (pre and post publishing) -

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 )
  🙌 Publish! 📗

Post-publishing checklist

• add Props for reviews to #props channel in WP Slack ( Example ) (use Slack handles)
• close the issue with a comment to link to the published post
• close the accompanying discussion with the link to the published post.

After you are done with the pre-publish check list, keep it in draft, though. As this is your first article, I'll double-check.

@bph I've finished updating the article following the pre-publishing checklist. Additionally, I've updated the link to yesterday's Developer Hours with the YouTube recording. I've also included a note about the sponsored contribution; while it would be great to have it there, feel free remove it if it can't be accepted.

Social post:

Learn how to add user interactions to the front end of your blocks using the Interactivity API:

https://developer.wordpress.org/news/2024/04/10/a-first-look-at-the-interactivity-api/

I've just updated the Code blocks with the languages.

Published: A first look at the Interactivity API

@magdalenapaciorek Congratulations on publishing your first article on the Developer Blog!

Would you do the honors and "add Props for reviews to #props channel in WP Slack ( Example ) (use Slack handles)" and I will take care of the rest of the post-publishing checklist.

Published: https://developer.wordpress.org/news/2024/04/11/a-first-look-at-the-interactivity-api/

Social post scheduled for April 20, 2024