Tutorial on using create-block scaffolding to write a multi-block plugin

[justintadlock]

Discussed in #186

^{Originally posted by bph December 14, 2023}
The first impression is that create-block scaffolding creates only single block plugins and that it can be used to add multiple blocks to a plugin.

It could be a block that requires additional blocks as inner blocks/ And example could be a one question poll. with multiple answers.

[n8finch]

@justintadlock Happy to take this one on.

[justintadlock]

Ooops! Accidentally assigned it to myself there for a second. :)

@n8finch - Thanks for taking this on. Feel free to ask me for any help or anyone from the #core-dev-blog Slack channel about getting started.

Here's a list with important links for contributing:

• https://developer.wordpress.org/news/how-to-contribute/
• https://developer.wordpress.org/news/tips-and-guidelines-for-writers/

The biggest thing is to put your draft (when you start it) in a Google Doc that has open comments/suggestions and leave the link to it here. The review process will happen within the doc.

[n8finch]

Hey folks, just a quick update, here's the outline for the tutorial:

1. Set up the multiblock plugin
   1. Use create-block to get a single block
   2. Create another block --no-plugin, rearrange files, multi block is ready
   3. Save it to your github to use as a template later, or just
   4. Any new blocks, you can create a block without a plugin, and include it.
2. What we’ll build:
   1. A Review Card block with these two (or three) blocks
      1. It will have a title (heading)
      2. Star Rating block (a block we’ll make), post meta, might be able to use Block Linking
   2. Notes along the way:
      1. We could use this block at the top of a post
      2. We could use the block in the Post Query block to show
      3. We can also show how to limit the Star Rating block to be used only in the Review Card block

It's "in development" right now, but the idea is to build out a block with an inner block with limitations on where the block should be used.

I'll get a POC up soon to a repo for review, should be in the next two weeks, maybe sooner.

Is there a "due date" for this? (cc @bph ) or just "sooner rather than later" 🙂

Do you also want a screencast video with this? I'm happy to do that as well.

[bph]

@n8finch Thank you. This looks really good. Can't wait to read it. I really like the example idea.

A screencast supporting the written instructions and insights would be great, but the article should be able to stand alone.

A for a due date:
Contributors pick their due date, as you know your calendar and your other workload. Once you pick a date, you can publicly share it here, and we can check in on your progress and send a reminder or so.

"Sooner rather than later" works, too.

[bph]

@n8finch How are you doing? It's been a while. What is your timeline for getting a first draft, that can be reviewed?

[n8finch]

@bph I'm so sorry, this had fallen off my radar. I think if possible, I'll need one more week, I'm most of the way through the code (not a lot left to do there), and then just write it up.

[bph]

Awesome! Looking forward to ready your draft.

Here are a few links to get started:

• Tips and Guidelines for writers
• Google Doc Template

[n8finch]

@bph sorry for the delay, code is here, should have the draft finished tomorrow.

[n8finch]

@bph ok, the draft is here: https://docs.google.com/document/d/1nxBUO6fla1xli-DVBLK7c7lVtfmKra5AVI-YilEtqIc/edit?usp=sharing

What do I need to do to get you or anyone else access as an editor? I've made anyone with the link a Commenter.

[bph]

@n8finch Thank you! I am fine being a commenter and leave edit suggestions. I will be reviewing the post tomorrow, depending on your schedule, and availability of 2nd reviewer, we could aim for a publishing date for next week.

[bph]

Made it to the Bookmark
Will continue after my meetings.

[bph]

It's a great article and teaches quite a lot. Thank you, @n8finch, I am done with the first review. Left quite a few suggestions and comments. Ping me on WP Slack (DM or in #core-dev-blog channel) if you have questions.

[n8finch]

@bph thank you so much for the in-depth review! I've made the updates and closed out all your suggestions. I've also added the repo to the WPTraining team: https://github.com/wptrainingteam/post-review-blocks

Let me know if I need to do anything else at the moment. 🙂 Otherwise, I'll hang tight for a 2nd review.

[ndiego]

Hey @n8finch, great article. I went through and added a bunch of notes/suggestions 😅 Please don't be daunted by the number of suggestions, it really is great. Let me know if you have any questions!

[n8finch]

@ndiego thanks so much for the thorough review, not too much at all, could have been way worse 😁... I've got it all fixed up from your suggestions.

Let me know if anything else needs to be addressed. 🙂 (cc @bph )

[bph]

@n8finch Although I tested your example code and it works well, I am a bit fuzzy on coding standards, so I ask @ndiego to take a second look at the technical details. In essence we teamed up on the first review. Reyes Martinez raised her hand to do the final "second review", I believe, later today.

I so appreciate your patience and your staying with this process. Thank you.

[rmartinezduque]

Hi @n8finch, great tutorial! I added some suggestions to the doc, they are mostly for very minor grammatical considerations or clarity and readability. Please feel free to accept or reject as you see fit. 🙂

[bph]

Nate, I sent you an invitation to the Developer Blog site. Once you are done with the feedback work, you can start posting it to the site.

Please enable the Public Post Preview feature and share the link in a comment here.

Here are the pre- and post-publishing checklists. (I am aware that you can't check of the list items. It's a permission thing on GitHub, I am working on. It will still be useful)

As this is your first post on the Developer Blog, I will double-check on these items, too and publish.

The site has a pattern for the Table of content and also provides a Notice block for call-out or special info or warnings.

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)
• 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.

[n8finch]

@rmartinezduque thanks so much for the review! I really appreciate it!

@bph thanks for the invite, I'm in and will get to work on the check list. Haha, no, thank you and everyone else for your patience and help bringing this article to life. I'm really glad it's all coming together 🙂.

[n8finch]

@bph ok, I think it's ready!

Quick question: how big (dimensions) should the featured image be? The current Featured Image is 854 by 790 pixels. Happy to change it if it needs to be bigger, just let me know know the preferred or minimum dimensions.

• 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?
• add copy for a social post as comment to this issue

Social copy:

Learn how to use 'create-block' to set up a multi-block plugin that uses InnerBlocks and post meta to create two blocks: a Rating block and a Review Card block.
https://developer.wordpress.org/news/2024/05/20/setting-up-a-multi-block-using-inner-blocks-and-post-meta/

Anything else, let me know. Thank you! 🙂

[bph]

We haven't finalized the format standards yet for feature images. Here are notes I gave Ronny

[bph]

• I moved the TOC below the introductory parts
• I removed the inline code formatting from the npx create block commands. They looked odd. There might be a bug in the list block as the bullet was on the second line of the second command, of the multi-line command.
• found a few 'allows us' and switch to 'allows you'
• Changed Feel free to If needed
• move the props section to the end, aligned right and italics.

@n8finch once you update your featured image, go ahead and publish it. :-)

[n8finch]

@bph got the feature image updated, woohoo! 🙌

Whenever you're ready and available 🚀 😁

[bph]

🎉 Congratulation @n8finch Your article is published now:
Setting up a multi-block plugin using InnerBlocks and post meta

[n8finch]

@bph Since the article is published, I've added props to slack.

Are the rest of the items on the list something you need to take care of?:
add Props for reviews to #props channel in WP Slack ([Exam

• Add Props for reviews to #props channel in WP Slack
• 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.

[bph]

Thank you so much for working on the article and through all the reviews :-)
🎉 All checklist items done!