feat(cxl-ui): cxl-section - implement hero section design facelift

[freudFlintstone]

No description provided.

[freudFlintstone]

Task linked: CU-86ayrhn95 Change header style on Home, all-access MD, hub and course landing pages

[github-actions]

size-limit report 📦

Path	Size
packages/cxl-ui/pkg/dist-web/cxl-ui.js	67.49 KB (+0.77% 🔺)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js	11.87 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js	28.05 KB (-0.31% 🔽)
packages/cxl-ui/pkg/dist-web/vendor.js	135.58 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js, packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js, packages/cxl-ui/pkg/dist-web/cxl-ui.js, packages/cxl-ui/pkg/dist-web/manifest.js, packages/cxl-ui/pkg/dist-web/unresolved.js, packages/cxl-ui/pkg/dist-web/vendor.js	244.15 KB (+0.18% 🔺)

[freudFlintstone]

Task linked: CU-86ayraehj Front-end bit of nav bar facelift

[lkraav]

By "Header", are we really meaning "Hero" here? "Header" is the part where navigation lives.

[paulkirspuu]

Rather random percentages, but I hope they were thoroughly considered.

Also, was max-height ever discussed?

[freudFlintstone]

Yes, @heshfekry and I tested them during a call, to try matching them to the design. However, those values have since indeed changed, to improve visual balance and make the hero image more prominent.

You're are right, max-height would have worked fine in a more conventional scenario, but relying on dynamic values made it easier to handle responsiveness without adding several break points, and aligning the bottom of the element with the bottom of the image.

[freudFlintstone]

In the latest commit , I set up a way to avoid having to go through each page in the block editor to apply the update.

1. Added global scope CSS to hide the background image already set in the post
2. By adding the following inline style to each id="view-hero" cxl-section (similar to how @pawelkmpt added the wide-background-<color> in PHP), hero section will get the updated design without any further work. It will also make any subsequent changes much easier.

style="--hero-image: url([wpv-post-featured-image size="large" output="url"])"

This is not ideal, by any means, but it's the least changes required, given we already have a lot going on in the code base and in wordpress. Were this being done from scratch, cxl-section[theme="cxl-hero"] should have some basic scaffolding template and we would pass the URL as a property.

[pawelkmpt]

Suggestion from @lkraav https://github.com/conversionxl/cxl-wpstarter/pull/284#discussion_r1412063707