WordPress 4.9.8 introduced a call to test out the new Gutenberg editor. This spurred a huge jump in installations of the plugin. The number of active installs of the plugin shot up 330%. If you’re one of the new downloaders, welcome to the party! Now let’s find some Gutenberg bugs!
Gutenberg Right Now
The Gutenberg editor is still a work in progress. It has grown leaps and bounds since the plugin was first released nearly a year ago. Though it still is in active development.
At this point Gutenberg (v3.5.0 as of this writing) is considered “Feature Complete”. Meaning the core features of the Gutenberg editor are in place. They may not all be working 100% perfectly1. Now it’s time to squash bugs 🐛🔨.
It’s at a point where users are being encouraged to test the editor in order to get a wide array of feedback in a large assortment of use cases. That means bugs will be found and the best way to get them fixed is to properly report them.
What is a Bug
First of all you’ll want to determine if what you’re seeing is best described as a bug, support question, or feedback.
Example 1: You think it would be nice if feature 1 behaved in a certain way. But feature 1 doesn’t actually appear to be broken.
This is more likely feedback and can be sent using the feedback form.
Example 2: You want to know how you can use feature 2.
This is better suited as a support question. And can be reported in the plugin support form.
Example 3: The wide and full image alignment options aren’t showing in my theme. Blocks are not displayed properly on my published posts.
This is likely a request that will need to be directed to the theme author.
Example 4: When trying to add a Giphy embed a broken link is appearing instead of the expected gif.
You have a bug. Since the feature is not working as expected and is instead resulting in a broken interface.
Note: I reported this after I ran into the issue trying to insert the gif seen above.
How to Report Gutenbugs
Sorry had to throw in at least one Guten-pun.
As you’re working with the Gutenberg editor and you run into something that doesn’t work as expected you may have just found a bug.
Is the issue consistently repeatable?
The first step is to repeat whatever process that caused the bug and see if you can consistently recreate it.
For example, to eliminate the possibility of the Giphy issue being tied to my theme or a plugin I spun up a quick local site using Local by Flywheel with just twentyseventeen and only the Gutenberg plugin installed. Next I performed the same steps that gave me the issue on my live site. And I got the same results.
Write these steps down. They’ll come in handy later when reporting the bug.
Is there already an issue reported?
Now that we have a repeatable issue we can search to see if someone has already reported it on Github.
Do some quick searches of keywords from your issue and see if there is already an open issue for it. You may want to take a look and see if any recently closed issues match yours as well. Since there could already be a fix in place for the next plugin release.
Submitting your issue.
Ok. You’ve done your due diligence and you seem to have a legitimate, unreported bug on your hands. Now it’s time to report the bug. The more information you can give the better.
In any form of bug reporting screenshots and screencasts can be a huge help. My goto tool for this is Monosnap. It lets you take a screenshot of any area of your screen and gives you a shareable link to an image that can be added directly to a github issue via markdown
You’re also going to want to be able to give detailed information on steps taken to recreate the bug. Be as descriptive as possible here and make sure you’re not skipping any key steps. The better detail you give at the outset the faster the bug can be fixed.
Finally, you’ll want to be able to share your operating system version as well as browser versions. These are typically easy to find. If you’re on Mac select your Browsers name in the menu bar and select “About {Browser Name}”. This will typically show you your browser version number. For your OS version use the Apple Icon and select “About This Mac”.
When you go to open your Github issue you’ll be greeted with the following placeholder markdown ready for your editing pleasure.
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Desktop (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Smartphone (please complete the following information):**
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
**Additional context**
- Please add the version of Gutenberg you are using in the description.
- To report a security issue, please visit the WordPress HackerOne program: https://hackerone.com/wordpress.Wrapping Up
Now that you’ve reported your bug on Github make sure to follow along and answer any questions from those trying to fix it.
Or if you’re feeling a little ambitious go ahead and make the fix yourself.
If you’d like to delve into Gutenberg development check out my posts on getting started.
