Categories
URL / Rewrite Filter

How to make Gutenberg block editor work, when WordPress Address & Site Address are different domains

Recently, I worked on a project where the WordPress site needed to have one domain for Site Address(SITE URL) and another one for WordPress Address(HOME URL). Everything was working fine. Except, whenever we tried to publish a post in Gutenberg editor, we were getting an error saying “Updating failed. “. This is also the case when you are using WordPress as headless CMS.

Soon, I realized that as we were accessing the site admin section from the Site Address, and when we were hitting the update or publish button on Gutenberg editor, it was sending a request to the REST API with WordPress Address(HOME URL) as it’s base URL. The REST API URL should be the same domain from which the request is being sent. So, we just have to make WordPress Gutenberg editor use the Site Address (SITE URL) instead of WordPress Address(HOME URL) as a base for API.

Here is the snippet code is given below, which uses ‘rest_url‘ filter to replace the HOME URL in REST API URL to SITE URL.

// change WordPress API URL to HOME URL
add_filter('rest_url', 'wptips_home_url_as_api_url');
function wptips_home_url_as_api_url($url) {
    $url = str_replace(home_url(),site_url() , $url);
    return $url;
}

Please let me know in the comment section below if you ever had to work on a project where you had to assign different domains to Site Address and WordPress Address.

By Murali Kumar

I am a Full Stack Web Developer with over 12 years of experience. I love WordPress & WooCommerce.

If you need the help from a WordPress developer for your website, get in touch now!.

Twitter : @geekz
YouTube : @wptipsofficial

6 replies on “How to make Gutenberg block editor work, when WordPress Address & Site Address are different domains”

Hello,

This fix is amazing. It really did the thing.

We are using a Reverse Proxy solution to load our blog.domain.com site as a subfolder on our main domain www.domain.com/blog/

We changed the Site Address inside Settings>General and this stopped the RestAPI from working.

All I did was paste the snippet of code from this article in our Functions.php file and the Gutenberg editor started working again.

Thank you!

All the best,
David

Thank you for helping me a lot 😍

My WordPress: localhost:10011
Frontend Next.js: localhost:3000

In Settings -> General:

WordPress Address: http://localhost: 10011
Site Address: http://localhost: 3000

My problem was:

Error saving post, because the wp-json domain is now localhost: 3000 (and not – localhost: 10011 which is actually the WordPress installation address)
I added your code, and it works great!
thank you very much, wish all the best to you and your family. Adi 🙏😀

Leave a Reply

Your email address will not be published. Required fields are marked *