Let’s face it. Gutenberg still has room to grow. As WordPress developers and designers, you will have to grow along with it. And while you might have tried it before, it’s getting constant updates to improve its functionality and effectiveness.
If you try Gutenberg and it doesn’t quite do what you need yet, try it again every 6 months or so for something small. It’s getting better all the time and the ecosystem of block plugins around it is also growing. This is worth doing because getting familiar with Gutenberg is a great way to future proof your websites, skills and services in a competitive industry.
—Gabe Mays, GoDaddy, Director of Product Management – WordPress
Released in 2017 and named after the inventor of the printing press, this new editor is designed to make WordPress easier for your clients to use. It’s taken some time for WordPress developers and designers to unlock the secrets of using this paradigm-shifting technology. Whether you’re here for it or not, Gutenberg is here to stay.
These eight tips can help future-proof your WordPress business.
Tip #1: Learn JavaScript deeply
Long gone are the days when you only needed to know a little JavaScript and PHP to write a plugin. Loads of modern user experiences now take advantage of JavaScript libraries, and Gutenberg relies heavily on React.js.
This means anyone working with WordPress will want to familiarize themselves with JavaScript if they haven’t already. With a bit of knowledge of modern JavaScript, its frameworks, and related libraries, you’ll be on the path to learning to develop your own Gutenberg blocks.
Matt Mullenweg said it best at the State of the Word in 2015:
There are plenty of courses that teach JavaScript, including some notable ones by Wes Bos and Zack Gordon.
Tip #2: Use an editor stylesheet
Gutenberg offers an intuitive WYSIWIG editor for your clients, reducing the amount of hand-holding you’ll need to do with them. Your theme should match the published page with what clients see in the editor as closely as possible. (This piece of advice comes from Bill Erickson’s article.)
Create an editor-style.css file in your theme. From there, you can specify content styles in the editor similar to what is on the front end. Add this code to your functions.php file to activate support for the editor CSS file:
// Editor Styles
add_theme_support( 'editor-styles' );
add_editor_style( 'editor-style.css' );
The free Go WordPress theme is a great example of a theme that does editor stylesheets right.
Tip #3: Import blocks
There’s no reason to reinvent the wheel. It’s worth exploring popular plugins and code galleries to see if you can meet your clients needs with existing software. For example, the free CoBlocks plugin has over 30 customizable blocks in its library.
There’s also libraries like Redux, Stackable, and Ultimate Blocks. All available in the WordPress plugin repo! For specific functionality, it’s worth exploring plugins that may come with a single or few blocks as part of their speciality - for example, gallery and social media plugins.
Tip #4: Remove blocks
If you’re replacing default blocks with custom ones, or don’t need some of the default blocks for your theme, remove them from the editor so clients don’t accidentally select them. Create an editor.js file for your theme to enqueue the assets and unregister them. Check out Bill Erickson’s article linked in the description for more details.
function be_gutenberg_scripts() {
wp_enqueue_script( 'theme-editor', get_template_directory_uri() . '/assets/js/editor.js', array( 'wp-blocks', 'wp-dom' ), filemtime( get_template_directory() . '/assets/js/editor.js' ), true );
}
add_action( 'enqueue_block_editor_assets', 'be_gutenberg_scripts' );
wp.domReady( () => {
wp.blocks.unregisterBlockType( 'core/media-text' );
wp.blocks.unregisterBlockType( 'core/search' );
} );
You can find a list of all current Gutenberg blocks in the WordPress.org support article.
Tip #5: Reusable blocks
The reusable blocks feature is an extremely useful solution for efficient development. Much like copying and pasting code snippets from existing sources, it allows you to save content blocks to reuse them on other pages and posts with a single click.
For example, adding ad banners on some — or all— of your pages. Or, tossing in sections with call-to-actions commonly reused and distributed on your website.
This feature could even be used to add pre-designed forms or tables to your content. Creating a reusable block couldn’t be easier. Just add a content block, style it however you want, then click on the hamburger menu at the top right and select Add to Reusable Blocks.
Name it and easily add this same content block to any page or post. Can’t think of an easier way to save time.
Tip #6: Embed options
While embeds have been around since WordPress 2.9, Gutenberg does this a little bit differently. Create or access an existing block, click on the circled plus sign, and click Embeds to add it to your post.
Aside from the generic embed block, you’ll have the option to insert a wide range of supported options for video, audio, images, tweets, and other third-party content:
- YouTube
- Vimeo
- Soundcloud
- Spotify
- Dailymotion
- CollegeHumor
- Hulu
- TED
- Funny or Die
- Kickstarter
- ...
Adding a custom CSS class is also easy to add for embedded content. Click on the Advanced Settings panel on the right sidebar to add your custom CSS classes to the block.
Tip #7: Keyboard shortcuts
Gutenberg’s developers understood the demand for efficiency. They’ve included all kinds of useful shortcuts to make your life easier:
- To use Gutenburg like a pro, view all keyboard shortcuts from a post of page edit screen with ⌃ ⌥ H on Mac or Shift Alt H on Windows/Linux.
- Adding new content blocks has never been easier. On a new line, hit the forward slash to open a small popup with recently used blocks.
- You can search for blocks by name and hit Enter to add it to a post or page.
- Easily delete a selected content block with Shift Option Z (Mac) or Ctrl Alt Backspace (Windows/Linux).
- Insert a new block before the selected block with ⌥ ⌘ T (Mac) or Ctrl Alt T (Windows/Linux).
- To insert it after, use ⌥ ⌘ Y (Mac) or Ctrl Alt Y (Windows/Linux).
Tip #8: Follow the Github Repo & get involved in the community.
Stay up to date on the latest Gutenberg developments and follow the official Github repository. While the documentation for Gutenberg continues to improve, keeping an eye on the latest developments will keep you on top of the latest features.
What’s more, loads of plugins are looking for contributors. This is an excellent opportunity to get involved in the community, hone your skills, and improve your knowledge of Gutenberg.
Gutenberg might just be the future for WordPress development
Gutenberg is packed with a number of features that definitely make it easy for users to build a site. So, if you’re building or designing a site for a client, they should have an easier time updating content themselves after initial development is complete.
If you're a theme or plugin developer, now is a better time than ever to capitalize on the most exciting addition to WordPress in over a decade: Gutenberg.
Now's the time to jump in.
—Rich Tabor, GoDaddy, Senior Product Manager – WordPress Experience
Love or hate the blocks, both WordPress and Guternberg aren’t going anywhere any time soon. Who knows, the next block you develop might just be exactly what your client — or the WordPress plugin repo — is looking for...
More time = happier clients
When you use the Hub by GoDaddy Pro, suddenly there’s more time in your day to focus on what matters most. Forget about juggling admin tasks. Reclaim your time and use it to make clients feel like the center of your universe.
