Preview fails to display edits on published posts when metaboxes are visible in Gutenberg

[davidAIS]

The preview button in the Gutenberg editor in Wordpress 5 RC3 doesn't display unsaved edits.

Reproduced by creating and saving a page, then edit the page and click preview. The preview page only shows the original page and not the additional edits.

[siobhan4587]

Same problem here with 5.1. I discovered that it's not that Preview isn't populating the space, but that the font is defaulting to white - i.e. white-on-white. (Also Arial 50, which isn't what I want.) I can change the font color on my form, but not size or style. In my case, it might be fixable in our theme, but I'm just a WordPress end-user, not a developer (who is 8 time zones away so not reachable to fix this now.)

[JoshuaVB]

+1, as almost all professional WordPress sites use some sort of custom meta field system - this is affecting nearly every site running Gutenberg currently.

[fr0der1c]

Still happening on 5.1.1. I upgraded from 4.x to 5.1.1 today. After adjusting to the new editor, I run into this problem. Hope there will be a fix in the near future.

[xy0]

Now Gutenberg is completely not working. Earlier, I got around the no preview issue by duplicating the page, and switching it to draft. Now, any new post created with the new block editor renames the title to "Auto-Draft" and will not save. Creating posts is working normally with the Classic Editor plugin, but when I try to edit them with Gutenberg, they will not save or preview at all.

This issue has now become so bad that I have completely disabled Gutenberg -- obviously, because it can't save anything.

[Armarsh]

I don't have any problem with creating new pages with Gutenburg -- just the preview issue with already published pages. How are you duplicating the page? It sounds to me that you may be using a plugin to create the duplicate, and that is what is giving you the "auto-draft" title --- and perhaps the problem with saving is tied to the plugin??? Have you tried simply creating a new page from scratch?

[benoitchantre]

I can still reproduce this issue with WordPress 5.1.1 and the Gutenberg plugin version 5.4

Test procedure:

1. disable all plugins
2. check that Custom Fields are disabled in the block editor options
3. make some changes in a post, click on Preview and see that your changes are displayed
4. enable Custom Fields in the block editor options
5. make some changes in a post, click on Preview and see that your changes are not displayed

[vesaraiskila]

This bug manifests itself every time I edit and wish to preview an already published post. The edits are never previewed. (Windows 7, Opera, latest WordPress version with "built-in" Gutenberg, ie not installed as a plugin)

I think this is a rather critical error.

[technote-space]

I fixed my website in the following way.

1. not change post_modified_gmt if REQUEST_META_BOX_UPDATES action

add_filter( 'wp_insert_post_data', function ( $data ) {
    if ( isset( $_GET['meta-box-loader'] ) ) {
        unset( $data["post_modified"] );
        unset( $data["post_modified_gmt"] );
    }

    return $data;
} );

or

2. set autosave's post_modified_gmt = original post's post_modified_gmt +1 sec

add_action( 'save_post', function ( $post_id, $post ) {
    if ( isset( $_GET['meta-box-loader'] ) ) {
        $autosave = wp_get_post_autosave( $post_id, get_current_user_id() );
        if ( $autosave ) {
            $filter = function ( $data ) use ( &$filter, $post ) {
                remove_filter( 'wp_insert_post_data', $filter );
                $data["post_modified"]     = gmdate( 'Y-m-d H:i:s', strtotime( $post->post_modified ) + 1 );
                $data["post_modified_gmt"] = gmdate( 'Y-m-d H:i:s', strtotime( $post->post_modified_gmt ) + 1 );

                return $data;
            };
            add_filter( 'wp_insert_post_data', $filter );
            wp_update_post( $autosave );
        }
    }
}, 10, 2 );

[vesaraiskila]

Thank you for sharing your solution, @technote-space! However, I don't think it should be up to us individual web hosts (the large majority of whom are not programmers and simply want to use a functioning user interface) to fix well-known bugs in the system.

[Armarsh]

@technote-space - thank you for these suggestions. I'll try them out on some of my sites and see if they also work for me.

@vesaraiskila --I agree with you that we shouldn't need to use changes to functions in order to address bugs--- but sometimes it can take a long time before the bugs are ironed out. So it's helpful for many of us to have an interim solution. If it works, a filter that can be added to the functions.php file is a simple & easy-to-implement fix -- and it can also provide useful info for debugging to fix the underlying code.

[Armarsh]

@technote-space -- I have tested each of your functions on different sites running Generate Press, and I can confirm that it works to resolve the preview issue.

One possible glitch -- on one of my sites I have last modified dates set to display on the post itself, and also tied to a "recent updated posts" widget. I found that the #2 option had the unintended side effect of adding a new last-modified date even if I did not save and publish the modification . (In this case because I was testing only ). I didn't find any problem with using the #1 option instead -- so that is the option I'll stick with on my sites.

[katsar0v]

I am looking forwards for this issue to be solved in the core and be merged! Thanks guys!

[it-tbt]

This 'no real preview' is a big turnoff to new users.

I suspect many have decided against Gutenberg because they don't see this simple and first check of editing as working, and have thus elected to wait for a later version. It puts a taint on the whole project.

Remember when Google Drive first came out? A great flaw there was similar in that they automatically 'converted' uploaded Word docs (etc.) to Google Docs, and so very often they looked horrible. And if you tried to edit a Google Doc live in a meeting presentation, even the cursor would not stay in the right spot.

Similarly this was a real turnoff for Google adaption, all of which they have corrected. Hopefully soon this basic Gutenberg preview issue will become a thing of the past.

[harmancheema93]

This issue is occurring only when the post is published or page editor screen has metaboxes. In my case Yoast plugin. Switch to Draft on the published page show the preview but that is not a solution for this.

[earnjam]

@harmancheema93 have you tested this with the latest version of the Gutenberg plugin, or with the WordPress 5.2 release candidate?

The fix for this has been merged, but will not be released in WordPress core until 5.2 comes out next week.

[jg314]

In case this is helpful to anyone, updating to WordPress 5.2.1 fixed this issue for us.

[altescape]

We are still having the issue, just going to add my bit as slightly weird toggling thing going on where it toggles the content on and off, but long and short is that preview is not working for published pages using advanced custom fields, but is working for draft pages:

Using:

• Advanced Custom Fields Pro 5.8.1
• WordPress 5.2.1

Steps:

1. Clicking preview on a published page will show no content (content is in ACF, no WordPress default blocks used), header and footer does show.
2. Clicking preview again will bring the content from ACF this time but without content changes.
3. Clicking preview again will then show the page to have no content. Like it toggles the ACF content on and off.

Checked that the URL is same (?preview_id=27&preview_nonce=abd991463b&preview=true) and is.

It works fine for pages in draft mode.

[talldan]

Hi @altescape, I was unable to reproduce on a published page using a custom field. Would you be able to create a separate issue for this as it seems like the problem you're having is different to the original report (and this issue is now closed).

content is in ACF, no WordPress default blocks used

I'm not sure what this means, it'd be good if you could add some extra steps about how you create the post when creating a separate issue.

Thanks.

[vesaraiskila]

This has still occurred for me, although not every time I edit a published post. However, selecting "Preview" for the second or third time has shown the edited version.

[kaij]

@altescape Having exactly the same problem (tested ACF 5.8.1 and Wordpress 5.2.1). Did you find a solution or create a new issue somewhere? I already contacted the ACF developers but they could not reproduce the issue (they said).

• Preview saves a revision which erases all ACF fields(!), so - of course - it will show an empty page. This can be seen in the page revisions.
• Using preview on unpublished posts or pages works as expected, just if you try to preview an already published page, it will have all ACF fields erased
• Autosave will also remove all ACF fields content(!)

I know this issue is closed, but it could very well be that these problems are somehow related. Any help is appreciated.

[altescape]

@kaij Hi,

I opened another issue https://github.com/WordPress/gutenberg/issues/16006 see my description there

[Bt4ok]

I fixed my website in the following way.

1. not change post_modified_gmt if REQUEST_META_BOX_UPDATES action

add_filter( 'wp_insert_post_data', function ( $data ) {
  if ( isset( $_GET['meta-box-loader'] ) ) {
      unset( $data["post_modified"] );
      unset( $data["post_modified_gmt"] );
  }

  return $data;
} );

or

1. set autosave's post_modified_gmt = original post's post_modified_gmt +1 sec

add_action( 'save_post', function ( $post_id, $post ) {
  if ( isset( $_GET['meta-box-loader'] ) ) {
      $autosave = wp_get_post_autosave( $post_id, get_current_user_id() );
      if ( $autosave ) {
          $filter = function ( $data ) use ( &$filter, $post ) {
              remove_filter( 'wp_insert_post_data', $filter );
              $data["post_modified"]     = gmdate( 'Y-m-d H:i:s', strtotime( $post->post_modified ) + 1 );
              $data["post_modified_gmt"] = gmdate( 'Y-m-d H:i:s', strtotime( $post->post_modified_gmt ) + 1 );

              return $data;
          };
          add_filter( 'wp_insert_post_data', $filter );
          wp_update_post( $autosave );
      }
  }
}, 10, 2 );

Where did you add the code? cause I'm trying to insert into my theme functions.php but nothing happened

[Armarsh]

@Bt4ok -- the code was for an earlier version of Wordpress -- the issue with post previews and metaboxes that is described in this thread was resolved quite some time ago with a Wordpress update. If you are having a problem now you should report an open a new issue. (If you'll note, this thread was marked closed)

[Bt4ok]

@Bt4ok -- the code was for an earlier version of Wordpress -- the issue with post previews and metaboxes that is described in this thread was resolved quite some time ago with a Wordpress update. If you are having a problem now you should report an open a new issue. (If you'll note, this thread was marked closed)

Yes still have the problem Clear wp install 5.3.2 Built-in Gutenberg ACF 5.8.7

Problem is still present No preview updates of changes in advanced custom fields forms if post is published. Tried to install gutenberg as plugin - received the same problem. Also trough time preview page get empty fields. 1click -preview - fields are empty, 2nd click - filled (saved post version without changes), 3rd-emptry, 4th - filled (without changes). Tested on built in twentytwenty theme.

May be need to rollback for previous wp version or acf?

[vesaraiskila]

This preview issue was solved for me months ago, but recently I've been experiencing this:

Auto-saving makes the preview window refresh itself continuously and frequently, which is really frustrating when one is reading through the text to see if everything is ok. After each refresh, the page is returned to the top, and one has to scroll back to the place that one was reading.

[Bt4ok]

https://github.com/WordPress/gutenberg/issues/12617#issuecomment-569045110

Thank you. The problem was resolved by rollback to wp 5.0 core version. Preview working as expected for drafts and published posts (including changes in ACF fields), but ACF fields automatically saved when I press the "preview" button.

[vesaraiskila]

Just to be sure: is the constant realoading of the preview window, absent any modifications, "working as expected"? It really makes concentrated reading difficult.

[Bt4ok]

My english isn't very good, sorry. I mean. Rolled back to wp 5.0. Entered post edit page, made some changes in acf fields or in the content section. Press "preview" and see all made changes! No matter is post published or is draft.

Only a problem is if make some changes in acf fields and press "preview" - after pressing the button I get updated (saved) post with my last changes in acf forms. Changes in content presented in "preview" mode but not saved until I press "update".

For example. Open post for edit -> make some changes to ACF fields and to post content (or title, etc.), press preview - I see all changes (acf+content). Close edit post page without pressing update but get new version post with old content and changed acf. If don't close post edit page without saving and press update, get updated post with all changes in acf and content.

I hope, my answer is understandable

[hoangemini]

I fixed my website in the following way.

1. not change post_modified_gmt if REQUEST_META_BOX_UPDATES action

add_filter( 'wp_insert_post_data', function ( $data ) {
    if ( isset( $_GET['meta-box-loader'] ) ) {
        unset( $data["post_modified"] );
        unset( $data["post_modified_gmt"] );
    }

    return $data;
} );

or

1. set autosave's post_modified_gmt = original post's post_modified_gmt +1 sec

add_action( 'save_post', function ( $post_id, $post ) {
    if ( isset( $_GET['meta-box-loader'] ) ) {
        $autosave = wp_get_post_autosave( $post_id, get_current_user_id() );
        if ( $autosave ) {
            $filter = function ( $data ) use ( &$filter, $post ) {
                remove_filter( 'wp_insert_post_data', $filter );
                $data["post_modified"]     = gmdate( 'Y-m-d H:i:s', strtotime( $post->post_modified ) + 1 );
                $data["post_modified_gmt"] = gmdate( 'Y-m-d H:i:s', strtotime( $post->post_modified_gmt ) + 1 );

                return $data;
            };
            add_filter( 'wp_insert_post_data', $filter );
            wp_update_post( $autosave );
        }
    }
}, 10, 2 );

Where did you add the code? cause I'm trying to insert into my theme functions.php but nothing happened

I have the same question