How to Create a Slide Deck in Gutenberg on WordPress

When Matt Mullenweg revealed that all of his slides for State of the Word at WordCamp US 2019 were built in Gutenberg, I almost jumped up and down for joy. I love Gutenberg and I’m not afraid to admit it.

The dirty honest truth is that Gutenberg is a huge time saver for a #ContentWriter like me.

Time is money.

— Taylor Elizabeth Rose (also known as Waldon/Waldo) (@tElizaRose) October 30, 2019

So, of course, my first thought was, “I have to do the same thing.” At the time, WordCamp Riverside was a week ahead of me and I had 3 other speaking commitments after that. Building slides in Gutenberg would be faster and easier for me than designing slides. Plus, I would be able to match my site branding easily.

How to Create a Presentation Slide Deck with Gutenberg

First, you (obviously) need a WordPress website. Make sure that it’s either on WordPress version 5.3 and higher, or that you have the Gutenberg plugin installed. (For more information on why, see my support forum thread.)

1. Install the Slides & Presentations Plugin

Once your basic website is set up with WordPress and the right version of Gutenberg, all you need to do is get the right plugin for the job. The Slides & Presentations plugin that Matt Mullenweg used in State of the Word is pretty awesome, in my opinion. Once I used it, I was instantly in love – a phenomenon we all know almost never happens with plugins.

2. Open a New Presentation

The Slides plugin adds an additional post-type and special menu to your WordPress Dashboard that you can find by looking for “Presentations.” It keeps your presentations separate from your pages and your posts.

This new “Presentations” post type will only allow you to add slide blocks to the page with content inside those blocks. That feature is useful if you want to set up this functionality for a client. (Or, if you’re just trying to break your presentation by adding other content around your slides.) It prevents the user from breaking the post by adding blocks outside the slides.

3. Set Your Base Slide Settings

There is a LOT of functionality to the Slides & Presentations plugin so I will try to keep it simple. Let’s talk about the settings in the order they’re listed in the “Document” tab of the Gutenberg editor settings panel. Except I’ll skip the “Status and Visibility” section. That’s fairly standard.

I learned by doing it the wrong way the first time. All the settings I needed were right here in the Presentation editor.

Set Slide Dimensions

What size do you need and will you contain the content to the dimensions?

Set Your Fonts

This is my favorite part, because Taylor’d Ink is an entirely font-based design. So it’s only natural that my slides match my site perfectly.

There are two sections for your fonts, body and headings.

Set Global Backgrounds

I didn’t need to use any background options on my slides because my branding is simplified. But, you can choose a color or an image as a global background (as well as set per-slide backgrounds, discussed in a later step).

Add Your Color Palette

Next, make it easy to keep your brand standards in line. Add your color palette.

Add Custom CSS

We’re almost there, the last few steps are final touches. First, there’s a section for custom CSS for all the people skilled in CSS styling. The plugin creators left a helpful message to target the right selectors.

Choose Your Transitions

There are 3 different transition settings to choose from. For my slides, I didn’t use any because I wanted to keep it simple.

Enable Controls

I didn’t enable advancement arrows or a progress bar for my slides to keep them extremely minimalized. But, that may have not been the best choice for accessibility. There was some confusion from some people trying to access my slides.

Get the PDF Link

This is my favorite part of the entire document settings panel. Get the link to your PDF to include on your first and last slide. Not only can your users download a PDF, they can load all the slides into a scrollable page instead of individual screens.

Finish With the Final Details

There are still 3-4 settings sections left in the document panel depending on what theme you’re using. I use Astra Theme Pro, and highly recommend it for all Gutenberg users.

Before you leave the Document settings panel, set your:

• Permalink
• Presentation Cover Image
• Excerpt
• (If available) Theme Settings

Now you’re finally ready to move on. I recommend saving this as a blank template with no slides at this point. Then, you can duplicate it to start over with every time you begin a new presentation. That way, all your settings are already set.

4. Create Your Slides

Finally, create your slides! Every slide block also has its own unique settings. Slides & Presentations block settings include:

• Speaker Notes
• Font
• Background Color
• Background Image
• Background Iframe
• Background SVG
• Visibility
• Advanced

Then, add content into the Slide block just as you would any other container-type of block.

By default, the slide block will start out with a heading block, but you can add any blocks and delete the heading block if you want.

5. Turn off Indexing or Optimize for SEO

I use the Yoast plugin, so I’m able to control how this page appears on search or turn it off from indexing altogether. You’d want to turn off indexing if you don’t want people to stumble on this presentation through search.

6. Set up Social Sharing Images

If you’re going to share this link anywhere online, set up your social sharing images so that they display something descriptive of the overall presentation. Otherwise, if you didn’t set a cover image, your display image ends up becoming an image from inside your slide deck.

6. Edit, Test, Publish

Finally, check your user interface, go through all your slides, and do a tech check.

Check Out My Slides Created with Gutenberg

So far, I’ve converted two of my slide decks to Gutenberg on my WordPress site.

• Content Writing for Better SEO and Audience Engagement
• 4 Key Pieces of Content to Start Your SEO Strong

This week, I plan to add one more before before my WordCamp Boise session this Friday. That’s how fast and easy it is to re-create your slide deck in Gutenberg.

Try it out and let me know what you create in the comments!

Featured Image photo by Luis Quintero from Pexels