Tag: block editor

Whatâ€™s Coming in WordPress 6.4 (Features and Screenshots)
WordPress 6.4 beta was released recently. We have been closely monitoring the development and testing it out.

It will be the third major release of 2023 and will ship with significant new features, bug fixes, and performance improvements.

In this article, we’ll show you what’s coming in WordPress 6.4 with details and screenshots.

Here is a quick overview of changes coming in WordPress 6.4:
Note: Using the WordPress Beta Tester plugin, you can try out the beta version on your computer or a staging environment. Please keep in mind that some of the features in the beta may not make it into the final release.

Twenty Twenty-Four Is The New Default Theme

It is a WordPress tradition to add a new default theme each year. Usually, it comes with the last release of the year.

WordPress 6.4 will ship with Twenty Twenty-Four, as the new default theme.

Keeping up the design philosophy of the previous default theme (Twenty Twenty-Three), the new theme will feature a minimalist layout out of the box.

However, don’t let its minimalist appearance deceive you. This powerful theme is packed with features.

It is made to work well with the Site Editor and ships with 6 style variations to choose from.

It also includes dozens of WordPress block patterns to use with the site editor or when writing posts and pages.

These patterns include several section patterns that help you quickly add entire sections to your pages or templates.

It also ships with four fonts that you can use when working on your site. This brings us to the next exciting feature expected to be released in 6.4, the Font Library.

Manage Fonts Across Your Website with Font Library

WordPress 6.4 will include the new Font Library feature. This will allow users to manage fonts used in their WordPress theme and across their website.

Users will be able to view the Font Library under the Styles panel in the site editor. They will also be able to add or remove fonts to their website.

Clicking on the Fonts icon on the panel will bring up the Font Library.

From here, you can upload fonts directly from your computer.

Want to use Google Fonts locally? Font Library will allow users to download and install Google Fonts on their WordPress website.

This will connect to Google servers only once to download the font files. After that, fonts will be served from your own servers.

Enlarge Images with Lightbox Popup

Want to open your WordPress images in a lightbox popup?

WordPress 6.4 will allow users to enable lightbox popups for images in their posts and pages.

After adding an image, you can toggle the Expand on Click option under the block settings to open it in a lightbox popup.

This simple image popup will let your users enlarge images without leaving a page.

It is still very basic and in the early stages of development. For instance, for the Gallery block, you’ll have to set it for each individual image instead of the whole gallery.

If you need a better user experience with beautiful image galleries, we recommend using Envira Gallery or NextGen.

These are the best WordPress photo gallery plugins for photographers and portfolio websites with beautiful lightbox popups, animations, slideshows, gallery styles, and more.

Improved Command Palette

WordPress 6.3 came with a new command palette tool, which allowed users to quickly type in commands using the keyboard shortcut CTRL+K.

WordPress 6.4 will come with several improvements to the tool and new keyboard shortcuts. First, there is a subtle design update, which makes elements slightly darker.

Secondly, there are new commands and actions introduced to work with blocks. You can duplicate, transform, delete, or insert blocks from the command palette.

For instance, you can now select multiple blocks and transform them using the command palette.

Block Editor Enhancements

This release primarily focuses on improving and extending existing site and block editor features. The groundwork for phase 3 of the Gutenberg project has begun, which will focus more on collaboration.

WordPress 6.4 will merge several Gutenberg (the project name for the block editor) releases into the core. Each one of them includes several new features and enhancements.

Following are some of the more noticeable enhancements in Block Editor.

Block Hooks

WordPress 6.4 will bring Block Hooks functionality for developers. This would allow plugins to automatically add blocks upon activation.

Named after hooks used in WordPress core, block hooks will enable plugin developers to interact with the block editor and extend blocks without touching them.

For instance, a membership plugin can now add a login button in the navigation menu.

The block panel will show you which blocks are added by plugins and you will be able to turn them off/on.

Background Images for Group Block

Grouping blocks is the easiest way to create different sections of a layout in the post or full site editor.

Previously, users were only able to select background and text colors for the entire group block. WordPress 6.4 will also allow you to set a background image.

Improved Toolbars for Parent / Child Blocks

When working with blocks that have child blocks, the toolbar kept moving and changing as you moved around blocks.

This didn’t produce an ideal user experience for blocks like Navigation, List, and Quote.

WordPress 6.4 will now automatically attach the child toolbar to the parent and create a consistent user experience as you move around the inner blocks.

The Outline / List View Revamped

The List view shows you a quick outline of your page or post layout in site/block editor.

WordPress 6.4 will improve the list view by adding some cool new features.

First, you can now rename Group blocks in the list view. This would help you identify what each group block does and will make your layouts more readable.

It will also show previews for images and gallery blocks.

This is immensely helpful and makes the outline view a much more useful tool than ever before. Previously it just said ‘Image ‘and you had to click to select the block and view which image is there.

Improved Pattern Management

In the previous WordPress release, Reusable Blocks were merged into Patterns, and a new pattern management screen was added to the site editor.

WordPress 6.4 will come with improvements to the pattern management in site editor.

You will now be able to add pattern categories when creating a new pattern.

The Pattern creation modal will look the same across WordPress.

Inside the Site Editor, the Patterns tab will now show your patterns organized in categories.

Open in New Tab in Link Preview

In the previous WordPress release, the link preview control (the popup that appears when you add a link in WordPress) moved the option to ‘Open in new tab’ under the Advanced toggle.

This meant that users were required a few extra clicks to open a link in a new tab.

Based on user feedback a new checkbox is added in the link preview modal allowing users to easily open a link in a new tab.

Under The Hood Changes

WordPress 6.4 also includes several changes intended for developers. Here are some of the most significant under-the-hood changes.
- TEMPLATEPATH and STYLESHEETPATH constants are deprecated. (#18298)
- Framework to add revisions for post meta in WordPress. (#20564)
- Theme developers can configure their own default min and max viewport widths for calculating fluid font sizes. (#59048)
- A block hook field is added to block types. (#59346)
We hope this article helped you discover whatâ€™s new in WordPress 6.4 and which new features to try out. We are particularly excited about all the changes to the site editor.

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 Whatâ€™s Coming in WordPress 6.4 (Features and Screenshots) first appeared on WPBeginner.
03.10.2023
How to Use Distraction Free Fullscreen Editor in WordPress
Do you want to use the distraction-free fullscreen editor in WordPress?

WordPress comes with a built-in distraction-free mode for writers. This feature hides unnecessary elements and gives you a fullscreen canvas to create content.

In this article, we will show you how to easily use the distraction-free fullscreen editor in WordPress.

Why Use the Distraction-Free Fullscreen Editor in WordPress?

Writing your blog posts is a creative process that requires attention to detail and concentration. However, many writers feel distracted by the on-screen elements of the WordPress writing interface, like buttons, columns, toolbars, and more.

When writing a post on your WordPress website, you can use the default distraction-free, spotlight, and fullscreen modes in the block editor for a clutter-free and clean writing interface.

Using these features can help you focus on your writing and improve productivity by removing distractions like the block panel, block menu, WordPress admin sidebar, and more.

As a writer, this can make the writing process a lot more enjoyable and relaxing for you.

That being said, let’s see how to easily use the distraction-free fullscreen editor in WordPress. We will cover methods for both the block and classic editor and you can use the quick links below to jump to the method you want to use:
How to Use the Distraction Free Fullscreen Editor in WordPress Block Editor

If you use the WordPress block editor to write your posts, then you can easily turn on the distraction-free mode by opening up a new or existing post in the editor.

Once you are there, simply click on the three dots icon on the top right corner of the screen.

This will open a prompt where you will notice that the fullscreen mode is already enabled by default.

If you uncheck this option, then the WordPress admin sidebar will be shown on the left side of the content editor.

However, we recommend leaving this setting as it is.

You can also enable the distraction-free mode by clicking on the three dots at the top.

Next, check the ‘Distraction free’ option from the dropdown menu.

Once you do that, the block panel settings on the right and the block menu settings on the left will automatically disappear from the screen.

You will now have a completely clean canvas to start writing your post.

When you are done writing and want to exit the distraction-free mode, you can also do that by simply hovering your mouse at the top.

This will display the menu at the top of the block editor, where you can click on the three-dot icon to open the dropdown menu. Then, deselect the ‘Distraction free’ option.

Now that you have learned how to enable the fullscreen and distraction-free modes in the WordPress Gutenberg editor, it’s time to activate Spotlight mode.

This mode only highlights the current block that you are working on and dims all other blocks. This allows you to easily focus on one block at a time.

To activate Spotlight mode, simply click the three-dot icon at the top right corner of the screen and select the ‘Spotlight mode’ option.

Once you do that, only the block that you are currently working on will be highlighted on the screen, while the rest will fade in the background.

For example, if you are writing a blog post and currently adding some screenshots or images, then only the Image block will be highlighted on the screen, while the Paragraph blocks will fade out.

You can now write your blog post without distractions in the WordPress block editor.

However, keep in mind that there is a toolbar that you will still see on the screen in distraction-free mode. This toolbar allows you to add new blocks, undo changes, and show an outline of your article.

Once you are done, don’t forget to click the ‘Publish’ or ‘Update’ button to store your settings.

Now, the distraction-free settings that you have configured will automatically be implemented for all the posts and pages that you edit in the block editor.

How to Use the Distraction Free Fullscreen Editor in WordPress Classic Editor

If you are still using the old WordPress classic editor, then you can use this method to activate the distraction-free, fullscreen editor.

To do this, just open a new or existing post of your liking in the classic editor.

Then, click on the â€˜Distraction-free writing modeâ€™ button in your post menu bar.

WordPress will now convert the screen into a clutter-free, fullscreen editor.

The fullscreen editor has a minimalist layout. It has a menu bar on top of the screen with text formatting options and even lets you easily switch between the visual and text editors.

However, the fullscreen editor does not have a Publish button or any meta boxes to choose categories and tags.

Once you are done, you can easily exit the distraction-free mode by hovering your mouse on the left or right side of the screen.

On doing that, all the hidden settings and the WordPress dashboard will become visible.

Now, simply click the ‘Update’ or ‘Publish’ button to store your post settings.

Bonus Tips for Using the WordPress Block Editor

Other than enabling the distraction-free mode, you can also use some other features in the block editor to improve your productivity.

You can use keyboard shortcuts to create content more quickly. For example, simply type / into the content editor, followed by the name of the block you want to use.

The block editor will then show you blocks that you can insert straight into your content by clicking on them.

You can also use the reusable blocks feature to save any content block and reuse it in other posts and pages on your website.

This can save you lots of time and effort.

To become a complete pro at using the block editor, you can see our complete Gutenberg tutorial.

We hope this article helped you learn how to use the distraction-free fullscreen editor in WordPress. You may also want to see our beginner’s guide on how to check grammar and spelling mistakes in WordPress and our expert picks for the best Gutenberg blocks plugins for 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.

The post How to Use Distraction Free Fullscreen Editor in WordPress first appeared on WPBeginner.
02.10.2023
How to Add Affiliate Disclosure for Each Blog Post Automatically
Do you want to add an affiliate disclosure for each blog post automatically?

Affiliate marketing is one of the easiest ways to make money online. However, if you donâ€™t disclose your affiliate links then you could end up in legal trouble.

In this article, we will show you how you can add an affiliate disclosure to all your WordPress blog posts.

Why Add an Affiliate Disclosure to Each WordPress Blog Post?

With affiliate marketing, you earn a commission every time someone clicks a referral link and makes a purchase. It’s a great way to make money online blogging with WordPress.

However, you must make it clear that your links are paid advertisements by adding an affiliate disclaimer. That just means posting a short notice explaining what affiliate marketing is, and that you get money from talking about the product or service.

Many countries have laws about failing to disclose paid endorsements. For example in the United States, you might get a fine from the Federal Trade Commission. You may even end up banned from reputable networks such as Amazon affiliates.

Even if you donâ€™t get into legal trouble, customers who click on undisclosed affiliate links may feel tricked and stop visiting your WordPress website.

How to Add an Affiliate Disclosure to Each WordPress Blog Post

One option is to publish the affiliate disclaimer on its own page, as we do on WPBeginner.

You can then add a link to every page that features an affiliate URL. This may be a good choice if you have a longer disclosure and donâ€™t want to distract from the postâ€™s content.

If yours is short, then you can often add the full text of the disclaimer to every post.

No matter which option you choose, you can save time and effort by adding the affiliate disclosure automatically. Simply use the quick links below to jump straight to the method you want to use.
Method 1. Add Affiliate Disclosure Using Pretty Links

Pretty Links is one of the best affiliate marketing plugins that can automate all your affiliate activities, including adding a disclosure.

Pretty Links comes with an advanced auto-linking feature that allows you to enter the keywords or phrases that you want to turn into affiliate URLs.

Every time you type this word or phrase, Pretty Links will turn it into an affiliate URL automatically. Even better, if you have created a disclosure notice page, Pretty Links can also add a link to it in the post.

For example, if you add â€œMacBook Proâ€ as a keyword and then use that phrase in a new post, then Pretty Links will automatically turn â€œMacBook Proâ€ into an affiliate URL and add a link to your disclosure notice page.

Note: Pretty Links wonâ€™t insert the disclosure link if you only add affiliate URLs manually. It only works when a post uses automatic keyword linking.

To get started, youâ€™ll need to install and activate Pretty Links. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, go to Pretty Links Â» Activate. You can then add your license key to the following field: ‘Enter Your Pretty Links Pro License Key.’

You can find this information under your account on the Pretty Links website. After typing in this information, click on the ‘Activate’ button.

With that done, you’ll need to go to Pretty Links Â» Add New and then add the first link you want to manage using the Pretty Links plugin.

For detailed step-by-step instructions, please see our guide on how to cloak affiliate links on your WordPress site.

After that, click on the ‘Pro’ tab. In the ‘Keywords’ field, type in each word or phrase where you want to automatically insert this affiliate URL.

Simply repeat this process for all your affiliate links.

Every time it adds this affiliate URL, Pretty Links will also add a link to your disclosure notice.

The next step is creating the disclosure notice page that Pretty Links will link to. Simply go to Pages Â» Add New. You can then type in your affiliate disclaimer and add any categories or tags that you want to use.

When youâ€™re happy with your disclaimer, publish the page to make it live. Itâ€™s a good idea to make a note of the pageâ€™s URL, as youâ€™ll need it in the next step.

Once youâ€™ve done that, simply go to Pretty Links Â» Options. Then, click on the â€˜Replacementsâ€™ tab.

Here, check the â€˜Enable Replacementsâ€™ box if it isnâ€™t already selected.

After that, check the â€˜Link to Disclosuresâ€™ box. In the â€˜URLâ€™ box, go ahead and enter your affiliate disclosure URL.

By default, Pretty Links will use â€˜Affiliate Link Disclosuresâ€™ as your linkâ€™s text. However, you can change this to anything you want by typing into the â€˜Textâ€™ field.

You can also change where Pretty Links adds the affiliate disclaimer link. By default, it shows the URL at the bottom of the post, so it doesn’t distract visitors from the postâ€™s content.

Another option is to add the disclaimer to the top of the post. This is where we include it on WPBeginner.

This lets visitors know the post contains an affiliate link before they start reading, which is a good way to build trust with your audience. However, some people may see the disclaimer and decide not to stay on the page, which can increase your bounce rate.

You can also add the disclaimer to both the top and bottom of each post. This may be a good idea if you write very long posts, but most sites don’t need multiple disclosures per page.

To place the affiliate URL, simply open the â€˜Positionâ€™ dropdown and choose Bottom, Top, or Top and Bottom.

Once youâ€™ve done that, just scroll to the bottom of the page.

Then, click on the â€˜Updateâ€™ button.

Now, Pretty Links will add an affiliate disclosure link every time it auto-inserts an affiliate URL to your posts, pages, or custom post types.

Method 2. Add Affiliate Disclosure Using WPCode (More Customizable)

Sometimes you may want to add the affiliate disclosure to different areas of every blog post. For example, you might show the disclosure after you mention each affiliate product for the first time.

In this case, you can create a shortcode that adds your affiliate disclaimer. This gives you complete control over where the disclosure appears, without you having to type the entire text every single time.

The easiest way to create a custom shortcode is using WPCode. This plugin lets you add code snippets to WordPress without editing your themeâ€™s functions.php file.

WPCode also helps you avoid common errors by performing smart code snippet validation.

There are lots of ways to add an affiliate disclosure using WPCode. Besides the shortcode method, we’ll also share an easy way to automatically add the disclaimer to every post, page, or custom post type.

The first thing you need to do is install and activate the free WPCode plugin on your website. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, go to Code Snippets Â» Add Snippet.

This will bring you to the â€˜Add Snippetâ€™ page where you can see all the ready-made snippets that you can use on your site.

Since we want to add custom code in WordPress, hover your mouse over â€˜Add Your Custom Code (New Snippet).â€™ Then, click on â€˜Use snippetâ€™ when it appears.

To start, enter a title for the custom code snippet.

This could be anything that helps you identify the snippet in the WordPress admin area.

Weâ€™re going to add a PHP snippet, so open the â€˜Code Typeâ€™ dropdown and choose the â€˜PHP Snippet’ option.

You can then go ahead and paste the following code into the code box:
```
function disclosure() {
    return "<p class='disclosure'>This site may contain links to affiliate websites, and we receive an affiliate commission for any purchases made by you on the affiliate website using such links.</p>";
}

add_shortcode( 'disclosure', 'disclosure' );
```
Hosted with â¤ï¸ by WPCode

1-click Use in WordPress
You can use any text as your affiliate disclaimer, simply by editing the code above. For example, you might want to add a link in HTML to your affiliate disclosure page.

Once youâ€™ve done that, scroll to the â€˜Insertionâ€™ section and make sure â€˜Auto Insertâ€™ is selected.

Then, open the â€˜Locationâ€™ dropdown and choose â€˜Frontend Onlyâ€™ since we only want to use this code on our siteâ€™s frontend, which is what visitors see when they visit your site.

You can also organize your snippets by adding tags.

When youâ€™re happy with how the snippet is set up, scroll to the top of the screen and click on â€˜Save Snippet.â€™

After that, you can make the code snippet live by clicking the â€˜Activeâ€™ toggle.

Finally, donâ€™t forget to save the change by clicking on â€˜Update.â€™

Now you can add the affiliate disclosure to any page, post, or custom post type using the [disclosure] shortcode. For more details on how to place the shortcode, you can see our guide on how to add a shortcode in WordPress.

How to Automatically Display the Affiliate Disclosure with WPCode

With WPCode, there are lots of different ways to add an affiliate disclosure to your WordPress website, including automatically adding it to every post.

This can save you a lot of time and effort, since you don’t need to add the shortcode manually. However, the disclosure will appear in the same location on every page.

To automatically add the disclaimer, simply create a new custom code snippet by following the same process described above. However, this time open the ‘Code Type’ dropdown and select ‘HTML Snippet.’

You can now add your disclaimer in the code editor, complete with the formatting that you want to use. For example, here we’re adding a simple disclaimer as a new paragraph:
```
<p>This site may contain links to affiliate websites, and we receive an affiliate commission for any purchases made by you on the affiliate website using such links.</p>
```
Hosted with â¤ï¸ by WPCode

1-click Use in WordPress
Next, scroll to the ‘Insertion’ section and open the ‘Location’ dropdown.

You can now choose where this disclaimer should appear, such as ‘Insert After Post’ or ‘Insert Before Content.’

You can then go ahead and enable the snippet by following the same process described above. WPCode will now automatically show the disclaimer on every page, post, and custom post type, without you having to add the shortcode manually.

Method 3. Add Affiliate Disclosure Using Full-Site Editor (Block-Enabled Themes Only)

If you’re using a block-based theme like Hestia Pro, then you can add an affiliate disclosure to your themeâ€™s blog post template.

This is a good choice if you want to show the exact same disclosure on every blog post. However, you wonâ€™t have the option to change the style or text on individual posts, so itâ€™s not a good choice if you want to show different information on different pages.

To use this method, go to Themes Â» Editor in the WordPress dashboard.

By default, the full-site editor will show your themeâ€™s home template, so youâ€™ll typically want to select a new template.

If you want to show the affiliate disclosure across your entire website, then we recommend adding it to the footer template part.

However, if you just want to show the disclaimer on your blog posts, then click on Templates on the left-hand side of the screen in the Design section.

The editor will now show all the layouts that make up your WordPress theme.

Simply click go ahead and click on â€˜Single.â€™

WordPress will now show a preview of the template.

To edit this template, go ahead and click on the small pencil icon.

With that done, click on the blue â€˜+â€™ icon in the top left corner.

In the search bar that appears, type in â€˜Paragraphâ€™ to find the right block.

You can now drag and drop the block onto the area where you want to show the disclaimer.

Now, click on the block and type in your affiliate disclaimer.

You may also want to change how the disclaimer looks.

To change the font size, background color, and more, simply click to select the paragraph block. Then, select the â€˜Blockâ€™ tab in the right-hand menu.

You can now change the background color and text color, or make the disclaimer bigger or smaller using the settings in the right-hand menu.

When youâ€™re happy with how the disclaimer looks, click on the â€˜Saveâ€™ button.

Now, if you visit any blog post on your affiliate website, youâ€™ll see the disclaimer in action.

We hope this article helped you learn how to add affiliate disclosures for each blog post automatically. You can also go through our guide on the best giveaway and contest plugins and how to create an email newsletter the RIGHT way.

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 Add Affiliate Disclosure for Each Blog Post Automatically first appeared on WPBeginner.
28.07.2023
How to Add Multi-Column Content in WordPress Posts (No HTML Required)
Do you want to add multi-column content to your WordPress posts?

Columns can be used to create engaging layouts for your posts and pages. They make it easier for you to organize your content. They can also improve readability as your website visitors quickly scan the text.

In this article, we will show you how to easily add multi-column content to your WordPress posts without writing any HTML code.

Why Add Multi-Column Content in WordPress?

Traditional print media, like newspapers and magazines, have been using multi-column layouts since the very early days of printing.

Their goal was to make it easier for users to read the smaller text while utilizing the available space economically.

Single-column layouts are more commonly used on the web. However, multi-column grids are still useful for highlighting content and making it easier to scan and read.

For example, if you run a magazine website, then you can use a multi-column layout to organize your content. It will give it the same feel as you would find in a physical magazine.

Organizing your content in multiple columns is also helpful if you are publishing comparisons, research papers, and other interactive content on your WordPress website. It helps improve readability and boost engagement.

That said, let’s see how you can add multi-column content in the block and classic editor. You can simply click the links below to jump ahead to the method you want to use:
- Adding Multi-Column Content in WordPress Block Editor â€“ The Easy Way
- Adding Multiple Columns in Old WordPress Classic Editor
Adding Multi-Column Content in WordPress Block Editor â€“ The Easy Way

Creating multi-column content, also known as grid column content in WordPress, is now easy because it is a default feature. The WordPress Block Editor includes a Columns block.

To add a multi-column layout, you need to create a new post or edit an existing one. Once you are in the content editor, click on the ‘+’ icon at the top to add a block.

Next, you need to select the Columns block in the ‘Design’ tab.

Next, you will need to select the number of columns and layouts you would like to use for your blog post.

WordPress will show you different options to choose from. For example, you can pick a 50/50 column layout, use a 33/66 layout, and more.

After choosing a layout, you can add blocks to your columns. The Columns block allows you to add blocks inside each column.

For example, you can select the Paragraph block and add content to it.

You will also be able to see the block settings in the right column of the post-edit screen in the settings panel. Here, you can edit the width of the columns.

In addition to the text, you can also add images and embed videos in WordPress columns.

Simply take the mouse to one of the columns, and click the ‘+’ button to add a block. You can also add a block by typing ‘/’ and then the block name.

For example, we added an image in one column and some text in the other column.

Adding Multiple Columns in Old WordPress Classic Editor

If you haven’t upgraded your WordPress to Gutenberg and are still using the Classic Editor, then you will need to install a separate plugin for creating a grid column layout.

First, install and activate the Column Shortcodes plugin. For detailed instructions, follow our step-by-step guide on how to install a plugin in WordPress.

Upon activation, you can create a new post or edit an old one. Once you are in the classic editor, simply click on the ‘[ ]’ button in the toolbar.

The plugin will now show you a list of column shortcodes for your blog post.

You can choose any layout you would like to add to your WordPress blog. There are also options to edit the column padding.

Once you have selected a shortcode, it will automatically appear in the classic editor. For instance, we picked the ‘one half’ shortcode for this tutorial.

You can then enter your content between the shortcodes.

Next, you can click the shortcode icon ‘[ ]’ again to add another column shortcode.

Let’s add the ‘one half (last)’ shortcode to show two columns next to each other. From here, you just need to add your content to the other column.

After that, you can preview your post and publish it.

Here’s how it looked on our test site.

We hope this article helped you learn how to add multi-column content in WordPress posts and pages. You may also want to see our simple guide to WordPress SEO and our expert picks for the must-have WordPress plugins for business sites.

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 Add Multi-Column Content in WordPress Posts (No HTML Required) first appeared on WPBeginner.
30.06.2023
Ultimate Design Control Using Kadence Blocks 3.0

What if you could have more control over your site design using the native WordPress editor? In this article, Iâ€™ll show how you can design great-looking content using Kadence Blocks.

The post “Ultimate Design Control Using Kadence Blocks 3.0” first appeared on WP Mayor.

08.05.2023
How to Easily Add Bullet Points & Numbered Lists in WordPress
Do you want to add bullet points and numbered lists in WordPress?

Adding lists to your content helps improve readability of your site. They’re also a great way to share step-by-step instructions or complicated data with your visitors. Sometimes search engines can even give higher ranking to pages that use lists in their content.

In this article, we will show you how to easily add bullet points and numbered lists in WordPress with custom styles.

Why Add Bullet Points and Numbered Lists in WordPress?

Instead of showing visitors a wall of text, we believe it’s a best practice to break your content into scannable sections. There are lots of ways to make your pages more reader-friendly including creating tables, using subheadings, adding videos, and creating lists.

A list can help visitors understand your content at a glance, even if you’re sharing complicated information or lots of data. This can improve the user experience and keep people on your website for longer.

They’re also ideal for creating to-do lists or sharing step-by-step instructions with your visitors. For example, you might turn a recipe into a numbered list on your food blog.

With that in mind, let’s see how you can add bullet points and numbered lists in WordPress. Simply use the quick links below to jump straight to the method you want to use.
Method 1. Using the Built-in WordPress List Block (Easy)

The easiest way to add bullet points and numbered lists is by using the built-in List block and WordPress block editor.

This allows you to create simple lists without installing a separate WordPress plugin, although the default block only has a few customization options.

If you want to fine-tune every part of your lists with custom icons, horizontal layouts, different colors, and more, then we recommend using one of the other methods in this article.

To get started, simply open the post or page where you want to add a list. You can then choose whether to create a bullet point or numbered list.

How to Create a Bullet Point List in WordPress

To create a bullet point list, click on the â€˜+â€™ icon to add a new block.

In the popup that appears, type in â€˜List.â€™

When the right block shows up, give it a click to add it to the page.

This creates the first item in a bullet point list. Simply type in the text you want to use for the first list item.

With that done, press the â€˜Enterâ€™ key on your keyboard to move to the next line. WordPress will automatically create the second bullet point.

You can now go ahead and type in the text you want to use for the second bullet point. Simply repeat these steps to add more items to the list.

If you want to create a nested list, then click the â€˜Indentâ€™ button. This moves the cursor one step to the right, ready for you to type in the indented text.

You can click on the â€˜Indentâ€™ button again, to create two levels of nested bullet points.

As you can see in the following image, each level uses a different icon.

To decrease the indent, click on the â€˜Outdentâ€™ button.

This moves the cursor one step to the left, ready for you to start typing.

By pressing the â€˜Indentâ€™ and â€˜Outdentâ€™ buttons, you can create nested lists with multiple different levels.

By default, WordPress will use the â€˜Mediumâ€™ font size but you can switch between small, large, and extra large using the â€˜Typographyâ€™ settings in the right-hand block options.

You can also add links, or use the standard text formatting options, such as bold and italic.

How to Create a Numbered List in WordPress

To create a numbered list in WordPress, simply press the â€˜1â€™ key on your keyboard followed by a full stop (.).

WordPress will automatically turn this text into the first item in a numbered list.

Youâ€™re now ready to type the first item in the numbered list.

After that, just press the â€˜Returnâ€™ key on your keyboard and WordPress will create the next numbered point automatically.

Just like with bullet points, you can create nested lists by clicking on the â€˜Indentâ€™ and â€˜Outdentâ€™ buttons.

This creates an indented bullet point, underneath the numbered bullet point.

Unlike bullet point lists, you can only use a single level of indenting.

When youâ€™re happy with how the list looks, simply click on the â€˜Updateâ€™ or â€˜Publishâ€™ button to make it live on your WordPress website.

Method 2. Using the Super List Block WordPress Plugin (Create Multimedia Lists)

The built-in List block is perfect for creating text-based lists, but sometimes you may want to include other content. For example, you might want to create a pricing table featuring images, text, and a call to action button.

The easiest way to do this is by using Super List Block. This free plugin adds a new block that allows you to use any WordPress block in your lists.

You can even create multimedia bullet points by adding multiple blocks to a single list item. In the following image, we’re using a Paragraph and Image block in each list item.

Super List Block also allows you to switch between vertical and horizontal list styles, and create â€˜no markerâ€™ lists that donâ€™t have a bullet point icon or a number.

First, youâ€™ll need to install and activate the Super List Block plugin. If you need help, then please see our beginner’s guide on how to install a WordPress plugin.

After that, head over to the page or post where you want to add a list. You can then click on the â€˜+â€™ icon and start typing in â€˜Super List.â€™

When the right block appears, give it a click.

This adds a new block with two default list items.

To start, you can switch between horizontal and vertical layouts using the arrows in the toolbar and in the left-hand menu.

You can also choose between a numbered or bullet point list using the icons under â€˜Change List Style.â€™

Another option is â€˜No Marker,â€™ which is a unique list style provided by the plugin.

When youâ€™re happy with how the list is configured, youâ€™re ready to create your first item.

Simply click on the â€˜+ button in the corner of the Super List block and choose the first block you want to add. Super List is compatible with all the default WordPress blocks, so you can add an image, heading, or any other block you want.

You can then style the block as normal. For example, you might upload an image, add a download link, or type in some text.

To add another block to the bullet point, simply press the â€˜Enterâ€™ key on your keyboard. This adds a new â€˜Type / to choose a blockâ€™ line underneath the first block.

You can now click on the â€˜+â€™ icon inside the list item and add another block following the same process described above.

When youâ€™re happy with how the first list item is set up, you can configure the second default item by following the same steps.

To add more bullet points, youâ€™ll need to select an entire list item. This can be a bit tricky, as youâ€™ll need to select the item as a whole, rather than the individual blocks within that list item.

When you see an â€˜+â€™ icon in the toolbar, you have the right item selected. With that done, simply go ahead and give the â€˜+â€™ button a click.

This adds a new, empty item to the list.

Simply keep repeating these steps to add more bullet points and blocks.

When youâ€™re happy with how the list looks, you can either click on the â€˜Updateâ€™ or â€˜Publishâ€™ button to make it live on your WordPress blog or website.

Method 3. Using a Page Builder Plugin (Best for Landing Pages)

If you want to create beautiful lists with custom styling, then you may want to use SeedProd.

This advanced drag & drop page builder plugin lets you create professionally-designed pages using a simple drag and drop editor. It also comes with a ready-made List block that lets you fine-tune every part of the list design, including changing the space in between individual items, replacing the standard bullet points with custom icons, and more.

SeedProd makes it easy to design standalone pages that have a unique design, so this is also a great choice if you want to add lists to a custom home page or landing page.

The first thing you need to do is install and activate SeedProd. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to enter your license key.

You can find this information under your account on the SeedProd website. After adding the license key, simply click on â€˜Verify Key.â€™

After that, go to SeedProd Â» Landing Pages and click on â€˜Add New Landing Page.â€™

On the next screen, youâ€™ll be asked to choose a template.

SeedProd comes with over 180 beautiful templates that are organized into different categories such as 404-page templates and custom WooCommerce â€˜thank youâ€™ pages.

Simply click on any tab to see the different templates within that category.

When you find a template you want to use, simply hover your mouse over it and then click the checkmark icon.

Weâ€™re using the â€˜Explosive Growth Webinarâ€™ template in all our images, but you can use any design you want.

Next, you need to give the page a title.

SeedProd will automatically create a URL based on the page title, but you can change this to anything you want. For example, adding relevant keywords to a URL often improves your WordPress SEO and helps the page appear in relevant search results.

To learn more, please see our guide on how to do keyword research for your WordPress blog.

When youâ€™re happy with the title and URL, click on â€˜Save and Start Editing the Page.â€™

This will load the SeedProd drag-and-drop page editor. On the right, youâ€™ll see a live preview of the page design, with some settings on the left.

SeedProd comes with lots of blocks that you can add to your design, including blocks that allow you to add social share buttons, videos, contact forms, and more. For more information, please see our guide on how to create a custom page in WordPress.

To add a list to your design, find the â€˜Listâ€™ block and drag it onto the page.

This adds a vertical list to your page with a placeholder â€˜Item 1.â€™

If you want to create a horizontal list instead, then click on the â€˜Advancedâ€™ tab and then select the â€˜Horizontalâ€™ button.

Youâ€™re now ready to start building your list by selecting the â€˜Contentâ€™ tab.

To replace the default text with your own messaging, click on â€˜Item 1â€™ in the left-hand menu.

You can now type your list item into the small text editor that appears.

Here, you can also apply any formatting you want to use, such as bold or italic.

By default, SeedProd uses a checkmark for each bullet point, but it has a built-in library of icon fonts, which includes 1400 Font Awesome icons that you can use instead.

To replace the checkmark, simply hover your mouse over it and then click on â€˜Icon Libraryâ€™ when it appears.

This opens a popup where you can choose the icon you want to use instead.

You can use different icons for individual bullet points within the list, so this is a great way to create more interesting and eye-catching lists.

To create more bullet points, simply click on the â€˜Add New Itemâ€™ button.

You can now add text and change the default icon by following the exact same process described above.

After adding all the items to your list, you can change the font size and alignment using the settings in the left-hand menu.

You can also increase or decrease the space between the individual list items using the â€˜Space Betweenâ€™ slider.

After that, you may want to change the color of the icons in the list. Even if youâ€™re using different icons, SeedProd will apply the same color to every item so the design will always look consistent.

To make this change, click on the â€˜Icon Colorâ€™ area and then choose a new color from the popup that appears.

With that done, you may want to click on â€˜Advancedâ€™ and look at some additional settings. Weâ€™ve already seen how you can switch between vertical and horizontal list layouts, but you can also change the text color and font.

To really make your list stand out, you can add a box shadow or CSS animation.

Most of the settings in the â€˜Advancedâ€™ tab are fairly self-explanatory so itâ€™s worth looking through them to see what different kinds of effects you can create.

That done, you can continue working on your page design by adding more blocks and then customizing them using the settings in the left-hand menu.

When youâ€™re happy with how the page looks, click the dropdown menu on the â€˜Saveâ€™ button and select â€˜Publish.â€™

You can now visit this page to see the list live on your online store or website.

Method 4. Add Bullet Points and Number Lists Using Code (Advanced)

You can also create lists using the built-in WordPress code editor and HTML.

This is more complicated so it isnâ€™t the best method for beginners. However, it does allow you to use more styles and formatting in the built-in List block. For example, you can quickly and easily add heading styles to list items, using tags like h1 and h2.

For more on this topic, see our guide on how to edit HTML in the WordPress code editor.

To get started, open the page or post where you want to show the list. Then, click on the three-dotted icon in the upper-right corner and select â€˜Code editor.â€™

The next steps will vary depending on whether you want to add a bullet point list, or a numbered list.

How to Create a Bullet Point List Using Code

To create a bullet point list, start by typing in the following:
```

<ul>
```
The ul stands for â€˜unordered list,â€™ which means the list doesnâ€™t have any numbers, and the wp:list tells WordPress that you’re creating a List block manually.

Next, press the â€˜Returnâ€™ key to move onto a new line and create your first list item:
```

<ul>

<li>Red</li>

```
Here, li stands for â€˜list item,â€™ and weâ€™re closing the line with /li.

You can repeat this process to create more list items. For example:
```

<ul>

<li>Red</li>



<li>Orange</li>



<li>Green</li>

```
When youâ€™ve finished, close the code block with another â€˜unordered listâ€™ flag:
```
</ul>

```
This gives us the following list code:
```

<ul>

<li>Red</li>



<li>Orange</li>



<li>Green</li>

</ul>

```
As you can see in the following image, this creates a very simple list, but you can customize it by adding other HTML such as heading tags.

How to Create a Numbered List Using Code

To create a numbered list, simply type in the following:
```

```
You can then type in ol which stands for ordered list:
```

<ol>
```
After that, add each list item by following the same process described above:
```

<ol>

<li>Red</li>

```
Finally, close the ordered list using an /ol tag and wp:list.
```

<ol>

<li>Red</li>



<li>Orange</li>



<li>Green </li>

</ol>

```
We hope this tutorial helped you learn how to add bullet points and numbered lists in WordPress. You may also want to learn how to make money online blogging, or check out our expert pick of the best WordPress contact form plugins.

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 Easily Add Bullet Points & Numbered Lists in WordPress first appeared on WPBeginner.
17.04.2023
How to Customize the Background Color of WordPress Block Editor
Do you want to change the background color of the WordPress block editor for admins?

Sometimes when working on a custom client project, you may want to change the Gutenberg editor background color in WordPress to match their brand colors.

In this article, we’ll show you how to easily customize the background color of the WordPress block editor for admin area.

Note: This guide covers changing the editor color in WordPress admin. If you’re looking to change the background color in WordPress front-end, then please see our tutorial on how to change background color in WordPress.

Why Change the Background Color of the Block Editor in WordPress?

You may want to change the background color of the WordPress block editor for a number of reasons.

For instance, most modern WordPress themes use the same background color for the block editor as the live website including Astra, OceanWP, GeneratePress, and more.

However, if your WordPress theme doesn’t use the same colors, then the appearance of your post inside the editor will look quite different from what your users will see on the live website.

Another reason for changing the background color could be personal preference.

For instance, by default, the block editor uses a plain white background. Some users may find it a bit stressful to look at the white screen for long hours. Eye strain can be a real issue for many people, and the default white background is not easy on the eyes.

That being said, let’s see how you can easily change the WordPress editor background color.

How to Change the WordPress Editor Background Color

You can easily change the WordPress editor background color by adding custom code to your theme’s functions.php file.

However, keep in mind that even the smallest error in the code can break your website and make it inaccessible. That’s why we recommend using the WPCode plugin. It’s the best WordPress code snippets plugin on the market and is the easiest and safest way to add custom code to your WordPress website.

First, you need to install and activate the free WPCode plugin. For more instructions, please see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Code Snippets Â» + Add Snippets page from the admin sidebar.

From here, you have to click on 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 your code snippet. This is just for you and can be anything that will help you identify the code.

Next, you need to choose ‘PHP Snippet’ as the ‘Code Type’ from the dropdown menu on the right.

After that, you need to copy and paste the following code into the ‘Code Preview’ box.
```
add_action( 'admin_footer', function() {
	?>
	<style>
		.editor-styles-wrapper {
			background-color: #bee0ec;
		}
	</style>
	<?php
});
```
Next, you need to look for the following code in the PHP snippet you just pasted.
```
background-color: #bee0ec;
```
Then, you have to add the hex code of your preferred color next to the background color option. If you don’t want to use a hex code, you can use some basic color names such as ‘white’ or ‘blue’ instead.

After that, you need to scroll down to the ‘Insertion’ section and choose the ‘Auto Insert’ option.

Next, you need to select the ‘Location’ of the code snippet as ‘Admin Only’ from the dropdown menu.

After that, you need to scroll back to the top of the page and toggle the ‘Inactive’ switch to ‘Active.’

Finally, don’t forget to click on the ‘Save Snippet’ button to save your changes.

Now, go visit the block editor from the admin sidebar.

This is how the block editor looked on our site after adding the CSS code snippet.

We hope this article helped you learn how to easily change the WordPress editor background color. You may also want to see our ultimate guide on 85+ time saving WordPress shortcuts, or take a look at our top picks for the best WordPress page builder plugins.

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 Customize the Background Color of WordPress Block Editor first appeared on WPBeginner.
10.04.2023
WordPress Widgets vs Blocks â€“ Whatâ€™s the Difference? (Explained)
Are you trying to understand the difference between WordPress widgets vs blocks?

WordPress widgets and blocks are both used to add dynamic content elements to posts, pages, sidebars, and templates. Widgets have been a core part of WordPress for 16 years, while blocks have only been a part of the platform since 2018. They serve similar functions, but they aren’t the same.

In this article, we’ll explain the difference between WordPress widgets and blocks, so you can learn how to use them properly.

Here is a quick overview of the topics we’ll cover in this article.
What are WordPress Widgets?

WordPress widgets are dynamic-content elements that you can add to widget-ready areas like sidebars.

Widgets were introduced in WordPress 2.2 (May 2007). The purpose was to provide users with an easy way to add customizable elements to their website without having to repeatedly insert the same element at the end of blog posts, for instance, or edit their WordPress theme files to create a sidebar and manually code in something like Google AdSense tracking codes.

Users could simply insert content or features using widgets that didn’t have to be part of their overall theme files or blog posts.

Widgets made it much easier for users to create their ideal WordPress blog, letting them easily add banner ads or email sign-up forms.

Gradually, almost all WordPress themes adapted widgets by adding widget-ready areas in their design and layouts. These were most often sidebars and footers.

The WordPress widget editor looked like this until WordPress 5.8 was released in 2021.

What are Blocks in WordPress?

Blocks are the elements that users can add to an area using the WordPress content editor. WordPress switched to this block-based content editor in WordPress 5.0.

You may also see it referred to as the Gutenberg editor, which was its development codename.

Blocks are very similar to widgets because each one handles a single element of the page or post. Unlike widgets, however, blocks were introduced only as part of the post and page editor, which means they could not be easily added to areas like the site footer or sidebar.

A block can be inserted into a post or page for any element, including a paragraph, an image, a gallery, a plugin-specific feature like email signups, or a video embed.

There are also blocks to add design layout elements like covers, patterns, tables, columns, groups, and more.

To learn more, see our complete WordPress block editor tutorial which shows how to use the default editor to create beautiful content layouts.

The Difference Between Widgets vs Blocks in WordPress

Until WordPress 5.8, the difference between widgets and blocks was quite obvious.

Users added widgets to their theme’s widget-ready areas. They were primarily used to display elements that were not post/page content. For instance, recent posts lists, important links, banner ads, forms, and more.

However, the difference between widgets and blocks has become quite blurry now.

Widgets are self-contained elements that can be used in widget-ready areas like sidebars on a WordPress website.

Blocks are also self-contained elements that you can access through the block editor. They can be used in posts and pages, as well as widget-ready areas. You can also use them in templates if your theme has enabled the full site editor.

Widgets were the first to allow developers to output other elements like contact forms, testimonials, social media feeds, and more.

However, the same can be achieved using blocks. Many of the top WordPress plugins now come with blocks that you can add anywhere.

For instance, WPForms comes with a contact form block that you can add anywhere to display a form.

Similarly, All in One SEO comes with blocks for the table of contents, HTML sitemap, breadcrumb navigation, and more.

The Block-Based Widget Editor

WordPress planned to adapt the block editor for editing all areas of your website including the widget-ready areas.

To make this happen, the new block-based widget editor was introduced in WordPress 5.8.

Users were now able to use blocks in widget-ready areas of their themes.

Widgets are still located under the Appearance Â» Widgets menu.

However, if you are using a block-based theme that doesn’t have any defined widget-ready areas, then you may not see it under there. You will see Appearance Â» Editor instead.

Many of the legacy WordPress widgets already have blocks that can do the same thing.

Click on the add new block button (+) and you will find a bunch of blocks categorized as Widgets.

These are still blocks, but they are just categorized as widgets so that users can understand that these blocks behave like legacy widgets.

However, if a user still needed to use a legacy widget that doesn’t have an alternative block, then they can do so by using the Legacy Widgets block.

If a WordPress plugin has a block that you can add to the posts and pages, you can now also use the same block in widget-ready areas.

Theme developers can also create custom blocks that users can add to different areas of their websites.

The Future of WordPress Widgets

WordPress is moving forward towards using a more intuitive and unified way to edit the content on a WordPress website.

This means that older widgets will no longer be available going forward. WordPress themes and plugin developers are already adapting and adding support for the block editor in their products.

However, many WordPress themes still use older widgets. Similarly, many WordPress plugins still use shortcodes and legacy widgets.

If you still need to use the old widgets, then you can disable block widgets in WordPress.

The simple way would be to do it by using the free WPCode plugin which allows you to customize WordPress without adding dozens of plugins.

It has a pre-made snippets that you can use to disable block widgets.

Alternatively, you can also use Classic Widgets plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, the plugin will simply replace the block-based widget editor with the older widget page.

Note: Classic Widgets plugin will only be supported until 2024. After then, the plugin will not be updated or maintained this is why we recommend using WPCode to future-proof your customization.

Blocks vs Widgets – Which One is Better?

We recommend users start using the new block-based widgets editor as soon as possible because that’s the direction WordPress development is heading.

It is easy to use, modern, and more flexible than the previous Widgets screen.

If a WordPress plugin or theme on your website doesn’t support block-based widgets, then you can reach out to the developer and ask them to convert their widgets into blocks.

If they don’t have plans to release an update, then you can easily find alternative plugins or themes to replace them.

We hope this article helped you understand the difference between WordPress widgets vs blocks. You may also want to see our pick of the best block plugins for WordPress or see our guide on the difference between the block editor vs page builders.

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 WordPress Widgets vs Blocks â€“ Whatâ€™s the Difference? (Explained) first appeared on WPBeginner.
23.03.2023
13 Common WordPress Block Editor Problems and How to Fix Them
Are you running into errors when using the WordPress block editor?

WordPress replaced the old classic editor in 2019 with a brand new content editor called Gutenberg. This new editor uses blocks to create content in WordPress. However, sometimes you may come across annoying issues when using it.

In this article, we’ll share how to fix the most common WordPress block editor problems, so you can improve your workflow.

What is WordPress Block Editor?

WordPress block editor, or Gutenberg, is a new content editor introduced in the WordPress 5.0 release. Since then, WordPress has improved the editor and added new features and functionalities.

It provides more customization features compared to the Classic Editor. You get different blocks to add different elements to your content and don’t have to edit code to change the appearance and style.

It tries to show how your blogs and pages will look in real time by mimicking the same font and colors of your WordPress theme.

For example, you can use an image block to add pictures to your blog posts. Plus, you get options like image style, size, alignment, and more using the block.

Besides that, many WordPress plugins add their blocks to the content editor. This makes it super easy to embed things like forms, social media feeds, and tables of content in just a few clicks.

That said, the block editor isn’t perfect. Like any other WordPress plugin, you may come across different errors or bugs. Here are a few common issues in the content editor. You can click the links below to see your preferred section.
1. Fix WordPress Block Editor Not Working Error

One of the most common issues users face is the ‘WordPress block editor not working.’

There are multiple reasons why this error occurs. For instance, it could be because of an old outdated theme, a faulty plugin, or other technical errors.

The WordPress block editor may also not work if you have a misconfigured setting on your site, like disabling the visual editor when creating a user profile.

You can check this by going to Users Â» Profile from your WordPress dashboard. From here, just ensure that the ‘Disable the visual editor when writing’ option is not selected.

If the problem still persists, then you can try deactivating all the plugins on your site. This should help rule out any conflicts a plugin might be causing and stop the block editor from working.

Another way to fix this is by updating your WordPress theme. An outdated theme can cause the block editor not working error. You can see our guide on how to update WordPress theme without losing data and customization.

2. WordPress Block Editor Keeps Crashing

Another common issue that some users face is the WordPress block editor would crash unexpectedly.

When it crashes, you would see a ‘The editor has encountered an unexpected error’ error message. WordPress would then show 3 options, including attempt recovery, copy post text, and copy error.

There could be multiple reasons for this issue. For instance, a plugin could break the block editor and show this error, or your WordPress version isn’t up to date.

You can fix this by deactivating all the plugins and reactivating them one by one. Another fix is to change your WordPress to a default theme, like Twenty Twenty-Two, and see if the problem persists.

If you’re still facing this issue after checking the WordPress plugins and theme, then try updating the WordPress version and clearing the WordPress cache.

3. Remove The Invalid JSON Error in the Content Editor

When you’re editing a blog post or page, a ‘The response is not a valid JSON response’ error may occur when you click the Update button in the block editor.

WordPress is in continuous communication with the website server in the background when you’re editing a post on your WordPress blog. This error is caused when WordPress fails to receive a response from the server or the response is not in the JSON format.

Here are a few reasons why you would get an invalid JSON error and how to fix them:
- Check WordPress URLs in Settings – You will need to ensure that the WordPress Address and Site Address in your site’s settings are correct. Simply go to the Settings Â» General page and check if the URLs are the same. The JSON error could be triggered if the Site Address is different.
- Fix Permalink Settings in WordPress – In WordPress, you can set up SEO-friendly URLs for your pages and posts. However, incorrect settings can make it hard for the block editor to get a valid JSON response. Just make sure to select the right permalink format.
- Check WordPress .htaccess File Settings – The .htaccess file is used as a configuration file in WordPress to manage SEO-friendly URLs (permalinks). Usually, WordPress will automatically regenerate and update it. However, incorrect settings or out-of-date .htaccess files can cause JSON errors.
- See REST API Debug Logs – The REST API is a set of techniques WordPress uses to communicate with your site’s server. A JSON error can also mean that REST API encountered an error. You can check this by viewing the REST API logs on the Site Health page in WordPress.
- Try Deactivating All The Plugins – A conflict between different WordPress plugins can also result in an invalid JSON error. Try deactivating all the plugins on your website and see if the error reoccurs.
- Switch to the Classic Editor – If you’re still unable to resolve the JSON error, then you can switch back to the Classic Editor in WordPress. The old content editor doesn’t rely on REST API to get a JSON response from the website server.
To learn more about each of these tips in detail, please see our guide on how to fix the invalid JSON error in WordPress.

4. Resolve Updating Failed / Publishing Failed Error

Another error you might see when updating or publishing a blog post or page in the WordPress block editor is: ‘Updating failed. You are probably offline.’

This issue occurs when WordPress REST API cannot communicate with the WordPress database.

If the block editor fails to send and receive requests from the WordPress hosting database, then different parts of your site won’t function. This includes the block editor.

The REST API may stop working if you’re not connected to the internet or have lost connectivity. To fix this issue, please make sure that your internet connection is working properly, and then try to update or publish your page.

Aside from that, you can go to Tools Â» Site Health from your WordPress dashboard and view the REST API logs. If there is an issue with REST API, then you will see it under the ‘recommended improvements’ section.

The error log will show what happened to the REST API and may give you clues about what might have caused the issue.

For information on fixing this issue, you can take a look at our guide on how to fix WordPress updating failed errors.

5. Add or Remove Blank Spaces between WordPress Blocks

When creating custom pages and posts using the WordPress block editor, you may notice too much or too little space between blocks.

Usually the spacing is controlled by your WordPress theme. However, there are options in the block editor that also let you control the layout of your page and offer a better user experience.

For instance, you can add a Spacer block to add blank spaces. Simply click the ‘+’ button and add the Spacer block anywhere in the content.

This way, you can add additional space between blocks.

WordPress also lets you adjust the size of the spacer block. You can make it bigger or smaller by dragging the block up or down.

If you want to remove extra blank space between blocks, then you will need to enter custom CSS into your WordPress theme or use a CSS plugin like CSS Hero.

The plugin lets you edit your website’s CSS without editing the code. It offers different spacing options that you can use to adjust the blank space between blocks.

You can also use SeedProd to create a custom page in WordPress and have full control over the design.

To learn more, please see our guide on how to add or remove blank space between WordPress blocks.

6. Copy and Paste Content without Formatting Issues

Have you ever noticed that when you copy and paste content from a desktop app or a web page into the block editor, you end up pasting unwanted formatting as well?

You’ll see that the font and colors of the pasted content don’t match your WordPress theme. This is very common if you’re using Microsoft Word or Google Docs to write the content and then enter it in the block editor.

Some simple tips for keeping the original formatting include using Word and Google Docs heading styles. This way, WordPress automatically picks the headline level when you paste the content into the block editor.

Besides that, you should check the HTML code of your page or post after pasting the content. In the WordPress content editor, you can select a block and then click the 3 vertical dots option. From the dropdown menu, simply select the ‘Edit as HTML’ option.

This way, you should be able to find any formatting errors, like incorrect bolds and italics, unwanted text, and more.

For more details, you can see our guide on how to copy and paste in WordPress without formatting issues.

7. Fix the Image Upload Issue in WordPress

Next, you might see an error when uploading images in the WordPress block editor. It is one of the most common image issues in WordPress.

The main reason for this error is due to incorrect file permissions. All your website files are stored on your web hosting service and require specific file and directory permissions to work.

If these permissions are incorrect, it can prevent WordPress from reading and uploading files onto the hosting server. As a result, you will notice that images will disappear from the media library when uploaded, or you may see an error that says:

â€˜Unable to create directory wp-content/uploads/2019/04. Is its parent directory writable by the server?â€™

To fix this issue, you’ll need to edit the file permissions. You can use an FTP client and access the /wp-content/ folder. From here, you can right-click the folder and change the file permissions.

Follow our step-by-step guide on how to fix image upload issue in WordPress for more information on this fix.

8. Fixing the HTTP Image Upload Error

Another issue you may encounter when uploading images in the WordPress block editor is the HTTP error.

WordPress will show a generic ‘HTTP’ error’ when you upload images in the Media Library and you won’t be able to see a preview of the picture.

There are several things that could cause this issue. The frustrating part is that the error message doesn’t give many clues to the actual cause.

To fix this, you can try a bunch of things. First, you can simply wait a few minutes and try reuploading the image. At times, your website server could encounter a problem like unusual traffic and low server resources.

Besides that, you can increase WordPress memory limit and prevent lack of memory from causing the HTTP error. Other things you can try include changing the image editor library used by WordPress and editing the .htaccess file.

Also, your login might have expired, and this error will sometimes go away by going to your login screen and entering your username and password again.

You can read about each of these tips in detail in our guide on how to fix the HTTP image upload error in WordPress.

9. Remove Missed Schedule Post Errors in WordPress

Did you know that WordPress offers a built-in option to schedule blog posts?

In the WordPress content editor, you can change the date and time for publishing your blog posts. However, sometimes your scheduled content may not get published at the set time.

The main reason for this error is due to the WordPress hosting environment or plugin conflicts. WordPress uses a technology called ‘cron’ to automatically publish your post at a later time.

If a plugin or the website hosting server is affecting the cron jobs, then it will lead to missed schedule post error in WordPress.

You can fix this issue by checking the timezone of your WordPress site. It is possible that your site’s timezone doesn’t match the timezone you’d like to use for scheduling your blogs.

Simply head to Settings Â» General from the WordPress admin panel and scroll down to the Timezone section.

You can also try to fix this issue by clearing the WordPress cache and increasing the WordPress memory limit.

Please see our guide on how to fix the missed scheduled post error in WordPress.

10. Fixing Alignment Issues in WordPress Block Editor

Another common WordPress block editor you might face is that your content and images may not be properly aligned.

For example, let’s say you added a bullet list to a blog post and center-aligned it. However, the list appears left-aligned in the block editor when editing the post. Similarly, a center-aligned image block may appear aligned to the left or right.

If you have the Gutenberg plugin installed and active on your WordPress site, then it can cause block alignment issues. We recommend that you deactivate the Gutenberg plugin and see if it resolves the problem.

Another solution is to add the following custom CSS code for the text you’d like to center-align:
```
.has-text-align-center {
text-align: center;
}
```
You can also see our guide on how to add and align images in the WordPress block editor.

11. Resolve Facebook Incorrect Thumbnail Issue

Have you ever noticed that when you share an article on Facebook, the post thumbnails are incorrect?

The problem can be caused by conflicting plugins, content delivery network (CDN) issues, or missing open graph meta tags for Facebook.

Now, this isn’t an issue that you will see in the WordPress block editor. However, you can specify an open graph image for Facebook using the content editor.

You can use the All in One SEO (AIOSEO) plugin to quickly fix the issue. It is the best SEO plugin for WordPress and helps you optimize your site for search engines and social media.

Upon activation, you will see an AIOSEO Settings meta box in the WordPress content editor. Simply head to the ‘Social’ tab.

Next, you can scroll down to the ‘Image Source’ section.

From the dropdown, you can select which image to show on Facebook and other social media sites when the article is shared.

You can follow our guide on how to fix Facebook incorrect thumbnail issue in WordPress and learn about other ways of resolving this issue.

12. Fixing Facebook and Instagram oEmbed Issues

Another social media-related block editor issue you will face is adding Facebook and Instagram content to WordPress.

In the past, you could easily embed posts from Instagram or Facebook in WordPress. However, Facebook has changed the way oEmbed works now.

You can no longer embed videos, images, updates, and other content in WordPress. It will instead show a plain URL of the content.

You can easily fix this issue using a social media WordPress plugin like Smash Balloon. It helps you embed content from Facebook and Instagram easily using oEmbed, and you can also show social media feeds on your website.

For more details, please see our guide on how to fix the Facebook and Instagram oEmbed issues in WordPress.

13. Unable to See Embedded Content Preview in Block Editor

This is an issue that was raised in WordPress 5.7 version. Whenever you embedded a video from YouTube and Vimeo or added audio from Spotify and SoundCloud, the preview wouldn’t appear in the block editor.

Instead, you would simply see ‘Preview is not available’ written in the blocks. The main cause of this problem was the default lazy loading feature.

In WordPress 5.5, iFrames were lazy-loaded by default, which meant embedded content like pictures would not load until a visitor scrolled down to the location of the content.

A simple fix to this issue is updating your WordPress version. This bug has since then been resolved. If you’re using version 5.7 or lower, then we highly recommend updating your WordPress to the latest version.

We hope this article helped you learn about the common block editor issues and how to fix them. You may also want to see our guide on common WordPress errors and how to fix them, and the ultimate guide to WordPress SEO for beginners.

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 13 Common WordPress Block Editor Problems and How to Fix Them first appeared on WPBeginner.
22.02.2023
How to Use the All Reviews WooCommerce Block

Most modern customers will look at product reviews before making even the smallest purchase. Enabling user reviews for your own products helps you build trust with new customers, and it lets them share important information with other buyers. One of the best ways to display reviews on your website is by using the All ReviewsÂ WooCommerce block.

In this article, we’ll talk about how the All ReviewsÂ WooCommerce block works. We’ll show you how to add it to your website, configure it, and use it effectively. Let’s get to work!

How to Add the All Reviews WooCommerce Block to Your Post or Page

The All Reviews WooCommerce block enables you to display a list of the latest product reviews on your website. By default, the block shows reviews for every item, which means visitors will get an overview of how happy your latest customers are.

To use this block, open the Block Editor for the page or post where you want to showcase the reviews. Select the option to add a new block, and use the search tool to look for the All ReviewsÂ option:

Note that the All ReviewsÂ block is only available if you’re using WooCommerce. If the plugin isn’t active, you won’t have access to any WooCommerce blocks in the Block Editor.

Once you place the All ReviewsÂ block, it will display a list of all the latest reviews in your store:

By default, every review includes the customer’s name, the body of their review, their rating, when they wrote it, and their profile picture. However, you have full control over how reviews appear within the All ReviewsÂ block, as we’ll show you in the next section.

All Reviews WooCommerce Block Settings and Options

Unlike most other blocks, the All ReviewsÂ WooCommerce block doesn’t offer any formatting options. That means you can’t change its alignment or layout. However, the block does offer a variety of settings that enable you to configure what elements it includes.

To access this block’s settings, select it within the editor, and then click on the gear-shaped icon in the top-right corner of the screen. A menu will appear to the right, including all of the settings that are available for the All ReviewsÂ block.

Content Settings

The first part of the settings menu enables you to decide what elements the block will display for each review:

You can choose whether to include reviewers’ names, profile pictures, dates, review content, and product ratings. In most cases, we recommend including all of those items.

However, you might choose to disable review dates if purchases aren’t made very often, so as not to discourage potential customers. Finally, you can choose between displaying reviewers’ photos (their profile pictures) or product images alongside each review.

List Settings

The next section enables you to decide in which order to show reviews in, and how many of them to display. By default, the All ReviewsÂ block will display the latest reviews across the entire store. However, you can also choose to display reviews from highest to lowest rated and vice versa.

You can also configure how many additional reviews will appear when users click on the Load moreÂ button (or disable that option altogether):

Text Color

The next section allow you to customize the color of your text within the All Reviews block. To change the text color click on the text color option. Then you can choose one of the default theme colors or select the hex code to add your own custom color.

Font Size

In addition to text color, you can also change the font size for the All Reviews block under the Typography settings. To change the font size, click the plus icon on the Typography toggle and select font size. There you can choose from one of the built-in theme font sizes or click the customize icon to add your own custom font size value.

Additional CSS Class(es)

Finally, there’s anÂ AdvancedÂ tab within the All ReviewsÂ block settings menu, which enables you to add new CSS classes to the element. You can use those CSS classes to modify the block’s style if you’re comfortable using stylesheets.

Tips and Best Practices for Using the All Reviews WooCommerce Block Effectively

In most cases, we recommend displaying the All ReviewsÂ block on your store’s home page and/or landing pages. This shows new visitors how satisfied past customers are right away, encouraging them to stick around. Moreover, if you have a lot of recent ratings, displaying review dates can show visitors that you get a lot of sales. That, in turn, can help you to build trust even further.

If your store is still growing, we recommend showcasing the reviews with the highest ratings instead. If you do this, we’d also suggest disabling review dates, so visitors won’t be discouraged if there aren’t any recent sales.

As for whether to display user profile pictures or product photos, that choice is up to you. Displaying customer pictures can help make reviews look more trustworthy and give them a human touch. However, that will only be effective if most customers set profile pictures. Otherwise, you’re typically better off displaying product photos alongside each review, so potential customers get a glimpse of what you offer.

Frequently Asked Questions about the All Reviews WooCommerce Block

If you have any questions left about how to use the All ReviewsÂ block, we’ll aim to cover them here. Let’s start by talking about how to style this handy block.

Can I Change the Style or Layout of the All Reviews Block?

The All ReviewsÂ block doesn’t enable you to change its layout. When you place the block, reviews will show up on a single-column list. However, you can change the text color or font size using Color and Typography options. You can also add custom CSS Classes to target the All Reviews Block in your custom CSS.

Are There Any Other WooCommerce Review Blocks I Can Use?

WooCommerce ships with several review blocks that you can use in your store. For example, there’s a Reviews by Product Block, which enables you to display reviews for individual items. You’ll also have access to the Reviews by Category Block, which lets you display reviews from specific product categories.

When you’re using the All Reviews block, you can’t filter reviews either by product or category. However, the block does enable you to choose what order reviews will be displayed in.

Where Should I Place the All Reviews Block in WordPress?

Since the All ReviewsÂ block displays reviews for all the products in your store, it makes sense to place it on one of your website’s main pages. Both the home page and the ShopÂ pages make ideal placements for this block. Alternatively, you can set up a page just for displaying reviews, and link to it in your navigation menu.

Conclusion

The All Reviews WooCommerce block enables you to display the latest reviews for all products in your store. You can also configure this block to display reviews from the highest to lowest ratings and vice versa (although we don’t recommend the latter approach).

This block offers the perfect way to show visitors how much customers love your products. If you have a lot of recent reviews, it can also signal that you run an active store with a large volume of sales.

For more, check out ultimate guide to WooCommerce Blocks.

Do you have any questions about how to use the All ReviewsÂ block in WooCommerce? Ask away in the comments section below!

The post How to Use the All Reviews WooCommerce Block appeared first on Elegant Themes Blog.

14.09.2022