Case Study: A #Nocode Contributor Journey on the WordPress Gutenberg Github Repo

So thank you for being here with me. This is a bit weird doing a talk like this online. If I’m talking in an in-person boot camp, we would be in the smallest room and could have it quite interactive and have other contributors share the journey as well. So concerning how hard it is to volunteer time, especially off the 2020 with working from home at a childcare challenges and.

Care for other parents or worse, the latest version, repres 5.6 and over 600 contributors. I’m grateful that this new talk was accepted at work Fest. Um, and I want to thank the organizers, volunteers, speakers, and sponsors for making it happen. And thank you all who are interested in contributing to WordPress or at least learning more from contributors.

So come work on this open source software used by hundreds of millions of users. So on them, the site make.wordpress.org. There are over 18 teams that have their block there and all the handbooks, um, and how the team, uh, works. Not every team contributes code and every coding team has, uh, Great need for people who don’t know how to contribute code, but our project managers can test features, facilitate meetings, discuss new features or processes and organize meetups and speak at webcams.

Why contributing. Firstly is the business case in our web development business and policy systems. We have been using WordPress for a decade now and made good money with it. And we work with the software without any licensing fees or any. Uh, monetary upgrade costs in a community of very generous people.

Working on the project gave us an even deeper appreciation for the work and the people behind the project. We are all standing on the shoulders of giants, contributing to repres is part of giving back as much as I can. Others wrote about it. Most recently, the team Joe’s produced a great long read. About how open source brings better solutions and a more inclusive society.

Apart from some street credit and fall of badges contributing to reckless brings me personal joy to the last five years have been very inspiring. And I learned so much for my personal growth or how to lead and work remotely as well as meeting people around the world. The kindness, patience and professionalism is reassuring.

Even if the rest of the world descends in chaos, fear, uncertainty, and doubt. I consider many teammates, friends, and as soon as we get back into in-person meetings, there will be a hug Fest. The marketing team. Also it’s no code team published a longer post about why contributing to WordPress benefits, everyone, or why contributors give this goods for free?

Let me leave that for an introduction into con January contributing, you were promised a case study on no code contributor journey on the workers, get hub repository for Gutenberg. So let’s get to the meat of the matter. Um, the good enough slash block editor team belongs to a larger, to the larger core team.

It’s the team developing the block editor and the site editor. I often get the question. What’s the difference between the block editor and Gutenberg. So per se, there isn’t really a difference. So you can think about that. The block editor is what’s in WordPress or WordPress core, and Gutenberg is the plugin that, um, where it’s developed.

A Gutenberg is also the idea of a larger, uh, revamping of the whole WordPress experience. So Weber pool releases every three to four months and the Gutenberg developers, however, release. A new version for the plugin every two weeks. So when the next WordPress release comes around all the features and fixes the plugin received since, since the last major release will be merged into the core code base in repres.

So for first 5.6, that was released in December. It incorporated the plugin versions, 8.6 to 9.2. So Gutenberg team has regular meetings on ins in that Slack channel on Wednesdays 9:00 AM. Eastern 6:00 AM, Pacific, sorry, West coast people. And it’s 1400, uh, UTC. And the Slack channel is separate from core it’s slash core dash editor Slack channel.

Um, they’re also meeting notes, posted on the make dot  dot org core blog. So flash forward for us as core and apart from the meetings, most Gutenberg developers communicate on get hub. So let’s get started. So I do not contribute any code to the project. I’m not a PHP developer and my JavaScript knowledge is 10 years old.

I would be useless as a developer or designer, but I use the block editor a lot. I mean, I spent time many, many hours per week working in it. And the Goodman times is pretty much the test site in production for the Gutenberg plugin. What I do is I create issues on the GitHub repository. Anthem, the screen that you just see is just a screenshot, awful, uh, of my, my issues.

Um, but we go into a little bit more detail situations. What are the situations when I create, um, issues, when ever I, uh, encounter a bug or annoyance or inconsistencies, most of the time I stop what I’m doing and I create the issue or I do. Uh, make a note of it. So I can go back to that. I also test new features, uh, for an article.

So if I want to write about the block directory, I definitely want to test it before that. And once in a while I run into issues there and write, write up. I bought a report. I also do, um, release testers. Um, so release candidates from the plugin as though, um, and then, uh, the last but not the least is any idea have on feature, feature improvements.

And that’s when I feel a different approach might make a feature much more helpful for power users or if something is missing that I find. Um, so let’s look about, um, some examples. Don’t worry. I will not discuss the merit of the issues or just go deeper in a good Makoto or something like that. Just want you to share, I want to show you what paths and engagement they can take.

So the first one, uh, first example is about, uh, bugs and annoyances. When I click on, on this link. Yeah, Edworks excellent. I have to have it at a right. My bullet points as a normal paragraph. And then when I’m done with all the bullet points, I convert them to. To a list. And up until summer 2018, I found it very easy to do this in a block editor.

And, um, with the next version for this, I encountered that it wouldn’t work anymore. Um, that one was when you scroll through this, um, that one was pretty fast resolved. Um, Mathias gave me a hint that it now has the trend. Uh, I can do this now through the transform button that was, um, Big then, um, just introduced.

So that was, that was easy. Right? So the next one was also a bug, but it had to do with, uh, the meta box. And so the middle box kind of would scroll up to the top of the editor instead of staying put on the bottom of it. And it seems that that, so quite a few people were able to replicate it. Yuan kind of said, Oh, um, I was able to reproduce, so that was all good.

And, um, but then he also said that want to do bugging this, uh, he found that that was actually an upstream issue from a plugin. This issue was closed, but then here was the issue. At the, uh, Yost, um, get hub repository. So I was able to, um, follow along there and then, uh, tested again when the new, um, Yoast plugin was in, in, uh, Released so, and the next, so those two bug reports, but then also test new features.

And the first example here is it’s for the widget screen. So it was just recently lost in October. Um, the calendar block, uh, triggered an error developers who produced it and labeled it with, um, a calendar widget and screen and debug and bug. And then, um, What happened was that in October it was reproducible.

And then just a few days ago that Robert Anderson also tested it again. If this is still something that needs to be taken care of. And obviously that is now. Moved to development for the test release candidates. I have two examples, uh, wanting a for missing file, which was, um, instant, almost instantly resolved because it was a release candidate.

And, um, a day later there was a, um, was the plugin fix. And another one was in this one, it was issued the audio block, uh, did a disappearing act, uh, in the editor. And that was also fixed. Um, you can, you can imagine that it is increased the quality of the, uh, of the plugin when these kinds of bugs are caught before the final release, but it was hit and miss for me to be able to test the release candidates because there are only two days in between, um, since mid December, um, they changed.

Uh, the frequency of it. And so now that it’s a seven day period, uh, and we can do, um, some more, uh, consistent testing of the release candidates. Um, and then I do, uh, feature improvements, um, issues, and, um, this one might interest a few. Um, so. The keyboard shortcut to switched to HTML, editing on a block level.

Um, there’s a shortcut keyboard to change the whole editor from visual to code. Similar to the classic editor where you have your text and the visual kind of tabs. Um, but I found with a, uh, block-based, um, idea. I’m normally not going through the whole, uh, code of, of, of a whole post. I, if I want to fill it with a HTML of a block, it’s mostly block-based.

So, um, I suggested to have that implemented. Because it would ease the flow of things as well. Yeah. And OBO, uh, menu items actually have, um, uh, keyboard shortcuts. So it would also fall into the consistency of that. Um, well, uh, I suggested as soon as September, 2018 and, um, there were a lot of, um, yeah, uh, engagement there.

Cool idea that really makes sense materials got involved. Um, yeah. So, but, um, still, yeah, in December. So there was a November was some discussion about it. And, um, there were quite a few who, who tried it and then didn’t get, uh, finished with the, uh, PR or with a code base. So, um, I hope that sooner or later, a developer finds time to book through.

Through this to get this going, but that’s a plastic example that even if you have a good idea, it does not have, does not always make it into, um, a developer’s head. So you always also need to find a developer for actually implementing those features. Um, and the last one that I share with you is, uh, is a feature improvement that you might want to help, um, support.

That’s a user triggered search in the block directory. So right now in the block directory, you don’t, um, if you already have a block for a keyword. You are not able to see what else is in the block directory. You only see what’s on yours. So we went through, um, and this is pretty normal for feature requests that you first kind of need an idea of how to actually implement that.

And, um, so I, I posted a few screenshots kind of mock ups where I put the button, um, and there were some ideas and then the designers. Chimed in also had some ideas. They are a little bit more fancy with their, um, ups and then there’s some discussion going on and, and, um, more mock ups when they’re there.

And then it stolons a bit. Yeah, the last comment was September 2nd. And, um, I started a couple of weeks ago to discuss it again or kind of just put another comment in there. And lo and behold, um, Kelly, uh, Dwan actually worked on something like that and, um, already has, um, uh, kind of, uh, uh, working, uh, design now.

So this is cool. Um, see, you can really, um, Influence how things are working when you were a little bit more engaged in the GitHub repository. So this were quite a few examples on how someone who isn’t port. Oh, the developer team can contribute quite a bit to the development of WordPress. So before you raise an issue, you might want to consider the following isolate the issue to, to the core block editor or plugin or the Gutenberg plugin.

I, the icon that you see there is actually the icon of the health check and troubleshooting plugin, which is fantastic to help you with that. Um, check that out because it will allow you to. Uh, switch on a site can be a production site, but, um, because it’s your admin, you only for you, you can switch off all plugins and all themes.

And Justin Aber, the Goodman plugin, and already have a test site and you have visitors. Um, well, and your fellow editors will we’ll see your site like it was. So we are really happy. We’ve used that plugin quite a bit, but it might help you with this as well. Um, and then the next step would be to search on existing issues.

You can use labels and keywords, um, as your soul, there are some labels for blocks and labels for features. That you can, uh, drill down into the Goodman book, um, repository, and then, then use the bug report issued template. And that has, um, five components. One is. Put a, uh, a description of what you find and that description, uh, should be concise, but also comprehensive.

So you need to strike a balance there. Um, but the more details you put already in the pros, the, uh, the more someone who reads it can kind of put himself or herself into themselves, into. Your shoes and figure out what might go wrong. It also kind of where you’re coming from, what you’re trying to do and what you found and then create, um, list the steps to replicate the issue in order to do this right.

You enter, you need to know. How that thing happens. What, what, what were the steps that you got through them? And that’s one of the most difficult things to actually nail down. So somebody else can have the same experience, but it’s a critical thing. So. All those can also reproduce the problem. Um, and then they can decide where the, the attack vector is on where the code needs to change.

Uh, what of course always helps is, um, as a screenshot or a screen cask. And then, um, it, it has another section there that’s the expected behavior. It helps really after. Mentally after go through the steps. Okay. This is what happens. I try that too. So what is it exactly that the person expected to happen?

And it helps to reiterate that, um, and show how you think, um, this can be best solved. And then the last part, the fifth part is your environment information. Uh, what operating system you use, what browser you use on which version also, if you use the groupers, um, Uh, repres quart without the plugin or a plugin and the Gutenberg plugin, and then also, which version of the plugin.

Um, so, uh, when you go to the repository and go to new issues and then click on bug report that’s um, when you see, um, the section, describe the bug, how to reproduce expected behavior screenshots. Um, and then the editor version, the desktop. And then, um, if you are on a smartphone also what device and, uh, operating system and another iteration, uh, reports, security issues, not on, get up, go to the hacker.

One, represent a one program. We report them there because this is public information and, uh, security patients should not be publicly disclosed. Um, before I. Uh, fix is available. So this would be the plugin report issue template. Okay. So how do you get started? You, you need a purse or it’s just a checklist to make sure that you have everything.

Um, you need a repost of the org account and the links pointed to the places where you can do that. You do need a CRA uh, create a GitHub account. And then, uh, you also need to create a, a Slack account and then connect your WordPress profile to your GitHub account. That is so you get all the credits for it.

So on my profile, I have here the GitHub account when I go to edit profile, um, I w can revoke access. So there’s a GitHub username and you should be, uh, log into both of them. So you can directly connect the two John D. Rogers has, uh, also published a post on the core block about, um, how that happened and all that.

So this is, um, So after creating issues, um, the four variations and you, yeah, you can stop there. You can just do that all day long or once a week. And nobody will tell you what to do. Yeah. You can have, uh, this is all self motivated and self-driven, um, it. You probably aren’t expected to actually answer some of the questions.

If they come up on the GitHub repository, there’s a notification set up, but what comes next? What could you do afterwards? So, um, the first one would be, uh, check out the labor needs testing. What does it entail? Uh, needs testing. It would, um, entail that you’d go, um, you go to the issues. Yeah, I read the description and then go through the steps here, um, to, and, and figure out if you are also seeing the same occurrence.

If you do share your information, share that you can reproduce it. And, um, so someone as a developer is a, is more sure that that is actually what needs to be solved. It’s not caused by something else. That’s an underlying issue or something like that. You could also participate in discussions. So this is a fascinating place for me.

Um, And I procrastinate do progressive, uh, productive procrastination on that quite a bit. I’m fascinated by the discussions about possible solutions for a new feature or an enhancement. And, um, sometimes that’s all that is in the discussions, but sometimes I actually have an opinion or a different idea and, uh, I share it.

I chime in and more often than not my ideas. Might not make it into the final version of a new feature, but I always feel hurt and no aspects of my idea were considered. And, um, I find, um, great satisfaction to it. Um, So an example could be, um, this improving the list block. So do we need more versions of that?

Um, yeah. And how there’s going to be, and that, um, any discussions like that you don’t have to chime in, you just kind of can read it and, but I appreciate really how much thought. In every issue goes. And how many people have ideas or already have, um, tested that or have a, uh, working, um, example implementation of that, like here, um, Jeffrey Carradine has already, uh, Something in his blogging.

And so, um, it’s really interesting to read through some of the discussions. Um, and if you don’t have an opinion, don’t have an opinion, but, uh, sometimes yeah, you have, and this is a moment where you can actually be heard, have your opinions, um, make known, even if it doesn’t turn out that way. Uh, entirely, but you bring yourself in and, um, um, the team is very patient and it’s very concerned and very thoughtful about how to answer, um, some to some suggestions.

So it’s definitely, um, another way to contribute, um, and you can join the triage team. So the triage team is. Uh, an open group of people who label all the issues and shepherd them, um, more or less through that process. Um, you can read up about that on the, uh, contributors, um, handbook. So, um, that’s certainly another way to contribute and kind of join.

Um, you need additional permission to do that. And, um, they tell you how and follow that link. They also will. Um, it, it shows you what does entail on the triage team and what the expectations are and, um, how they meet and all that. So, um, Now, if you need a broader focus on value, working in a group on a set of things that is also the full FSC means full site editing outreach program.

That’s one by developer relations manager or Wrangler and McCarthy. And it’s, uh, it’s geared towards people who build sites for others, but don’t write code. Um, We get, um, scripting tests for the alpha versions of, and then share our experience. Um, you meet everyone in a separate Slack channel. It’s kind of all a way to figure out if the people that would use it, get everything they need.

It’s about not only the site editing flow. Yeah, it does the, do the interfaces make sense? Um, or you’re getting confused, um, you know, how to go from one section to the other section. Um, but also how would you migrate, uh, themes over to the new way to do this? Or can you mix and match, um, the old way with the new way and all that kind of things will be discussed there?

So it’s a, it’s a small group and it’s an experiment. Um, that’s the first. Um, outreach program that, um, the broker has had. So it’s, uh, it’s quite an interesting way to also contribute. Um, she will really work on the bleeding edge of a great feature that will change how people interact with WordPress and build their sites.

Definitely. So, yeah. So that’s all I have for you today. Of course, I’m looking forward to your questions. Now you can stay in touch with me. On, uh, the worker Slack on Twitter, um, the aims or private messaging or direct messaging is open. Uh, you can email [email protected] or follow the Gutenberg times, uh, Twitter handle.

You can also find all our life Q and A’s shows. On the good times YouTube channel. And if you want to keep up with, um, what’s happening, uh, on a weekly basis, uh, we release a weekend edition of, um, hand curated links from the community and from the team. Um, and as I said, the sites are at Bitly

All right. Thanks so much. And. Back to you.