Our Features List is functional but it could benefit from better layout styles. This component is a great example for a grid layout. With CSS Grid, we can define a set of columns / rows and new Feature
blocks will populate automatically according to the layout.
If you open up the Page Inspector in your dev tools, you'll see that InlineBlocks
actually adds a div to the DOM that wraps all the child blocks. In order to style the child blocks in a grid, we need to directly style that InlineBlocks
div.
Luckily, Tina provides a way to extend this components styles. We can do this by passing a custom class name, or by defining a new styled-component that styles InlineBlocks
.
Let's look at the simple approach first:
components/FeatureList.js
//...
export function FeatureList({ index }) {
return (
<BlocksControls
index={index}
focusRing={{ offset: 0 }}
insetControls
>
<div className="wrapper">
<InlineBlocks
name="features"
blocks={FEATURE_BLOCKS}
+ direction="horizontal"
+ className="feature-list"
+ max={3}
/>
</div>
</BlocksControls>
);
}
//...
This class and its grid styles have already been set up in styles/features.css
, so if you refresh you should see the new grid layout.
You may have noticed the new direction
prop passed to InlineBlocks
in the above examples. This controls whether the add block buttons render on the top / bottom or left / right. It also sets a direction for the drag context. It is vertical
by default.
direction?: 'vertical' | 'horizontal'
Another addition was the max
prop being set. You can control block limits with min
/ max
to ensure the blocks jive with your design.
When the block number reaches the max
value, additional blocks cannot be added. And likewise when the minimum is reached, additional blocks cannot be deleted. For this layout, the design works best when there are no more than 3 feature blocks, so we set max={3}
.
min?: number
max?: number
Here's what it would look like if you wanted to use styled components to implement this:
components/FeatureList.js
import styled from 'styled-components'
export function FeatureList({ index }) {
return (
<BlocksControls index={index} focusRing={{ offset: 0 }} insetControls>
<div className="wrapper">
<StyledInlineBlocks
name="features"
blocks={FEATURE_BLOCKS}
direction="horizontal"
/>
</div>
</BlocksControls>
)
}
// Define a new 'styled' version of InlineBlocks
const StyledInlineBlocks = styled(InlineBlocks)`
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 3rem;
grid-template-rows: auto;
`