fix: replace the original block of the AI Toolbar action

[Soare-Robert-Daniel]

Closes https://github.com/Codeinwp/otter-internals/issues/214

Summary

The origin block in which the AI actions are triggered is now linked to the AI Block created. On Replace actions, the origin block will be replaced, and the AI Block will be deleted.

Note

This works when both blocks are part of the same session. It is considered a new session if you reload the page or switch to code mode and come back.

Screenshots

2024-07-24_17-55-48.mp4

---

Test instructions

Note

You will need an OpenAI key.

1. Use the actions AI Toolbar from a paragraph block.
2. Click Replace after the AI Block generates the content.
3. The original block should be replaced.

---

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	264.2 KB	264.26 KB	58 B (0.02%)
Blocks	1.52 MB	1.52 MB	776 B (0.05%)
CSS	93.45 KB	93.5 KB	58 B (0.06%)
Dashboard	195.96 KB	196.02 KB	58 B (0.03%)
Onboarding	153.89 KB	153.95 KB	58 B (0.04%)
Export Import	90.96 KB	91.01 KB	58 B (0.06%)
Pro	362.19 KB	362.24 KB	58 B (0.02%)

[pirate-bot]

Plugin build for 492c6ec 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 Tests

Playwright Test Status:

Performance Results

serverResponse: 242, firstPaint: 166.25, domContentLoaded: 1578.85, loaded: 1579.65, firstContentfulPaint: 3557.3, firstBlock: 6885.55, type: 12.05, minType: 10.4, maxType: 13.84, typeContainer: 7.79, minTypeContainer: 6.71, maxTypeContainer: 9.85, focus: 30.3, minFocus: 25.92, maxFocus: 36.01, inserterOpen: 24.42, minInserterOpen: 20.31, maxInserterOpen: 37.82, inserterSearch: 0.72, minInserterSearch: 0.59, maxInserterSearch: 0.92, inserterHover: 4, minInserterHover: 3.36, maxInserterHover: 5.02, listViewOpen: 144.96, minListViewOpen: 133.29, maxListViewOpen: 158.44

[carlalexander]

This looks good to me! I'm glad you added a test. I think fix commit should come with a test (new or updated) 90% of the time.

With your test, you're looking if the original block is gone. Is it also possible to check if the text in the AI block matches the content from your mocked API request? This is more of a question. I think it'd be good to check that if we can.

[pirate-bot]

🎉 This PR is included in version 3.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀