Fix inspector header reset on transition between Desktop to Tablet/Mobile

[Soare-Robert-Daniel]

Closes #1752 .

Summary

I implemented a Global State Memory that keeps the data when the content editor is transformed to an iFrame during the Preview from Desktop to Tablet/Mobile.

In the root window, we save global values that keep the state in a dictionary structure. Since the root window data is readonly when accessed by the iFrame, we need to use the browser event system to transmit the change from the iFrame via postMessage.

ℹ️ Even if Gutenberg now has tabs for the Inspector. The Core Block has no mechanism for retention of state. Like Otter, they reset on the viewport change. Until they implement such a feature, we will use our solution.

Screenshots

2023-08-07.18-06-56.mp4

---

Test instructions

When changing the viewport, the state of the Inspector should be kept.

What to look for:

• Possible Blocks that I might have missed to adapt them.
• Glitches.
• Blocks Crash (caused by an import error -- please provide a SS with Console if it happens)

---

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.78 KB	270.78 KB	0 B (0.00%)
Blocks	1.41 MB	1.42 MB	970 B (0.07%)
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	302.52 KB	303.27 KB	768 B (0.25%)

[pirate-bot]

Plugin build for d7e8dcc 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	46.84	3.98	46.31	100 (60ms)	100 (80ms)

Values above 60ms

""

[JohnPixle]

@Soare-Robert-Daniel I just tested it and it works flawlessly. Thanks for taking the time to look deeper into this!
It's good to go from me ✅

[irinelenache]

@Soare-Robert-Daniel Tested and didn't find any problem 👍

[pirate-bot]

🎉 This PR is included in version 2.3.4 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀