Tag - Gutenberg

How to Add and Align Images in WordPress Block Editor (Gutenberg)


Images bring life to your WordPress posts and pages by making them more engaging. However, many beginners struggle with aligning images just the way they like.

The new WordPress block editor (Gutenberg) solves this problem by making it easier to add and align images in WordPress.

In this article, we will show you how you can easily add and align images in the WordPress to create beautiful content layouts.

Adding and properly aligning images in WordPress

Image Alignment in WordPress Editor

Previously, WordPress used a text area with editing buttons as its default editor. One particular issue in the old editor was image alignment.

Even though there were options to align images left, right, or center, they didn’t always look good. Sometimes images didn’t align, were not the exact size, or just looked odd.

WordPress 5.0 introduced a new WordPress post editor called the Gutenberg block editor. It fixed several problems with the old editor including the image alignment issues.

Let’s take a look at how you can easily add and align images in the new editor to create beautiful layouts for your posts and pages.

Add and Align Images in WordPress

The new editor comes with the following blocks that you can use to add images into your WordPress posts and pages.

  • Image
  • Inline Image
  • Gallery
  • Media & Text
  • Cover

Let’s start with a simple image block first.

Click on the ‘Add new block’ button or type /image in the post editor to insert an image block.

Adding a new image block in WordPress post editor

You will see three buttons inside the blank image block.

You can upload an image from your computer, select an already uploaded image from the media library, or insert an image by providing the image file URL.

Next, click on the ‘Upload’ button and then select the image you want to upload from your computer.

As soon as you select the image, WordPress will upload it to your media library and insert it into the image block.

Image options in WordPress post editor

Now, you will notice a toolbar on top of your image and some image block settings in the right column. To align your image, you’ll be using the toolbar that appears on top of the image.

Image alignment buttons in WordPress post editor

The image block gives you the following image alignment options as buttons in the toolbar.

  • Align left
  • Align Center
  • Align Right
  • Wide Width
  • Full Width

If your image is smaller in width, then aligning it to the left or right will bring up text next to the image. Aligning it to the center will display the image on its own row with no text on either side.

Center align an image in WordPress

Choosing the wide width option will make your image wider than the text area, and the full-width option will push it to the right and left edges of the browser screen.

Making an image full-width in WordPress

How to Perfectly Align an Image Next to Text

A lot of times you may need to perfectly align an image next to some text. WordPress block editor makes this easy by adding the Media & Text block.

This block basically adds a two-column area. One column for images (media) and the second column for text content.

Media and text block in WordPress post editor

Simply upload your image and then add the text you want to display next to it.

Image and text block settings

After adding the image and text, you will notice more options for the block. You can make the whole block wider or full-width, you can also switch the image and text sides.

The image’s alignment will automatically adjust to the height of the text in the next column.

Image size adjusts to align vertically

How to Align Gallery Images in WordPress

WordPress post editor also comes with a block to add image galleries. This allows you to easily display images in a grid of rows and columns.

The Gallery block comes with similar alignment options in the toolbar.

You can make the entire gallery block align to the left, center, or right. You can also make it wide or change it to a full-width row.

Align gallery images in WordPress post editor

The default gallery feature in WordPress is quite good. However, if you regularly add photo galleries to your WordPress posts and pages, then consider using a photo gallery plugin like Envira Gallery.

These plugins will give you more options to align images in your photo galleries, display them in the popup, and style them differently.

How to Add Two Images Side by Side in WordPress

The easiest way to display two images side by side in a WordPress post is by adding both images in a Gallery block.

Display two images side by side in WordPress posts and pages

Simply select a 2-column layout for the gallery block to display both images next to each other. You can also check the ‘crop thumbnail’ option to make sure that both images are of the same size.

More Ways to Add and Align Images in WordPress

Apart from the image, media and text, and the gallery block, you can also use the Cover block to add a cover image.

In modern web design, cover images are used to create highly engaging content layouts. These images are used for highlighting different sections of a page.

The cover image block comes with the same alignment options as an image block. You can add text over the image and choose an overlay color from the block settings. The best part is that you can check the ‘Fixed Background’ option which creates a parallax background effect.

Adding cover image in WordPress post

To learn more about using cover images, check out our article on the difference between featured images and cover image in WordPress.

So far we have talked about adding images directly to your posts and pages. What about images from third-party sites?

The block editor makes this easy as well. It comes with embed blocks for popular social sharing sites including Instagram, Flickr, Imgur, Photobucket, and more.

For example, if you want to add an Instagram photo, then simply add the Instagram block to the post editor and enter the URL of the post you wanted to share.

Adding Instagram images in WordPress posts and pages

WordPress will automatically fetch the Instagram post and embed it for you. After that, you will be able to use the alignment options in the toolbar.

Instagram embed in WordPress

Embed blocks also allow you to easily embed videos in WordPress. After that, you can use the same options in the toolbar to align videos in WordPress.

We hope this article helped you learn how to easily add and align images in the WordPress block editor. You may also want to see our guide on how to optimize images to speed up WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.





Source link

Read more...

Common Gutenberg Questions Answered (WordPress FAQ)


WPBeginner has been helping users learn WordPress for nearly a decade. Over these years, we’ve published thousands of tutorials to help you successfully create a WordPress site and grow your business.

Over a month ago, WordPress 5.0 was released with a new content editor called Gutenberg. Since then, we’ve been receiving a lot of questions regarding the update. In this article, we’ll answer some of the most frequently asked Gutenberg questions.

Common Gutenberg Questions Answered

1. Why did WordPress introduce Gutenberg?

For a long time, WordPress used a TinyMCE based editor to create posts and pages. The Classic WordPress editor was a simple text window with few buttons on top for basic formatting options.

While it worked well, users had to learn different approaches to add images, create galleries, embed videos, add tables and other content elements. This learning curve combined with modern web standards made WordPress seem like it’s harder to use when compared to other popular website builders.

The new WordPress block editor introduces a modern streamlined writing experience where each content element is wrapped in a block. You can move these blocks around the editor, change their settings, and create engaging content layouts without writing code.

New WordPress editor called Gutenberg block editor

The Gutenberg editor also provides a powerful framework for theme and plugin developers to build advanced solutions for WordPress.

2. How can I check if the theme and plugins I’m using are Gutenberg compatible?

The easiest way to check if your theme and plugins are Gutenberg compatible is to find if they’re supporting WordPress version 5.0+.

Gutenberg Editor was launched as the default content editor in WordPress 5.0, so a theme or plugin that has a “tested with version 5.0” label means that they are compatible with Gutenberg.

You can find the “Tested with” label in the WordPress.org plugins directory by searching your plugin’s name.

Search WPForms plugin in WordPress.org

In the results, you’ll see the WordPress version your plugin is tested with. For instance, you can see WPForms is tested with WordPress 5.0.3 at the moment.

WPForms plugin tested with WordPress 5.0 plus

This means that WPForms is a Gutenberg compatible plugin.

For a WordPress theme, it’s best to visit your theme’s official website and check if they’ve made any official announcement about Gutenberg support.

If you don’t see any information on their marketing page, then you can visit their blog or knowledgebase and search the ‘Gutenberg’ keyword.

For example, if you’re using Divi theme, you can search their documentation.

Search'Gutenberg' keyword in theme site's documentation

This will help you find articles including their official announcement on Gutenberg support.

If you don’t see any article from your theme or plugin authors about Gutenberg upgrade, then you’ll need to contact them.

Once you’ve confirmation about all your theme and plugins’ Gutenberg compatibility, you can confidently update your site to WordPress 5.0.

To prevent errors and conflicts, we have created a complete guide on how to test your WordPress site for upgrading to Gutenberg

3. How to manage my old posts in the Gutenberg block editor?

After you update your site to WordPress 5.0, your old post content will be wrapped inside the Classic block inside the Gutenberg editor.

Classic Block in Gutenberg Editor

You can edit everything just like before inside the Classic block.

You can also convert your old post content into Gutenberg blocks. Simply click the Convert to Blocks option from your Classic block’s dropdown menu, and then it’ll automatically convert your post content into appropriate blocks.

Convert Old Post Content to Blocks in WordPress Block Editor

For detailed instructions, you can read our step by step guide on updating your old WordPress posts with Gutenberg.

4. How can I disable Gutenberg and bring back the Classic Editor?

A lot of users are not ready to make the switch to the Gutenberg editor due to one reason or another.

In that case, you do have the option to disable Gutenberg and bring back the Classic Editor.

All you need to do is install and activate the Classic Editor plugin.

Classic Editor WordPress plugin

Using this plugin, you can easily disable Gutenberg and use the classic editor on your site.

Classic Editor plugin will be available until at least 2022 or as long as necessary.

This should provide plenty of time for users to test their websites with Gutenberg and upgrade when they feel comfortable.

5. Is Gutenberg a WordPress Page Builder?

Gutenberg is a block-based editor which uses content elements called blocks to build posts and pages. Similarly, WordPress page builders also use blocks, also known as widgets, modules, or elements for creating pages in WordPress.

This has caused confusion amongst users, and we have been asked the question if Gutenberg is a WordPress page builder alternative.

The answer is ‘No, not at least in its current form’.

WordPress page builder plugins provide a lot more advanced functionalities for creating landing pages in WordPress.

Most of the page builders are frontend editors whereas Gutenberg is a backend editor. Here’s how you can edit content in Gutenberg Content Editor.

Gutenberg Post Edit Screen

And, below is how one of the best page builders, Beaver Builder, looks like when you’re editing a page:

Creating a page with Beaver Builder best page builder plugin

Page builder blocks are truly drag and drop elements which support free-form dragging and dropping. Whereas, Gutenberg blocks support drag and drop only for reordering the blocks.

In simple terms, Gutenberg is a basic editing interface whereas page builders are advanced page editors. You can use both of them for cutting-edge landing pages in WordPress.

For a more detailed answer, please see our detailed explanation of Gutenberg vs WordPress Page Builders.

6. How can I update page builder content with Gutenberg?

Updating your content created with page builders should not be a problem. The method you use to update your content may vary from one page builder to another.

Therefore, you’ll need to contact your plugin provider for an updating tutorial.

Also, you can check their official website to find their announcements on Gutenberg support.

7. Does Gutenberg support shortcodes?

Yes, Gutenberg supports shortcodes. There’s a separate Shortcode block in Gutenberg to add content with shortcodes.

Shortcode Block in Gutenberg Editor

WordPress blocks are defined as an evolution of the [shortcode], so using regular Gutenberg blocks is recommended instead of shortcodes.

For example, you can add your WPForms to your posts or pages using a shortcode.

WPForms all forms with shortcodes

All you have to do is copy the shortcode from the Forms Overview screen, and then paste it in the Shortcode block on the post edit screen.

Add shortcode to Gutenberg Editor

However, the better option is to use the WPForms Gutenberg block directly instead of pasting the form shortcode in the Shortcode block.

WPForms Widget for Gutenberg

8. Who can I contact if something is broken after upgrading to Gutenberg?

Gutenberg should not ideally break anything on your site however conflict with your theme and plugins can cause some errors.

It’s always recommended to test your site on a staging area before upgrading to Gutenberg.

However, you may sometimes find unexpected errors. If this happens, you should first disable Gutenberg and activate the Classic editor on your site.

Then, contact your theme and plugin companies to request support.

9. How can I learn more about Gutenberg?

You can learn more about Gutenberg right here on WPBeginner. We are the best free WordPress resource website on the internet.

We’ve already published a number of articles on the new WordPress Block Editor aka Gutenberg. We’ll be publishing more tutorials in the future to help you master the new block editor.

We hope this article helped you find answers to the common Gutenberg questions on your mind. If you have further questions, please reach out to us by leaving a comment or by using the contact form on our website.

You may also want to see our list of the must have WordPress plugins and tools for every successful website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.





Source link

Read more...

Gutenberg vs WordPress Page Builders


As more users upgrade to WordPress 5.0, we’ve been asked several times if the new WordPress block editor, Gutenberg, is meant to be a replacement for drag and drop WordPress page builder plugins.

The new WordPress block editor is quite powerful and allows you to build beautiful content layouts. However, it’s no match for the powerful page builder plugins.

In this article, we will compare Gutenberg vs WordPress page builder plugins to help you understand the real difference. We’ll also share future roadmap of Gutenberg to help you see how it will change in the future.

Gutenberg vs Page Builder Plugins

Gutenberg vs WordPress Page Builder Plugins (Explained)

Gutenberg is the new default WordPress editor. It uses blocks to add and arrange content elements for posts and pages, hence the name block editor.

New WordPress editor called Gutenberg

Since Gutenberg allows you to easily add custom content styles and drag & drop element, it’s easy to get confused and start calling it a page builder.

But it’s not anywhere close (at least not yet).

WordPress page builder plugins are drag and drop design tools that allow you to create completely custom website designs without writing any code.

Creating a page with Beaver Builder best page builder plugin

Top WordPress page builders like Beaver Builder, Divi, and Visual Composer are significantly more powerful. They come with ready-made templates that you can use and offer a lot more design flexibility than Gutenberg.

Let’s take a deeper look at the differences between Gutenberg vs Page Builders to get a better understanding.

7 Key Difference Between Gutenberg and WordPress Page Builder Plugins

The biggest difference is that Gutenberg is a default WordPress editor and comes built-in with WordPress. On the other hand, page builder plugins are created and supported by third-party developers.

WordPress.org team does not call Gutenberg a page builder. Instead, they call it the block editor, and it’s presented as a modern way to edit content in WordPress.

There’s a big reason for that, and it’ll become very clear as you read the differences between the two.

1. Drag & Drop features

Gutenberg is not a drag and drop page builder (at least, not in its current form). You can add blocks and move them up and down, but you cannot adjust their width / height, add blocks inside other blocks, or create complex layouts using columns and rows.

On the other hand, page Builders allow you to drag and drop blocks/widgets, adjust their height and width, and even create columns and add blocks inside other blocks.

Nested blocks, rows, and columns

2. Theme support and compatibility

Gutenberg relies heavily on your WordPress theme styles. It does add some of its own CSS and even allow you to add custom CSS for blocks, but it doesn’t override your theme styles and settings.

While page builder plugins can work with your theme styles, they also give you the option to completely take over a page and override your theme’s styles. This is extremely helpful if you want to create custom page layouts.

3. Live editing vs backend editor

When you are editing a post or page in Gutenberg, what you see on screen is not a live preview of your actual post or page. Gutenberg is a backend editor, and it does its best to depict what your content will look like when you preview it.

On the other hand, page builder plugins give you an actual live preview of your page as you edit it. You can see exactly how things would appear without saving the page.

Editing pages with live preview

4. Content Layout vs Page Design

Gutenberg blocks give you the freedom to create content layouts, but they’re quite limited. You can use columns, tables, and full-width cover images.

Page builders are more flexible. You can not only add content, but you can also change the whole page layout. They offer more design options for each widget and block.

Creating page designs with page builder

5. Widgets and blocks

Gutenberg comes with a decent set of default blocks covering all the commonly used content elements. You can also save and reuse blocks in other posts and even on other WordPress websites.

It has a powerful API allowing plugin developers to create their own blocks too. All top WordPress plugins already have their own Gutenberg blocks that you can use.

Gutenberg blocks

Page builders come with even more blocks, modules, and widgets. They offer advanced content elements including carousels, sliders, call to action buttons, contact forms, countdown timers, and more. You can also save individual blocks, rows, or entire template to reuse later.

Content modules in Beaver Builder

Popular page builders also have their own APIs allowing other developers to make extensions and blocks. For example, the Ultimate Addons pack for Beaver Builder, and Divi Monk for Divi Page Builder.

6. Formatting and Styling Options

The blocks in Gutenberg come with their own styling and formatting options. However, these options are limited. For more styling and formatting, you’ll have to add your own custom CSS for a block.

Styling options

Page Builders, on the other hand, offer a lot more styling options. You can change background colors of blocks, use gradients, use font-icons, select fonts, line height, adjust width of elements, use styles on images, and more.

7. Scope

The purpose of adding Gutenberg to WordPress is to offer a modern writing experience to users. It is intended to be used by everyone including bloggers, writers, photographers, and businesses.

Page builder plugins provide a visual drag and drop interface to design entire pages. They are intended to be used by small businesses, aspiring designers, WordPress agencies, eCommerce stores, and more.

While Gutenberg helps you create better content, page builder plugins help you create better landing pages that help you increase sales, boost subscribers, and grow your business.

Can or Will Gutenberg Replace WordPress Page Builders?

In its current form, Gutenberg is just a better content editor than what WordPress had before. It is NOT a replacement for the powerful WordPress page builder plugins.

With that said, it is in the WordPress roadmap to expand Gutenberg’s functionality to more areas of the website such as menus, widgets, and even the customizer.

We will have to wait and see the improvements to determine if Gutenberg will ever come close the powerful WordPress page builder plugins.

Which Page Builder Plugin to Use with Gutenberg?

All top WordPress page builder plugins work well with WordPress 5.0, and the new Gutenberg editor. You can take a look at our pick of the best WordPress page builder plugins, and how they stack up against each other.

If you are building a small business website and have little to no technical skills, then we recommend Beaver Builder. It is the most beginner friendly WordPress page builder, and its packed with features.

Our second choice would be Divi. It is easy to use and gives you access to dozens of templates, modules, and a huge community of users.

We hope this article helped you understand the difference between Gutenberg block editor vs WordPress page builder plugins. You may also want to see our guide on how to grow your website on shoestring budget.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.





Source link

Read more...

How to Import / Export Your WordPress Gutenberg Blocks (2 Steps)


Did you know that the new WordPress block editor aka Gutenberg allows you to save your custom content blocks and export them to use on your other WordPress sites.

This little-known feature is extremely useful and can you save you a lot of time specially if you’re building websites for clients.

In this article, we’ll show you how to easily export your WordPress Gutenberg blocks and import them to use on other sites.

How to export your Gutenberg blocks

Reusable Gutenberg Blocks 101

Gutenberg is a fully block-based WordPress editor where every piece of content you add is a block.

You can customize each individual block styles and re-use it to quickly create content in the future.

These re-usable blocks are extremely helpful for adding call-to-action buttons, feedback forms, banner ads, etc.

We created a step by step guide on how to create a reusable block in WordPress.

Giving a name to reusable block

What a lot of users don’t know is that you can actually export these re-usable blocks to use on your other sites, client websites, and technically you can even sell them if you want to.

Let’s take a look at how to export Gutenberg blocks to use on other sites.

Exporting Your WordPress Gutenberg Blocks to Use on Other Sites

WordPress’ reusable blocks are not just restricted for the website they’re created on. You can easily export them to use on any other WordPress site.

First, you’ll need to open the block management page. You can navigate to that page by clicking the Manage All Reusable Blocks link inside the Reusable tab in your content editor.

Manage all reusable blocks in Gutenberg

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

Gutenberg reusable blocks management page

Step 1. Export Your Gutenberg Block

To export your Gutenberg block, you simply need to click the Export as JSON option below the block.

Export your WordPress block as JSON file

Next, 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.

Gutenberg block downloaded

Step 2. Import Your Gutenberg Block

You need to log into the other WordPress site and go to its block management screen. You’ll see an Import from JSON button at the top.

Click Import from JSON in Gutenberg

Go ahead and click on that button to import.

Next, you’ll see a file upload box. You need to click on the Choose File button and select the block JSON file you downloaded earlier.

Choose file to import block in Gutenberg

After it’s uploaded, you’ll see an Import option. Simply click on that to proceed.

Import WordPress Gutenberg block

WordPress will now import your new reusable block and save it in the database. Once done, you can use it on your new WordPress site like you would any other block.

Gutenberg block imported

We hope this article helped you learn how to export your WordPress Gutenberg blocks to use on other sites. You may also want to see our list of the must have WordPress plugins for all websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Import / Export Your WordPress Gutenberg Blocks (2 Steps) appeared first on WPBeginner.





Source link

Read more...

How to Test Your Site for Updating to Gutenberg (WordPress 5.0)


Are you excited to use the new WordPress Gutenberg editor? Officially launched with WordPress 5.0, Gutenberg is the new default content editor for WordPress that allows you create visually stunning content using blocks.

The challenge is that some themes and plugins may not properly support Gutenberg, so updating your website can cause unexpected issues.

In this article, we’ll show you how to test your WordPress site for updating to Gutenberg and WordPress 5.0.

Testing your site for update to Gutenberg and WordPress 5.0

Why Test Your WordPress Site Before Updating to Gutenberg?

WordPress 5.0 brings a totally new way of creating content with a brand new editor called The Block Editor or Gutenberg. It uses blocks which are content elements that you can move around the editor.

New WordPress Block Editor also known as Gutenberg

WordPress 5.0 with Gutenberg editor is indeed a revolutionary improvement to the WordPress platform.

However due to this massive change, some users are reluctant to update their sites right away, fearing that something would not work, or it may break their website.

Gutenberg was developed over a long period with enough time for theme and plugin developers to make their products Gutenberg compatible. All top WordPress plugins are already fully compatible with Gutenberg and most themes would work without a hiccup.

However, to avoid any conflicts you may want to test your site with Gutenberg and WordPress 5.0. This would allow you to find if any of your plugins or theme are incompatible. You can also catch unexpected errors and fix them before updating your live site.

That being said, now let’s go ahead and check how to test your website for updating to Gutenberg or WordPress 5.0 step-by-step.

Step 1: Create a Complete Backup of Your Website

You must always create a complete back of your WordPress website before any major update. Backups protect you against any unfortunate damage that can happen during the update process.

Keeping regular website backups is important even if you aren’t updating your site because they can save you in catastrophic situations like malware attack, hacking, etc.

There are plenty of WordPress backup plugins that you can choose from. We recommend using UpdraftPlus because it allows you to setup automatic backups and store them on a remote location.

Step 2: Test Your Site on Local Server or Staging Site

After you’ve created a complete backup of your website, you are now ready to test your website with WordPress 5.0 and the new Gutenberg editor.

There are two common methods to test new updates without actually affecting your live site.

  1. Test your website on a local server installed on your computer
  2. Test your website on a staging server

Both options allow you to test WordPress 5.0 with the new Gutenberg editor with your existing content, plugin, and themes.

1. Test Your Website on Local Server

Using a local server simply means installing your WordPress site on your personal computer with a software like WAMP or MAMP (for Mac).

In this method, you’ll first move a copy of your live WordPress site to local server using a migration plugin like Duplicator.

Duplicator WordPress plugin

Then on the local site, you can update to WordPress 5.0 and test out all your plugins / themes for compatibility with the new editor.

You can also make changes on the local site and upload it to your live site when you are done.

If you didn’t need to make any changes to the local site, and everything seemed ok, then you can go ahead and update your live site to WordPress 5.0.

2. Test Your Website on Staging Environment

A staging site is a separate development version of your website where you can try out new features.

It’s usually a sub-domain of your site that’s restricted from public access. It’s where you can test new updates, themes, plugins, or use it for all your development. Once you’ve tested everything necessary, you can then upload it to your live site.

Most top WordPress hosting companies offer 1-click staging site installation from your hosting account.

If your site is hosted with Bluehost, then you’ll find an option to create a staging site under the Bluehost menu in your WordPress admin dashboard.

Creating a staging site in Bluehost

You can also create 1-click staging sites on WPEngine and SiteGround. If you are not using any of these hosting companies, then you should ask your host because they may offer this feature.

If your hosting service doesn’t have staging site installation feature, then you can still do it manually on your own. Here’s our step by step tutorial on how to create a staging environment in WordPress.

Step 3: Install the Classic Editor Plugin

The most significant change in WordPress 5.0 is the new Gutenberg editor.

This means that if you were to run into any issues, then it’ll likely be caused by a plugin or theme’s incompatibility with the new editor.

It is also possible that you may not like the new editor.

Luckily, you can update to WordPress 5.0 and still keep the classic WordPress editor.

You can simply disable Gutenberg by installing the Classic Editor plugin on your WordPress site. Doing this will allow you to safely update to WordPress 5.0, while still keeping the classic editor that you’re familiar with.

Switching to the classic editor

Classic Editor is an official WordPress plugin from WordPress core contributors to allow you to switch back to the classic editor. With this plugin, you can hide the Gutenberg editor and create content the same way as before.

If you had to install Classic Editor because a theme or plugin wasn’t working after updating to WordPress 5.0, then you still have work to do.

You need to reach out to the theme or plugin developer and request them to make it compatible with the latest WordPress release.

If you don’t get a positive response, then you need to find an alternative theme or plugin to replace incompatible ones.

Step 4. Things to Do After Updating to Gutenberg in WordPress 5.0+

If you are just starting your first WordPress blog, then you are in luck. You’ll quickly get used to the awesome new block editor which is faster, modern, and incredibly powerful.

On the other hand, if you have been using WordPress for a while, then the new editor is an exciting new experience for you.

Most of us are used to working with the old editor and have setup our workflows around it.

Good news is that you can still do all the things you did in the old editor with Gutenberg, and then some more.

To help you learn new features, we have created a complete Gutenberg tutorial it shows how to use new block editor and create visually stunning content for your site.

We hope this article helped you to learn how to test your WordPress site for updating to Gutenberg or WordPress 5.0. For troubleshooting common errors you may encounter, check out our guide on most common WordPress errors and how to fix them.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Test Your Site for Updating to Gutenberg (WordPress 5.0) appeared first on WPBeginner.





Source link

Read more...

How to Update Your Old WordPress Posts with Gutenberg Block Editor


Wondering how to update your old blog posts with Gutenberg, the new WordPress block editor? If you haven’t upgraded to WordPress 5.0, then you’re not alone.

A lot of readers are concerned because Gutenberg is a completely new experience. The good news is that your old articles are safe even after upgrading to Gutenberg. In this article, we’ll show you how to update your old articles with Gutenberg, the new WordPress Block editor.

You may also want to know what will happen to your existing content after upgrading your blog to Gutenberg.

update-your-old-articles-with-gutenberg

What’s The Difference Between Classic Editor and Gutenberg Editor?

Before we get started, let’s first discuss the major differences between the old Classic Editor and the new Gutenberg Editor.

The Classic Editor was a text editor that looked very similar to Microsoft Word. It had a single editing field with formatting options at the top. Here’s what the Classic Editor looks like:

Old WordPress editor

On the other hand, the new Gutenberg editor is a fully block-based editor. You’ll add all the content in the form of blocks. Here’s how the Gutenberg Block Editor looks like:

New WordPress Block Editor also known as Gutenberg

Blocks are content elements which are separate from each other with their own set of formatting options. There’re individual blocks for every piece of content including:

  • Regular text or paragraph
  • Image
  • Button
  • Gallery
  • List
  • Table
  • Embeds, etc.

Plus, you can find more blocks and widgets provided by your plugins and theme.

gutenberg-blocks

In order to create or edit a post in the new Gutenberg editor, you’ll need to use blocks. Here’s how to update your old blog posts and pages with Gutenberg block editor.

Editing Your Older WordPress Articles with Gutenberg

If you’ve updated your WordPress blog to 5.0 or the later version, then you’ll have the new Gutenberg block editor as your default editor.

The good part about Gutenberg is that it doesn’t affect any of your old content, and you can easily edit them.

To edit an older article, simply edit it as you would normally do in WordPress.

On the post edit screen, you’ll see the entire content wrapped inside a single Classic block.

classic-block-guteberg-edit

The same post would look like the screenshot below in the old classic editor.

classic-wp-editor

As you can notice, the content is same however the way it’s organized looks slightly different.

Yes, that’s the only change you’ll see.

The new WordPress block editor will not make any changes to the content, and it would still look the same on your website.

Now, you have two options to edit your old blog posts and pages:

  1. Continue editing inside the Classic block
  2. Convert your old content to new Gutenberg blocks
  3. The first option is to continue editing your old article inside the Classic block.

    The Classic block offers you the same Classic editor interface with formatting options at the top. This should be fairly straight forward.

    The second option is converting your old content into new Gutenberg blocks.

    You can do this by clicking on the three-dot menu option on the top right corner of Classic block.

    From the menu dropdown, you need to select Convert to Blocks option.

    convert-to-blocks-wp-block-editor

    That’s it!

    Your old content will be automatically converted into appropriate blocks. The content inside the Classic block will be split into several different blocks.

    wp-block-editor-classic-block-converted

    Now, you can edit your old article using the new Gutenberg editor blocks. Each block is a separate entity with its own formatting options, styles, and design options.

    For example, in our screenshot above, there’s an image block and a paragraph block.

    If you want to make changes to how the image appears, then you can simply click the image to select the block, and the editing options will appear at the top.

    You will also see more options under the Block tab in the right column of the screen.

    image-block-edit-options

    You can realign the image, make it full width, add Alt text, change image dimensions, add a link, and more.

    Following the same process, you can edit all of the blocks and make your article look visually impressive.

    Once you’re done making all the necessary edits, you can simply click the Update button at the top right of the screen to save your changes.

    Note: Although Gutenberg works fine with most themes and plugins, some may still not have Gutenberg support. It’s better to test your theme and plugins for Gutenberg compatibility before switching to it.

    The new WordPress Gutenberg editor offers an easy and flexible way of creating content in WordPress. However if you are not ready to use it yet, then you can disable Gutenberg and keep using the classic editor.

    You can keep using the Classic editor until 2022 which should be enough time for getting familiar with the new WordPress block editor. We have a complete Gutenberg Block Editor tutorial for beginners that you should check out.

    We hope this article helped you learn how to update your old articles with Gutenberg Block Editor. You may also want to see our list of the must have WordPress plugins for professional websites.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Update Your Old WordPress Posts with Gutenberg Block Editor appeared first on WPBeginner.





    Source link

Read more...

How to Create a Reusable Block in WordPress Block Editor (Gutenberg)


Do you often use the same content snippets in your WordPress posts? If you do, then you’ll love the Reusable Block feature in the new WordPress block editor. It allows you to save any content block and reuse them in other posts and pages on your website.

In this article, we will show you how to easily create a reusable block in WordPress Block editor also known as Gutenberg. We will also show you how to add reusable blocks in your WordPress posts and export them to use on your other WordPress websites.

Creating a reusable block in WordPress Gutenberg editor

What is a Reusable Block in WordPress Block Editor (Gutenberg)?

A reusable block in WordPress editor is a content block saved individually to be used later.

Many bloggers often add the same content snippets in multiple articles such as call-to-actions at the end of the blog post or links to follow the blog in social media.

Most people just save their content snippets as text files on their computers and then copy and paste them when needed.

The Gutenberg WordPress editor solves this problem by introducing reusable blocks.

Basically, you can now save content snippets in your WordPress editor and then reuse them anywhere almost instantly.

Following are just some of the scenarios when a reusable block can help you work more efficiently:

  • Asking users to follow you on social media at the end of each article.
  • Adding call-to-action buttons in your WordPress posts and pages.
  • Saving and reusing tables
  • Quickly adding feedback forms to your pages
  • Manually adding inline affiliate banners
  • and more…

That being said, let’s take a look at how to easily create a reusable block in WordPress block editor.

Creating a Reusable Block in WordPress Editor

All Gutenberg blocks are individual content elements in WordPress editor and they can be saved individually as a reusable block

First, you need to create a new post or edit an existing one. On the post edit screen, click on the add new block button and then choose a block type according to the content you are going to save.

Add a new block to Gutenberg editor

In this example, we are going to save a few lines of text in a paragraph block.

After adding the block, you need to add the content that you want to reuse. You can use the styling and formatting options in the block toolbar and block settings.

Editing a block

Once you are done editing, click on the three-dot menu button in the toolbar and then select ‘Add to Reusable Blocks’ option.

Add to reusable blocks

You will be asked to enter a name for the reusable block. We recommend using a name that helps you quickly identify the block and what it does.

Add block name

Finally, click on the Save button to store your reusable block.

Your block will be saved in the WordPress database with all its settings.

Adding Reusable Block in Other Posts and Pages

Now that we have learned how to create a reusable block in WordPress, let’s see how to add reusable blocks in your WordPress posts and pages.

Once again create a new post or edit a post where you want to add the reusable block. On the post edit screen, click on the add new block button.

Your reusable block is located under the ‘Reusable’ tab. You can also find it by typing its name in the search box.

Adding reusable block

You can take your mouse over it to see a quick preview of the block. Go ahead and click on the block to insert it into your post.

Your reusable block will appear in the post editor.

Reusable block added into a post

You can also edit the reusable block by clicking on the edit button on the block.

However, please keep in mind that changing a reusable block will change it on all locations where you have used it.

If you just want to make a change that only appears on this particular post, then you need to convert it to a regular block first.

Click on the three-dot menu in the block toolbar and then select ‘Convert to Regular Block’ option.

Convert to regular block

This will convert your reusable block into a regular block, and you will be able to make changes to it without affecting the original reusable block.

Managing All Reusable Blocks in WordPress Editor

After using reusable blocks for a while, you may have some blocks that you don’t use anymore or some blocks that you want to rename.

Gutenberg Editor allows you to easily manage all your reusable blocks from one screen.

To manage your blocks, click on the add block button and then locate the Reusables tab. You’ll see a link to manage your reusable blocks page.

Manage reusable blocks link

Clicking on the link will bring you to block management page. From here, you can edit, delete, export, and import your blocks.

Manage reusable blocks

Exporting / Importing Reusable Blocks

Reusable blocks are not just reusable on the website they were created for. You can also use them on any other WordPress website.

You can export the blocks from the block management screen. Simply click on the export button below a block, and WordPress will send it to you as a JSON file.

Exporting a reusable block

You can now switch to another WordPress site’s admin area. Go to the block management screen and then click on the ‘Import from JSON’ button.

This will show a file upload box. Click on the choose file button to select the block you downloaded earlier and then click on the import button.

WordPress will now import your reusable block and save it in the database. You can go ahead and start using it on the new site.

We hope this article helped you learn how to create a reusable block in WordPress Gutenberg editor. You may also want to see our tips on growing your online business without spending a fortune.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.





Source link

Read more...

How to Use the New WordPress Block Editor (Gutenberg Tutorial)


In WordPress 5.0, the classic content editor was replaced with a brand new block editor, known as Gutenberg. Since then, several of our readers have asked us to create a comprehensive tutorial on how to use the Gutenberg block editor in WordPress.

WordPress block editor is a totally new and different way of creating content in WordPress. In this tutorial, we will show you how to use the new WordPress block editor and master it to create visually stunning blog posts and pages.

Using the new WordPress block editor aka Gutenberg

What’s The Difference Between Block Editor (Gutenberg) and Classic Editor?

Before we dive into the new editor, let’s first compare and understand the differences between Gutenberg Block Editor and the Classic Editor.

Here is what the classic editor in WordPress looked like:

Old WordPress editor

If you upgrade to WordPress 5.0, then this is what the new block editor looks like:

New WordPress Block Editor also known as Gutenberg

As you can see, they are two completely different editors for creating content in WordPress.

The old classic editor was a text editor with formatting buttons very similar to Microsoft Word.

The new editor uses a totally different approach, called ‘Blocks’ (hence, the name Block Editor).

Blocks are content elements that you add to the edit screen to create content layouts. Each item you add to your post or page is a block.

You can add blocks for each paragraph, images, videos, galleries, audio, lists, and more. There are blocks for all common content elements and more can be added by WordPress plugins.

How is the new WordPress block editor better than the classic editor?

The new WordPress block editor offers a simple way to add different types of content to your posts and pages.

For example, previously if you wanted to add a table in your content, then you needed a separate table plugin.

With the new editor, you can simply add a table block, select your columns and rows, and start adding content.

Table block

You can move content elements up and down, edit them as individual blocks, and easily create media-rich content.

Most importantly, the new WordPress block editor is easy to use and learn.

This gives an immense advantage to all WordPress beginners who are just starting their first blog or building a DIY business website.

That being said, let’s take a look at how to use the new WordPress block editor like a pro to create great content.

Here is what we will cover in this Gutenberg tutorial:

  1. Using Gutenberg – The new WordPress block editor
  2. Creating a new blog post or page
  3. How to add a block in Gutenberg
  4. Working with blocks in the new editor
  5. Saving and reusing blocks in Gutenberg
  6. Publishing and post settings in Gutenberg
  7. Plugin settings in new editor
  8. Adding some common blocks in Gutenberg
  9. Exploring some new content blocks in Gutenberg
  10. Bonus tips on using Gutenberg like a pro
  11. Adding more blocks to Gutenberg Block Editor
  12. FAQs about Gutenberg

Ready? Let’s dive in.

Using Gutenberg – The New WordPress Block Editor

The block editor is designed to be intuitive and flexible. While it looks different than the old WordPress editor, it still does all the things that you were able to do in the classic editor.

Let’s start with covering the basic things that you did in the classic editor, and how they are done in the block editor.

Creating a New Blog Post or Page Using The Block Editor

You will start creating a new blog post or page like you normally would. Simply click on Posts » Add New menu in your WordPress admin. If you are creating a page, then go to Pages » Add New menu.

Adding a new post

This will launch the new block editor.

How to Add a Block in Gutenberg

The first block of every post or page is the title.

After that, you can use the mouse to move below the title or press the tab key on your keyboard to move down and start writing.

Adding a post title in Gutenberg

By default, the next block is a paragraph block. This allows users to start writing right away.

However, if you want to add something different, then you can click on the add new block button on the top left corner of the editor, below an existing block, or on the left side of a block.

Add new block button

Clicking on the button will show the add block menu with a search bar on top and commonly used blocks below.

You can click on tabs to browse block categories or type in the keyword to quickly search for a block.

Finding and adding blocks in Gutenberg

If you don’t want to use a mouse to click on the button, then you can use a keyboard shortcut by typing / to search and add a block.

Working with Blocks in The New Editor

Each block comes with its own toolbar which appears on top of the block. The buttons in the toolbar would change depending on the block you are editing.

For example, in this screenshot, we are working in a paragraph block which shows basic formatting buttons like: text alignment, bold, italic, insert-link, and strikethrough buttons.

Each block comes with its own toolbar

Apart from the toolbar, each block can also have its own block settings which would appear in the right column of your edit screen.

Block settings

You can move blocks up and down by simple drag and drop or by clicking the up and down buttons next to each block.

Moving a block up and down

Saving and Reusing Blocks in Gutenberg

One of the best things about blocks is that they can be saved and reused individually. This is particularly helpful for bloggers who frequently need to add specific content snippets to their articles.

Simply click on the menu button located at the right corner of each block’s toolbar. From the menu, select ‘Add to reusable blocks’ option.

Saving a block to reuse later

You will be asked to provide a name for this reusable block. Enter a name for your block and then click on the save button.

Giving a name to reusable block

The block editor will now save the block as a reusable block.

Now that you have saved a block, let’s see how to add the reusable block into other WordPress posts and pages on your site.

Simply edit the post or page where you want to add the reusable block. From the post edit screen, click on the add block button.

You will find your saved block under the ‘Reusable’ tab. You can also find it by typing its name in the search bar.

Insert a reusable block

You can take your mouse over it to see a quick preview of the block. Simply click on the block to insert it into your post or page.

All reusable blocks are stored in your WordPress database, and you can manage them by clicking on the ‘manage all reusable blocks’ link.

Manage your reusable blocks

This will bring you to the block manager page. From here, you can edit or delete any of your reusable blocks. You can also export reusable blocks and use them on any other WordPress website.

Import export reusable blocks in WordPress

Publishing and Managing Options in Gutenberg Block Editor

Each WordPress post contains a lot of metadata. This includes information like publish date, categories and tags, featured images, and more.

All these options are neatly placed in the right column on the editor screen.

Document settings in Gutenberg the new WordPress editor

Plugin Options in Gutenberg

WordPress plugins are able to take advantage of the block editor’s API to integrate their own settings within the edit screen.

Some popular plugins are already available as blocks. For example, WPForms, the best WordPress form builder plugin allows you to add forms into your content using a widget block.

WPForms block in new Gutenberg editor

Here is how Yoast SEO allows you to edit your SEO settings in the new editor:

Yoast SEO settings in new Gutenberg editor

WooCommerce also comes with widget blocks that you can easily add to any of your WordPress posts and pages.

WooCommerce products block

Adding Some Common Blocks in New Editor

Basically, the new editor can do everything the classic editor did. However, you will be doing things way quicker and elegantly than before.

1. Adding an image in new WordPress editor

There is a ready to use image block in the new WordPress editor. Simply add the block and then upload an image file or select from the media library.

Image block in new WordPress editor

You can also drag and drop images from your computer, and the editor will automatically create an image block for it.

Once you have added an image, you will be able to see the block settings where you can add metadata for the image like alt text, size, and add a link to the image.

Image block settings

2. Adding a link in new block Editor

The block editor comes with several blocks where you can add text. Most commonly used one is the paragraph block which comes with an insert link button in the toolbar.

All other commonly used text blocks also include a link button in the toolbar.

Link button in the list block

You can also insert a link using the keyboard shortcut, which is Command + K for Mac and CTRL + K on Windows computers.

3. Adding an image gallery in Gutenberg

The gallery block works like the image block. You add it and then upload or select image files.

Adding image gallery in new WordPress editor

4. Adding shortcodes in WordPress posts using Gutenberg

All your shortcodes will work just like they did in the classic editor. You can simply add them to a paragraph block, or you can use the shortcode block.

Adding a shortcode block

Exploring Some New Content Blocks in Gutenberg

The Gutenberg editor promises to solve some long-standing usability issues in WordPress by introducing some new blocks.

Following are some of the favorites that we believe users will find immensely helpful.

1. Adding an image next to some text in WordPress

Using the old editor, many of our users were unable to place an image next to the text. You can do this now with the Media & Text block.

Media and Text block

This simple block comes with two blocks placed side-by-side allowing you to easily add an image and add some text next to it.

2. Adding a button in WordPress posts and pages

Adding a button to your blog posts or pages was another annoyance in the classic editor. You either had to use a plugin that created a shortcode for the button, or you had to switch to HTML mode and write code.

Gutenberg comes with a button block that allows you to quickly add a button to any post or page.

Adding a button block in Gutenberg

You can add a link for your button, change colors, and choose from three button styles.

3. Adding beautiful cover images in blog posts and landing pages

Another cool feature that you may want to try is the ‘Cover’ block, which allows you to add cover images to your posts and pages.

A cover image is a wider image often used as a cover for a new section in a page or the beginning of a story. They look beautiful and allow you to create engaging content layouts.

Simply add a cover block and then upload the image you want to use. You can choose an overlay color for the cover or make it a fixed background image to create parallax effect when users scroll down the page.

The cover image block in Gutenberg editor

4. Creating tables inside articles

The classic editor didn’t have a button to add tables into your WordPress posts. You had to use a plugin or create a table writing custom CSS and HTML.

New Gutenberg editor comes with a default Table block, which makes it super easy to add tables into your posts and pages. Simply add the block and then select the number of columns and rows you want to insert.

Table block

You can now go ahead and start adding data to table rows. You can always add more rows and columns if needed. There are also two basic style options available.

5. Creating multi-column content

Creating multi-column content was another issue that the classic editor didn’t handle at all. The block editor allows you to add Columns block, which basically adds two columns of paragraph blocks.

Multi-column content

This columns block is quite flexible. You can add up to 6 columns in a row and even use other blocks inside each column.

Bonus Tips to Use Gutenberg like a Pro

Looking at the new block editor, you may be wondering whether you will be spending more time adding and adjusting blocks than creating actual content?

Well, the new editor is incredibly fast and even very basic usage for a few minutes will allow you to instantly add blocks without even thinking.

Pretty soon you will realize how much faster your workflow will become with this new approach.

For power users, here are some bonus tips to help you work even faster with the new WordPress editor.

1. Move the block toolbar to the top.

As you may have noticed in the screenshots that there is a toolbar that appears on top of every block. You can move this toolbar to the top of the editor.

Simply click on the three-dot button at the top right corner of the screen and then select the Top Toolbar option.

Move the block toolbar to the top of the editor

2. Use keyboard shortcuts

Gutenberg comes with several handy shortcuts that will make your workflow even better. The first one you should start using right away is the /.

Simply enter / and then start typing, and it will show you matching blocks that you can instantly add.

For more shortcuts, click on the three-dot menu on the top-right corner of your screen and then select ‘Keyboard Shortcuts’.

Launch keyboard shortcuts

This will bring up a popup with the list of all the keyboard shortcuts that you can use. The list will have different shortcuts for Windows and Mac users.

3. Drag and drop media to automatically create media blocks

Gutenberg allows you to just drag and drop files anywhere on the screen and it will automatically create a block for you.

You can drop a single image or video file, and it will create the block for you. You can also drop multiple image files to create a gallery block.

Drag and drop gallery block in new WordPress editor

4. Adding YouTube, Twitter, Facebook, Vimeo, and other embeds

Gutenberg introduces new embed blocks to the block editor. There is a block for all supported embed types including YouTube, Twitter, Facebook, and more.

Embed blocks

However, you can just copy and paste the embed URL at any point, and it will automatically create a block for you.

For example, if you added a YouTube video URL, it will automatically create a YouTube embed block and display the video.

YouTube embed

Adding More Blocks to Gutenberg Block Editor in WordPress

The new block editor in WordPress allows developers to create their own blocks. There are some awesome WordPress plugins offering block bundles for the new editor.

Here are a few of them:

1. Advanced Gutenberg

Advanced Gutenberg

Advanced Gutenberg comes with several blocks for popular content elements like WooCommerce product slider, testimonials, maps, counter, tabs, accordions, and more.

It also gives you advanced control on which users can access blocks based on their user roles. You can create user profiles and select which blocks they can add.

2. Stackable – Gutenberg Blocks

Stackable - Gutenberg Blocks

Stackable – Gutenberg Blocks is a collection of beautifully designed Gutenberg blocks that you can use on your website. It includes blocks for the container, posts, feature grid, accordion, image box, icon list, call to action, and more.

3. Editor Blocks

Editor blocks for Gutenberg

Editor Blocks is another neat collection of Gutenberg blocks that you can use. It comes with useful blocks like author profile, hero image, pricing table, brands, features, and more.

FAQs about Gutenberg – The New Block Editor in WordPress

Since Gutenberg became the new WordPress editor, we have been getting a lot of questions. Here are the answers to some of the most frequently asked questions about Gutenberg.

1. What happens to my older posts and pages? Can I still edit them?

Your old posts and pages are completely safe and unaffected by the Gutenberg. You can still edit them, and Gutenberg will automatically open them in a block containing the classic editor.

Editing older articles in new WordPress editor

You can edit them inside the old editor, or you can convert older articles into blocks and use the new block editor.

2. Can I still keep using the old editor?

Yes, you can still keep using the old editor. Simply install and activate the Classic Editor plugin.

Upon activation, it will disable the block editor, and you will be able to continue using the classic editor.

Please note that Classic Editor will be supported until 2022.

3. What to do if the new editor doesn’t work with a plugin or theme I am using?

Project Gutenberg was under development for a long time. This gave plugin and theme authors plenty of time to test their code for compatibility.

However, there is still a chance that some plugins and themes may not work well with the new editor. In that case, you can install the classic editor plugin, request the developer to add Gutenberg support, or simply find an alternative plugin or theme.

4. How to learn more Gutenberg tips and tricks?

WPBeginner is the best place to learn about the new block editor in WordPress. We are the largest WordPress resource site on the internet.

We will be publishing new articles and updating our old resources to help you master the new block editor.

Meanwhile, if you have any questions, feel free to reach out to us by leaving a comment or by using the contact form on our website.

We hope this Gutenberg tutorial helped you learn how to use the new WordPress block editor. You may also want to see our complete WordPress performance guide for improving your website speed.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.





Source link

Read more...