Docs: Add new "Build your first block" tutorial to the Getting Started section of the BEH

[ndiego]

Fixes #56305

What?

This is a new tutorial for the Getting Started section of the Block Editor Handbook that teaches new block developers how to build their first block. The block built in the tutorial is the same one available in the Quick Start Guide, which is already in the Handbook. This allows developers to explore the block in the Quick Start Guide and then learn how to build it from scratch in the new Tutorial.

This PR also removes the old multi-page tutorial. Much of the content has already been repurposed in other docs.

Note

This tutorial is long, but it was designed with the upcoming redesign of Developer Resources in mind. Following the redesign, all docs pages will have an autogenerated TOC, which will allow users to easily navigate the doc. You can see an example of this on the staging site.

Why?

This effort aims to provide an up-to-date tutorial that allows new block developers to build a practical block quickly.

Testing Instructions

1. While the PR itself does not require any testing, the tutorial needs additional testing to ensure all the steps are clear.
2. Simply follow the tutorial as if you were a first-time block developer, and let me know what you think!

[github-actions]

Flaky tests detected in b382577.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7227175225
📝 Reported issues:

• [Flaky Test] should display the "Manage Fonts" icon #56776 in /test/e2e/specs/site-editor/font-library.spec.js

[justintadlock]

This looks like a much better starting point than we've had in the past.

---

Additional thoughts/questions:

Would date_i18n() be better than date() on the front-end? I don't think it matters for the year.

Technically, you can get the starting year by querying for the first published post. That might be a bit much for this tutorial, though, and you'd lose the awesome example of adding custom controls. But it's possible to do without user interaction. ;)

[ndiego]

Would date_i18n() be better than date() on the front-end? I don't think it matters for the year.

Good callout. I honestly have no strong feelings about either. I just used date() since it was native PHP, and all I needed was the year.

Technically, you can get the starting year by querying for the first published post. That might be a bit much for this tutorial, though, and you'd lose the awesome example of adding custom controls. But it's possible to do without user interaction. ;)

Haha yeah, I wanted to introduce the various components.

[juanmaguitar]

No strong opinions here but I think a path such as getting-started/tutorial/README.md for the tutorial would be more convenient.
What do you think?

[ndiego]

No strong opinions here but I think a path such as getting-started/tutorial/README.md for the tutorial would be more convenient.
What do you think?

So, create a new folder for the tutorial? The Quick Start Guide, FAQ, and Glossary are all single docs.

[juanmaguitar]

So, create a new folder for the tutorial? The Quick Start Guide, FAQ, and Glossary are all single docs.

Oh, I see, sorry. I quickly looked at the structure and thought it was getting-started/create-block/tutorial.md.
Ignore my comment here. It makes sense how it is suggested in the PR.

[ndiego]

Thanks @juanmaguitar, I fixed those items with the latest updates.

[juanmaguitar]

LGTM! ✅
Maybe a mention, in the final "Wrapping Up" section, of the final code of this tutorial available at copyright-date-block-09aac3 would be useful (people can check the code, download it or see it live)
Some other mention that could be worth it: This tutorial explains in detail the block got in the "Quick Start Guide"