How to Stop WordPress From Overwriting .htaccess File

Recently one of our readers asked if it was possible to stop WordPress from overwriting the custom code in your .htaccess file?

WordPress along with several plugins add custom settings to the .htaccess configuration file. If you have added your own custom code to .htaccess, then you may be worried that it will be overwritten or deleted.

In this article, we’ll show you how to stop WordPress from overwriting the .htaccess file.

Why Does WordPress Overwrite the .htaccess File?

Your .htaccess file is a powerful configuration file that stores important settings about your WordPress website. It contains rules that tell your hosting server how to handle your site.

WordPress uses the .htaccess file to store its permalink settings. Whenever you change or regenerate your permalinks, WordPress will automatically overwrite the old settings in .htaccess with the new settings.

Some WordPress plugins also save their settings in .htaccess. For example, the W3 Total Cache plugin will modify your .htaccess file in order to configure the caching and optimization tools that are part of the plugin.

Lastly, you can make your own custom changes to .htacess to control how your website works. For example, you can add custom rules to the file that protect your admin area, keep your site safe from hackers, set up redirects, ban suspicious IP addresses, and more.

Some users are concerned that if they add their own custom rules to .htaccess, then they may be deleted when WordPress overwrites the file with new settings. Other users prefer to manually configure .htaccess and not let WordPress write to it at all.

With that being said, let’s take a look at how to stop WordPress from overwriting your .htaccess file. Simply use the quick links below to jump to the section you are interested in.

• How to Stop WordPress From Overwriting Your .htaccess Rules
• How to Stop WordPress From Modifying .htaccess

How to Stop WordPress From Overwriting Your .htaccess Rules

The good news is that if you understand how the .htaccess file works, then you can be confident that your custom rules will not be overwritten.

That’s because the areas of the file that will be changed by WordPress or your plugins are clearly marked. Simply make sure that you don’t add code to those areas.

Don’t Modify Code Inside the WordPress Markers

As we said earlier, WordPress uses .htaccess to store the settings for an SEO-friendly URL structure. The code it saves to the file will be automatically overwritten and updated whenever you change your permalink settings.

As you can see in the screenshot below, WordPress saves this information between two markers, # BEGIN WordPress and # END WordPress.

Notice the warning inside those markers:

The directives (lines) between “BEGIN WordPress” and “END WordPress” are dynamically generated, and should only be modified via WordPress filters. Any changes to the directives between these markers will be overwritten.

This means that WordPress will not overwrite or modify any code that you add outside these markers. Users typically add their custom code to the top of the file, above the # BEGIN WordPress marker.

Tip: .htaccess is a hidden file located in your WordPress site’s root folder. If you are having difficulties finding it, then take a look at our guide on why you can’t find the .htaccess file on your WordPress site.

Don’t Modify Code Inside Your Plugins’ Markers

When a plugin saves its settings to .htaccess, it also places it between markers that look like # BEGIN Plugin and # END Plugin.

For example, if you install and set up the W3 Total Cache plugin to improve your website speed and performance, then it will add rules to .htaccess between # BEGIN W3TC Browser Cache and # END W3TC Browser Cache markers.

These rules will be overwritten whenever you change the plugin’s settings, so you need to be careful not to add your own custom .htaccess rules between those markers.

Creating Markers for Your Custom Code

In rare cases, a badly behaved plugin may modify code outside of its # BEGIN and # END markers. However, it will normally not modify code found between the markers used by WordPress or other plugins.

If you are concerned about a badly behaved plugin overwriting your code, then you can add your own markers to the .htaccess file.

For example, you can type # BEGIN MyCustomCode and # END MyCustomCode markers at the top of the .htaccess file, and then add your own custom rules between those markers.

If you also need to add code to the end of .htaccess, then you can add a different set of markers there. Just be sure to give them different names. For example, you could use ‘MyCustomCodeTop’ and ‘MyCustomCodeBottom’.

How to Stop WordPress From Modifying .htaccess

Now that you understand how .htaccess works, you

can be confident that your custom code will not be overwritten by WordPress or your plugins.

However, some developers and advanced users want to stop WordPress from making any changes to .htaccess.

For example, they may want to create permalinks by typing the settings manually into .htaccess. In this case, they will want to avoid conflicts by stopping WordPress from saving its own permalink settings to the file.

We don’t recommend this unless you know what you’re doing, because it can lead to unexpected consequences. However, it can be done by changing the file’s permissions or using code.

Stopping WordPress From Changing .htaccess Using File Permissions

One way to stop WordPress from modifying .htaccess is to make the file read-only. To do this, you need to change the file permissions using an FTP client or the file manager provided by your WordPress hosting provider.

You will find the .htaccess file in the root directory of your WordPress installation. Next, you should right-click the file and select ‘File permissions’.

This will display a pop-up where you can change the file’s attributes.

The default setting will be 644, but you can change this to 444 by typing directly into the ‘Numeric value’ field or making sure that only the ‘Read’ boxes are checked.

Once you click the ‘OK’ button, the file will be read-only and cannot be modified.

Of course, this will mean that you are unable to write to the file as well. When you wish to make changes, you will need to temporarily set the file permissions back to 644.

Stopping WordPress From Changing .htaccess Using Code

Another solution is to use a code snippet that lets WordPress know not to write to the .htaccess file. This is useful if you want to stop WordPress from modifying .htaccess without blocking your plugins.

Note: Editing any core WordPress files can be dangerous. Even a small mistake can cause major errors on your site. That’s why we only recommend this method for advanced users.

Simply add the following code snippet at the end of your wp-config.php file. If you need help, then please refer to our guide on how to edit the wp-config.php file in WordPress.

add_filter('got_rewrite', '__return_false');

Once you’ve done that, WordPress will no longer write to the .htaccess file.

Error Message Displayed When WordPress Can’t Change .htaccess

If you try to change your permalink settings when .htaccess is set to read-only, then an error message will be displayed.

At the top of the Settings » Permalinks page, you will see the message ‘You should update your .htaccess file now.’

This lets you know that WordPress was unable to modify the .htaccess file.

Normally, this is what you intended. However, if you do wish to add the WordPress permalink settings to .htaccess, then you will need to do it manually.

At the bottom of the Settings ≫ Permalinks page, you will see another error message saying that your .htaccess file is not writable. Underneath that, you will see the rules that need to be added to .htaccess.

If you wish to add those settings, then you will need to temporarily change the .htaccess file permissions back to 644 so that it can be edited. After that, you should paste the rules between the file’s WordPress BEGIN and END markers, replacing the code already there.

When you’re finished, simply set the value back to 444 and save the file. It will once again be unwritable.

We hope this tutorial helped you learn how to stop WordPress from overwriting the .htaccess file. You may also want to learn how to add push notification in WordPress and check out our expert list of the best WordPress SEO plugins and tools.

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 Stop WordPress From Overwriting .htaccess File first appeared on WPBeginner.

February 23, 2023 at 03:45PM

How to Easily Add Icon Fonts in Your WordPress Theme

Do you want to add icon fonts to your WordPress site?

Icon fonts allow you to add resizable vector icons that are loaded like web fonts, so they don’t slow down your website. You can even style them using CSS to get exactly the look you want.

In this article, we will show you how to easily add icon fonts in your WordPress theme.

What are Icon Fonts and Why You Should Use Them?

Icon fonts contain symbols or small pictures instead of letters and numbers.

You can use these icon fonts to show common images. For example, you can use them with your shopping cart, download buttons, feature boxes, giveaway contests, and even in WordPress navigation menus.

Most visitors will immediately understand what a commonly-used icon means. In this way, you can help visitors find their way around your website and engage with your content.

These pictures can also help you create a multilingual WordPress website, since most people can understand icon fonts no matter what language they speak.

Compared to image-based icons, font icons load much more quickly so they can boost WordPress speed and performance.

There are several open-source icon font sets that you can use for free such as IcoMoon, Genericons, and Linearicons.

In fact, the WordPress software comes with free dashicon icons built-in. These are the icons you can see in the WordPress admin area.

In this guide, we’ll be using Font Awesome as it is the most popular open-source icon set. We use it on WPBeginner, and in all our premium WordPress plugins.

With that said, let’s look at how you can easily add icon fonts in your WordPress theme. Simply use the quick links to jump straight to the method that you want to use.

• Method 1. Adding Icon Fonts Using a WordPress Plugin (Easy)
• Method 2. Using Icon Fonts with SeedProd (More Customizable)

Method 1. Adding Icon Fonts Using a WordPress Plugin (Easy)

The easiest way to add icon fonts to WordPress is by using the Font Awesome plugin. This allows you to use icon fonts in your pages and posts without modifying your theme files. You’ll also get any new Font Awesome icons automatically every time you update the plugin.

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

Upon activation, you can add a Font Awesome icon to any shortcode block. Simply open the page or post where you want to show the icon font, and then click on the ‘+’ icon.

You can now search for ‘Shortcode’ and select the right block when it appears.

With that done, you can add any Font Awesome icon using the following shortcode:

[icon name="rocket"]

Simply replace “rocket” with the name of the icon that you want to show. To get this name, head over to the Font Awesome site and click on the icon that you want to use.

In the popup that appears, go ahead and click on the icon’s name.

Font Awesome will now copy the name to your clipboard automatically.

With that done, simply paste the name into the shortcode. You can now click on ‘Publish’ or ‘Update’ to make the icon font live.

Sometimes you may want to show an icon font inside a block of text. For example, you may need to display a ‘copyright’ symbol after a brand name.

To do this, simply paste the shortcode inside any Paragraph block.

You can then use the settings in the right-hand menu to customize the icon, similar to how you customize options for text blocks. For example, you can change the font size.

WordPress will turn the shortcode into a Font Awesome icon for visitors and show it alongside your text.

Another option is to add the shortcode to any widget-ready area.

For example, you can add a Shortcode block to your site’s sidebar or similar section.

For more information, please see our guide on how to use shortcodes in your WordPress sidebar widgets.

You can even add the icon shortcode to columns and create beautiful feature boxes.

For detailed instructions, see our guide on how to add feature boxes with icons in WordPress.

Many websites use icon fonts in their menus, to help visitors find their way around. To add an icon, either create a new menu or open an existing menu in the WordPress dashboard.

For step-by-step instructions, check out our beginner’s guide on how to add a navigation menu in WordPress.

Then, click on ‘Screen Options’ and check the box next to ‘CSS Classes.’

With that done, simply click to expand the menu item where you want to show the icon.

You should now see a new ‘CSS Classes’ field.

To get an icon’s CSS class, simply find the icon font on the Font Awesome website and give it a click. If you want, then you can change the icon’s style by clicking on the different settings.

In the popup, you’ll see an HTML code snippet. The CSS class is simply the text between the quotation marks. For example, in the following image, the CSS class is fa-solid fa-address-book.

Simply copy the text inside the quotes, then switch back to the WordPress dashboard.

You can now paste the text into the ‘CSS Classes’ field.

To add more icon fonts, simply follow the same process described above.

When you’re happy with how the menu is set up, click on ‘Save.’ Now if you visit your WordPress website you’ll see the updated navigation menu.

Method 2. Using Icon Fonts with SeedProd (More Customizable)

If you want more freedom over where you use font icons, then we recommend using a page builder plugin.

SeedProd is the best drag-and-drop WordPress page builder in the market and has over 1400 Font Awesome icons built-in. It also has a ready-made Icon box that you can add to any page using drag and drop.

With SeedProd, it’s easy to create custom pages in WordPress and then show Font Awesome icons anywhere on those pages.

The first thing you need to do is install and activate the plugin. For more details, see our beginner’s guide on how to install a WordPress plugin.

Note: There is a free version of SeedProd, but we’ll be using the Pro version since it comes with the Icon box.

Upon activation, go to SeedProd » Settings and enter your license key.

You can find this information under your account on the SeedProd website. After entering the license key, go ahead and click the ‘Verify Key’ button.

Next, you need to visit SeedProd » Pages and click on the ‘Add New Landing Page’ button.

Now, you can choose a template to use as the basis for your page. SeedProd has over 180 professionally-designed templates that you can customize according to your WordPress blog or website’s needs.

To select a template, hover your mouse over it and then click the ‘Checkmark’ icon.

We’re using the ‘Ebook Sales Page’ template in all our images, but you can use any design you want.

Next, go ahead and type in a name for the custom page. SeedProd will automatically create a URL based on the page’s title, but you can change this URL to anything you want.

When you’re happy with the information you’ve entered, click on the ‘Save and Start Editing the Page’ button.

Next, you’ll be taken to the SeedProd drag-and-drop page builder, where you can customize the template.

The SeedProd editor shows a live preview of your design to the right and some block settings on the left.

The left-hand menu also has blocks that you can drag onto your design.

You can drag and drop standard blocks like buttons and images or use advanced blocks such as the contact form, countdown, social share buttons, and more.

To customize any block, simply click to select it in your layout.

The left-hand menu will now show all the settings you can use to customize that block. For example, you can often change background colors, add background images, or change the color scheme and fonts to better match your brand.

To add an icon font to the page, simply find the ‘Icon’ block in the left-hand column and then drag it onto your layout.

SeedProd will show an ‘arrow’ icon by default.

To show a different Font Awesome icon instead, simply click to select the Icon block.

In the left-hand menu, hover your mouse over the icon and then click on the ‘Icon Library’ button when it appears.

You’ll now see all the different Font Awesome icons that you can choose from.

Simply find the font icon that you want to use and give it a click.

SeedProd will now add the icon to your layout.

After choosing an icon, you can change its alignment, color, and size using the settings in the left-hand menu.

You can continue working on the page by adding more blocks and customizing those blocks in the left-hand menu.

When you’re happy with how the page looks, click the ‘Save’ button. You can then select ‘Publish’ to make that page live.

We hope this article helped you learn how to add icon fonts in your WordPress theme. You can also go through our guide on the best popup plugins compared and how to choose the best web design software.

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 Icon Fonts in Your WordPress Theme first appeared on WPBeginner.

February 23, 2023 at 12:46AM

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.

• Fix WordPress Block Editor Not Working Error
• WordPress Block Editor Keeps Crashing
• Remove The Invalid JSON Error in the Content Editor
• Resolve Updating Failed / Publishing Failed Error
• Add or Remove Blank Spaces between WordPress Blocks
• Copy and Paste Content without Formatting Issues
• Fix the Image Upload Issue in WordPress
• Fixing the HTTP Image Upload Error
• Remove Missed Schedule Post Errors in WordPress
• Fixing Alignment Issues in WordPress Block Editor
• Resolve Facebook Incorrect Thumbnail Issue
• Fixing Facebook and Instagram oEmbed Issues
• Unable to See Embedded Content Preview in Block Editor

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.

February 22, 2023 at 04:29PM