Tag - Gutenberg

15 Best Gutenberg Blocks Plugins for WordPress (Super Useful)


Are you looking for the best Gutenberg block plugins for your WordPress site?

Gutenberg blocks are the editor blocks that are used to create content layouts in the new WordPress block editor aka Gutenberg. Introduced in WordPress 5.0, the Gutenberg editor is a fully block-based editor where each piece of content is a draggable block.

By default, WordPress offers a set of basic content blocks like a paragraph, image, button, list, and more. Some top WordPress plugins will add their own blocks to make it easy for you to embed their features.

However there are now an entire suite of plugins dedicated to offer custom content blocks for Gutenberg.

In this article, we’ll share some of the best Gutenberg block plugins for WordPress sites. We will start with some of the default blocks and then switch to block plugins.

Best Gutenberg Blocks for WordPress Sites (Super Useful)

7 Most Useful Time-Saving Default WordPress Blocks

The Gutenberg Editor includes blocks for all types of content elements.

The new blocks make it easy to add elements like buttons, cover images, tables, and more. In the older versions of WordPress, you had to install plugins to add such common web elements.

Here are some super useful default WordPress Gutenberg blocks that you can use right away.

1. Button Block: Lets you add call to action buttons in your WordPress pages and articles. To add buttons in the old editor, you either had to use a plugin or write HTML code.

2. Media & Text Block: Lets you add image and text side-by-side. Doing this with the old Classic Editor was a confusing task for beginners.

3. Cover Block: It is a new feature in WordPress, which allows you to add stunning cover images in your posts and pages. See our guide on the difference between cover images vs featured images.

4. Table Block: Enables you to easily create basic tables in WordPress posts and pages. For advanced tables with search, sorting, and ordering features, we still recommend the free TablePress plugin.

5. Embed Blocks: Gutenberg editor also includes many embed blocks for popular websites. You can use them to easily embed tweets, YouTube videos, and more.

6. Columns Block: Allows you to easily create multi-column layouts for your blog posts and pages.

7. Shortcode Block: Allows you to add shortcodes in your WordPress posts and pages easily.

Besides these, there are many other blocks that you can explore and try without using a plugin.

With that said, let’s take a look at some of the best WordPress blocks offered by WordPress plugins.

Best Gutenberg Blocks Plugins for Your WordPress Site

There are two types of Gutenberg blocks plugins available on the market. We will cover both of them:

  1. Single Purpose Blocks Plugins
  2. Gutenberg Blocks Libraries

The single purpose plugins are mostly the popular WordPress plugins which have been in the market for a long time. They specialize in one specific feature and usually provide a single powerful block to add content in WordPress.

For example, WPForms is a popular WordPress form plugin for making powerful forms in WordPress. It offers a WordPress block to add contact forms, surveys, order forms, etc in your posts and pages.

WPForms Block for WordPress Editor

On the other hand, there are block collection plugins which combine many different content elements in a single plugin. For example, Atomic Blocks plugin adds more than 14 new blocks to your WordPress editor.

Single Purpose Block Plugins vs Block Library Plugins

Now that you know about the options, you might be wondering if one is better than the other. Here are some important points to consider before choosing one over the other.

Single purpose block plugins add only one feature, but they offer the most comprehensive set of options, integrations, etc. Simply put, they offer the most complete solution for the specific use-case.

The block library plugins include a collection of blocks for different purposes, but these blocks are not as fine-tuned as the single feature blocks. While they offer a lot of blocks, they may not be as powerful.

Another disadvantage of using block suites is that they pollute your block list unnecessarily specially if you are only using a few blocks in the collection.

With that said, let’s take a look at the best WordPress Gutenberg block plugins.

1. WPForms – Best Gutenberg Block for WordPress Forms

WPForms is the most user-friendly WordPress form plugin in the market. It allows you to easily create simple contact forms as well as more powerful forms like interactive polls, surveys, order forms, etc. on your WordPress site.

WPForms offer a block for adding WordPress forms on your posts and pages.

WPForms block in new Gutenberg editor

Also, you can easily integrate your forms with email marketing tools, eCommerce plugins, and CRM software.

2. Envira Gallery – Best WordPress Block for Photo Galleries

Envira Gallery is the most powerful WordPress gallery plugin available. It allows you to create image and video galleries on your website easily.

The plugin is Gutenberg ready with a native block to embed galleries in your website.

Envira Gallery Best WordPress Block for Photo Gallery

Envira Gallery includes advanced features like watermark protection, image proofing, and seamless integration with WooCommerce to let you sell your photos.

3. TinyMCE Advanced

TinyMCE Advanced

TinyMCE Advanced is a popular plugin that enhanced the old classic editor with more formatting options. It has been updated to support the new Gutenberg block editor.

It now offers additional formatting and styling options in default Gutenberg blocks. For example, you’ll see new formatting buttons in toolbars with the ability to choose fonts. You can also adjust which buttons you want to see in the toolbar.

4. Ultimate Addons for Gutenberg – Free Plugin with 15+ Gutenberg Blocks

Ultimate Addons for Gutenberg is the most widely used Gutenberg blocks library plugin. Created by the people behind the popular Astra theme, this plugin is actively installed on over 100,000 websites.

Ultimate Addons for Gutenberg

It includes over 15 Gutenberg blocks, including the following:

  • Info Box Block – Add an info box with an image, heading, and description.
  • Multi Buttons Block – Lets you add multiple buttons within a single block.
  • Team Block – Allows you to create team section with photos.
  • Price List Block – Lets you create a price list like a restaurant menu easily.
  • Testimonial Block – Useful to add testimonials on your website.

An advantage of using this plugin is that it comes with built-in support for Astra Theme and all their starter sites. This means you can import a starter site and use the block editor to create beautiful layouts.

5. Atomic Blocks – Free Gutenberg Blocks Collection Plugin

Atomic Blocks is a free Gutenberg plugin with a collection of custom WordPress blocks. It includes over 14 useful Gutenberg blocks.

Atomic Blocks for Gutenberg Editor

This library comes with some of the best WordPress blocks that you may need.

  • Advanced Columns Block – Create beautiful multi-column layouts.
  • Section & Layout Block – Pre-designed page sections and page layouts.
  • Newsletter Block – Create MailChimp Email form.
  • Pricing Block – Build beautiful pricing tables in WordPress.
  • Share Icons Block – Add social share buttons to your posts and pages.

Atomic Blocks also comes in the form of a WordPress theme. The theme includes all the blocks offered by the plugin, and lets you create a beautiful website.

Atomic Blocks was acquired by WP Engine, one of the leading managed WordPress hosting companies. They have bundled Atomic Blocks and premium StudioPress themes for free with all their hosting plans.

6. Kadence Blocks – Custom Blocks Plugin for Gutenberg

Kadence Blocks is yet another WordPress block collection plugin. It comes with some of the most commonly used blocks and helps you add more functionality to your content editor.

Kadence Blocks for WordPress Gutenberg

The plugin is available in both free and premium versions. The free version includes 10 custom blocks, including the following:

  • Row Layout Block – Insert content blocks in one or multiple columns in a row.
  • Tabs Block – Lets you create horizontal or vertical tabs and customize them.
  • Accordion Block – Create beautiful accordions in your website.
  • Icon List Block – Lets you create attractive lists with custom icons instead of default bullets.

The plugin allows you to deactivate the blocks that you will not use. Doing so keeps your editor clean and lightweight.

If you like these blocks and want more blocks from Kadence Themes, then you can buy their pro plugin or membership plan.

7. Gutenberg Blocks and Template Library by Otter – Free WordPress Blocks Plugin

Gutenberg Blocks and Template Library by Otter is another useful WordPress blocks plugin which adds extra Gutenberg blocks to your site.

Gutenberg Blocks and Template Library by Otter

There are more than 10 WordPress blocks included in this plugin. Here are some of the useful blocks:

  • Section Block – Allows you to build layouts using columns like in page builder plugins.
  • Google Maps Block – Lets you embed Google maps on your website.
  • About Author Block – Allows you to show about author box on your website.
  • Sharing Icons Block – Lets you add social sharing icons on your WordPress articles easily.

In addition to the Gutenberg blocks, the plugin also includes Gutenberg compatible templates to help you create stunning pages quickly. Otter is created by the same team behind ThemeIsle, a popular WordPress themes company.

8. Ultimate Blocks – Free Gutenberg Blocks Plugin for Bloggers

Ultimate Blocks plugin is also a block collection plugin with several extra blocks for Gutenberg. It includes easy to use blocks useful for bloggers and marketers.

Ultimate Blocks WordPress Plugin

Here are some of the blocks offered by the plugin:

  • Review Block – Lets you add review with product name, features, summary, and star rating.
  • Table of Contents Block – Helps to create table of contents from the headings in your article.
  • Call to Action Block – Lets you create a call to action box with heading, description, and a button.
  • Click to Tweet Block – Easily add tweetable content in your posts and pages.
  • Notification Box Block – Allows you to add simple notification box in your articles.

9. Advanced Gutenberg – 20+ New Blocks for Gutenberg

Advanced Gutenberg plugin adds 20+ new blocks to your Gutenberg editor. The plugin helps you to create professional webpages easily and quickly.

Advanced Gutenberg WordPress Blocks Collection Plugin

Here are some of the Advanced Gutenberg blocks.

  • Columns Manager Block – Predefined responsive columns to let you add multi-column content in WordPress.
  • Map Block – Lets you embed Google maps in your posts and pages.
  • Counter Block – Allows you to showcase numbers like total sales in an attractive manner.
  • Tabs Block – Lets you add content in tabs easily.
  • Advanced List Block – Create visually attractive lists with custom list icons and styles.

The plugin also gives you advanced block control options to activate blocks as per user roles.

Advanced Gutenberg Block plugin is created by JoomUnited.

10. Stackable Gutenberg Blocks – Beautiful Custom Blocks

Stackable Gutenberg Blocks is a free WordPress block library plugin with beautiful custom blocks for WordPress sites. It includes more than 20 easy to use blocks for Gutenberg.

Stackable Gutenberg Blocks

Here are some of the cool WordPress blocks offered by this plugin.

  • Container Block – Allows you to combine different blocks in a single row.
  • Feature Grid Block – Lets you showcase your product features or portfolio in stylish grid layouts.
  • Team Members Block – Lets you showcase your team members with their position, duties, and specialities.
  • Video Popup Block – Lets you add full-screen video popups for YouTube and Vimeo videos.

Stackable also offers impressive effects and background options. You can use image and video backgrounds, fixed images, gradient background effects, and more.

11. CoBlocks – Free Page Building WordPress Blocks

CoBlocks is a free plugin with a collection of page building WordPress blocks. Like most block collection plugins, it offers extra blocks to supercharge the block editor in WordPress.

CoBlocks - WordPress Gutenberg Blocks

Here are some useful Gutenberg blocks offered by this plugin:

  • Rows and Columns Blocks – Lets design dynamic layouts based on grid system.
  • Carousel Gallery Block – Enables you to create carousel galleries and showcase your images.
  • Alert Block – Create attractive alerts and insert into your WordPress posts and pages.
  • Author Profile Block – Lets you add author profile on your WordPress site.

The plugin lets you customize your blocks with ease. You can change fonts, set margin and padding, pick colors, and more.

Some Honorable Mentions

Besides the ones we mentioned above, there are many Gutenberg blocks plugins on the market. Here are some honorable mentions you can use as alternatives to the above-listed plugins.

  • Getwid – Free Gutenberg Blocks Library
  • Easy Blocks – Gutenberg Blocks Plugin with 20+ Custom Blocks
  • Editor Blocks for Gutenberg – WordPress Blocks Collection Plugin
  • Google Maps Gutenberg Block – WordPress Google Maps Block

In addition to those already mentioned, most of the content-focused WordPress plugins are now Gutenberg compatible and come with their own blocks.

We hope this article helped you to find the best Gutenberg blocks for your WordPress site. You may also want to see our handpicked list of Gutenberg friendly WordPress themes.

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 15 Best Gutenberg Blocks Plugins for WordPress (Super Useful) appeared first on WPBeginner.



Source link

25 Best Gutenberg Friendly WordPress Themes (2019)


Are you looking for the best Gutenberg friendly WordPress themes?

Gutenberg is the new WordPress block editor introduced in WordPress 5.0. It is incredibly fast, more visual, and offers new ways to create content layouts for your WordPress posts and pages.

Many WordPress theme designers have updated their themes to take advantage of the new Gutenberg block editor.

In this article, we will share some of the best Gutenberg friendly WordPress themes that you can use.

Best Gutenberg friendly WordPress themes

How to Find the Gutenberg Friendly Themes?

Many top WordPress theme shops updated their popular themes to become compatible with the new Gutenberg blocks editor. You will find most of the WordPress themes working smoothly with Gutenberg, but there are still many themes that don’t fully support the new editor.

After the WordPress 5.0 version released, we have been asked several times from our users to recommend the themes that support the Gutenberg editor. So we decided to make a list of the popular Gutenberg compatible themes.

Also, check out this article on the difference between Gutenberg vs WordPress page builders.

Let’s take a look at some of the best Gutenberg friendly WordPress themes that you don’t want to miss.

1. Hestia Pro

Hestia Pro

Hestia Pro is a multipurpose and premium Gutenberg friendly WordPress theme built specifically for businesses, startups, portfolio, and eCommerce stores. It features a single page layout with parallax scrolling and beautiful sections. Hestia Pro also includes other layout options to create landing pages.

It’s fully customizable and responsive. This theme supports RTL languages and translation ready to let you create a website in your language.

2. Astra Theme

Astra

Astra is a stylish WordPress theme with Gutenberg editor support. It’s packed with beautiful starter sites and demos to quickly launch your website. With page builders support, you can fully customize the template or design your layout.

It has custom layout settings, header options, colors, crisp typography, blog page template, and more. Astra theme is optimized for speed and performance.

3. Divi

Divi

Divi is a powerful WordPress theme that fully supports Gutenberg. It features the click and type functionality to add your content anywhere on the website. It offers responsive editing and real-time design options to instantly draw the layout you need.

Other notable features include content modules and elements, pre-built layouts, design toolkit, and more. Divi theme is highly flexible and super easy to customize anything on your website.

4. OceanWP

OceanWP

OceanWP is a free Gutenberg friendly theme for WordPress. It is bundled with beautiful and creative demo sites for every kind of website or blog. The theme is responsive and eCommerce ready to start an online store. You can use the new Gutenberg editor to customize the layout and design easily.

It has the fastest page load time and support for page builders. OceanWP theme is optimized for SEO to grow your website traffic.

5. Breakthrough Pro

Breakthrough Pro

Breakthrough Pro is a minimal WordPress Gutenberg friendly theme designed specifically for marketing, advertising, and creative agencies. It has features and sections to display your services, portfolio, etc beautifully. The theme is built on top of the Genesis framework which makes it robust and unbeatable.

It has a custom logo, navigation menu, featured content area, and theme options panel. Breakthrough Pro can be customized using the live WordPress customizer.

StudioPress is now part of WP Engine, the most popular managed WordPress hosting company. You can get this theme and all 35+ other StudioPress themes if you sign up for WP Engine hosting to build your website.

Bonus: WPBeginner users also get an additional 20% off. Get started with WP Engine.

6. Guten Theme

Guten Theme

Guten Theme is a modern WordPress Gutenberg friendly theme. It comes with multiple built-in layouts for header, footer, and blog. The theme is compatible with all popular drag and drop page builders including Elementor, Beaver Builder, etc.

It has custom colors and fonts settings. Guten Theme ships with strong documentation, WooCommerce support, and can be fully customized with the WordPress live customizer.

7. Ultra

Ultra

Ultra is the most powerful and highly flexible WordPress theme with Gutenberg support. It gives you full control on theme features to design your header, footer, and landing pages. It is packed with multiple theme skins to select the best template for your website.

The theme includes many built-in add-ons to add more features and functionality. It has smart layout options to modify colors, fonts, and background.

8. Neve

Neve

Neve is a new and lightweight WordPress theme built for Gutenberg editor. It has a simple and sleek design with custom header options, background choices, page builders support, and more. Neve is flexible to create all types of websites.

It also includes mega menus, translations, RTL support, and SEO optimization. It is also eCommerce ready and can be used as a WooCommerce theme.

9. Monochrome

Monochrome

Monochrome is a sophisticated WordPress Gutenberg theme powered by the Genesis theme framework. It has a clean and neat layout with lots of white space to make your content look great. It ships with powerful WordPress plugins like WP Forms to let you create a contact form on your website.

This theme includes page templates for full-width and sidebar layouts. It has a custom header, theme options panel, responsive design, and eCommerce support.

10. Parallax

Parallax

Parallax is a single page WordPress Gutenberg theme. It is packed with a fullscreen background image with a custom logo, social icons, search bar, and navigation menu. The theme has parallax scrolling feature making it unique and accessible to users.

The most significant features include pre-built layouts, animated progress bars, homepage sections, custom post types, and list/grid templates. You can also use this theme to create a multi-page website.

11. Infinity Pro

Infinity Pro

Infinity Pro is a flexible WordPress theme for Gutenberg. This theme is built on top of the Genesis framework and supports WooCommerce to create an online store. It has a full-width header background with a custom logo, navigation menu, and CTA button.

It features multiple widget areas on the homepage to make it easier for you to design your website. Infinity Pro is customizable with theme options and WordPress live customizer.

12. Atomic Blocks

Atomic Blocks

If you’re looking for a free theme with custom Gutenberg blocks, then Atomic Blocks is the perfect option. It has a ready-made collection of blocks for Gutenberg editor that you can use to launch a website instantly. It’s also available as a plugin to work with other popular WordPress themes.

The most common blocks include a newsletter block, post grid layout, call-to-action, testimonials, pricing table, and more. It has custom theme options for colors, fonts, and layout.

13. Extra

Extra

Extra is a Gutenberg friendly WordPress magazine theme from the creators of the Divi theme. It has a drag and drop design, category builder, reviews and ratings, modules, elements, and custom layouts.

Extra theme is eCommerce ready and can be used to make a membership website or online store.

It features advanced design settings and stories format on the homepage. The theme includes multiple header layouts and templates, navigation menus, smooth scrolling, and back to top button.

14. Magazine Pro

Magazine Pro

Magazine Pro is a WordPress online publishing theme by StudioPress. It is optimized for Gutenberg and allows you to customize modules, fonts, colors, backgrounds, etc. It has a visually attracting layout for magazines and portfolios. The theme offers great flexibility to publish as many articles as you like.

Other essential features include multiple navigation menus, category menus, footer widgets, and landing page templates. You can easily customize the theme with live WordPress customizer.

15. Vimes

Vimes

Vimes is a versatile WordPress theme built specifically for design agencies, photographers, and artists. It is compatible with the new Gutenberg block editor. The theme has an image slider on the homepage to showcase your featured photos. Vimes is built on ZOOM framework making it strong and flexible.

Other features include custom widgets, portfolio template, custom posts, and an easy to use theme options panel. It is optimized for SEO and speed performance.

16. Nozama

Nozama

Nozama is an Amazon-inspired eCommerce friendly WordPress theme. It’s updated recently to become compatible with the Gutenberg editor. The theme has full-width and sidebar layouts with bold colors to impress the audience. It ships with custom Elementor modules to build your own layout.

It has a customizable storefront with multiple options to display your products. Nozama is perfect for your online shops and affiliate marketing stores.

17. Altitude Pro

Altitude Pro

Altitude Pro is a Genesis-powered WordPress theme with Gutenberg supportive features. It draws the attention of your users with parallax effects and beautiful layout. This theme has a full-width and responsive design, landing page templates, and more.

It features custom backgrounds, color styles, and can be customized using the WordPress customizer with live preview. Altitude Pro has powerful eCommerce integration.

18. Brittany

Brittany

Brittany is a premium WordPress Gutenberg friendly fashion and lifestyle theme. It has a modern layout with multiple homepage sections for featured blog posts, Instagram photos, newsletter, and more. It has a simple navigation menu on top with social icons and cart options.

This theme is customizable for background colors, fonts, color schemes, and animations. It fully supports WooCommerce and translation ready to let you create a website in any language.

19. Flevr

Flevr

Flevr is an eCommerce friendly, and Gutenberg powered WordPress theme. It ships with a fullscreen background image, multiple content types, flexible design options, and drag and drop homepage layout. The theme includes custom widgets for social networking, Twitter, Instagram, etc.

It comes with 1-click demo import, so you can quickly launch the website and replace content. Flevr is optimized for SEO and compatible with the popular WordPress plugins.

20. Float

Float

Float is a beautiful WordPress Gutenberg theme. It features parallax floating and overlapping effects to take your website design to the next level. The theme is packed with Themify drag and drop builder to let you design your own layouts and landing pages.

It has easy customization options, pre-designed demo sites, portfolio post type, social media integrations, and support for WooCommerce.

21. Essence Pro

Essence Pro

Essence Pro is a beautiful and lively WordPress Gutenberg theme designed specifically for lifestyle, health, wellness, and fitness related businesses. It has a fullscreen header background and story-based homepage layout to feature your top articles professionally.

It gives an attractive first impression to users with a simple and minimal layout. Essence Pro is built on top of the Genesis theme framework with eCommerce support and multiple widget-ready areas.

22. Silk

Silk

Silk is a stylish WordPress theme optimized for Gutenberg. Just like its name, it has a simple design with white background and elegant typography. This theme is bundled up with a style manager to balance the colors and fonts on your website. It comes with strong documentation and support.

The features you don’t wish to miss in this theme include a section for popular posts and smooth scrolling. It is optimized for speed and SEO.

23. Bramble

Bramble

Bramble is an all-purpose WordPress theme with a modern layout and Gutenberg editor support. It ships with a built-in page builder to let you design pages and layouts of your own. It comes with pre-built homepage layouts, image slider plugin, and parallax video background support.

This theme is compatible with Google Fonts, WooCommerce, and WPML to create a multilingual website. You can integrate multiple custom features like Google Maps, menu icons, and more.

24. Benson

Benson

Benson is a Gutenberg friendly WordPress photography theme. It can be used to build your online portfolio or creative artistry websites. It comes with video and slideshow support on the homepage. This theme has multiple image layouts with columns, grids, filters, and more settings.

It gives you complete control of design and layout without changing any code. Benson has custom widgets and drag and drop page builder for easy customization.

25. Medicus

Medicus

As the name suggests, Medicus is a WordPress medical theme for hospitals, pharmacies, and health-related businesses. It has a responsive and minimal layout that is compatible with the Gutenberg block editor. The theme features the widgetized homepage and a directory template.

Other notable features include a top bar for appointment and bookings, featured slider, sidebar video widget, and visual customizer to edit anything in the theme.

We hope this article helped you pick the best Gutenberg friendly WordPress themes. You may also want to see our step by step WordPress security guide.

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 25 Best Gutenberg Friendly WordPress Themes (2019) appeared first on WPBeginner.



Source link

How to Create a Custom Gutenberg Block in WordPress (Easy Way)


Do you want to create a custom Gutenberg block for your WordPress site? After the WordPress 5.0 update, you need to use blocks to create content in the new WordPress block editor.

WordPress ships with several useful blocks that you can use when writing content. Many WordPress plugins also come with their own blocks that you can use.

However, sometimes you may want to create your own custom Gutenberg block to do something specific.

If you’re looking for an easy solution to create custom Gutenberg blocks for your WordPress site, then you’re in the right place.

In this step by step tutorial, we’ll show you the easy way to create a custom WordPress block for Gutenberg.

Creating a custom WordPress block for Gutenberg

Note: This article is for intermediate users. You’ll need to be familiar with HTML and CSS to create custom Gutenberg blocks.

Step 1: Get Started

The first thing you need to do is install and activate the Block Lab plugin.

It’s a WordPress plugin that allows you to create custom blocks from your admin panel without much hassle.

Block Lab WordPress Plugin

To install the plugin, you may follow our beginner’s guide on how to install a WordPress plugin.

Once the plugin is activated, you can proceed to the next step of creating your first custom block.

Step 2: Create a New Block

For the sake of this tutorial, we will build a ‘testimonials’ block.

First, head over to Block Lab » Add New from the left sidebar of your admin panel.

On this page, you need to give a name to your block. You can write any name of your choice in the “Enter block name here” textbox.

Enter Custom Block Name

We will name our custom block: Testimonials.

On the right side of the page, you’ll find the block properties. Here you can choose an icon for your block and select a block category from the Category dropdown box.

The slug will be auto-filled based on your block’s name, so you don’t have to change it. However, you may write up to 3 keywords in the Keywords text field, so that your block can be easily found.

Custom Block Properties

Now let’s add some fields to our block. You can add different types of fields like text, numbers, email, URL, color, image, checkbox, radio buttons, and much more.

We’ll add 3 fields to our custom testimonial block: an image field for the image of the reviewer, a textbox for the reviewer name, and a textarea field for the testimonial text.

Click on the + Add Field button to insert the first field.

Image Field Options

This will open up some options for the field. Let’s take a look at each of them.

  • Field Label: You can use any name of your choice for the field label. Let’s name our first field as Reviewer Image.
  • Field Name: The field name will be generated automatically based on the field label. We’ll use this field name in the next step, so make sure it’s unique for every field.
  • Field Type: Here you can select the type of field. We want our first field to be an image, so we’ll select Image from the dropdown menu.
  • Field Location: You can decide whether you want to add the field to the editor or the inspector.
  • Help Text: You can add some text to describe the field. This is not required if you’re creating this block for your personal use.

You may also get some additional options based on the field type you choose. For example, if you select a text field, then you’ll get extra options like placeholder text and character limit.

You can click on the Close Field button once you’re done with the image field.

Following the above process, let’s add 2 other fields for our testimonials block by clicking the + Add Field button.

Final Custom Block Fields

In case you want to reorder the fields, then you can do that by dragging them using the hamburger icon on the left side of each field label.

To edit or delete a particular field, you need to hover your mouse over the field label to get the edit and delete options.

Once you’re done, click on the Publish button, present on the right side of the page, to save your custom Gutenberg block.

Step 3: Create a Block Template

Although you’ve created the custom WordPress block in the last step, it’ll not work until you create a block template named block-testimonials.php and upload it to your current theme folder.

Create a Block Template

The block template file will tell the plugin how to do display your block fields inside the editor. The plugin will look for the template file and then use it to display the block content.

If you don’t have this file, then it’ll display an error saying “Template file blocks/block-testimonials.php not found”.

Let’s create our block’s template file.

First, go ahead and create a folder in your desktop and name it blocks. You’ll create your block template file inside this folder and then upload it to your current WordPress theme directory.

To create the template file, you can use a plain text editor like Notepad.

Every time you add a new field to your custom block, you need to add the following PHP code to your block template file:

<?php block_field( 'add-your-field-name-here' ); ?>

Just remember to replace add-your-field-name-here with the field name.

For example, the name of our first field is reviewer-image, so we will add the following line to the template file:

<?php block_field( 'reviewer-image' ); ?>

Simple, isn’t it? Let’s do the same for the rest of our fields:

<?php block_field( 'reviewer-image' ); ?>
<?php block_field( 'reviewer-name' ); ?>
<?php block_field( 'testimonial-text' ); ?>

Next, we’ll add some HTML tags to the above code for styling purposes.

For example, you can wrap the reviewer image inside an img tag to display the image. Otherwise, WordPress will display the image URL which is not what you want, right?

You can also add class names to your HTML tags and wrap your code inside a div container to style your block content (which we’ll do in this next step).

So here’s our final code for our block template:

<div class="testimonial-block clearfix">
	<div class="testimonial-image">
		<img src ="<?php block_field( 'reviewer-image' ); ?>">
	</div>
	<div class="testimonial-box">
		<h4><?php block_field( 'reviewer-name' ); ?></h4>
		<p><?php block_field( 'testimonial-text' ); ?></p>
	</div>
</div>

Finally, name the file as block-testimonials.php and save it inside the blocks folder.

Step 4: Style Your Custom Block

Want to style your custom block? You can do that with the help of CSS.

Open a plain text editor like Notepad and add the following code:

.testimonial-block 
	width: 100%;
	margin-bottom: 25px;


.testimonial-image 
	float: left;
	width: 25%;
	padding-right: 15px;


.testimonial-box 
	float: left;
	width: 75%;


.clearfix::after 
	content: "";
	clear: both;
	display: table;

Once done, name the file as block-testimonials.css and save it inside the blocks folder.

Step 5: Upload Block Template File to Theme Folder

Now let’s upload the blocks folder containing our custom block template file to our WordPress theme folder.

To do that, you need to connect to your WordPress site using an FTP client. For help, you may check out our guide on how to upload files to your WordPress site using FTP.

Once you’re connected, go to the /wp-content/themes/ folder. From here you need to open your current theme folder.

Enter Theme folder using FTP

Now upload the blocks folder, containing the block template file and the CSS file, to your theme directory.

Once done, you can proceed to the final step to test your custom block.

Note: Block Lab plugin allows you to create theme-specific blocks. If you change your WordPress theme, then you need to copy the blocks folder to your new theme directory.

Step 6: Test Your New Block

It’s time to test our custom testimonials block. You can do this by heading over to Pages » Add New to create a new page.

Next, click on the Add Block (+) icon and search for the Testimonials block. Once you find it, click on it to add the custom block to your page editor.

Add Custom Block to Page Editor

You can now add a testimonial to this page using your custom block. To add more testimonials, you can always insert new testimonial blocks.

Once you’re done, you can preview or publish the page to check whether it’s working properly or not.

That’s all! You’ve successfully created your first custom WordPress block for your site.

Did you know that you can save time with reusable blocks in your editor? Check out our guide on how to easily create reusable blocks in the WordPress block editor and use them on other websites.

You may also want to see our guide on how to create a custom WordPress theme without writing any code.

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 Create a Custom Gutenberg Block in WordPress (Easy Way) appeared first on WPBeginner.



Source link

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

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

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

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

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

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

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