Conversation
…arlie/add-layoutblock
…u-blocks into charlie/add-layoutblock
acketon
left a comment
acketon
left a comment
There was a problem hiding this comment.
This is a good start for a prototype. To be able to merge this though can you create a new feature branch off of develop called feature/bu-prebuilt-layout-block and set this PR to merge into that branch? This isn't ready to merge into develop.
I added a few comments for some small tweaks. I'm really impressed how much React you were able to get added to this to create a prototype.
| // | ||
|
|
||
| .wp-block-bu-prebuilt-layout { | ||
| container-name: prebuilt-layout; |
There was a problem hiding this comment.
We should add all of the important styles applied to these elements that are being inherited from either the WP admin styles or Foundation. For example things like box-sizing, display, etc. Anything applied via reset or a * selector especially.
| } | ||
|
|
||
| // 2 columns layouts | ||
| &:has( > :where( *:nth-child( 2 ):nth-last-child( 1 ) ) ) { |
There was a problem hiding this comment.
I'd like to find a different way of handling these selectors that doesn't rely on nth-child. I'm sure this works, it's just so hard to read at a glance. Maybe specific class names or data attributes should be added.
| row-gap: var( --prebuilt-row-gap, var( --bu-container-row-gap, 1rem ) ); | ||
|
|
||
| //make sure no margin or padding is applied to layout segments | ||
| .wp-block-bu-prebuilt-layout-segment { |
There was a problem hiding this comment.
When we are prefixing class names in blocks I don't think it is necessary to nest the classes. IMO at least our classes should be as low of specificity as possible.
| return ( | ||
| <Fragment> | ||
| <div {...blockProps}> | ||
| <div class='wp-block-bu-prebuilt-layout__inner-container'> |
There was a problem hiding this comment.
Tip: When writing HTML inside JSX (which is the name for the HTML-like markup here inside a component's return function you need to use className instead of class.
Co-authored-by: Dakota Chichester <acketon@gmail.com>
Co-authored-by: Dakota Chichester <acketon@gmail.com>
…arlie/add-layoutblock
2 participants
This request added style and static markup examples for the Prebuilt Layouts BU block.
At the moment it just uses static markup examples (temporarily stored in
/src/blocks/prebuiltlayout/bu-blocks-block-prebuiltlayout.hbs).The markup is composed of the following:
-
wp-block-bu-prebuilt-layoutthe block container divwp-block-bu-prebuilt-layout__inner-containerinner container that helps set max-width restraints on the contents housed within.wp-block-bu-prebuilt-layout-segmentSandbox link
Related issues