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.

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.

The Slides Plugin has a cover image that shows a piece of the Gutenberg editor and an image of the slide with the text "Designing a Rich Content Editor for 1/3 of the web."

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.

The Slides & Presentations section of your WordPress dashboard looks and functions the same as your Posts and Pages sections.

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?

Select Standard 4:3 or Widescreen 16:9, then enable or leave disabled "Contain view to dimensions." This can be useful if positions from background and full with blocks must be preserved. Finally, set horizontal and vertical padding, which is set by default to 0.2em.

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 your base font using any font available on your website, choose the font color and set the font size.
You can use custom Adobe fonts for your Header fonts as well, like "Sunflower" and set the font weight separately from your body font weight.

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).

Choose a color for your slide background, or select a gradient.
You can set a custom background image for your slides instead of a color.

Add Your Color Palette

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

Add a comma separated list of color values. Then, refresh the page to use the 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.

For custom CSS in the Slides & Presentations plugin blocks, always a block prefix: .wp-block-slide-slide { 	 }

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.

Chose a transition style for your content and backgrounds. Then choose a speed.

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.

Toggle on or off advance and reverse arrows as well as a progress bar.

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.

The PDF options are experimental and appear to enable background images and remove margins.

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.

The Slide block has s section for content and a section for speaker notes.

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.

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

2 thoughts on “How to Create a Slide Deck in Gutenberg on WordPress”

  1. I was testing this out last Saturday night and found it stupid easy to use as well. Within about 40 minutes I had a passable presentation.

    Since I find creating presentations tedious this is a must try even for users who have no interest in WordPress. It’s just that good.

Comment