Add Modal Block

[Soare-Robert-Daniel]

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

Summary

The same features like Popup except for Popup Settings tabs in the Inspector

Dynamic Overriding

The save function of the modal saves only the inner content. The complete HTML structure is done via PHP, which overrides the default saving data.

This method ensures that the modal is working under a valid license while keeping the original data safe.

Screenshots

2024-07-31_16-21-21.mp4

---

Test instructions

Note

This is PRO block, you will need Otter Pro

Modal is a popup with only the anchor option.

1. Insert a button and set an anchor
2. Insert a modal with the anche for the button
3. Check if it works like in the video.

---

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

[Soare-Robert-Daniel]

@ineagu @HardeepAsrani When a Free user uses the Modal block which Pro, it will see this:

Two questions:

• Is the upsell message good?
• Should we use a different icon for the block to be different from the popup (the popup icon is used in the image)?

[pirate-bot]

Bundle Size Diff

Package	Old Size	New Size	Diff
Animations	265.96 KB	271.06 KB	5.11 KB (1.92%)
Blocks	1.53 MB	1.54 MB	7.64 KB (0.49%)
CSS	95.66 KB	100.76 KB	5.11 KB (5.34%)
Dashboard	207.2 KB	212.46 KB	5.26 KB (2.54%)
Onboarding	155.62 KB	160.72 KB	5.11 KB (3.28%)
Export Import	92.68 KB	97.79 KB	5.11 KB (5.51%)
Pro	383.15 KB	408.18 KB	25.03 KB (6.53%)

[pirate-bot]

Plugin build for 898a64b 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: 233.6, firstPaint: 160.15, domContentLoaded: 1558.5, loaded: 1559.4, firstContentfulPaint: 3446.15, firstBlock: 7597.15, type: 11.24, minType: 10.15, maxType: 12.97, typeContainer: 8.94, minTypeContainer: 7.76, maxTypeContainer: 10.91, focus: 32.2, minFocus: 28.12, maxFocus: 40.2, inserterOpen: 21.3, minInserterOpen: 19.57, maxInserterOpen: 23.65, inserterSearch: 0.69, minInserterSearch: 0.61, maxInserterSearch: 0.8, inserterHover: 2.95, minInserterHover: 2.47, maxInserterHover: 3.72, listViewOpen: 143.97, minListViewOpen: 132.01, maxListViewOpen: 155.76

[ineagu]

thanks for the video @Soare-Robert-Daniel .

Can we have default content in the modal popup as we have in the popup block?

Can we add the button as well when we add the modal block with the anchor configured both in the modal & button settings?

Or

Can we simply add a button once the modal block is added and (edit modal) would be a buton moved into the sidebar settings of the "special" button block? Along with the modal settings?

Which one seems most logical and easy to do for you?

My concerns:

I find it that is unnecessary to require 3 steps that the user might not find.
The edit modal button is disrupting the editor view design and it does't look the same as frontend.

[HardeepAsrani]

@Soare-Robert-Daniel We also need to list it here: https://github.com/Codeinwp/otter-internals/issues/224

[HardeepAsrani]

nevermind the previous comments (see edited), I see the latest commit to auto-insert the button.

[HardeepAsrani]

Looks all good, left a couple of small things but overall it works nicely.

[ineagu]

@ineagu @HardeepAsrani When a Free user uses the Modal block which Pro, it will see this:

Two questions:

• Is the upsell message good?
• Should we use a different icon for the block to be different from the popup (the popup icon is used in the image)?

this message looks good to me, we can go with the same icon for now, I couldn't find a good one.

[rodica-andronache]

@Soare-Robert-Daniel tested and everything works well, except for a small thing with the close button.

If I choose a border color and position: outside, everything looks good in the editor.

Using Neve, the close button color is appearing ok, but the position of the close button is not appearing outside

Using the default theme 2024, neither the button color or position applies

[Soare-Robert-Daniel]

@rodica-andronache, the button position should work now, fixed the malformed class name.

Regarding the button color, in the new version of the WP Theme, some CSS properties are no longer added by the core, so I added them to our files.

[rodica-andronache]

@Soare-Robert-Daniel for me, it's still not working on frontend, either with Neve or 2024, the outside position of the close button is not working.

Plus, now in the backend, the image is also outside the container when you choose Outside position, for the close button.

Also, I've noticed the block is missing the PRO tag, when using just the free version

[Soare-Robert-Daniel]

The click outside should have been fixed.

2024-08-07_18-15-14.mp4

---

Regarding the out-the-frame window. It seems that WP changed some CSS, and our fixed offset of 40px does not seem to work nicely for the new version.

This is problematic for some blocks like Core Image, which like to not respect their frame nicely. To avoid breaking compatibility with older versions, I made a trick in which I put the default template inside a stack with a top margin of 40px to counterbalance.

---

The PRO labels in dashboard is not fixed

[rodica-andronache]

@Soare-Robert-Daniel the issues are fixed now 👍
I have just a small question: Is it expected to not be able to have different heights for Desktop/Mobile? Meaning, to have Fit Content on Desktop and a Custom height on mobile https://vertis.d.pr/i/8SxCxV

[Soare-Robert-Daniel]

@rodica-andronache, I think yes, it is the same behavior as Popup. I'm not sure if @HardeepAsrani remembers the reason for this.

[pirate-bot]

🎉 This PR is included in version 3.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀