Good first issue on Gutenberg

This post and screencast walks through the process for how you can make your first contribution to Gutenberg. I walk through all my steps to submit this Gutenberg PR#18175

This follows up on my previous screencast for creating a Storybook story for Gutenberg components.

Steps

1. Find issue to work on. Search using the good first issue label.

2. Fork and clone the Gutenberg repository to your account.

3. Create a branch to work in. My branch name I use the format {action}/{id}-{desc} where {action} is one of “add, update, remove, fix, try”, the {id} is an issue number I’m working against, and {desc} is a short description to help me.

4. Make the change, in this example it was updating a Gutenberg component then using storybook to test the updates.

It is a good practice, before making any changes, to first verify the bug or issue you are fixing. You can then see the difference your code makes and confirm the before/after behavior.

5. Run the tests. Follow the repositories practices and run any unit or linting tests that are setup. In Gutenberg, running npm run test runs both lint and unit tests.

6. Commit your code with a useful and complete commit message, it is better to include too much info to help a reviewer than not enough. Here is a good article on how to write a good commit message.

7. Create a Pull Request. From your forked repository on Github, create a pull request. A banner at the top will show after you push up your code. Fill in details, info, include links. You can edit your PR and add more info or comments to help reviewers.

8. Shepherd your PR to completion. You need to follow up and help get your PR merged. After creating your PR, a set of automated tests will run, you want to make sure these get to green. If not, click “Details” link next to failing test and see where the issue.

It might take a little time, but someone should come along and review your PR. Follow up on any comments or suggestions, you can push additional changes up if need be.

To make additional changes on the same PR, make your change locally on the same branch. Commit your change and push it up. It will update the existing PR.

9. Approved and merged! 🤘 The reviewer who approves, will likely just merge at the same time if no other changes are requested. Congrats, you’re a contributor now!

I hope you found this useful, and gets you started contributing to open source, either on the Gutenberg project or any others.