Setting/unsetting alignment causes Edit component to unmount/mount

[senadir]

Description

When you change a block alignment from none to something else or the reverse, the Edit function gets unmounted and mounted again. This causes any state/refs/effects on the function to get lost.

Step-by-step reproduction instructions

I can't think of any core block that has both alignment and uses user-controllred state so I tested in two ways:

HTML block

• Add alignment options to HTML block here.
• Insert HTML block, type some HTML.
• Switch to preview mode.
• Change alignment.
• Notice that the block switched back to HTML mode.

Any other block with alignment option.

• Add this code to the Edit component:

useEffect( () => {
	console.log( 'runs on initial mount only' );
}, [] );

• Insert said block, you should see the console above.
• Change alignment from none to something else, you should see it run again.
• Unset alignment, the console should run again.

Screenshots, screen recording, code snippet

switching.mov

cart-block.mov

Environment info

• WordPress 5.8.1
• Gutenberg trunk as of writing [email protected]

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ntsekouras]

I'm not sure if we can avoid this as we want an extra wrapper for the alignments to work properly.. 🤔 --cc @ellatrix @youknowriad

[youknowriad]

I think this can't be avoided for classic themes but I think that for themes with layout support we might be able to remove that extra div and potentially rely on the align classes like the frontend. That said, this kind of work is always tricky but definitely worth a try.

[senadir]

After doing some digging around, the default value of none also plays into account here, having no alignment is set to values like: "none", "", and undefinded. When I attempted to unify them all to "none", I managed to reduce the unmounting here, but I believe the code that you linked to @ntsekouras is the reason.

[ntsekouras]

Actually when unsetting or setting to none the attribute value is undefined and is not serialized in the markup - we don't end up with align: "none" and we shouldn't 😄 . The empty string case I think it's something with some old behavior and might be not relevant now - I haven't looked into it though..