Do you want to learn how to select and use nested blocks in WordPress?
The WordPress Gutenberg nested blocks feature allows you to add multiple blocks within a parent block. Then, you can customize different block elements at the same time, organize post content efficiently, and access more design flexibility.
In this article, we will show you how to easily select and use WordPress nested blocks.
What Are WordPress Nested Blocks?
The WordPress Gutenberg nested block feature allows you to insert (or ‘nest’) one or more blocks within another block.
Nested blocks help you create more complex layouts on your WordPress website by adding multiple blocks inside each other. This allows for more flexibility when designing and formatting content for pages and posts.
For instance, you can nest multiple Image blocks within a Group block to display a set of photos from a particular event or a series of artworks created using a particular technique.
Moreover, the nested block feature allows you to edit individual blocks separately. This means that you can customize each block according to your needs without affecting the other blocks. In turn, this results in better content organization, makes your content more attractive, and streamlines your content creation process.
That being said, let’s see how you can easily select and use WordPress Gutenberg nested blocks.
How to Use WordPress Nested Blocks
You can easily nest multiple blocks together using the Group or Columns block in the Gutenberg block editor.
First, you need to open up an existing or new post in the block editor from the WordPress admin sidebar.
From here, simply click on the ‘+’ button in the top left corner of the screen and find the ‘Group’ block. Upon clicking it and adding it to the page, you will need to select a layout for the blocks that you will nest together.
For this tutorial, we will be selecting the ‘Group’ layout.
Next, simply click on the ‘+’ button on the screen to start adding content within the parent block.
For the sake of this tutorial, we will be adding an Image block.
Upon adding the Image block, just click the ‘Group’ button in the block toolbar at the top to select the parent block.
Next, you need to click the ‘+’ button to open up the block menu, from where you can choose other blocks to add.
How to Configure WordPress Nested Block Settings
Once you have nested multiple blocks, you can configure their individual settings by clicking on each block. This will open up the block settings in the right column on the screen.
From here, you can adjust the background color, text color, and size of the individual blocks without affecting the other blocks that are nested within it.
To configure the settings of all the nested blocks together, you will have to click the ‘Group’ button in the block toolbar at the top. This will open up the parent block settings in the right column.
You can now configure the justification, orientation, background color, text color, and typography of all the nested blocks.
Keep in mind that these settings will affect all the blocks nested within the parent block.
You can also convert an existing individual block into nested blocks by clicking the ‘Options’ button in the top toolbar of any block.
This will open up a menu prompt, where you need to select the ‘Create Reusable block’ option.
Once you have done that, a new reusable block will be created where you can add multiple blocks.
After you are done, don’t forget to click the ‘Publish’ or ‘Update’ button to save your changes.
In our example, we have nested a Title, Image, and Paragraph block within a Group block. This is how the nested blocks looked on our demo website.
Bonus: Use the Wayfinder Plugin to Easily Select Nested Blocks
Sometimes, it can be difficult to select an individual block and configure it when there are multiple blocks nested together.
Luckily, the Wayfinder plugin makes it super easy to select nested blocks from a parent block and even tells you the type and class of the blocks.
Upon activation, head over to the Settings » Wayfinder page from the WordPress admin sidebar.
Once you are there, all the settings will already be activated. You simply need to uncheck the box next to the settings that you don’t want to use.
For example, if you want Wayfinder to display block types for all the blocks in the editor, then keep the box checked next to the ‘Display block type’ option.
However, if you don’t want the plugin to display block classes, simply uncheck the box next to that option.
After configuring the settings, don’t forget to click the ‘Save Changes’ button.
Next, you need to open up an existing or new post from the WordPress admin sidebar.
Once you are there, hovering your mouse over any block will show an outline with its name. You will also be able to see the outline and name of any nested blocks within the parent block.
This will help you identify all the different blocks that are nested within a Group or Columns block.
From here, you can easily select an individual block from the parent block to configure its settings.
You can also select all the nested blocks at the same time by simply clicking on the ‘Columns’ or ‘Group’ heading. This will open up the parent block settings in the right column.
Once you have configured the block settings, simply click the ‘Update’ or ‘Publish’ button to save your changes.
Do you want to change block height and width in WordPress?
By default, WordPress makes it easy to create beautiful content layouts for your posts and pages using blocks. However, sometimes you may want to resize blocks to make them look better.
In this article, we will show you how to easily change block height and width in WordPress.
Why Change Block Height and Width in WordPress?
The block editor enables you to add content to your WordPress website using different blocks, including headings, paragraphs, images, videos, audio, and more.
However, sometimes you may want to change the width or height of a specific block to improve its appearance or the layout of the overall content.
Adjusting block sizes can also ensure that your content is responsive and displays properly on all devices, including phones, tablets, and laptops.
For example, you may have uploaded an image in the content editor, but it is too large and makes the page look unappealing.
Or, you might want to change the size of the heading block to align it better with the content.
By adjusting the width and height of the blocks, you can make your posts and pages look more aesthetically pleasing.
That being said, let’s see how you can easily change block height and width in WordPress.
Method 1: Change the Block Height and Width Using Block Settings
For this method, we will show you how to change a block’s height and width using the default settings offered by WordPress.
Currently, WordPress does not offer the same resizing options for all of the blocks. However, the block editor provides many ways to resize the height and width of different blocks.
Let’s start with the Image block in WordPress.
First, you can change the alignment of the Image block by clicking on the ‘Align’ button in the toolbar above the block.
Here, choosing the ‘Wide Width’ option will make the block the same width as the container.
Or, the ‘Full Width’ alignment option will make the block the entire width of the page.
You can also resize a block by going to the ‘Block Settings’ panel on the right and scrolling down to the ‘Settings’ section. From here, you can resize a block from the ‘Image Size’ dropdown menu.
You can also adjust the block’s width and height by typing the preferred pixel size into the ‘Width’ and ‘Height’ boxes in the ‘Image dimensions’ section.
Below that, you can also adjust the block’s size by percentage.
Another way to resize an Image block is by clicking on the image itself to bring up a blue border with circular anchors.
Then, simply drag these anchors to change the height and width of the image block.
Once you are done, click on the ‘Update’ or ‘Publish’ button to store your settings.
Method 2: Change the Block Height and Width Using the Columns Block
If the block you want to resize does not come with alignment buttons or resize settings, then this method is for you.
For this method, we will place our block inside the Columns block. It acts as a container where you can add blocks in each column. Then, you can resize those blocks by adjusting the height and width of the columns.
First, you will need to click on the ‘Add Block’ (+) button in the top left corner of the screen.
From here, simply locate and add the Columns block to the content editor. Then, you will be asked to choose a variation.
After that, the column layout will be displayed on the screen, and you can now add the block you want by clicking on the ‘Add Block (+)’ button inside a column.
Once the block has been added, you can resize it by using the ‘Column settings’ located in the right panel.
Once you are done, simply click the ‘Publish’ button to store your changes.
This is how the content looked on our demo website after resizing and aligning two paragraph blocks inside a two-column block.
Method 3: Change the Block Height and Width Using the Group Block
You can also adjust the width and height of blocks using the Group block. It allows you to group different blocks and style them together.
First, you will need to click on the ‘Add Block’ (+) button at the top. Next, you must locate and add the Group block to the content editor.
Once you do that, the Group block will display three different layout options that you can choose from. For this tutorial, we will use the ‘Group’ layout.
After that, the ‘Add Block’ button will be displayed on the screen. You can now add any block you want.
In this tutorial, we will be adding and resizing a Heading block, a Paragraph block, and an Image block.
To add multiple blocks to the Group, you must click on the ‘Select Group’ button from the block toolbar.
Once the Group is selected, simply click on the ‘Add Block’ button (+) at the bottom.
Clicking on the ‘Select Group’ button also opens up the block settings in the right column. From here, you can easily adjust the layout, justification, and orientation of all the blocks.
Changing the layout will also change the different block sizes. You can configure these settings until you are happy with the result.
Once you are done, click on the ‘Update’ or ‘Publish’ button to store your settings.
This is how the Group block looked on our demo website.
Method 4: Change the Block Height Using the Cover Block
This resizing method is for you if you want to use the Cover block. It enables you to display text and other content on top of an image or video.
First, you will need to click on the ‘Add Block’ (+) button at the top and find the Cover block.
Once you have done that, you will be asked to choose a color or upload an image from the WordPress media library. This image or color will be used as the background for the Cover block.
Next, simply drag and drop any block you want into the Cover block.
After that, you need to click on the Cover block to open up its block settings in the right column.
From here, scroll down to the ‘Dimensions’ panel, where you can adjust the height of the Cover block using pixels.
Finally, don’t forget to click on the ‘Save Changes’ button to store your settings.
Bonus: Create Beautiful Pages Using Advanced Blocks in SeedProd
You can easily create beautiful and aesthetically-pleasing pages using the SeedProd plugin.
It is the best WordPress page builder on the market that allows you to create landing pages using blocks. These blocks are also super easy to customize and resize according to your needs.
Do you want to bulk convert your old content using classic blocks into the Gutenberg (block) format in WordPress?
After updating to any version above WordPress 5.0, your older post and page content will show up inside a Classic block in the new WordPress content editor. If you have dozens or hundreds of posts, then converting that Classic block content into individual blocks can take a lot of time. Thankfully, there is a bulk convert option.
In this article, we will show how to easily bulk convert classic blocks into Gutenberg blocks in WordPress.
Why Convert Classic Block Into Individual Blocks in WordPress?
If you have had a WordPress blog for a long time, then chances are that some of your posts were written using the older classic editor.
This older content will now appear inside the Classic block in the post editor.
By converting the classic block into individual Gutenberg blocks, you will gain more control and flexibility over your content.
You can easily edit your post by working with individual blocks. You will also be able to take advantage of the customization options available for each block.
This helps you easily edit the content within the block editor while allowing you to create beautiful content layouts for your posts and pages.
Note: In most cases, switching from the classic to the block editor will not affect your posts on the front end.
That being said, let’s see how to easily bulk-convert classic blocks to Gutenberg in WordPress.
Method 1: Convert Classic Block to Gutenberg Using Default Settings
If you want to convert a single post or page from the Classic block into individual blocks, then this method is for you.
First, you need to edit the post and page where you want to convert the blocks. You can do this by heading to Posts » All Posts in your WordPress dashboard and then clicking on ‘Edit (block editor)’ under the post.
This will open your post in the block editor. Then, click on the ‘Convert to blocks’ button in the toolbar at the top of the Classic block.
The Classic block will now be converted into individual Gutenberg blocks.
You can now access all the block settings for individual blocks from the right column. If you cannot see this panel, then click on the gear icon at the top right of the editor.
Once you are done, don’t forget to click the ‘Update’ button to save your changes.
Method 2: Bulk Convert Classic Block into Gutenberg Blocks
If you want to easily convert the Classic block into Gutenberg blocks for all the posts and pages immediately, then this method is for you.
Important: Make sure to create a complete WordPress backup of your site before using this method because you cannot undo the conversion once it’s completed.
Do you want to create a custom WordPress block for your website?
While WordPress comes with a lot of basic blocks for creating content, you might need something more specific for your website.
In this article, we will show you two ways to create custom Gutenberg blocks for your WordPress site.
Why Create a Custom WordPress Block?
WordPress comes with an intuitive block editor that allows you to easily build your posts and pages by adding content and layout elements as blocks.
By default, WordPress ships with several commonly-used blocks. WordPress plugins may also add their own blocks that you can use.
However, sometimes you may want to create your own custom block to do something specific on your WordPress website because you can’t find a blocks plugin that works for you.
With custom blocks, you can add unique features and functionality to your website that may not be available in pre-built blocks. This can help automate processes or make content creation for your WordPress blog more efficient.
For example, you could create a custom block to display testimonials and then easily insert and manage that block without any coding knowledge.
Having said that, let’s see how to easily create a completely custom block in WordPress.
For this tutorial, we will be showing you two methods to create a custom block. You can use the quick links below to jump to the method of your choice:
Method 1: Create Custom Blocks for WordPress Using WPCode (Recommended)
If you are a beginner and inexperienced with coding, then this method is for you.
WPCode is the best WordPress code snippets plugin on the market that makes it super easy and safe to add custom code to your website.
It comes with the block snippets feature that allows you to easily create custom blocks for your WordPress site without writing any code.
First, you need to install and activate the WPCode plugin. For detailed instructions, you may want to see our beginner’s guide on how to install a WordPress plugin.
Note: WPCode also offers a free version that you can use to add custom code to your website. However, you will need the Pro version of the plugin to unlock the custom block snippets feature.
Upon activation, you need to head over to the Code Snippets » + Add Snippet page from the WordPress admin sidebar.
Once you are there, click the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.
This will take you to the ‘Create Custom Snippet’ page, where you can start by typing a name for the custom block that you are about to create.
Once you have done that, just select the ‘Blocks Snippet’ option from the ‘Code Type’ dropdown menu in the right corner of the screen.
This will display the ‘Edit with Block Editor’ button in the ‘Code Preview’ box.
Simply click on this button to launch the block editor.
Now, a prompt will appear on your screen asking you to save the code snippet to load it in the block editor. Just click on the ‘Yes’ button to move ahead.
Now that you are in the block editor, you can easily create a custom block using the pre-made blocks available in the block menu.
For this tutorial, we will be creating a custom block for adding testimonials on your site.
First, you need to click the ‘+’ button in the top left corner of the screen to open up the block menu.
From here, drag and drop the Heading block into the block editor interface and name it ‘Testimonials’.
Next, you can use the paragraph, pull-quote, or quote blocks to add testimonials from different clients on your website.
You can even use the image, site logo, social icons, or site tagline blocks to further customize your Testimonials block.
You can also customize the size, text color, or background color of your testimonials from the block panel on the right side of the screen.
Once you are done, don’t forget to click the ‘Update’ button at the top to store your custom block settings.
Next, just click on the ‘Return to WPCode Snippet’ button at the top to be redirected to the ‘Edit Snippet’ page.
Once you are there, scroll down to the ‘Insertion’ section and choose the ‘Auto Insert’ mode.
Upon activation of the code snippet, your custom block will be automatically added to where you choose to insert it on your website.
Next, you have to configure the location of the custom block you created.
To do this, simply click the ‘Location’ dropdown menu in the ‘Insertion’ section and switch to the ‘Page-Specific’ tab. From here, you can now choose the ‘Insert After Post’ option if you want to show your Testimonials block after the post ends.
Once you do that, you can also configure the number of posts after which the testimonial block should appear. For example, if you type in the number 3, then the Testimonials block will appear in every third post.
You can also display the block in between different paragraphs, after post excerpts, and more.
However, if you don’t find the block location that you are looking for, then you can also create your own conditional logic rule to add the custom block to your preferred place.
To do this, scroll down to the ‘Smart Conditional Logic’ section and toggle on the ‘Enable Logic’ switch.
Next, you must click the ‘Add New Group’ button to start creating a conditional logic rule.
For example, if you only want to show the custom block you created on a specific page or post, then you will have to select the ‘Page URL’ option from the dropdown menu on the right.
After that, you can leave the dropdown menu in the middle as it is and then add the URL of the WordPress page/post of your choice into the field on the left.
You can also configure your conditional logic rule to only display the custom block on a specific page, logged-in users, on WooCommerce store pages, Easy Digital Downloads pages, specific dates, and more.
Once you are done, scroll back to the top of the page and toggle the ‘Inactive’ switch to ‘Active’. Then, click the ‘Update’ button to store your settings.
Your custom block will now be automatically added to all the locations that you selected for the block snippet.
Keep in mind that the custom block you created won’t be displayed as an option in the block menu of the Gutenberg editor.
You will have to configure the block settings by visiting the Code Snippets page from the WordPress dashboard and clicking the ‘Edit’ link under the block snippet.
This will open the ‘Edit Snippet’ page, where you can customize the block or change its location and conditional logic rules easily.
Now visit your website to view the custom block that you created in action.
Here is our custom Testimonials block on our demo website.
Method 2: Create Custom Blocks for WordPress Using Genesis Custom Code Plugin (Free)
If you are an intermediate user and looking for a free solution, then this method is for you. Keep in mind that you will need to be familiar with HTML and CSS to follow the instructions in this method.
Made by the people behind WP Engine hosting, this plugin provides developers with easy tools to quickly create custom blocks for their projects.
For the sake of this tutorial, we will build a Testimonials block.
Step 1: Create a Custom Block for WordPress
First, you need to head over to Custom Blocks » Add New page from the left sidebar of your admin panel.
This will bring you to the Block Editor page, where you will be creating a custom block for your WordPress site.
From here, you can start by giving a name to your block.
Now on the right side of the page, you will find the block properties that you can configure.
Here you can choose an icon for your block, add a category, and add keywords.
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.
Now, it’s time for you to add some fields to your block. You can add different types of fields like text, numbers, email addresses, URLs, colors, images, checkboxes, radio buttons, and more.
We will add 3 fields to our custom Testimonials block: an image field for the photo of the reviewer, a textbox for the reviewer name, and a text area field for the testimonial text.
Just click on the ‘+’ button to insert the first field.
This will open up some options for the field in the right column. 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 ‘Reviewer Image’.
Field Name: The field name will be generated automatically based on the field label. We will 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 will pick ‘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 are creating this block for your personal use but may be helpful for multi-author blogs.
You may also see some additional options based on the field type you choose. For example, if you select a text field, then you will get extra options like placeholder text and character limit.
Following the above process, let’s add 2 other fields for our Testimonials block by clicking the ‘+’ button.
In case you want to reorder the fields, then you can do that by dragging them using the handle on the left side of each field label. To edit or delete a particular field, you need to click the field label and edit the options in the right column.
Once you are done, just click on the ‘Publish’ button on the right side of the page to save your custom Gutenberg block.
Step 2: Create a Custom Block Template
Although you created the custom WordPress block in the last step, it won’t work until you create a block template.
The block template determines exactly how the information entered into the block is displayed on your website. You get to decide how it looks by using HTML and CSS, or even PHP code if you need to run functions or do other advanced things with the data.
There are two ways to create a block template. If your block output is in HTML/CSS, then you can use the built-in template editor.
On the other hand, if your block output requires some PHP to run in the background, then you will need to manually create a block template file and upload it to your theme folder.
Method 1: Using Built-in Template Editor
On the custom block edit screen, simply switch to the ‘Template Editor’ tab and enter your HTML under the markup tab.
You can write your HTML and use double curly brackets to insert block field values.
For instance, we used the following HTML for the sample block we created above:
This method is recommended if you need to use PHP to interact with your custom block fields. You will basically need to upload the editor template directly to your theme.
First, you need to create a folder on your computer and name it using your custom block name slug.
For instance, our demo block is called Testimonials, so we will create a testimonials folder.
Next, you need to create a file called block.php using a plain text editor. This is where you will put the HTML / PHP part of your block template.
Here is the sample template we used for our example:
Now you may have noticed how we used the block_field() function to fetch data from a block field.
We have wrapped our block fields in the HTML we want to use to display the block. We have also added CSS classes so that we can style the block properly.
Don’t forget to save the file inside the folder you created earlier.
Next, you need to create another file using the plain text editor on your computer and save it as block.css inside the folder you created.
We will use this file to add CSS needed to style our block display. Here is the sample CSS we used for this example:
Your block template folder will now have two template files inside it.
After that, you need to upload your block folder to your website using an FTP client or the File Manager app inside your WordPress hosting account’s control panel.
Once connected, navigate to the /wp-content/themes/your-current-theme/ folder.
If your theme folder doesn’t have a folder named ‘blocks’, then go ahead and create a new directory and call it blocks.
Next, you have to upload the folder you created on your computer to the blocks folder.
That’s all! You have successfully created manual template files for your custom block.
Step 3: Preview Your Custom Block
Before you can preview your HTML/CSS, you will need to provide some test data that can be used to display a sample output.
Inside the WordPress admin area, edit your block and switch to the ‘Editor Preview’ tab. Here, you need to enter some dummy data.
This data won’t be a part of your custom block and will only be used for previewing the changes you made using HTML and CSS.
Once you have added the data, don’t forget to click on the ‘Update’ button to save your changes.
If you don’t click the ‘Update’ button, then you won’t be able to see the preview of your custom block.
You can now switch to the ‘Front-end Preview’ tab to see how your block will look on the front end of your WordPress website.
If everything looks good to you, then you can update your block again to save any unsaved changes.
Step 4: Using Your Custom Block in WordPress
You can now use your custom block in WordPress like you would any other block.
Simply edit any post or page where you want to use this block. Then, click the ‘+’ button in the top left corner to open up the block menu.
From here, find your block by typing in its name or keywords and then add it to the page/post.
After you insert the custom block into the content area, you will see the block fields you created earlier.
You can fill out the block fields as needed.
As you move away from the custom WordPress block to another one, the editor will automatically show a live preview of your block.
You can now save your post and page and preview it to see your custom block in action on your website.
Here’s how the Testimonials block looks on our test site.
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.
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.
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.
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.
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.
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.
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.
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.
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.
And, below is how one of the best page builders, Beaver Builder, looks like when you’re editing a page:
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.
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.
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.
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.
However, the better option is to use the WPForms Gutenberg block directly instead of pasting the form shortcode in the Shortcode block.
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.
