Gutenberg: Function to refresh a server-side-render block without altering its contents

[mtoensing]

What problem does this address?

I currently refresh my server side rendered block by passing the current timestamp as an attribute. I do this when the post is saved to reload some data. That leads to the issue that the editor thinks that there is some changed content in the post. The changed attribute results in a changed post and triggers the message "Changes you made may not be saved." How can I force a reload of my SSR block without passing attributes and changing its contents? Is there another way?

 const blockProps = useBlockProps();
/* Update SimpleTOC if the post is saved successfully.          */
  /* Source: https://github.com/WordPress/gutenberg/issues/17632  */
  const { isSavingPost } = select( 'core/editor' );
  const [isSavingProcess, setSavingProcess] = useState(false);
  const advpanelicon = 'settings'; 
  const updatePost = function () {
    if( attributes.autorefresh === true ) {
      setAttributes({ updated: Date.now() 
    }
  };

What is your proposed solution?

A function to simply refresh the server response of a server side rendered block without setting a random attribute.

[github-actions[bot]]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[t-hamano]

I think this is a question and I will convert it to a discussion.

[t-hamano]

How about not rendering the ServerSideRender component when it is being saved and displaying a different state? Once the save is complete, the ServerSideRencer will be re-rendered.

Additionally, it would work in both the post editor and the site editor. However, it may not be reflected in all blocks in the query context.

import { Spinner } from '@wordpress/components';
import ServerSideRender from '@wordpress/server-side-render';
import { useBlockProps } from '@wordpress/block-editor';
import { store as editorStore } from '@wordpress/editor';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

export default function Edit() {
	const { isSaving, isSavingNonPostEntityChanges } = useSelect( ( select ) => {
		const { isSavingPost, isSavingNonPostEntityChanges } = select( editorStore );
		return {
			isSaving: isSavingPost(),
			isSavingNonPostEntityChanges: isSavingNonPostEntityChanges(),
		};
	});

	const blockProps = useBlockProps();

	return (
		<div { ...blockProps }>
			{ ( isSaving || isSavingNonPostEntityChanges ) ? <Spinner /> : (
				<ServerSideRender
					block="core/calendar"
				/>
			)}
		</div>
	)
}

[Rayyy369]

Okay. Once the save is complete, the ServerSideRencer will be re-rendered

[mtoensing]

@t-hamano How about not rendering the ServerSideRender component when it is being saved and displaying a different state? Once the save is complete, the ServerSideRencer will be re-rendered.

I think that is the problem. If the SSR is re-rendered after the save, Gutenberg will nag the user with "content has changed. Don't close the windows".

[t-hamano]

I checked again and it appears that the SSR is re-rendered on save, at least in the calendar block, without introducing the code I presented.
Is this not the behavior you expect?

cbae57a79f0d12308d5d28bbb3664e1c.mp4

[mtoensing]

I will try that! Thank you!

[mtoensing]

@t-hamano
This works out of the box! Great! Thank you! The example is well done, too!

When I use jslint on the code, I get this:

'isSavingNonPostEntityChanges' is already declared in the upper scope on line 34 column 20 no-shadow

for this part:

	const { isSaving, isSavingNonPostEntityChanges } = useSelect(
		( select ) => {
			const { isSavingPost, isSavingNonPostEntityChanges } =
				select( editorStore );
			return {
				isSaving: isSavingPost(),
				isSavingNonPostEntityChanges: isSavingNonPostEntityChanges(),
			};
		}
	);

Do you have any idea how to prevent this?

[mtoensing]

I got the answer from stack exchange:

A solution would be giving the properties you're returning a unique name:

const { uniqueName, anotherUniqueName } = useSelect((select) => {
    const { isSavingPost, isSavingNonPostEntityChanges } = select(editorStore);
    return {
        uniqueName: isSavingPost(),
        anotherUniqueName: isSavingNonPostEntityChanges(),
    };
});

https://wordpress.stackexchange.com/questions/411483/how-to-use-issavingnonpostentitychanges-in-the-same-scope-correctly/411487#411487