feat: Otter Patterns Library

[HardeepAsrani]

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

Summary

This PR adds a new Patterns Library to the plugin that displays patterns from Otter, specifically added to "otter-blocks" library.

Video Preview: https://www.loom.com/share/4112ccdf02f847a6b15ed14b8b71046f

To add new patterns, one can add them the normal way and use the "otter-blocks" category.

It has the following features:

• Full-Screen Preview
• Bulk Insertion
• Favorites

Screenshots

https://www.loom.com/share/4112ccdf02f847a6b15ed14b8b71046f

---

Test instructions

• Confirm all the described features work.
• The Button should be displayed on the top bar of the Editor.
• Confirm it works in FSE Editor.

---

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

[HardeepAsrani]

@ineagu Let me know what you think.

[pirate-bot]

Bundle Size Diff

Package	Old Size	New Size	Diff
Animations	263.48 KB	263.48 KB	0 B (0.00%)
Blocks	1.52 MB	1.54 MB	13.53 KB (0.87%)
CSS	92.73 KB	92.73 KB	0 B (0.00%)
Dashboard	195.5 KB	196.02 KB	528 B (0.26%)
Onboarding	153.14 KB	153.14 KB	0 B (0.00%)
Export Import	90.21 KB	90.21 KB	0 B (0.00%)
Pro	361.57 KB	361.57 KB	0 B (0.00%)

[pirate-bot]

Plugin build for 50f6807 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: 238.9, firstPaint: 156.55, domContentLoaded: 1563.95, loaded: 1564.8, firstContentfulPaint: 3498.4, firstBlock: 7788, type: 12.38, minType: 11.23, maxType: 13.75, typeContainer: 8.69, minTypeContainer: 8, maxTypeContainer: 9.22, focus: 32.96, minFocus: 27.72, maxFocus: 40.62, inserterOpen: 21.29, minInserterOpen: 19.49, maxInserterOpen: 25.15, inserterSearch: 0.71, minInserterSearch: 0.61, maxInserterSearch: 0.81, inserterHover: 3.76, minInserterHover: 2.57, maxInserterHover: 14.85, listViewOpen: 141.69, minListViewOpen: 129.54, maxListViewOpen: 154.5

[ineagu]

this looks great @HardeepAsrani ! Can we display the pro patterns here as well since we aren't in the oficial context anymore, just that you won't be able to import those (we can switch to preview the cta) and they would have a pro label?

[ineagu]

@HardeepAsrani we'll also need a setting in the sidebar panel to disable/enable the patterns button + launch the pattern.

the button there can be intrusive for people that don't plan to use this part.

[HardeepAsrani]

@ineagu where in the sidebar do you want the button? Inside the Otter settings panel?

Also, how do you want use to add Pro patterns upsell here as they aren't registered until you install the Pro?

[ineagu]

1. I have reviewed the theme and the setting can be here: https://vertis.d.pr/i/bH1TQj. When deactivated the button would disappear, since the users can continue to use the patterns through the default inserter.

2. I was wondering if now that we have our custom pattern explorer, we can somehow display the pro pages/patterns (just here). Let me know if this can be possible easily and in what manner.

[HardeepAsrani]

@ineagu

1. I have added that.
2. Right now we don't have a way to do that but we can make some changes to the API to fetch all the patterns. Do you want something like that? But having that will require to make the Patterns API point available for public, currently it's restricted to licensed users only.

[ineagu]

thanks for the update @HardeepAsrani.

It's good to know for 2. but we can probably move on now with a simpler solution which is to add a link with a lock icon, called: Premium Designs. Which when clicked is redirects users to : https://themeisle.com/plugins/otter-blocks/patterns/

[pirate-bot]

🎉 This PR is included in version 3.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀