Let’s face it, even though Gutenberg has a ton to offer by default, many still find it lacking certain key features. The good news is that it’s easy to add additional blocks through plugins. In fact, that’s the main selling point of the editor; to constantly expand.

Today, we will learn how to expand Gutenberg with the PublishPress Blocks plugin.

What Are WordPress Content Blocks?

WordPress content blocks, or just Gutenberg blocks, add specific functionality to the WordPress editor.

These can range from basic blocks like the Paragraph or Header block, to more interesting stuff like Twitter embed blocks. It adds another layer of customization into WordPress, and learning about each one can open up new opportunities.

The Gutenberg editor was built to be customizable, which means it’s easy to add new features.

Both plugins and themes can add new blocks with unique functions in WordPress. And in some cases, some plugins just focus on adding new blocks into the editor, like PublishPress Blocks.

This opens the door for just about any feature to be added to Gutenberg.

How to Use PublishPress Blocks

Step 1: Install PublsihPress Blocks

PublishPress Blocks is a plugin that adds new blocks to Gutenberg. Some of the blocks are enhanced versions of existing blocks. This plugin adds a lot of versatility to your design choices and allows you to build the content you want.

On top of adding over 20 blocks, it also allows you to set permissions for each one. For instance, you could limit what blocks an author has access to at any given time. This can be handy if there are some sensitive blocks.

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Search for PublishPress Blocks in the available search box. This will pull up additional plugins that you may find helpful.

Scroll down until you find the PublishPress Blocks plugin and click on the “Install Now” button and activate the plugin for use.

Note: There are a ton of plugins from PublishPress. Make sure you are installing PublishPress Blocks. That said, you might want to check out the other plugins when you get a chance.

Upon activation, all of the blocks are usable in WordPress, and I encourage you to check out what each one does. However, be aware that you can customize each one along with other features.

Step 2: Block Access

You might not expect this, but this plugin actually has a good amount of settings to configure. So we are going to cover them in order, with the first one being to prevent access to specific blocks based on user roles.

Now, if you don’t have anyone else working on your website, this feature is not for you and you can skip the section. For everyone else, let’s continue.

On the left-hand admin panel click on Blocks.

The first section is called Block Access. Here you can choose which user roles have access to each block. This is very useful if you have a lot of authors or utilize contributors because you can limit what they have access to.

Now just to be clear, this section does not just work for PublishPress Blocks. It works for every block in WordPress, no matter where it comes from.

Click on the “New Profile” button.

You can enter a profile name at the top. I recommend using the User Role as the profile name. Below this, you will see a full list of every Gutenberg block available on your website.

Each one has a switch next to it that you can turn on (green) or off (gray).

Go through the full list and toggle each plugin on or off.

Next, we need to decide which User Roles these settings will apply to. Scroll up to the top and click on the Assigned Users tab.

Here, you will see the full list of user roles on your website. You can also find a full list of users with these roles below it.

Choose which roles will be limited to the blocks you chose.

Click on the “Save” button at the bottom to finish.

Step 3: Settings

This plugin actually offers two settings, Settings and Block Settings. We will cover both of these in this step.

Click on Settings.

The Settings section provides a few general settings to configure. The first three deal with adding lightboxes to the gallery images, where image captions are placed, and removing Autop.

Below this, you will find a text box for the Google API Key. This is for the Maps block, which adds Google Maps functionality. Just remember that this API Key does require valid billing information on your Google account, but you will not be charged unless you exceed the free credit.

Finally, there will be a few more block settings that deal with spacing, color, and some other default options.

Click on the “Save” button when you are done.

Click on Block Settings.

Here you will only see the PublishPress blocks. Each one has unique settings that you can configure. Simply click on the Settings Wheel next to the block to open up that block’s settings. They will appear as a popup.

Remember to click on the “Save” button every time.

There are three more sections in this plugin, Email & Forms, Custom styles, and Blocks Pro. I will not cover these because there isn’t much to say. And as you might have guessed, the final section is for the Pro version of the plugin, which adds even more customization options.

Congratulations on expanding your Gutenberg editor with PublishPress Blocks.

Be Sure to Checkout other Plugins

PublishPress Blocks is excellent for general Gutenberg blocks, but what if you want something specific?

For instance, you might run an online store with WooCommerce. Did you know that WooCommerce actually has a WooCommerce Blocks add-on? And did you know that it is free?

It adds many things to your WooCommerce store like Featured Product Blocks, Checkout Blocks, Sale Blocks, and more. You can fully customize what you display on your storefront with this plugin, but this is only one example.

There are a variety of plugins that add blocks in WordPress, so be sure to check them out.

More Blocks Equals More Choices

Obviously, adding more blocks in Gutenberg offers users more choices when it comes to creating content. For instance, the Table of Contents block is great for long blog posts because it helps visitors find the part they are looking for.

And let’s face it, if they can’t find what they are looking for, they are going to leave the page. Of course, some websites will not need every block the plugin has to offer, and that’s fine. Having them available for use doesn’t impact your website in any way.

That said, adding multiple plugins to expand the number of blocks could have an impact on site performance, so only add what you need.

Which block did you find the most useful? Did you change the permissions some users have to certain blocks?

The post How to Add More to WordPress Gutenberg with PublishPress Blocks appeared first on GreenGeeks.

Some of the blocks are enhanced versions of existing blocks, like the image block, and some of them are completely new. Thus, adding this plugin to your website is a surefire way to enhance your posts and pages.

Today, I will go over how to effectively use GutenBee to improve your content.

What Are Gutenberg Blocks?

Gutenberg blocks allow you to add specific elements or functionality to your posts or pages. These include text, images, video, shortcodes, and much more. However, in most cases, web developers need to install multiple plugins to add more options in the editor.

The GutenBee plugin avoids this by providing over 30 additional blocks to choose from.

For instance, many websites with a physical location will include Google Maps on their website to help customers find their store. Most of these websites will install a dedicated plugin for that exact reason. However, with GutenBee not only can you have this feature, but also many more.

If your looking for more options and power from the Gutenberg editor, look no further than GutenBee.

How to Improve the WordPress Gutenberg Editor with GutenBee

Step 1: Install GutenBee

The GutenBee plugin is a collection of blocks for Gutenberg. Some of the main ones include Google Maps, Reviews, Testimonials, and Food Menu to name a few. Due to the diversity of blocks it adds, it will fit into any type of website and reduce the number of plugins you need to install to expand Gutenberg.

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Search for GutenBee in the available search box. This will pull up additional plugins that you may find helpful.

Scroll down until you find the GutenBee plugin and click on the “Install Now” button and activate the plugin for use.

Step 2: GutenBee Settings

The plugin is ready to go after activation, however, there are some settings that you can configure. These mostly include the ability to hide some of the blocks that the plugin adds. After all, it’s very unlikely that a website will need all of them at once.

Thus, you can reduce the clutter when searching for blocks to use.

On the left-hand admin panel, click on Settings and select the GutenBee Settings option.

The settings are broken up into two tabs, General Options and Block Options. In the General Options, you will find some customization options that you can configure, like the editor width.

The Block Options section is the main attraction. Here you will see a full list of the blocks the plugin adds. Each one has a checkbox next to it that you can use to enable or disable the block. By default, all of the blocks are turned on.

Simply go through any of the blocks and turn off the ones you don’t need. There is also a section to insert the Google Maps API key here. Keep in mind you can do this later.

Note: There is no disadvantage of leaving all of the blocks enabled. Some developers simply like to enable what they need and since there is a block search function, finding what you need is simple, even if every block is enabled.

When you are done, click on the “Save Changes” button at the bottom.

Step 3: Add GutenBee Blocks

All that’s left is to actually add the GutenBee blocks to your posts or pages.

Go to any existing post or page on your website. Alternatively, you can create a new one for testing purposes.

Click on the “+” button to expand the block selection area.

You can search for GutenBee in the available search box or you can scroll down until you find it. Simply choose the block you want to use and click on it.

Note: All GutenBee blocks are yellow by default. This will help differentiate the enhanced blocks from the normal ones, like images.

The process is identical to adding a normal block in WordPress. The settings for each block can be accessed on the right-hand side where they normally are.

Congratulations on adding GutenBee to your website. Each block has its own settings to configure and functionality.

The Top 3 GutenBee Blocks

With over 30 blocks to choose from, GutenBeen offers a wide array of new tools to work with. Many of these blocks work very well together. For instance, you can combine the review block and testimonials block to give readers a better picture of the product.

Here are a few of my top picks for the best block it adds.

1. GutenBee Image Comparison

There are many times where you may want to use a before and after shot to compare images, but that can be difficult with the basic image block. The GutenBee Image Comparison block allows you to add two images to a single block in a side-by-side comparison.

It comes with a plethora of options that include border visibility, device visibility options (desktop, mobile, etc.), padding, margin, and you can even go a step further beyond by adding your very own custom CSS to the block.

This is perfect for websites that are comparing any two images.

2. GutenBee Review

Many websites review products and services, but by default, WordPress does not provide an option to add a score. The GutenBee Review block does that. You can add an adjustable scoring block anywhere inside of your review.

You can customize the color of the progress bar, add text underneath the numeric score, choose visibility options (desktop or mobile), and more. The score can be altered by moving a slider or manually entering the value.

It’s perfect for any website looking to add a score to an existing review.

3. GutenBee Food Menu

If you have a restaurant, then you need a website, especially in today’s world. However, many menu creation plugins can be somewhat difficult to use. The GutenBee Food Menu block allows you to create a full menu for your restaurant in minutes.

You can add the name of the food item, picture, and price to a block. Each block is intended for one item which makes it easy to use. There are additional customization options like background color, alignment, padding, and border to name a few.

Create a stylish menu in minutes.

Build Content The Way You Want

The big appeal of the WordPress platform is its customization and ease of use. Gutenberg blocks enhance both of these traits, and it can drastically speed up the content creation process.

And the GutenBee plugin enhances the editor.

While I have only shared a few of the amazing blocks you will find in this plugin, there are many more for you to discover. I highly encourage you to create a test post and test each of the blocks to find out what they can do.

Most of them are simple to use with customization options that are self-explanatory.

Which GutenBee blocks are your favorite? Do you think some of these blocks or features should be built into default blocks?

The post How to Use Gutenbee to Enhance WordPress Content appeared first on GreenGeeks.

For quite some time, there were other ways to get around having to use the Gutenberg bock editor. Perhaps the most popular thing to do over this time was to simply disable the Gutenberg editor altogether. 

WordPress is still allowing users to use the classic editor through the end of 2022, at which point they will no longer support it. That is why it is a good idea to play with the block editor and learn how to use it now.

All that said, Gutenberg has now added a “Classic Editor Block” to the block library, giving users a chance to use the classic editor anytime they want.

What is the Gutenberg Block Editor?

The Gutenberg Block Editor was the replacement editor WordPress built to replace the classic editor that has been there for years. The idea was to give users a more flexible development platform and an easier way to build and design posts and pages using a set block system.

Needless to say, the WordPress community was not happy with the change. However, over time, the block editor has actually emerged as quite a valuable tool. With third-party tools and additional blocks being added all the time, you can now build and design fairly easily using the system.

Furthermore, the block editor includes a way to use a classic HTML editor if/when desired. On top of that, a classic editor block has now been added to the library. This block allows you to use the classic editor on a post or page when and where you want.

Let’s take a look at how to access and use the WordPress classic editor even when using blocks.

How to Use the Gutenberg Classic Editor Block

Step 1: Log in to Your WordPress Dashboard

In order to grab the classic editor block and use it on a post or page, you first need to sign in to your WordPress website through the dashboard. So, go to your website and log in.

Step 2: Go to the Page or Post Section

At this point, you are inside the backend of your WordPress website. Oftentimes you would need to download some sort of plugin. However, in this particular case, there is no plugin to download. We simply have to get to the block editor in a page or post.

Click on Pages > Add New, located on the left menu area of the WordPress dashboard.

Note: You can also go to Posts > Add New if you prefer. The process is the same either way.

Step 3: Open the Block Library

Now that you are on a new page, it is time to add the classic editor block and switch layout.

Click on the blue “+” symbol button on the top left of the page to open up the block library.

Step 4: Search for the Classic Editor Block

Within the block library, you have a couple of choices. You can scroll through and find the classic editor block manually, or you can simply search for it using the available text field.

In this case, I simply searched for it.

You can see that the block is actually titled “Classic.” Click on that to add it to the page you are editing.

Step 5: Use the Classic Editor Block

Now that the block has been added, you can start editing your page using the classic editor.

Everything the classic WordPress editor had is now available in this block. You can use the single block for the entire page, add more than one, or use any of the other blocks you want.

That’s it! You can simply access this block anytime as you would with any other element in Gutenberg. If you continue to be more comfortable with the classic editor, then this is a fantastic option to have access to.

Converting Blocks

It should be noted that at any time you can convert the classic editor blocks. This will simply convert the block to a regular paragraph block that users have come to know in Gutenberg.

If for some reason you want to do this, simply click on the “Convert to Blocks” option that is shown above the Classic Editor Block.

If you do this, the block will be immediately converted as stated above and you will be left with the normal paragraph block.

From here you can, again, add more blocks or keep editing.

Other Ways to Use the Classic Editor

If you still don’t care to use the Gutenberg block editor and the classic editor block that is available, there are some other options for you. Here are some plugins that can help you keep the classic WordPress editor in place for the long run.

Classic Editor

Classic Editor is the official plugin for using the classic editor and is maintained by WordPress contributors.

They say that they will continue to support the plugin for as long as needed. What that means is that if there are still millions of people using the plugin at the end of 2022, then WordPress will continue to support it. Simply install and activate the plugin and with a few clicks, you will be able to access the classic editor whenever you want.

No Gutenberg

No Gutenberg is another plugin that allows you to do away with the block editor and access the classic editor. It is not as well known as the main Classic Editor plugin, but it does the trick. 

It also works a little differently than the Classic Editor plugin. Instead of allowing you the options for either editor, the No Gutenberg plugin disables the block editor altogether. As of right now, this plugin is still fully functional and receives updates all time.

Final Thoughts 

The introduction of the Gutenberg block editor was a bumpy one. However, over time it has been more widely accepted and more developers have started to use it. The main issue here is that WordPress has specifically stated that this is the future. With that said, it is a good idea to learn the editor and make use of it.

However, there are several options in place that allow you to still use the classic editor. Also, with the addition of the classic editor block, you will now be able to use that style of editor for the long run because it is part of the block library.

I hope this article showed you how easy it is to continue to use the classic editor in WordPress if needed. Go ahead and give the bock a try and see if you like it. If not, then use one of the plugins above and simply deactivate the block editor for now.

Have you started using the Gutenberg block editor full-time yet? Has the transition been difficult or smooth for you?

The post How to Use the Classic Editor Block with WordPress Gutenberg appeared first on GreenGeeks.

Stay tuned to learn how to easily do just that with the use of a plugin. We’ll walk through the steps of creating a business profile in WordPress and adding it to a page or post with a Gutenberg block.

We’re going to use the Five Star Business Profile plugin. I mentioned that you could make your contact page more effective with the tool, and that’s because it generates schema.org structured data.

You don’t need to know how structured data works to use the plugin. All you need to know is Google likes it, so it should be something in your SEO arsenal.

If you don’t use the Gutenberg editor in WordPress, don’t worry, you can still use the plugin. I’ll show you how to display the business card widget using a shortcode.

Okay, let’s get down to business…so to speak.

Installing the Five Star Business Profile Plugin

Log in to your WordPress admin panel.

In the left column navigation, mouse over the “Plugins” link and click the “Add New” link.

In the “Search plugins…” box, enter “Five Star Business Profile.”

Once you have located the plugin, click the “Install Now” button.

Click the “Activate” button.

Configuring Five Star Business Profile

To start building your WordPress business profile, click the “Business Profile” link in the left column navigation.

In the “Search Engine Optimization” section, you’ll find settings for a schema type and image.

Schema Type

The plugin offers some business and organizational schema types to choose from. If there’s no exact match for your business, choose whichever type comes closest. Choosing the generic “Organization” type is fine for most companies.

Image

Upload an image related to your business. The image will not be displayed on your site, but Google requires an image for the business schema. So make sure the image you upload is relevant to your business.

In some cases, Google may choose to display it in search results.

The “Contact Information” section contains most of the standard business contact fields.

Name, Address

The name and address of your company, of course.

Google Maps API Key

If you want to display a map and a “Get directions” link, you’ll need a Google API key. It’s a Google developers feature, so getting a key is not the most user-friendly thing in the world. But if you have a Google account, it only takes a couple of minutes.

Phone

Your business phone number.

Contact Page

If you have an existing contact page, you can select it from the dropdown here.

Email Address (optional)

You can add an email address here. If you do, you may have to deal with spam.

Schedule

In the “Schedule” section, there’s only one field, “Opening Hours.” Click the “Add another opening time” button and choose the days of the week as well as the opening and closing times.

Multiple Locations

In the “Multiple Locations” section, checking the box creates a new “Locations” navigation link. The “Business Profile” link in WordPress can then be found under the new “Locations” area.

In the interest of keeping this tutorial simple and focused, we won’t go into creating multiple locations. If you want to use the multiple locations feature, the plugin documentation will guide you.

Displaying Your Business Profile on a WordPress Page or in a Post

Create or edit a page or post.

Click the add block icon.

Search for “contact” or go to the “Widgets” section and click the “Contact Card” block.

That will insert the business information you entered into the business profile.

You can’t directly edit the inserted contact card. However, you can choose which elements are displayed on the page (and in the structured data). To do this, use the checkboxes in the “Block” section on the right side of the editor.

Save the page or post, and your business profile will be visible on your site.

If You Don’t Use the Gutenberg Editor

Create or edit a page or post. Insert the following shortcode where you want the profile to appear:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][contact-card][/ht_message]

Save the page or post, and your business profile will be visible on your site.

The More Information You Can Offer About Your Business, the Better

People make a lot of buying decisions based on information they can find online. Potential customers making a quick phone call to ask for information or check operating hours seems to be a thing of the past. If your WordPress site includes a company profile, you’ve already anticipated, and answered, a lot of common questions.

How much business information do you make public? Are you using structured data on your website? Let me know in the comments.

The post How to Add a Gutenberg Block for a Business Profile in WordPress appeared first on GreenGeeks.

In order to add a block like this, you need to install a Gutenberg blocks plugin. There are a few good ones out there, and all of them will add different types of available blocks to your editor. These work to expand your Gutenberg block library.

Remember, adding a call to action block is a lot like creating a custom Gutenberg block in the fact that you need to take a couple of steps to be able to perform the process in your editor.

Why Add a Gutenberg Call to Action Block?

A solid call to action section on a website can mean the difference between gaining clients and losing them. These call to action blocks are one of the many ways that you can create effective content that will drive traffic to your website and help you land clients or customers.

Adding a call to action block on a post or page in WordPress will allow your site users to immediately see what all you are offering when it comes to products, specials, services, and discounts.

Let’s take a look at how you can easily add a Gutenberg call to action block in WordPress.

Gutenberg Blocks – Ultimate Addons for Gutenberg

I found a great Gutenberg blocks plugin called Gutenberg Blocks – Ultimate Addons for Gutenberg. This plugin not only allows you to add a nice looking call to action section to the Gutenberg block editor but it also adds a number of other blocks that you can use. Some of these other custom blocks include:

• Advanced Heading
• Advanced Columns
• Blockquote
• Google Map
• Content Timeline
• Marketing Buttons
• Multi Buttons
• Table of Contents

Basically, this ultimate blocks library plugin adds more block options to your editor allowing you to do more and build more. The plugin is lightweight, easy to install and use, and very easy to customize. You can also build a solid call to action block and then set it as one of your reusable Gutenberg blocks for future plug and play use.

Install and Activate Gutenberg Blocks Plugin

In order to add a table of contents block to Gutenberg, you need to install and activate the Ultimate Addons plugin. You can do this from the plugin’s page in your WordPress admin dashboard.

Once the plugin has been installed, click on Settings > UAG. This will take you to the plugin homepage where there is some information about the plugin.

Scroll down some to the “Blocks” section and click on the “Activate All” button. This will activate all of the blocks that the plugin offers and put them into your Gutenberg editor.

Note: You can also activate only the blocks you want from here. Just click on “Deactivate” if you don’t want a certain function added into the editor.

Add Call to Action Block to Post or Page

Now that the ultimate blocks library is installed and ready to go, you can easily add a Gutenberg call to action block to content. Head over to the posts or page section and click on an existing post or add a new one.

Once you are inside the editor, click on the “Add Block” button on the top left. It is a plus symbol.

A dropdown will appear with all your available blocks. Scroll down to the “Ultimate Addons Block” section and look for the “Call to Action” block. Click on it to add it to your post or page.

The block will automatically be added to your editor. From here, you can start editing and building the call to action block.

That’s it! You have successfully added a Gutenberg call to action block into your post or page. Build as many as you would like and direct your site users to different portions of your website.

Final Thoughts

While the Gutenberg block editor is still taking time for many users to learn, the power and freedom it gives designers to work can’t be overstated. There are so many new types of blocks you can add.

So make sure when you go to add a call to action section that you also check out all the other types of blocks available.

Have you used another plugin to add a call to action block? Do you prefer to do it in a different way in the classic editor?

The post How to Add a Gutenberg Call to Action Block in WordPress appeared first on GreenGeeks.

Why Add a Table of Contents Block?

You come across websites all the time that have some sort of table of contents added to a page or section of the site. This can be used for a number of reasons.

The most popular reason website owners add a table of contents to a post or page is that it lets you display an index or a list of headings included within a long post or page. This gives users an overview of the content and links to the specific sections.

Basically, adding a table of contents Gutenberg block allows for much easier searching and scrolling of a long post or page.

Let’s take a look at how you can easily add a table of contents block to Gutenberg in WordPress.

Gutenberg Blocks – Ultimate Addons for Gutenberg

I found a great Gutenberg blocks plugin called Gutenberg Blocks – Ultimate Addons for Gutenberg. This plugin not only allows you to add a smooth table of contents block to the Gutenberg block editor, but it also adds a number of other blocks to the editor that you can use. Some of these other custom blocks include:

• Advanced Heading
• Advanced Columns
• Blockquote
• Call to Action
• Google Map
• Content Timeline
• Marketing Buttons
• Multi Buttons

Basically, this ultimate blocks library plugin adds more block options to your editor allowing you to do and build more. The plugin is lightweight, easy to install and use, and very easy to customize.

Install and Activate Gutenberg Blocks Plugin

In order to add a table of contents block to Gutenberg, you need to install and activate the Ultimate Addons plugin. You can do this from the plugin’s page in your WordPress admin dashboard.

Once the plugin has been installed, click on Settings > UAG. This will take you to the plugin homepage where there is some information about the plugin.

Scroll down some to the “Blocks” section and click on the “Activate All” button. This will activate all of the blocks that the plugin offers and put them into your Gutenberg editor.

Note: You can also activate only the blocks you want from here. Just click on “Deactivate” if you don’t want a block added to your editor.

Add Table of Contents Block to Post or Page

Now that the ultimate blocks library is installed and ready to go, you can easily add a table of contents block to a post or page. Head over to the posts or page section and click on an existing post or add a new one.

Once you are inside the editor, click on the “Add Block” button on the top left. It is a plus symbol.

A dropdown will appear with all your available blocks. Scroll down to the “Ultimate Addons Block” section and look for the “Table of Contents” block. Click on it to add it to your post or page.

The block will automatically be added into your editor, and from here, you can start editing and building the table of contents block.

That’s it! You have successfully added a table of contents Gutenberg block into your post or page. Build as many as you would like.

Other Table of Contents Plugins

If the Gutenberg Blocks – Ultimate Addons for Gutenberg plugin does not suit you for one reason or another, then you can use a different plugin to do this. Here is another good one available that will allow you to easily add a table of contents block into your editor.

Ultimate Blocks – Gutenberg Blocks Plugin

The Ultimate Blocks – Gutenberg Blocks Plugin is another solid Gutenberg blocks plugin that will allow you to easily add a table of contents to your editor.

This plugin has the same concept as the one we used in the demo above. Install and activate it, and a lot of new and useful blocks will be automatically added. This includes a dynamic table of contents block.

Final Thoughts

Gone are the days where you have to tediously build and code a table of contents section into a post or page. With the Gutenberg blocks plugins above you can now easily add this to any post or page and then seamlessly build your customized block section.

Have you found a better way to add a table of content’s block to your editor? Are you still more comfortable building one the old way?

The post How to Add a Table of Contents Block to Gutenberg in WordPress appeared first on GreenGeeks.

Gutenberg blocks have opened a door that allows us to do all kinds of unique things when we are building a site, post or page. You can even build reusable Gutenberg blocks so that in the future you can simply plug these blocks in, which can save you a lot of time.

With that being said, have you ever wanted to build a custom Gutenberg block? There are already a lot of different blocks available to use in WordPress, but customization is always at the forefront of our minds.

Well, you are in the right place. Below I will show you how to easily create a custom WordPress Gutenberg block. This will help set your site apart and also give you even more freedom.

Remember, you can even export and import your custom Gutenberg block for use on other WordPress sites.

Create a Custom WordPress Gutenberg Block

In order to create a custom Gutenberg block, we are going to use a plugin called Block Lab. This plugin will help you easily build a custom block in Gutenberg by using the combination of your WordPress admin area and a simple template system.

With developer-friendly functions and the ability to work within the WordPress admin system, Block Lab is arguably the easiest and fastest way to create a custom Gutenberg block in WordPress.

Install and Activate Block Lab

To get started you want to install and activate the Block Lab plugin from the plugin’s page within your WordPress admin dashboard.

Once the plugin has been installed and activated you will see a “Block Lab” tab on the left panel of your WordPress admin dashboard. Our first step is to create a new custom Gutenberg block. To do this, click on Block Lab > Add New.

Create a New Custom Gutenberg Block

You will be taken to the Block Lab area where you can create a new custom block. To get started, give your custom block a name so it is easy to recognize later. The name can be anything you want, but preferably something related to the type of block you are building.

You can see that on the right side of the page there are some block properties to choose from. Go through those and select them according to what you want or need. You can also add 2-3 keywords if you want to help make it easier to locate your custom Gutenberg block later on.

Now, it is time to add some fields to your custom block. There are all sorts of fields you can add when you do this, and you can add multiple fields as well. Some of the fields you are able to add include:

• Text
• Text Area
• URL
• Email
• Number
• Color
• Image
• Select
• Multi-Select
• Toggle
• Range
• Checkbox
• Radio Buttons

Name your field, make your selections and continue on. You can add as many fields as you want. Basically, this will depend on the type of custom Gutenberg block you are building.

When you are finished, click on the “Close Field” button at the bottom. If you want to add another field, then simply click on “Add Field” again and go for it.

Note: You may get additional options based on the field type you choose. For example, if you are using the “Text” field, you will get other options to fill in like placeholder text and a character limit.

Once you have added all the fields you want, take a second to review them. You can drag and drop the fields into the order that you want as well. In the example below, I created three fields.

When you are satisfied with your fields and the order they are in, go ahead and click on the “Publish” button that is located on the upper-right of your screen. When you do, the custom Gutenberg block will be live and ready to use.

Create Your Custom Block Template

Now that you have created a custom Gutenberg block, you are done with the first step. However, the block won’t actually work until you create a block template. You have to create the template and upload it to your current theme folder.

Let’s do this together.

As you can see in the screenshot below, Block Lab looks for certain template files in your theme. In this case, they will be looking for the one below.

The custom block template file tells your plugin how it should display the block fields that you have created within the editor. In turn, the plugin will look for the template file and then use that file info to display the block content on your post or page.

Create a Desktop Folder

The first thing you want to do here is to create a folder on your desktop and title it “blocks.” Once you have created your site template file, you will put it into this folder and then upload it into the current WordPress theme directory you have running.

Create Block Template File

To create the file we are about to make together you can simply use a plain text editor like Notepad or something similar.

Note: Every time you add one of your new fields to your custom block, you have to add the following PHP code to your block template file:

Remember, you want to replace add your field name here with the actual field name.

For example, the name of the first field in this demo is simply new-field-demo, so the above would actually look like this when added:

Not too difficult right? Let’s go ahead and do the rest for this particular example:

Now all you need to do to finish up is add some HTML tags for styling purposes. You can do these several ways depending on your preference for styling and display. Here is a demo for you to follow:

Lastly, name your file. Then, save and put it into the blocks folder you previously created. In this sample, I am using: greengeeks-custom-gutenberg-block.php.

Note: Your file name should be the name of your custom Gutenberg block.

If you want to style your Gutenberg block with custom CSS, simply add the code you want in a separate Notepad file, save it as greengeeks-custom-gutenberg-block.css, and put it into the blocks folder with the .php file.

It will help if you know and understand how to write custom CSS.

Upload Custom Block Template File to Theme Folder

The last thing you need to do to complete this process is to upload the blocks folder that contains all the files into your WordPress theme location. The easiest way to do this is to use an FTP Client to upload these files.

If you already have an FTP Client, great! If not, I recommend FileZilla as a great one to use for this process. Once you have connected using the FTP client of your choice, just look for the /wp-content/themes/ folder. Open up the theme you are currently using and drag and drop the blocks folder into that particular directory.

Note: Since Block Labs allows us to create custom blocks that are theme specific, if you change your theme, you will need to copy the blocks folder you have and add it into your new theme directory using the same process above.

That’s it! If done correctly you can go open a post and add your custom Gutenberg block whenever you want. Your new block will automatically show in the block area of the site and will be there whenever you want.

Creating a custom Gutenberg block does not have to be a hard, time-consuming process. I hope this article showed you how easy it is to create a custom WordPress Gutenberg block.

Have you created any custom blocks in the past? Is this the process you tried or have you done it another way?

The post How to Create a WordPress Custom Gutenberg Block appeared first on GreenGeeks.

And then, reusable blocks in WordPress was discovered.

Why Use Gutenberg?

With the release of the Gutenberg WordPress editor, there came a number of really great options and tools that could be used. While WordPress does allow you to disable Gutenberg and use the classic editor, this will not always be the case.

You will have until the end of 2021 to use the classic editor before WordPress stops supporting it for good. So learning as much about Gutenberg as you can is key.

One of the best things about it is that Gutenberg gives a user the ability to create reusable blocks in WordPress. You can even go a step further and export and import these reusable blocks in the system.

This allows you to build a block on one site and take it to any other WordPress layout you want. This comes in very handy for people who are using the same blocks and pieces of code snippets for websites.

Simply export the reusable Gutenberg blocks and import them for use on other posts and pages. It is a very handy and attractive tool.

If you’re wondering how to create reusable blocks in WordPress, then you are in the right place.

In this article I will show you how easy it is to create reusable Gutenberg blocks and save them for use whenever you need.

What is a Gutenberg Reusable WordPress Block?

When WordPress users were getting nervous about the massive Gutenberg block editor update, it was for a number of reasons. First on that list was how existing content would be affected.

Turns out it was not affected and WordPress gave users an easy way to update existing content using the Gutenberg block editor.

So what are reusable blocks in WordPress? As mentioned above, many WordPress users have to continually create the same type of content for websites.

Forms, social media sharing, call to action buttons, banners and post/page layouts are some of the things that have to be built and rebuilt over and over.

That is until now. By creating a reusable WordPress block you can take the content that you build once, save it, and use it over and over.

This saves a lot of work and a lot of time.

Now that you know what a reusable block is, let’s take a look at how to create reusable Gutenberg blocks in WordPress

Create a Reusable Block in WordPress

First off, remember that all Gutenberg blocks act as individual, stand-alone content elements. When a block is created, it can be used individually as a reusable block in WordPress.

To create reusable blocks in WordPress, the first thing you need to do is create a new post or page or edit an existing one.

When you are in the Gutenberg block editor on a new post, add the type of block you want from what is available.

For this example I am going to add some text to a paragraph and then save it as a reusable block.

Now that you have added the content you want into the block of your choice, you can save it. Click on the three-dot menu that is located in the toolbar and select the “Add to Reusable Blocks” option.

WordPress will ask you to enter a specific name for your reusable block. Try to select something that is easy to remember and relates to the block’s purpose. That way when you are searching for the block you want later it is easy to find.

Go ahead and click the “Save” button to add the Gutenberg reusable block to the WordPress database.

Add a Reusable WordPress Block to Another Post or Page

Now that you know how to create reusable Gutenberg blocks, it is time to add that block to another post or page.

Don’t worry, the process is very simple.

The first thing you want to do is create a new WordPress post or page. This will give you a blank canvas to add a reusable block to.

While inside your new post or page, click on Add Block and in the drop down menu box scroll down until you see an option called “Reusable.” Click on that and it will display all the reusable blocks in WordPress that you have available.

Simply click on the reusable block you want to add and it will automatically be added to the WordPress post or page you are currently editing.

Note: You can also search for a reusable block (or any block for that matter) from the search bar.

If you need to or want to edit the reusable block for the current post or page you can do so. Simply click on the three-dot menu and within the drop down select the “Convert To Regular Block” option.

What this does is allows you to edit the current reusable block for the current post or page you are in, without it changing or affecting the original reusable block you built.

Easily Manage All Reusable Blocks in WordPress

Manage reusable WordPress blocks by finding the “Manage All Reusable Blocks” page.

To get there, click on the add block button like you would do if you were adding a block to your editor. In the drop down box that opens, scroll down to “Reusable.” You will see a link titled “Manage All Reusable Blocks.”

Click on that and you will be taken to your Gutenberg block management page.

From this page you can rename, edit and delete old blocks you don’t use. You can also export and import any of your WordPress reusable blocks.

Exporting and Importing Reusable Blocks in WordPress

As mentioned at the beginning of this tutorial, you can export and import Gutenberg blocks for use on other websites.

This is a very attractive bonus that the Gutenberg WordPress editor has added. This will allow you to create reusable blocks in WordPress on one site, and export them to use on any other WordPress site you would like.

Learn how to complete this process by reading how to export and import Gutenberg blocks now.

I hope this tutorial has been helpful in showing you how easy it is to create reusable blocks in WordPress. They offer so much functionality and allow you to save a lot of time as you build.

Over time, you can create a full library of reusable blocks in WordPress. This will help streamline your page or post creation process.

How you already started to create reusable blocks in WordPress? Do you find this has saved you time?

The post How To Create Gutenberg Reusable Blocks in WordPress appeared first on GreenGeeks.

Not only can you build and design pages and posts in a totally different way, but you can also perform other new actions like exporting and importing Gutenberg Blocks to use on other websites.

Another concern was what would happen to all of your current post styles and content if you updated and enabled the new WordPress Gutenberg blocks editor. Luckily, there were a couple of different ways to disable the new WordPress block editor until you were ready to learn it and use it.

In this tutorial, I will show you how to use the Gutenberg block editor to update your existing WordPress posts.

Let’s take a look at how you can easily update existing articles and page content.

How to Update Existing Article and Page Content Using Gutenberg

Anyone using WordPress 5.0 and later will automatically have the Gutenberg Block Editor set as the default editor.

The great thing about updating to the new WordPress block editor is that it will not affect any of your already existing content. This includes text, pictures, and layout.

This simply puts the content into a block format on the back end of your website. Then, you can use blocks to further edit content down the road. The display and layout of all content will remain the same on the front end of the site.

However, if you want to, you can easily edit existing content using the block editor. To edit an existing piece of content on a post or page, simply edit as you would normally do in the classic WordPress editor.

When you open up a post you will see all of the content wrapped inside a single Classic block.

That same content would look like this is the Classic Editor, so you can see it is laid out the same, just not within the block. The organization is just a bit different.

However, even though the organization within the editor is slightly different, all of the content will look the same on your website. The Gutenberg Block Editor will not make changes to your content.

Converting Content to Gutenberg Blocks

Once you have edited content how you want, you have two options. You can continue to edit and work in the classic editor with your existing content. Or, if you choose, you can convert the content to Gutenberg Blocks.

To convert the existing content into Gutenberg Blocks you simply click on the three-dot menu option on the top right corner of Classic block. A drop-down menu will appear and from that menu select the “Convert to Blocks” option.

That’s it! You are all set and good to go. Your existing content will be automatically converted into the appropriate blocks. The content residing inside the Classic block will be split into several different blocks.

You can now edit your existing content using WordPress Gutenberg blocks. Each block is a separate entity with its own formatting options, styles, and design options.

Some Things To Remember

After you have performed all of the above actions, or even if you haven’t, there are some things you want to remember.

The first thing you want to remember is that although Gutenberg works fine with most themes and plugins, some may still not have Gutenberg support. It is the plugin developer’s responsibility to make sure their plugin is up-to-date and compatible with Gutenberg.

Note: Always test your theme and plugins for Gutenberg compatibility before switching and/or updating to it.

Second, you have the option of installing the Classic Editor and activating it right away. You can do this even when you update to WordPress 5.0 or later. This will give you the ability to work with the Classic Editor, as well as the new Block Editor, whenever you want.

Third, you can keep using the Classic Editor until 2022. This should give you enough time to get familiar with and learn how to properly use the new WordPress Gutenberg Block Editor.

Difference Between Classic Editor and Gutenberg Block Editor

Before we dive into the process of getting your existing content updated, let’s take a quick look at the major difference between the classic editor and the new Gutenberg Block editor.

The Classic WordPress Editor was a text editor that looked a lot like Microsoft Word. There was a single editing field with a bunch of formatting options located at the top. You could do quite a bit with it, but you had to use plugins to add custom styles. The Classic Editor looked like this:

There is also an HTML text editor you can use to add code and other functionality if you click on the “Text” tab within the editor. So essentially, you can do the visual editor, or the text-based editor.

The new WordPress Gutenberg Block Editor is a totally block-based editor. In this setup, you add all content in the form of blocks. The Block Editor looks like this:

These “Blocks” are actually content elements that are totally separate from each other and all have their own set of formatting options. There are individual Gutenberg Blocks for every piece of content including:

• Regular Text
• Paragraph Text
• Image
• Button
• Gallery
• List
• Table
• Embeds
• Etc.

You can also find more blocks and widgets that are provided by your plugins and theme.

So, in order to post in the Gutenberg Block Editor, you will have to use blocks and block formatting to do so. Any of the blocks can be transformed into HTML. You can copy, paste, and access that style code whenever you need to.

Blocks can be extended even more with certain plugins that are rapidly becoming available. Plugins like Atomic Blocks extend block functionality and give the user even more design and display block options.

However, you can also update your old blog posts and pages with Gutenberg Block Editor.

Final Thoughts

Gutenberg has had many people upset because of all the changes. This is usually the case with change. Most everyone is resistant to it, especially because everyone was so accustomed to the original WordPress editor.

That being said, the Gutenberg editor will catch on, and truth be told, it offers a ton of functionality and design opportunities. Like anything else, you will need to take some time to play with it and figure it all out. However, once you do, you will see that the editor is actually quite smooth and offers a lot of design freedom on both posts and pages.

I hope this tutorial showed you how easy it is to use the Gutenberg Block Editor to update existing WordPress content on posts and pages. Remember, you can take your time learning how to use it. However, over time the editor will become the norm. Make sure you at least know the ins and outs of it come 2022.

Have you already started using the new WordPress Block Editor? Are you sticking with the Classic Editor as long as you possibly can?

The post How To Use the Gutenberg Block Editor to Update Existing WordPress Content appeared first on GreenGeeks.

However, Gutenberg blocks are here to stay so best to move forward using the editor and learning all about it. The good news is that the new block editor comes packed with features and gives you the ability to accomplish many different things.

For instance, did you know that Gutenberg allows you to save your custom content blocks and export them to use on your other WordPress sites? In this article, I will show you how to easily export Gutenberg blocks so that they can be used on other WordPress sites.

Quick Rundown of Gutenberg

If you are reading this, chances are you know what Gutenberg is and at least a little about how to use it. For those of you who don’t, Gutenberg is a fully block-based WordPress editor where every piece of content you add is a block.

You can customize WordPress Gutenberg blocks and re-use them to quickly create content in the future. These re-usable blocks are extremely helpful for adding call-to-action buttons, feedback forms, banner ads, and much more.

Many of you don’t know that you can actually export Gutenberg blocks and then import Gutenberg blocks and use them on other websites.

This is specifically helpful if you work on client websites and need to recreate the same info over and over. Technically, you can even sell your one-of-a-kind Gutenberg block, but that is for another time.

Let’s take a look at how to export Gutenberg blocks so that they can be used on other sites.

How to Export and Import Blocks

How to Create Reusable Blocks

Before you can think about exporting a block, you have to actually create a reusable block. Luckily, this is pretty easy to do and works on any block.

Step 1: Add A Block

First, we need to actually add a block to a post or page. Odds are you know how to do this, so feel free to skip to the next step, if not, keep reading.

Click on Posts and select the Add New option.

Click on the “+” button and select a block that you want to make reusable.

Step 2: Customize the Block

Now you need to spend a few moments and customize the block. How you customize the block depends on the one you choose. Each one has different options.

For instance, if you chose a Shortcode block, the only thing you can really do is add the shortcode, but this is still useful if you plan to use that shortcode on multiple posts or pages.

Another example would be using a Paragraph block. In this case, you could create a template to add content, add social media links, or something else that you would use on a post-by-post basis.

Regardless of what you choose, click on the three dots of the block and select the Add to Reusable blocks option.

The block will now be available in your reusable block library, which means you can now export it.

How to Export Gutenberg Blocks

WordPress Gutenberg blocks are not restricted to the specific site you are working on. You can export these blocks to use on other WordPress sites.

Step 1: Find the Block Management Section in the Editor

The first thing you need to do is find your way to the block management page. To access that you need to be inside any post or page and running your WordPress editor.

Once you have navigated to a post or page and you are inside the editor click on the “Manage All Reusable Blocks” link inside the “Reusable” tab in your content editor.

Step 2: Export as JSON

Once you are on the block management page, you can edit, delete, export, and import your WordPress Gutenberg blocks.

To export the block you choose just click on the “Export as JSON” option that is located beneath the block.

Step 3: Upload JSON File to Another Site

Once you click on that option your block will be downloaded to your computer as a JSON file. Now, you can upload this JSON to any other WordPress site and use the block over and over.

How to Import Gutenberg Blocks

Step 1: Log In to New Website and Go To Block Management

To import Gutenberg blocks you need to log into the website you want to have the reusable block available and head back to the block management screen.

Step 2: Import JSON File

You can see the Import from JSON button at the top of the block management page. Simply click on that and you will be prompted to upload the JSON file you exported earlier.

Choose your file and click the Import button. WordPress will now import your new reusable block and save it in the database.

Once that is done, you can use it on your new WordPress site like you would any other block.

How to Use the Blocks Export Import Plugin

While the built-in tools WordPress offers are more than enough, you can actually reduce the steps by using a plugin. It essentially adds the options right into the block’s settings.

Step 1: Install Blocks Export Import

The Blocks Export Import plugin is relatively new, but it’s made by ThemIsle. They make fantastic tools, and this one is no different. The plugin simplifies the process by not requiring you to create a reusable block.

Instead, you can immediately export a block after configuring it, but there is one thing to keep in mind. The blocks will no longer be stored in your WordPress database. They will be JSON files on your computer.

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Search for Blocks Export Import in the available search box. This will pull up additional plugins that you may find helpful.

Scroll down until you find the Blocks Export Import plugin and click on the “Install Now” button and activate the plugin for use.

Step 2: Export & Import Blocks

Unlike most plugins, there are no settings to configure. The plugin is fully operational and ready to use.

Go to any posts or page, add a block, and customize it. When you are done, click on the three dots and select the Export as JSON option.

This will download a JSON file on your computer. It will be located in your downloads folder. You can use it to import the block in the future on any site.

To import a block, click on the “+” button and select the Import Blocks from JSON option.

Click on the “Upload” button and select the JSON file in your downloads folder.

The block will now be imported and ready to go.

Final Thoughts

As you can see, this is just one of many great functions and operations that the WordPress Gutenberg block editor brings to the table. I hope this article was helpful and showed you how to easily export and import WordPress Gutenberg blocks. You can reuse blocks on any site.

Have you already started creating your own Gutenberg reusable blocks? Are you starting to settle into the new editor?

The post How To Export and Import Gutenberg Blocks in WordPress appeared first on GreenGeeks.