feat: template cloud integration

[abaicus]

Closes Codeinwp/templates-cloud#98.

Summary

• Adds the new Template Cloud panel in the Dashboard page, under Integrations;

• Adds the new Cloud Library section in the Otter Library pattern inserter;

• Works in conjunction with https://github.com/Codeinwp/template-cloud-server/pull/1.

Screenshots

Dashboard / Integrations:

Editor / Pattern Library:

---

Test instructions

---

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	271.41 KB	271.41 KB	0 B (0.00%)
Blocks	1.56 MB	1.56 MB	2.68 KB (0.17%)
CSS	100.89 KB	100.89 KB	0 B (0.00%)
Dashboard	197.17 KB	204.59 KB	7.42 KB (3.76%)
Onboarding	161.1 KB	161.1 KB	0 B (0.00%)
Export Import	97.78 KB	97.78 KB	0 B (0.00%)
Pro	423.65 KB	423.65 KB	0 B (0.00%)

[pirate-bot]

Plugin build for da2f844 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: 259.85, firstPaint: 583.3, domContentLoaded: 1568.05, loaded: 1568.7, firstContentfulPaint: 3551.8, firstBlock: 7978.55, type: 13.07, minType: 11.84, maxType: 15.35, typeContainer: 9.5, minTypeContainer: 8.04, maxTypeContainer: 11.7, focus: 34.72, minFocus: 30.59, maxFocus: 40.43, inserterOpen: 22.11, minInserterOpen: 19.97, maxInserterOpen: 24.45, inserterSearch: 0.69, minInserterSearch: 0.62, maxInserterSearch: 0.82, inserterHover: 2.8, minInserterHover: 2.56, maxInserterHover: 3.36, listViewOpen: 139.21, minListViewOpen: 128.21, maxListViewOpen: 160.28

[ineagu]

@abaicus I had a chance to review this and here are some thoughts based on the updated implementation:

1. Since we moved adding sources in the settings, I would also move the initially suggested message to clarify what this is about : https://vertis.d.pr/i/RVz5VW (using links and adapting the design).

2. My initial idea was that the "My Library" link would still be displayed even if no sources are added and would act as a upsell/feature discovery. Considering the new implementation I see 2 ideas:

a) Display a link at the top like : https://vertis.d.pr/i/6Lt1sR, when clicked, it would open on the right some text explaining this + a link to the settings ( is this possible?

b) Since most of users won't use this, we can display that link at the bottom, after the categories.

3. I guess a concern you also had and decided not to show the link if there are no sources is how useful this would be for Otter users, we can open up quite easily a lot more possibilities and make this more useful if for example we suggest users a doc in which we would share for the start a free collection ( I can easily do that with some material design patterns that John created + install TC server on demosites).

Eventually later on we can also encourage users to share their collections if they want or we can create some more, free or paid.

To recap :

1. We need to fix
2. I need to be clear if it possible and what makes sense for you a or b
3. I need your thoughts on potential technical challenges + on the idea itself. If we skip this, we can move with 2 b)

[abaicus]

@ineagu

1. Sounds good. I agree! 👍🏻 What should we be linking to for TC & Otter Agency? Should we link straight to the pricing, or just the landing page?

2. You mean displaying some content instead of the patterns on the right part of the modal? That should be possible. I think we can go with a, as the pattern categories list is pretty big, and might grow larger in the future. Then again, I agree with you that the feature might not be used that much, so b might make more sense. I think either positioning is valid, but I incline to a, seeing that that's where we're going to display the categories after you connect.

For the content on the right, do you have anything specific in mind, or can we go with something similar to what we'd have on 1, plus the link to settings?

3. I don't see much technical challenge regarding this. We can simply predefine a source the user can remove, but it means that they would lose context if we treat it as a simple source that can be removed, i.e. the user will not get the empty state of the sources panel, or the link we discussed on 2.

[abaicus]

Another question for 1: Should this description be displayed regardless if the user has sources already, or only if there are no sources set yet? Also, for the links, would there be any desired UTM parameters that we should add?

Here is the updated state with the description + links:

[ineagu]

1. For links we can use for both : ?utm_source=wpadmin&utm_medium=admin&utm_campaign=templatecloud&utm_content=otter-blocks

2. We can display the link at the top and for the content on the right here is the design & text : https://claude.site/artifacts/21a78a31-161f-4309-8385-f54e147311ef

3. For the settings, we can use this link and text, before the existing notice : Check-out our curated list of sources that you can import here.

[HardeepAsrani]

Looks good, left few observations.

[abaicus]

@HardeepAsrani thanks for the suggestions! I've addressed them 👍🏻

[ineagu]

@abaicus

Let's also add the external link icon to Premium designs and move on 3rd position
Use f18f icon for My Library

This to make it clear that is a feature and not an external link or that is not "locked"