Allow saving in FSE for Form Options

[Soare-Robert-Daniel]

Closes #1802

Summary

[UPDATED]

A straightforward solution to this problem is to insert a dummy block and then delete it immediately. This will mark the block as dirty, thus enabling the Post/Page saving. The functionality is wrapped in a debounce function, which prevents multiple events from triggering simultaneously.

ℹ️ This works reliably in Post/Pages/FSE/Widgets/Customizer 🔥

[OLD SOLUTION]

Usually, the Save button is enabled when you make a change to the content of the post/page. The problem arises when some functionality is not tied to the content but is triggered by the Save button.

Form Options live in the WP Options. When a user changes something in the Form the Mail, the values must be saved in WP Options to take effect. They are not tied to the block attributes, thus making them invisible for the Editor to detect changes.

After some heavy investigation regarding the saving mechanism in the Gutenberg editor, a simple trick to enable the saving is to make a request using the function dispatch( 'core' ).editEntityRecord.

In this PR, we implement a function that makes this request by adding an unregistered meta value to the entity. Since it is unregistered, the value is not saved anymore, but making the request marks the post/page as dirty, thus enabling the Save button.

⚠️ This is not working with Widgets on the widget page.

Screenshots

2023-08-29.17-36-19.mp4

---

Test instructions

1. Use an FSE theme.
2. Add a form inside of the templates/pages.
3. Save the form as it is, then change some values in the Form Options.
4. Save button should be available.

⚠️ The Save will be available after 3 seconds without modification. As long as you type or change something in the Form options within 3 seconds, it will not trigger.

⚠️ You should notice Form options have been saved, which confirms the save request.

---

Checklist before the final review

• Included E2E or unit tests for the changes in this PR.
• Visual elements are not affected by independent changes.
• It is at least compatible with the minimum WordPress version.
• It loads additional script in frontend only if it is required.
• Does not impact the Core Web Vitals.
• In case of deprecation, old blocks are safely migrated.
• It is usable in Widgets and FSE.
• Copy/Paste is working if the attributes are modified.
• PR is following the best practices

[pirate-bot]

Bundle Size Diff

Package	Old Size	New Size	Diff
Animations	270.81 KB	270.81 KB	0 B (0.00%)
Blocks	1.42 MB	1.42 MB	113 B (0.01%)
CSS	85.28 KB	85.28 KB	0 B (0.00%)
Dashboard	122.49 KB	122.49 KB	0 B (0.00%)
Export Import	83.17 KB	83.17 KB	0 B (0.00%)
Pro	303.34 KB	303.34 KB	0 B (0.00%)

[pirate-bot]

Plugin build for e77fe2d is ready 🛎️!

• Download Otter – Page Builder Blocks & Extensions for Gutenberg - Production ~ Development
• Download Otter Pro - Production ~ Development
• Download Blocks Animation - Production ~ Development
• Download Blocks CSS - Production ~ Development
• Download Blocks Export Import - Production ~ Development

[pirate-bot]

E2E Summary

Typing

Test	Average Time (ms)	Standard Deviation (ms)	Median Time (ms)	Quantile for soft limit (%)	Quantile for hard limit (%)
Typing	54.14	5.47	53.55	78.95 (60ms)	100 (80ms)

Values above 60ms

"0 - 66.42, 9 - 61.04, 12 - 61.33, 16 - 61.74"

[HardeepAsrani]

All good here or any changes required @Soare-Robert-Daniel?

[Soare-Robert-Daniel]

@HardeepAsrani I am now investigating how to allow saving on the Widgets page.

[HardeepAsrani]

You can fix the merge conflicts and put it up for QA, thank you @Soare-Robert-Daniel

[rodica-andronache]

@Soare-Robert-Daniel I can't make it work, not sure if I'm missing anything. The values I save, disappear after a page refresh. I've tried with the free version of Otter from this PR https://vertis.d.pr/v/y6Bgy7

[Soare-Robert-Daniel]

@HardeepAsrani, the FSE saving is now given by select( 'core/editor' )?.isSavingNonPostEntityChanges(). We should also check the saving for Custom CSS since it uses the same mechanism as Form. We might have a regression.

[HardeepAsrani]

@Soare-Robert-Daniel Were you able to fix the issue Rodica has with this?

[Soare-Robert-Daniel]

@Soare-Robert-Daniel Were you able to fix the issue Rodica has with this?

Yes.

[rodica-andronache]

@Soare-Robert-Daniel now everything's working well 👍

[pirate-bot]

🎉 This PR is included in version 2.4.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀