A first look at the Interactivity API

bph commented 11 months ago

Discussed in https://github.com/WordPress/developer-blog-content/discussions/141

^{Originally posted by **mburridge** July 6, 2023} The Interactivity API is coming. It was proposed in [this Make post](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/). This article would be a "first look" at the Interactivity API and include a basic tutorial to showcase the possibilities of the new API.

bph commented 11 months ago

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

magdalenapaciorek commented 11 months ago

I can take this article

bph commented 11 months ago

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

bph commented 10 months ago

@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.

magdalenapaciorek commented 10 months ago

@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?

bph commented 10 months ago

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.

bph commented 9 months ago

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

magdalenapaciorek commented 9 months ago

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

bph commented 9 months ago

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

magdalenapaciorek commented 9 months ago

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?

bph commented 9 months ago

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.

luisherranz commented 9 months ago

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!

bph commented 8 months ago

@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...

bph commented 8 months ago

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

bph commented 8 months ago

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.

magdalenapaciorek commented 8 months ago

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.

bph commented 8 months ago

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

bph commented 8 months ago

@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?

magdalenapaciorek commented 8 months ago

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.

magdalenapaciorek commented 8 months ago

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.

magdalenapaciorek commented 8 months ago

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

bph commented 8 months ago

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.

justintadlock commented 8 months ago

@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.

magdalenapaciorek commented 7 months ago

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?

ndiego commented 7 months ago

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

bph commented 7 months ago

@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.

bph commented 7 months ago

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.

magdalenapaciorek commented 7 months ago

@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/

magdalenapaciorek commented 7 months ago

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

bph commented 7 months ago

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.

bph commented 7 months ago

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

Social post scheduled for April 20, 2024

WordPress / developer-blog-content