Since the block editor debuted in 2018 under the name Gutenberg, it has drawn inspiration from its namesake Johannes Gutenberg, whose invention of the movable type press in the 15th century launched the era of mass communication and permanently improved the way humanity connected.
WordPress themes have always helped users quickly create well-designed websites for themselves and clients. The block editor continues that work by enhancing themes, and giving users more design tools in order to personalize and customize their websites.
Blocks are the components that let you compose and add content. Based on this system of blocks, the WordPress block editor lets you create customizable, highly personalized website layouts. WordPress.com has over 50 types of blocks available, from a slideshow block and ratings block to a timeline block. More are on the way.
The block editor puts unrivaled power in WordPress.com customers’ hands, giving you control over layout, the ability to drag and drop page elements, including media and image galleries, and the chance to customize font size and color, which was never this easy to do. And with the block editor, you don’t toggle between the frontend and the backend. You edit in real time, confident that what you make on the backend is what viewers will see on the frontend of your website.
“Those are incredibly strong improvements to WordPress and themes,” says Automattic’s Design Director Kjell Reigstad. “This gives a lot of control to users and are the sorts of developments I expect to see more of, and that will only get better, as the block editor continues improving.”
Kjell began working with WordPress themes in 2012. Now he leads a team of designers and developers who are exploring the future of themes — a future filled with possibility.
“With the block editor, you’re still using your theme,” Kjell says. “Users have much more flexibility around what your theme can do, because you have all the tools of the block editor that will augment your theme. You can have a beautiful multicolumn layout within the themes you were previously using. That was impossible before.”
Changing the way you look at WordPress themes
The block editor’s versatility comes partly from the way it makes themes more about the aesthetic than the layout or the intended purpose of that theme. In the past, you would choose a theme that was extremely specific. If you were a blogger, you chose a blogging theme. If you were a small business, you chose themes that targeted small business owners.
“On the flip side,” says Kjell, “a lot of people would choose a theme based on colors.” So even if you were a travel blogger, you might choose, say, a restaurant theme whose aesthetics you preferred. Block editor lets you choose the theme you want based on its aesthetic, and change the layout and content to match the purpose of the website you are building. That gives users more design control if they want it.
Kjell studied traditional, non-digital graphic design at the Pratt Institute in Brooklyn, then spent years working at various agencies, designing apps, websites, even t-shirts. His work at Automattic, and with the block editor, lets him continue to blend design and functionality. The block editor provides what developers would call a “What you see is what you get” situation.
For the first time with WordPress, users can edit what you see on your live site, by simply dragging elements and typing. With the block editor, there are no surprises when you hit publish. You can trust that what you wrote in the backend will be what visitors see when they visit your site. “That’s something that the block editor has made possible since day one and has only improved over time,” says Kjell. This function is the one that made everything click for Kjell, as both a WordPress user and as a developer.
Making music with the WordPress block editor
In 2018, Kjell and a WordPress colleague named Allan Cole teamed up to build an experimental theme to see how the block editor would impact themes. They named their theme Music and experimented by making “up a whole fictional band’s website with tour dates and album artwork.”
Music never launched. It wasn’t meant to, so it is not available for purchase. But it lives inside every aspect of the block editor, because its style tore down the barrier between the frontend and the backend once and for all.
“What we built worked on the frontend, so it was a theme like we’d always been building,” says Kjell. “But one of our last steps was to build in editor style. I was amazed that the backend had the same background color, the same font and spacing. Seeing it look like it would on the frontend was the moment I went ‘Obviously this is how it is supposed to be!’ Of course you should be able to edit your website in a way that looks like the frontend. Once we had it, I never wanted to go back to editing in some other environment, like a third space, where it’s not your frontend or your backend.”
As a customer, this is one reason to use a Gutenberg-optimized theme — a theme that has this editor style — or to use one that’s updated for Gutenberg.
“We’ve all been in that position where we’re writing a post,” says Kjell, “we get this preview link, then we go back to the post, hit the preview link again to go back to the post, and keep tweaking things to get it right. It’s so helpful to simply edit in place in the block editor to see what it will look like without repeatedly jumping back-and-forth between browser tabs or new windows.” With WordPress Editor, you will feel more comfortable writing and hitting publish than ever before.
Get a new perspective on building a better website
Kjell’s daily work routine also connects to the way he sees the block editor moving web-development into an infinitely bright future. When Kjell works from home, he changes positions throughout the day. Whether it’s moving between a coffee table, a desk, or a couch — a new location offers a new perspective, which helps him see new solutions to coding and design challenges, and generate fresh ideas.
“I used to think getting stuck on something was a development problem, but now I recognize it as a creative problem,” he says. “When writing code, problems are obvious, because the code you wrote will not do what it’s supposed to.” The best way to get around that is to change your frame of reference. Go for a walk, go to sleep, or change your workstation. A change of environment lets you return to the problem and see the solution more clearly than before. “You get too deep into it,” Kjell says, “and it’s hard to pull yourself back out to think about it from a higher level.” This is true for WordPress users and the block editor.
“When you’re using your theme and you’re super in it, you might not want to change because it’s exactly how you like it. You’re so in that moment and that workflow that it’s hard to stop what you’re doing and take a step back to see from a broader scale that Gutenberg is providing all these excellent new tools.” We can all occupy the same spaces so long as new ones seem daunting, which makes it difficult to recognize that new perspectives, new products, new code, also offer really tangible, lasting benefits.
All themes on WordPress.com are compatible with the block editor. New blocks are being added to the options on a regular basis. That includes the recent addition of valuable blocks for small businesses, which integrate WordPress.com and Jetpack-enabled sites with popular services such as Eventbrite, Pinterest, OpenTable, and Calendly.
The block editor’s customization options give WordPress.com users more power than you ever had. By empowering users to take whatever your theme is and really tailor it to what you want to communicate on your site, the block editor gives you the opportunity to make your theme, and your website, truly your own. Clearly, the future is bright.
Watch a video on how to customize posts and pages with the Block editor:
ABOUT THE AUTHOR
Go WordPress 