Skip to content

Migrate packages/block-serialization-default-parser package to TypeScript #70507

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conversation

im3dabasia
Copy link
Contributor

@im3dabasia im3dabasia commented Jun 24, 2025

What?

Part of: #67691
Migrating the packages/block-serialization-default-parser package to Typescript.

Why?

Type safety.

@im3dabasia im3dabasia changed the title [WIP]: Migrate packages/block-serialization-default-parser package to TypeScript Migrate packages/block-serialization-default-parser package to TypeScript Jun 25, 2025
@im3dabasia im3dabasia marked this pull request as ready for review June 25, 2025 10:45
@im3dabasia im3dabasia requested a review from dmsnell as a code owner June 25, 2025 10:45
Copy link

github-actions bot commented Jun 25, 2025

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: dmsnell <dmsnell@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@t-hamano t-hamano mentioned this pull request Jun 24, 2025
39 tasks
@t-hamano t-hamano added the [Type] Code Quality Issues or PRs that relate to code quality label Jun 25, 2025
@dmsnell
Copy link
Member

dmsnell commented Jun 27, 2025

Can we verify/confirm that in removing the docblock types that the generated apidocs retain the type information?

@im3dabasia
Copy link
Contributor Author

Can we verify/confirm that in removing the docblock types that the generated apidocs retain the type information?

I've confirmed that the generated API docs have not changed — they remain exactly as they were before the TypeScript migration

* @param innerBlocks
* @param innerHTML
* @param innerContent
* @return The block object.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

admittedly these weren’t the best before, without descriptions, but I think after this change they make a little less sense because the @param tag adds no information. for some of these it seems like they aren’t necessary, but then for ones like the @return tag it’s obvious they add value because the type of the return lacks explanatory power.

what are your thoughts on the tradeoffs between removing these altogether vs. taking advantage of the fact that we’re returning to these lines and finding a way to describe the parameters and return values?

e.g.

we could also expand the descriptions and make the tags more valuable

 /**
  * @param blockName Either the abbreviated core types, e.g. "paragraph", or the fully-qualitifed
  *                  block type with namespace and type, e.g. "core/paragraph" or "my-plugin/csv-table".
  */

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

on this note, I think if we add these back into the types at the top of the module, this documentation might track along with it and render much of these unnecessary 🤷‍♂️ 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a quick note: removing the @param tags entirely isn't really an option in this case — they get auto-added back when the file is saved.

I removed the existing descriptions because I felt they weren’t particularly meaningful or helpful as-is. That said, I completely agree — adding thoughtful descriptions (especially for certain parameters and return values) can be really valuable for developers.

Also, regarding your point about defining types at the top of the module — while that's definitely useful for type safety and structure, adding inline descriptions there doesn’t help with IDE usability. Those descriptions won’t show up when hovering over function calls in editors like VS Code. By contrast, having @param and @return descriptions directly in the function JSDoc does provide helpful context in hover tooltips, like this:

Ref image

Open to your thoughts on what makes the most sense here.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤷‍♂️ now that you say it I think I’ve seen this before, where the IDE doesn’t bring along the documentation. I know it won’t for the params because the type docs explain the property while function arguments, even of the same type, are not required to actually be used in the same way.

there’s one more thing: did you try ParsedBlock['blockName'] instead of blockName? I can imagine these being different because in the existing case, it just so happens that they are both called the same thing, but ParsedBlock['blockName'] is a reference to the actual type in the definition above.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, so I did give it a try, but it didn’t work out as expected — the descriptions don’t show up when hovering over the function. Here's what I tried:

  1. Replaced the types with ParsedBlock[...]
  2. Added comments where ParsedBlock is defined, describing each key.
Code Ref
function Block(
	blockName: ParsedBlock[ 'blockName' ],
	attrs: ParsedBlock[ 'attrs' ],
	innerBlocks: ParsedBlock[ 'innerBlocks' ],
	innerHTML: ParsedBlock[ 'innerHTML' ],
	innerContent: ParsedBlock[ 'innerContent' ]
): ParsedBlock {

Is it okay if we roll back to the approach you suggested earlier — adding the @param descriptions back in the function JSDoc itself? We can make the descriptions more vivid and helpful, which should improve the hover tooltips as well.

Something like this:

Screencast Ref
Screen.Recording.2025-07-03.at.4.56.04.PM.mov

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes this seems reasonable, @im3dabasia — the descriptions are a bit redundant, but helpful. thank you so much for going through the process: I guess we know now what each construction allows and hides.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added descriptions for the parameters and return values. Please let me know if I’ve missed anything or if any of them could be improved.

Looking forward to your feedback!

@im3dabasia im3dabasia force-pushed the try/migrate-block-serialization-default-parser-ts branch from 89773f9 to 143d169 Compare July 3, 2025 14:44
Copy link
Member

@dmsnell dmsnell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your patience. This looks good now to me, and if anything comes up we can adjust.

Are you able to commit it or do you need help? If you can, I would ask that you first squash this into a new commit and write a nice commit message. If you don’t have the access I am happy to merge it on your behalf — simply let me know.

Thanks for the effort and the persistence!

@im3dabasia
Copy link
Contributor Author

Hi Dennis,

Thank you for the guidance throughout the process.

Unfortunately, I don't have commit access at the moment. I’d appreciate it if you could handle the commit on my behalf.

dmsnell added a commit that referenced this pull request Jul 16, 2025
Co-authored-by: Dennis Snell <dennis.snell@automattic.com>
@dmsnell
Copy link
Member

dmsnell commented Jul 16, 2025

@im3dabasia can you do me a favor and try to reset this branch against the update I made which squashes the PR?

git fetch origin
git checkout try/migrate-block-serialization-default-parser-ts
git reset --hard 0f52a9b139b51db28379ed3e23432b8fc6010bf5

chore: Fix doc comment param for addFreeForm

docs: Add param comments for the functions in parser package

chore: Added spacing between types
@im3dabasia im3dabasia force-pushed the try/migrate-block-serialization-default-parser-ts branch from 143d169 to 5b63519 Compare July 17, 2025 04:20
@im3dabasia
Copy link
Contributor Author

@dmsnell , I have squashed the branch's commits into a single commit as requested. Hopefully that's what we wanted.

Let me know if you need anything else from my side.

dmsnell added a commit that referenced this pull request Jul 17, 2025
Co-authored-by: Dennis Snell <dennis.snell@automattic.com>
dmsnell added a commit that referenced this pull request Jul 17, 2025
Part of #67691.
Replaces #70507 (where the original patch was prepared).

Co-authored-by: Dennis Snell <dennis.snell@automattic.com>
@dmsnell
Copy link
Member

dmsnell commented Jul 17, 2025

Merged in 5d0ff24

@im3dabasia seems like you found out the other PR, but I figured it was easier than playing telephone over Github comments 😄

@dmsnell dmsnell closed this Jul 17, 2025
USERSATOSHI pushed a commit to USERSATOSHI/gutenberg that referenced this pull request Jul 23, 2025
…Press#70766)

Part of WordPress#67691.
Replaces WordPress#70507 (where the original patch was prepared).

Co-authored-by: Dennis Snell <dennis.snell@automattic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants