In addition to this blog post, you can hear more about NC State's GutenDay on the WPCampus Podcast!
We were vaguely aware of Gutenberg all through 2017. Our team in NC State's central IT unit was kind-of listening to the Gutenberg chatter, and we had tested it enough to know we didn't want to think about it. I had pushed it out of my mind as a "this is going to happen some day in the distant future" kind of a thing.
Then came WordCamp US in December. Morten Rand-Hendriksen's "WordPress of Tomorrow" session and Matías Ventura's State of the Word live-demo made Gutenberg feel a lot more imminent. And then Matt Mullenweg dropped the big bombshell: Gutenberg would be ready by April 2018.
It's still not clear whether "ready" is synonymous with "released" (and Matt Mullenweg has avoided a firm timeline). There's definitely still some important work to be done, especially for things like keyboard navigability. But the Gutenberg team has done incredible work over the last year-plus building and improving a new editor. Whether it's April or not, Gutenberg is definitely coming soon to a campus near you.
So how do you prepare your university for the Gutenpocalypse?
Background
Like many higher ed institutions, our campus had only a vague notion of this "Gutenberg" thing. That meant it was our job to get the word out.
NC State University, like many other big land-grant schools, is a big fan of decentralization. There's no campus-wide web governance, nor is there even a mandate to use a common CMS. Every college and college-level unit is responsible its own web presence. In some cases, that responsibility gets delegated further, with individual departments hiring developers, partnering with other campus web teams, or contracting with outside vendors.
All of that is to say, there's no "NC State web team" that holds regular meetings. There's no list of every person who writes code or creates content. Our campus has sluggishly wandered in the general direction of WordPress over the past few years, so we know these people are out there. But our team in central IT is concerned with communication, training, and support for everyone—even the WordPress sites that we've never touched and know very little about.
If you're at a smaller or more centralized institution, this is one aspect of Gutenberg planning (and really, change management in general) that's a little easier. For us, just communicating our message to campus is a challenge.
Three Audiences
Changes to WordPress will mean different things to different people. We quickly settled on three main audiences:
- Content Creators – People with day-to-day content-editing responsibilities.
- Site Administrators – People who perform admin functions in WordPress, like user management.
- Developers – People who are comfortable writing code.
There's lots of overlap in these three groups. A lot of us are developer-admins, doing some of both. But there are also site administrators who have never touched PHP or CSS, relying on other campus web teams or outside vendors for their web support.
For content creators, upgrading to Gutenberg means getting to know a new editor. We're holding a series of workshops for these users based on user testing we conducted in January. We've also built a demo site using Tom J. Nowell's Frontenberg to give curious content creators a quick-and-easy way to get to know the new editor.
For site administrators, upgrading to Gutenberg means getting to know a new editor and supporting users with questions about the new editor. For some campus websites, it also means knowing whether and when to upgrade to Gutenberg or to use the Classic Editor plugin.
That's potentially a very complicated question, especially for a site admin whose site was built by an off-campus vendor. Site administrators need to work through potential theme and plugin conflicts while also preparing for the inevitable support ticket surge. Our site admin workshop tries to help them recognize potential trouble spots and arm them with information and talking points, for when they talk to their content creators and their theme and plugin developers.
For developers, upgrading to Gutenberg means learning all of the same things content creators and site administrators need to know, plus a lot more. Developers also need to know:
- What changes need to be made to their themes
- Gutenberg block templates
- How to build a custom Gutenberg block
That last bullet point sounds a lot easier than it is. Since Gutenblocks are built with JavaScript, the toolbox a lot of us have depended on for years—basic PHP skills plus knowledge of WordPress's native API functions—won't get us very far.
Planning a "Retreat"
We decided on an all-day "WordPress developers retreat" as the best way to share that larger body of knowledge with the campus web developer community, and scheduled it for Friday, March 2. ("Retreat" may be an overstatement, because we were still on campus. But we were in a large conference room away from everyone's offices, so it felt special!)
Holding a big in-person event helped to underscore how important these changes are—if we're going to the trouble of getting all the WordPress developers together, then you better believe Gutenberg is a big deal. We also knew that bringing everyone together would generate a lot of smart, useful questions.
In January, we started spamming campus listservs and Slack channels. We also promised baked goods as an added incentive to attend (and as an excuse for me to bake my favorite oatmeal chocolate chip cookie recipe).
When GutenDay arrived, almost all of the campus WordPress teams we know about represented—plus colleagues from four other North Carolina colleges and universities. We ended up with 34 eager GutenDevs in attendance, which is a phenomenal turnout for our campus.
GutenDay
Our agenda for GutenDay included thematically-separate morning and afternoon sessions, plus three breakout sessions for smaller-group conversations:
Morning
- What, Why & When of Gutenberg – A brief overview of the last decade of WordPress
- Meet the New Editor – Guided tour of Gutenberg
- How Will My Users React? – What we've learned from campus user testing
- What Happens When I Upgrade? – Four common scenarios for what happens to existing content
- Options for Upgrading – Information about how and when to upgrade
- Basics of Extending Gutenberg – Theme-focused Gutenberg code changes
- Block Templates – Example of a simple block template to showcase its potential
Afternoon
- Anatomy of a Block – Walkthrough of block files and functions, and what they do
- Our Plan: NC State Blocks – Building a campus-branded collection of blocks
- Breakout Sessions
- Build Your Own Custom Gutenblock – Hands-on experience building a custom block
- Designing With and For Gutenberg – Hands-on opportunity to update theme code
- Gutenplanning – Discussion of training, communications, and other transition resources
You can view our presentation slides for the day.
We structured GutenDay to have lots of on-ramps into the Gutenworld rather than jumping straight into block development. There's plenty of CSS and PHP to prepare themes for Gutenberg, and everyone was able to leave GutenDay with something actionable even if they weren't quite ready for JavaScript development.
About the JavaScript thing…
At the beginning of the day, I asked the attendees if anyone would say they were extremely confident in their JavaScript skills. We had one person raise her hand—and even that was a pretty tentative hand.
I think that was an important question to start with. Gutenberg's JavaScript-ness is a significant change to WordPress, albeit one that's been coming for a long time. A lot of us got into the WordPress development world by learning a little PHP at a time, and we're going to have to put in some work to make the transition. And since only one hand went up, it's helpful to see that's a jump we'll all be making together.
The size of that jump was unexpectedly illustrated when our Build Your Own Custom Gutenblock breakout session didn't quite go as planned.
In that breakout session, my colleague Miles Elliott planned to walk attendees through the process of building their first custom block. An easy way to start a new block is with Ahmad Awais' create-guten-block developer toolkit, and Miles planned on using that as a teaching tool. (If you haven't tried it before, I highly recommend it.)
But create-guten-block requires Node.js and npm. While we did ask attendees to set up a WordPress dev environment on their laptops before GutenDay, it never occurred to us to warn that Node would be needed. And for our mostly Mac team, helping folks set those up on their Windows machines wasn't something we had prepared for.
You can get pretty far in the WordPress world without ever needing or thinking about Node.js or npm—and you can build Gutenblocks without them, too! But Gutenberg marks both an opportunity and a challenge for WordPress developers to modernize and upgrade. One lesson we learned from GutenDay is to give that transition the attention it needs.
[foogallery id="19496"]
NC State Blocks
In addition to introducing Gutenberg to campus developers, we used GutenDay to kick off development of an NC State Blocks plugin.
[caption id="" align="aligncenter" width="256"]
Johannes Wolfenberg, mascot of the NC State Blocks plugin.[/caption]
With so many different ways of extending the Classic Editor, different campus development teams settled into different ways of "doing WordPress." We've reinvented the wheel many times over.
Gutenberg gives our campus an opportunity to have a WordPress reset, and to standardize and collaborate. The NC State Blocks plugin will contain a core set of campus-branded page element blocks (eg. infoboxes, calls to action, etc.) plus blocks that communicate with other systems (eg. the library's publications database).
There's still lots of room for customization using block filters, and there will certainly be lots of single-use block plugins built for special situations. But the NC State Blocks plugin will be a shared block starter set, and a big project that all the campus WordPress teams will be working on together.
Looking Forward
With GutenDay behind us, we've recently begun sorting clients into:
- Sites we can have ready Spring 2018
- Sites that will need extra time with the Classic Editor plugin, but can go Gutenberg by Fall 2018
- Sites requiring more time
Some of those websites are going to be a lot of work. We have an internal-use "Gutenberg Pain Index" to help us prioritize, which considers complexity of a site, number of users, and some client-specific intangibles. But the more we can frontload, the easier the rest of 2018 will be for us.
In the meantime, our team is now focused on training, building the NC State Blocks plugin, and preparing the websites we manage for the new GutenFuture. Moving a campus to Gutenberg is a massive project—a project that wasn't really on our radar as recently as November 2017. But a little communication and collaboration will go a long way. We're all in this together.