Feat/visibility conditions uix

[abaicus]

Closes Codeinwp/otter-internals#287.

Summary

• Improves design and UX of the visibility conditions panel;
• Fixes issue with WooCommerce product queries not working with 0 per_page elements to fetch all posts;

Screenshots

---

Test instructions

• Make sure you can add all the fields;
• Make sure nothing breaks;
• When migrating from a previous version, things should still be working, no conditions should be breaking;
• Make sure all conditions still work as expected individually and combined;

---

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	178.24 KB	178.24 KB	0 B (0.00%)
Blocks	1.47 MB	1.5 MB	30.82 KB (2.05%)
CSS	7.87 KB	7.87 KB	0 B (0.00%)
Dashboard	108.48 KB	108.48 KB	0 B (0.00%)
Onboarding	68.14 KB	68.14 KB	0 B (0.00%)
Export Import	4.7 KB	4.7 KB	0 B (0.00%)
Pro	299.31 KB	320.08 KB	20.77 KB (6.94%)

[pirate-bot]

Plugin build for 2a84f14 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: See serial and parallel matrix jobs

Performance Results

serverResponse: {"q25":441.5,"q50":461.55,"q75":486.7,"cnt":10}, firstPaint: {"q25":473.3,"q50":546.1,"q75":582.6,"cnt":10}, domContentLoaded: {"q25":2557.6,"q50":2569.8,"q75":2582.4,"cnt":10}, loaded: {"q25":2558,"q50":2570.35,"q75":2583,"cnt":10}, firstContentfulPaint: {"q25":4806.6,"q50":4838.85,"q75":4870,"cnt":10}, firstBlock: {"q25":7749.7,"q50":7787,"q75":7839,"cnt":10}, type: {"q25":14.07,"q50":14.26,"q75":14.86,"cnt":10}, typeWithoutInspector: {"q25":12.86,"q50":13,"q75":13.34,"cnt":10}, typeWithTopToolbar: {"q25":16.23,"q50":16.68,"q75":18.78,"cnt":10}, typeContainer: {"q25":7.92,"q50":8.15,"q75":8.33,"cnt":10}, focus: {"q25":48.7,"q50":49.91,"q75":52.25,"cnt":10}, inserterOpen: {"q25":16.07,"q50":16.59,"q75":16.8,"cnt":10}, inserterSearch: {"q25":4.99,"q50":5.17,"q75":5.37,"cnt":10}, inserterHover: {"q25":3.43,"q50":3.58,"q75":3.76,"cnt":20}, loadPatterns: {"q25":1180.94,"q50":1222,"q75":1232.9,"cnt":10}, listViewOpen: {"q25":91.53,"q50":94.76,"q75":100.55,"cnt":10}

[poonam279]

@abaicus, The conditions are working fine with the latest build, and the migration also includes previous conditions.

One minor UI issue I noticed is that the helper/description text for conditions is being truncated in the condition selector. It would be great if we could display the full helper text by allowing it to wrap to multiple lines.

[abaicus]

@poonam279 as it's being a preview text it's fine this way. If you want to understand the full conditions, you should expand the panel.