feat(cxl-ui): cxl-app-layout layout={hp} hero section #268
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
size-limit report 📦
|
|
Would be useful if we'd get it to render Gutenberg blocks like WP does. |
lkraav
requested changes
Mar 22, 2023
packages/storybook/cxl-ui/cxl-app-layout/layout=1c-hp.stories.js
Outdated
Show resolved
Hide resolved
packages/storybook/cxl-ui/cxl-app-layout/layout=1c-hp.stories.js
Outdated
Show resolved
Hide resolved
lkraav
reviewed
Mar 22, 2023
Comment on lines
28
to
45
| <div class="is-layout-flex wp-container-3 wp-block-columns"> | ||
| <div class="is-layout-flow wp-block-column"> | ||
| <h1 class="entry-title has-white-color has-text-color" id="h-top-1-marketersteach-you-what-they-know"><strong>Top 1% marketers</strong> teach you what they know.</h1> | ||
| <h3 class="has-white-color has-text-color" id="h-hand-picked-instructors-peer-vetted-forexpertise-and-success-record">Hand picked instructors peer vetted for expertise and success record.</h3> | ||
| <p class="has-white-color has-text-color">Expert online marketing courses on customer acquisition, brand & product marketing, conversion optimization, and digital analytics.</p> | ||
| <p><vaadin-button theme="primary large" style="cursor: pointer; padding-left: var(--lumo-space-s);" onclick="window.location.href='https://cxl.com/institute/pricing/'" tabindex="0" role="button"><vaadin-icon slot="prefix" icon="lumo:angle-right"></vaadin-icon>Start 7-day trial for $1</vaadin-button></p> | ||
| <p class="has-white-color has-text-color has-small-font-size">Starting from $89/month.</p> | ||
| </div> | ||
| <div class="is-layout-flow wp-block-column"> | ||
| <div class="wp-block-image"> | ||
| <figure class="alignleft size-large"> | ||
| <img decoding="async" src="https://cxl.com/institute/wp-content/uploads/2023/03/Carlos_Hero_Picture_BW-_kjid_Circle_01.png" alt="" data-src="https://cxl.com/institute/wp-content/uploads/2023/03/Carlos_Hero_Picture_BW-_kjid_Circle_01.png" class="lazyloaded"><noscript><img decoding="async" src="https://cxl.com/institute/wp-content/uploads/2023/03/Carlos_Hero_Picture_BW-_kjid_Circle_01.png" alt="" data-eio="l" /></noscript> | ||
| </figure> | ||
| </div> | ||
| <p class="has-white-color has-text-color has-small-font-size">“CXL influenced a quantum leap in my career. After 10 months of study, I was hired alongside some of the most brilliant minds in experimentation to work with leading brands from all over the world.”</p> | ||
| <p class="has-white-color has-text-color has-small-font-size"><strong>Carlos Trujillo</strong>,<br>Experimentation<br>Strategist @ Speero</p> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
I think WP Columns block structure translates to Pure grid pretty well - same div.pure-g > div.column > content?
This seems to be the time to try to filter Columns block output, and avoid bringing in additional complexity with WP core CSS as "must-have".
paulkirspuu
force-pushed
the
paul/feat/cxl-app-layout-hp
branch
from
b90401a to
9e78e32
Compare
paulkirspuu
changed the base branch from
master
to
leho-optimize-cxl-app-layout-stories
lkraav
requested changes
Mar 27, 2023
| @@ -1,5 +1,6 @@ | |||
| import { html, nothing } from 'lit'; | |||
| import { CXLAppLayout1cContent } from './cxl-app-layout/layout=1c.story'; | |||
| import { CXLAppLayout1cHPContent } from './cxl-app-layout/layout=1c-hp.story'; | |||
There was a problem hiding this comment.
I think we might want to follow WP terminology, from is_front_page(). I'd also spell it out, "hp / fp" is just too cryptic.
lkraav
reviewed
Mar 27, 2023
|
|
||
| export const CXLSectionHPHero = { | ||
| args: { | ||
| backgroundColor: 'var(--lumo-shade)', |
There was a problem hiding this comment.
This token alone kills all text visibility? Dark background, if that's the design, requires a bit more work than this.
Example https://cxl.com/institute/programs/conversion-optimization/
But indeed, this implementation is currently not in CXL UI. Maybe time to bring it?
Comment on lines
+25
to
+46
| <div class="is-layout-flex wp-container-3 wp-block-columns"> | ||
| <div class="is-layout-flow wp-block-column"> | ||
| <h1 class="entry-title has-white-color has-text-color" id="h-top-1-marketersteach-you-what-they-know"><strong>Top 1% marketers</strong> teach you what they know.</h1> | ||
| <h3 class="has-white-color has-text-color" id="h-hand-picked-instructors-peer-vetted-forexpertise-and-success-record">Hand picked instructors peer vetted for expertise and success record.</h3> | ||
| <p class="has-white-color has-text-color">Expert online marketing courses on customer acquisition, brand & product marketing, conversion optimization, and digital analytics.</p> | ||
| <p> | ||
| <vaadin-button theme="primary large"> | ||
| <vaadin-icon slot="prefix" icon="lumo:angle-right"></vaadin-icon>Start 7-day trial for $1 | ||
| </vaadin-button> | ||
| </p> | ||
| <p class="has-white-color has-text-color has-small-font-size">Starting from $89/month.</p> | ||
| </div> | ||
| <div class="is-layout-flow wp-block-column"> | ||
| <div class="wp-block-image"> | ||
| <figure class="alignleft size-large"> | ||
| <img decoding="async" src="https://cxl.com/institute/wp-content/uploads/2023/03/Carlos_Hero_Picture_BW-_kjid_Circle_01.png" alt="" data-src="https://cxl.com/institute/wp-content/uploads/2023/03/Carlos_Hero_Picture_BW-_kjid_Circle_01.png" class="lazyloaded"><noscript><img decoding="async" src="https://cxl.com/institute/wp-content/uploads/2023/03/Carlos_Hero_Picture_BW-_kjid_Circle_01.png" alt="" data-eio="l" /></noscript> | ||
| </figure> | ||
| </div> | ||
| <p class="has-white-color has-text-color has-small-font-size">“CXL influenced a quantum leap in my career. After 10 months of study, I was hired alongside some of the most brilliant minds in experimentation to work with leading brands from all over the world.”</p> | ||
| <p class="has-white-color has-text-color has-small-font-size"><strong>Carlos Trujillo</strong>,<br>Experimentation<br>Strategist @ Speero</p> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
Column system is the primary remaining challenge?
Can you post a TODO checklist in PR opener as you see it?
Quick experiment with loading BE CSS rendered quite well
diff --git a/packages/storybook/.storybook/preview-head.html b/packages/storybook/.storybook/preview-head.html
index 699736e5..3e581715 100644
--- a/packages/storybook/.storybook/preview-head.html
+++ b/packages/storybook/.storybook/preview-head.html
@@ -4,3 +4,4 @@
delete Document.prototype.adoptedStyleSheets;
</script>
<link rel="stylesheet" id="cxl-font-css" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i,900|Libre+Baskerville:400,400i,700" type="text/css" media="all">
+<link rel="stylesheet" id="wp-block-library-css" href="https://cxl.com/institute/wp-includes/css/dist/block-library/style.min.css?ver=6.1.1" type="text/css" media="all">(Requires SB full restart.)
❗ I looked at unminified https://cxl.com/institute/wp-includes/css/dist/block-library/style.css?ver=6.1.1
It has a metric ton of crap. I think we need to just take frontend block styling over in our Storybook, as we don't really use that many blocks.
❗ Beyond general BE styling, specifically for Columns, we still have Pure CSS vs Block Editor. Among other things, breakpoints are different.
✔️ I will attempt a mu-plugin in the spirit of cxl-section. Or it might be these integrations should migrate into wp-theme-lib CXL UI integration, that actually makes more sense.
Anything else you need to land this front page project?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
https://app.clickup.com/t/861mhf04m