[#5] Logo Grid UI #28
Conversation
| @layer components { | ||
| .acf-block-logo-grid figure { | ||
| @apply flex; | ||
| @apply basis-1/2-gap lg:basis-1/4-gap; |
There was a problem hiding this comment.
Since we can only use flexbox layout with components, these classes have been added to simulate grid-cols- from Blueprint.
| flexBasis: { | ||
| '1/2-gap': 'calc((100%/2) - var(--wp--style--block-gap))', | ||
| '1/4-gap': 'calc((100%/4) - var(--wp--style--block-gap))', | ||
| }, |
There was a problem hiding this comment.
Column widths cannot be calculated correctly unless the gap is subtracted from the column width.
|
I may be overthinking, but should we also add an aspect ratio to the images to keep them a consistent height? This could be assumed from Blueprint, but the placeholder images are all of the same height and width. |
| /* Fix for image sizing in editor */ | ||
| .acf-block-logo-grid .components-resizable-box__container { | ||
| @apply !shrink; | ||
| } |
There was a problem hiding this comment.
Images remain at full width in the editor because of the .components-resizable-box__container classes [see discussion].
There was a problem hiding this comment.
We have CSS nesting added so let's nest the CSS so it is less tags.
|
@empee3 Agreed it looks a bit weird without an aspect ratio. If we can set them in TW so the |
empee3
force-pushed
the
mp/5-logo-grid-ui
branch
from
9f26a4b
to
5cf6d21
Compare
empee3
force-pushed
the
mp/5-logo-grid-ui
branch
from
5cf6d21
to
808e95b
Compare
Summary
This PR pulls in Blueprint styles for the Logo Grid Component.
Issues
Testing Instructions
largebreakpoint, then four columns to match Blueprint)Screenshots
Two columns:
Four columns:
With Aspect Ratio: