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.

[designsimply]

I did a quick test with WordPress 5.0-RC3-43967 and do not see the same problem.

Can you tell me a little more about your testing?

Are you testing previews of a draft or a published post?

Did you press "Preview" each time or save and try reloading a previously opened preview?

Are you making changes to the post content or are you making changes to things like post settings and meta data?

Would it be possible for you to provide a short list of exact testing steps?

[davidAIS]

I tested both. The initial test was on a client site where I was doing a trial install of WordPress 5 in which I attempted to edit an existing page. Edits on that page didn't show up in preview. The only way to see then was to save the page. As a more objective test I then created and saved a new page, then went back and edited the page. The edit didn't show up in preview. (This test was in a page not a post - I’ve not tried the test for a post. Not sure if that would make a difference though) Fro what I can see of your recording you’re doing a preview of the initial page prior to saving which is different from what I encountered. Hope that helps clarify.

…

On 5 Dec 2018, at 16:30, Sheri Bigelow ***@***.***> wrote: I did a quick test with WordPress 5.0-RC3-43967 and do not see the same problem. Can you tell me a little more about your testing? Are you testing previews of a draft or a published post? Did you press "Preview" each time or save and try reloading a previously opened preview? Are you making changes to the post content or are you making changes to things like post settings and meta data? Would it be possible for you to provide a short list of exact testing steps? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[designsimply]

Thanks for the clarification! There are actually more scenarios than you might think if you consider autosaves vs "Save Draft" and draft vs published and post vs page and all the combinations thereof. My test had 3 cases: new post -> preview, edit draft -> preview, save & publish then edit then preview.

Sounds like your testing steps are:

1. Create page.
2. Save.
3. Go to Pages list.
4. Re-open page.
5. Make an edit to the text.
6. Click Preview.

Testing note: since publishing wasn't mentioned, try with a draft as well as a published page.

[davidAIS]

I'm sure there are lots of scenarios.

This is mine.

I have a previously published page (as it happens created before the site was updated to Wordpress 5) that now requires an update.

Having made the edit, if I click Preview the update is not displayed. It's therefore not possible to check the progress of a set up updates on the page without publishing the page.

That is not a safe way to edit the content and therefore renders the new editor unusable in this real world scenario.

[designsimply]

I ran another test after upgrading a different site to WordPress 5.0 and I can still see previews working normally. I tested with Firefox 63.0.3 on macOS 10.13.6 and I tried with a draft as well as with a previously published post. Please have a look and let me know if I'm still missing anything from my testing steps!

5.0 was just released, so I suggest updating and uninstalling the Gutenberg plugin if you have it (you don't need it any more with 5.0). If you're still having trouble after that, I would suggest checking for a plugin or theme conflict by temporarily disabling all plugins and switching to the default theme as a test to see if the problem still happens under those conditions. If your test setup was already like that, we'll need to try to think of what else could be the source of the trouble in your case.

Sometimes OS or browser version matter for cases like this. I tested with a Mac, and if you let me know you're OS and browser versions, I can test again from a more similar setup to you.

[slimmilkduds]

I’ve also had this problem pretty frequently in wp 5.0, can’t say the exact scenario but it feels kind of random and I’ve never had it when using the Gutenberg plugin the last 5 months. Will try to make a proper repro tomorrow.

Using
MacOS
Chrome

[designsimply]

Thanks @slimmilkduds!

I also just closed #12717 as a duplicate and wanted to note it also includes a video.

[davidAIS]

Re:

5.0 was just released, so I suggest updating and uninstalling the Gutenberg plugin if you have it (you don't need it any more with 5.0). If you're still having trouble after that, I would suggest checking for a plugin or theme conflict by temporarily disabling all plugins and switching to the default theme as a test to see if the problem still happens under those conditions. If your test setup was already like that, we'll need to try to think of what else could be the source of the trouble in your case.

Repeating the test with 5.0, without plugins and using a default theme made no difference to the outcome. I am still not seeing the edits when I click the preview button.

For info I'm using Chrome 70.0.3538.110 and MacOS 10.13.6

I note that you've closed ticket #12717

In fact that sheds additional light on this and I can confirm the findings in that ticket. Initially the preview button doesn't display the edited contents as I reported. But if you wait 5-10 seconds and then reload the preview page then it does display the edited content.

So as soup-bowl reported in #127171 - it's not completely broken. But in my view just broken enough to make it unusable.

[xy0]

I am experiencing the exact same behavior as @davidAIS. I don't think this started right away after 5, maybe the 5.0.1 update did it. Refreshing the preview after a few seconds does indeed work.

[amycmcc]

I am experiencing the exact same issue. I am using chrome, and windows 10. I set up a staging site, deactivated all plugins, and activated the default theme. I edit a page, that is published. Then I press preview and it does not show my edits. If I wait and refresh it will show my edits, or if I publish the post, it will also display my edits.

[designsimply]

I tested again with WordPress 5.0.1 and Gutenberg 4.7.0 master @ ddac4f3cf and with WordPress 5.0.1 and also with Gutenberg 4.7.0 today and previewing changes to published posts is always working in my tests. (1m14s)

Since more than one of you have mentioned you have tried testing with all plugins deactivated and using the default theme, there must be another factor we haven't thought of yet! If you spot anything I've missed in the latest testing video (linked above), please let me know.

Could a local firewall rule or caching server be interfering for you by chance?

What about browser extensions or add-ons, do you have any installed?

[Armarsh]

Same issue here, on most of my sites. All sites are on the same server-- but at least one site doesn't show the problem. So it's not something tied to a server issue. Also, using Chrome on Windows 10 for all testing -- again, it does not seem to be a browser issue, because of the site without the problem. (And it consistent -- the one site that works, always works; the others I've tested always fail.)

I have tried disabling all plugins and reverting to TwentyNineteen theme on one site and it did NOT resolve the problem. Also, the sites with the problem have multiple different themes -- so it does not appear to be tied to a specific theme.

After reading comments here I did try a hard refresh (shift + refresh) while testing, and the changes in the preview do display that way .... so maybe a browser caching issue?

Edited to Add: I've now tested in Firefox and on guest window in Chrome (with addons disabled). Problem remains -- so it does not appear to be specific to a browser plugin or addon.

[xy0]

It's very interesting that the issue is inconsistent based on environment. Defaulting the .htaccess didn't work. Neither did disabling my computer's firewall and hosts file. I've also tested on a default Chrome window without extensions.

I don't see any console errors or warnings. I'm not familiar with how WP creates previews, but could it be some sort of transient or DB delay? Does it use scripts? And could it be affected by a custom script order?

[Armarsh]

You could be on to something there with the comment about transient or DB delay. I have about 10 sites on a shared VPS server -- and I have found only 2 sites that don't have this problem. Those 2 are very low traffic sites as compared to the others -- so it could definitely be something that is tied to database contents & load time. That would also explain why it might not show up in new, clean testing installations.

Edit to add: I took a look at the size of the database for each of my sites. The two sites that function well with previews have database sizes of 3M or under. Among the sites that are giving me problems, the smallest DB is 4.1M -- but most are larger. I wouldn't expect my particular values to hold true for other sites, as it would be a server-side issue that would also be tied to server load and resources. But at least this gives weight to the DB delay theory.

[scottbuscemi]

I ran into this issue today. The problem is when you don't click out of the block you're editing before pressing the Preview button.

Pressing the Preview button should automatically save the block that your cursor is currently in, then generate the preview.

[scottbuscemi]

@designsimply Please let me know if you're able to repro with this new information ^

[davidAIS]

I ran into this issue today. The problem is when you don't click out of the block you're editing before pressing the Preview button.

Pressing the Preview button should automatically save the block that your cursor is currently in, then generate the preview.

This isn't new information. The essence of this bug report is that clicking Preview DOESN'T save the block changes (by which I assume you mean a temporary save) before creating the preview.

You seem to be suggesting in your first paragraph that clicking somewhere outside the block will temporarily save the block and is a necessary step before clicking Preview. Surely that can't be right!

[scottbuscemi]

@davidAIS We're on the same page. I added clarification because this is still tagged as 'needs more info'. At this point, it should be updated as ready for patching...

[Armarsh]

@scottbuscemi -- following your process -- clicking outside the block -- does NOT resolve the problem for me. No matter what I do, the preview page does not show the changes until the preview page is refreshed.

So no, while that may be a separate issue, that is not the core problem I am experiencing.

The only thing that works for me is to either revert to draft mode (which would take an active page on a live site offline) -- or to click the "update" button, which renders the preview function irrelevant. Or, as noted, either do a hard refresh of the preview page or a soft refresh after an interval of several seconds.

[slimmilkduds]

I’m having the same experience as @Armarsh. We run wp 5.0.2 on a local apache server that’s offline (intranet). Theme is Generatepress. Never had this issue pre WP 5 (has been using Gutenberg since June or something).

[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 #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]

#12617 (comment)

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