What is the Gutenberg editor?

Before you can learn about the best Gutenberg plugins to add to your site, let’s see what Gutenberg is. Gutenberg is WordPress 5.0’s new editor to create content for your site. Gutenberg brings a new idea to create content: using blocks. What’s a block? A heading, a paragraph of a text or an image. To make it simple, a block can be anything you can add to your page or post content.

Gutenberg is a visual editor and it’s super easy to use. It allows fine-tuning of content in a way that was only possible with shortcodes before. The future is the visual editing and Gutenberg does a marvelous job at supporting this.

A nice touch for WordPress theme developers: Gutenberg allows customizing its editor. They can make the backend editor look and feel like a frontend editor. For example, Gutenberg can use the font family and size at the backend, what the frontend uses. Theme developers can change the content width, set background color, and many more.

How to use Gutenberg?

When you create a new post or page in WordPress 5.0 or above, Gutenberg will open. Using its visual editor, you can write your next most trending post, or create a stunning page. Everything is visual and live, so you’ll see the result right there.

Using Gutenberg couldn’t be simpler. Type the title of your post or page to the large “Add title” field, then start creating content below. You can use many different blocks to create your content. You’ll probably use the paragraph, heading, image and button blocks the most. But you can easily add a list, video or a simple gallery with Gutenberg.

What are the best WordPress Gutenberg plugins?

Every website is unique and has its own needs. Because of that, many developers have created custom blocks for the editor and released it as a plugin. As a result, many amazing WordPress Gutenberg plugins were created for the community.

This means you will find what you need for your website for sure. On the downside, having many plugins to choose from makes it complicated to find the plugin you are looking for. To help you with your quest, here’s a list of some of the best Gutenberg plugins you can find. Best of all, they’re all free plugins. So let’s dig in!

1. Gutenberg Blocks – Ultimate Addons for Gutenberg

Ultimate Addons for Gutenberg is one of the most popular plugins for Gutenberg. The plugin offers many useful widgets. Additionally, after installing Ultimate Addons plugin, you won’t need to waste time to figure out which new content was added. The developers have created their own panel, where their blocks are easily accessible.

Some of the coolest blocks you can create: advanced heading, testimonial, social share, content timeline, blockquote (with an option to tweet the quote). There’s also a table of contents block which is useful for bloggers. It automatically reads every heading from your post and creates a table of contents for easy navigation. The block updates itself, so you don’t have to maintain it. Gutenberg blocks is really trying to be the ultimate blocks plugin for Gutenberg.

2. Kadence Blocks – Gutenberg Page Builder Toolkit

Kadence Blocks is yet another popular WordPress Gutenberg plugin. In this plugin, you can enable or disable the blocks you need. This way you can keep your editor nice and clean, without showing options you’ll never use. They also create their own panel to access their blocks in one place.

Some of the coolest blocks they have: Spacer/Divider, Advanced Button, Tabs, Info Box. You can also create an accordion layout where you can adjust the content of each tab by moving any block. I like how well this integrates with the Gutenberg experience.

3. Atomic Blocks – Gutenberg Blocks Collection

Atomic Blocks offers a handful of useful blocks to enhance your posts and pages. The plugin’s header shows some interesting icons which I have expected to see in Gutenberg. After seeing their colorful banner, it was disappointing to see that their icons are so simple.

Some of the best blocks are: Notice, Drop Cap, Profile Box, Sharing (you can use this to share on Facebook or Twitter). They integrate with Mailchimp and have a handy block to allow adding a newsletter subscription block. The pricing block they have is one of the coolest blocks I’ve seen.

4. Stackable – Gutenberg Blocks

Stackable – Gutenbergs Blocks extends your Gutenberg editor with a list of colorful blocks.

Some of the coolest blocks are: Notification, Blockquote, Team Member and Call to Action Button. They also have a separator block that looks like the Shape dividers in Smart Slider 3. My favorite block from them is their Card block. You can use it to create a block with an image, heading and description.

5. Advanced Gutenberg

Advanced Gutenberg by JoomUnited is yet another WordPress Gutenberg plugin. It promises to add all the missing blocks and configuration you need to build professional websites. Indeed, they offer some unique but useful blocks to enhance your website.

Some of the coolest blocks are: Advanced Accordion, Video, Count Up and Social Links. Another block I loved is the Login/Register Form block. Many people want to handle the login and registration outside of the /wp-login.php for some reason. Advanced Gutenberg Blocks makes it easy to create a page and have a login/registration form inside. For this reason, many website owners will love JoomUnited’s plugin.

6. Gutenberg Blocks and Template Library by Otter

ThemeIsle’s Gutenberg Blocks plugin starts with a cool tour to learn the basics of their plugin. Some of the options they show are targeting developers (like the option enable the Custom CSS module), so it might worth disabling it during the tour.

Some of their best blocks are: About Author, Service and Pricing. What’s cool in this plugin is that they don’t only offer blocks. They offer templates (created with Gutenberg blocks) to help those who don’t have an eye for design. To add a template, add a new section under the Otter panel.

7. WooCommerce Blocks

Ecommerce is blooming. Because of this, it’s not possible not to add a Gutenberg plugin with eCommerce features to our list. Meet WooCommerce Blocks which is the most popular Gutenberg plugin to add WooCommerce blocks to your post or pages.

The most notable blocks are: Featured Product, On Sale Products and Products by Category. I love the Reviews by Product block, as it’s very useful for promoting any product. The Newest Products block is also great, especially for landing page building.

8. Page Builder Gutenberg Blocks – CoBlocks

CoBlocks has some interesting features some of which target business owners. For example, they have a Hero block which you can use to create a beautiful hero section for your website. There’s also a Contact form block which you can use to add a simple contact form to your page. A contact form can help you get new clients (e.g. if you’re a photographer) so they are important to have.

If you run a restaurant, check out CoBlocks. Their Food Item block will be super useful to display your menu. Their Social Profiles block seems to allow the most social sharing features compared to the other plugins on this list.

What’s the future of Gutenberg?

Gutenberg is already fantastic, but still has lots of room for improvement. As a matter of fact, there are many ways to move forward with such a versatile plugin. Luckily, the developers are full of amazing ideas about the future of Gutenberg.

What are these cool ideas? At the moment, Gutenberg is only responsible for content creation at posts and pages. The developers’ plan is to extend this and make Gutenberg the menu and sidebar editor as well. In other words, they plan to replace the current widget system with Gutenberg blocks. This sounds like an excellent idea, and we’re curious to see how it goes.

Conclusion

Gutenberg block editor is the future of creating content in WordPress. It will make the editing experience consistent across different parts of your site. Because of that, WordPress will be easier and faster to use and learn for everyone. As a result, more and more people will be interested in building their site with WordPress.

The only question is how long will it take for Gutenberg to revolutionize how you can work with your WordPress site.

The post What are the best Gutenberg plugins? appeared first on Smart Slider 3 — WordPress Plugin.

In this post, I’ll walk you through the basics of Gutenberg so you can see how it works, and then I’ll show you how to add a slider to a post using the Gutenberg editor. Lastly, we’ll take a look at some of the different types of sliders you can add using Gutenberg that make great additions to posts.

What is Gutenberg?

Gutenberg will soon be the new visual editor for WordPress. The existing visual editor hasn’t changed much at all since WordPress was first released back in 2003. Since then, other platforms have come along with simplified writing experiences that make WordPress look old-school. Basically, Gutenberg is WordPress’ attempt at catching up with the cool kids.

Here’s what the classic editor and the Gutenberg editor look like side-by-side:

When you put together a page or post with Gutenberg you use “content blocks,” which are basically blocks of text, headings, images, and other media. With blocks, you can achieve what might otherwise require shortcodes or custom HTML.

Work on Gutenberg started in early 2017 and it’s still a work in progress. You can download it as a plugin from WordPress.org and try it out. It’s slated for release with WordPress 5.0 but there’s no set date. Some say it might be released later this year or even early next year.

I’m firmly in the “love it” camp. I’ve had Gutenberg installed on my site for a few months now and it’s been cool seeing how the interface has changed with every update.

As a writer who’s been working with WordPress for many years, I think Gutenberg is a breath of fresh air and well overdue.

I mean, why shouldn’t WordPress be as easy to use as Medium?

Working with Gutenberg and Content Blocks

After installing and activating Gutenberg, it will become the default visual editor for your WordPress site. You’ll notice a new Gutenberg menu item at the bottom of the sidebar, which includes a demo (which we’ll explore below).

You’ll also see links underneath your posts that let you switch between using Gutenberg and the classic editor.

If you haven’t used it yet, let’s take a look at how it works using the demo post:

On the right, you’ll see the sidebar has been copied over from the classic editor. It hasn’t changed all that much and still includes all the usual options, such as updating visibility, and post time and date. Underneath, you’ll see meta boxes for categories, tags, and featured image, as well as excerpt and discussion.

The “Publish” button has been moved to the top right, and you can still preview posts. When you click the click cog, it hides the sidebar so there’s even more room to write.

If you’re wondering how to switch to the code editor, just click on the three dots in the top-right and you’ll see the option there. With all this familiar kind of stuff out of the way, let’s dive into working with content blocks.

Using Content Blocks

On the left you’ve got a big ol’ space for writing. It’s especially convenient for laptop users (like myself!) who struggle using the classic editor’s bulky interface.

To access content block, click on the “+” icon in the top-left. You’ll see “most used” blocks displayed first, but when you scroll down you can access other blocks for formatting, layout, widgets, and a ton of different embeds for everything from YouTube and Twitter to Spotify and SoundCloud.

Let’s take a look at how these blocks work. The demo already has a title and when you hover over it, you can click anywhere within the block to edit the text. Clicking on the block also brings up the option to edit the post’s permalink.

Underneath the title is a cover image block, which is a new concept for WordPress. This type of block lets you display text over an image, or just an image without text. When you click on this block, it displays options at the top for editing the image, including replacing it and alignment.

Options also pop up for editing the text to make it bold, italicized, or to add a link. Strangely enough, there’s a fourth option for adding a strikethrough.

Adding and editing text is super intuitive. Gutenberg treats each paragraph of text as a separate block, so when you type something and hit ‘enter,’ a new paragraph block will be automatically created so you can continue writing.

When you click on a paragraph of text, you get options for aligning and formatting the text, and also adding links and strikethroughs.

Overall, Gutenberg is really easy to use and it takes no time at all to work out how to use it. I would suggest installing it on a staging site before adding it to your live site, just so you can get a feel for how it works before you start playing with post on your live site.

Adding Gutenberg Sliders to WordPress

The Smart Slider 3 team have been working hard since Gutenberg was announced to ensure that sliders are compatible.

And I’m happy to tell you Smart Slider 3 is compatible with Gutenberg! When you update SS3, you’ll see a new slider content block the next time you use Gutenberg.

Here’s how to add Gutenberg sliders to WordPress using the new Smart Slider 3 content block:

1. First up, install (or update) Smart Slider 3 so you’re running the latest version.
2. Click on Smart Slider in the sidebar, create a New project and choose the Start with a Template option.

3. Choose the template you would like to use. I’m going to go for a simple image slider.

4. You’ll be redirected to the editing screen for your imported slider. Go ahead and make any changes to your slider.

5. When you’re ready to add your slider to your post, open it up in Gutenberg and click the content blocks icon. You’ll see Smart Slider 3 has been added to your “Most Used” list of blocks.

6. When you click it, a new slider block will be added to your post. If you don’t have a block in your post currently selected, by default your slider will be inserted at the bottom of the post. If you do have a block selected, it will be inserted underneath your highlighted block.

7. Click Select Slider and your sliders for Smart Slider 3 will be displayed. Choose your slider and it will appear in your post.

8. There’s one more easy way you can add sliders to your post: When you add a new paragraph content block, you’ll see three little icons in the bottom-left of the block, including the Smart Slider 3 icon. When you click it, you can then insert a slider.

And that’s all you need to do to add a slider to a post using Gutenberg. Even easier than copy+pasting a shortcode, if you ask me!

The new way to build a Slider

Next generation visual editor, customizable animations & effects, and access to hundreads of premade templates.

Get Started

So Many Smart Slider 3 Possibilities!

Now that you know how to add sliders to Gutenberg, let’s take a look at all the different kinds of sliders you can add to your posts and pages.

1. Gallery Slider

Let’s start with an obvious one: image galleries. Much like the example I used above, adding an image slider to a post lets you display a series of images for your readers. For example, if you have a travel blog, you could display several photos from your latest holiday to a Gutenberg slider.

2. Lightbox Slider

If you’ve got limited space for displaying a slider, you can enable the lightbox slider option in Smart Slider 3 so that when users click an image it will be displayed in a larger view, taking up most of the screen. This is a particularly useful feature if the container width for your posts is fairly narrow, or you’re a photographer and want to give your images as much room for display as possible.

3. Parallax Effects

Want to quickly and add some kind of parallax effect to your website? You can do it with Smart Slider 3! This is one of my favorite effects and it’s so incredibly easy to do with Smart Slider 3. All you need to do is create a Gutenberg slider with parallax enabled and when you add the slider to a post you’ll get a stunning parallax effect.

4. Latest Blog Posts

A great way to direct visitors to other content on your blog is by display related posts. But what if you just want to highlight your latest posts? With Smart Slider 3, you can create Gutenberg sliders that display dynamically generate content such as the latest posts on your blog.

Conclusion

Well, there you have it. If you were worried that it would be difficult adding sliders or blocks with Smart Slider 3 to WordPress with Gutenberg, you can rest assured that it’s even easy to do than it is with the classic editor!

I hope you’ve found this tutorial useful. If you have any questions or need any help at all adding sliders to WordPress with Gutenberg, leave a comment below!

The post Gutenberg and Smart Slider 3: How to Add Sliders to WordPress appeared first on Smart Slider 3 — WordPress Plugin.

]]>