Skip to content

Commit 24d7858

Browse files
simisonsimison
committed
Remove earlier CSS changes and document things better at Storybook
1 parent 256c67b commit 24d7858

4 files changed

Lines changed: 63 additions & 125 deletions

File tree

‎packages/ui/CHANGELOG.md‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,10 @@
22

33
## Unreleased
44

5-
### New Features
6-
7-
- `Card`: `Card.FullBleed` now supports edge-bumping in additional positions ([#77856](https://github.com/WordPress/gutenberg/pull/77856)):
8-
- As the **first child of `Card.Header`**, it extends flush to the card's top and side edges — ideal for hero images. Any siblings that follow (e.g. `Card.Title`) retain normal padding above them.
9-
- As the **sole child of `Card.Content`**, it extends flush to the card's side edges and additionally to the top edge when `Content` is the first card child, or the bottom edge when it is the last. This enables full-bleed content panels with or without a header above them.
10-
- The card's existing `overflow: clip` and `border-radius` handle rounded-corner clipping in all cases.
11-
125
### Bug Fixes
136

147
- `Drawer`: Restore the slide-out animation when the popup closes ([#77800](https://github.com/WordPress/gutenberg/pull/77800)).
8+
- `Card`: Fix missing gap between `Card.Header` and `Card.Content` when the header is not the first child of the card ([#77856](https://github.com/WordPress/gutenberg/pull/77856)).
159

1610
### Enhancements
1711

‎packages/ui/src/card/full-bleed.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,6 @@ import type { FullBleedProps } from './types';
77
* A container that breaks out of the card's padding to span edge-to-edge.
88
* Useful for full-width images, dividers, or embedded content.
99
*
10-
* When placed as the **first child** of `Card.Header`, the element also
11-
* extends flush to the card's top edge. The card's `overflow: clip` and
12-
* `border-radius` ensure the content is correctly clipped to the card's
13-
* rounded corners.
14-
*
1510
* Must be used as a direct child of `Card.Content` or `Card.Header`.
1611
*/
1712
export const FullBleed = forwardRef< HTMLDivElement, FullBleedProps >(

‎packages/ui/src/card/stories/index.story.tsx‎

Lines changed: 62 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -65,56 +65,6 @@ export const Default: Story = {
6565
},
6666
};
6767

68-
/**
69-
* `Card.FullBleed` as the sole child of `Card.Content` spans edge-to-edge
70-
* with no padding around it.
71-
*/
72-
export const FullBleedOnly: Story = {
73-
args: {
74-
children: (
75-
<Card.Content>
76-
<Card.FullBleed>
77-
<div
78-
style={ {
79-
height: 180,
80-
background:
81-
'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
82-
} }
83-
/>
84-
</Card.FullBleed>
85-
</Card.Content>
86-
),
87-
},
88-
};
89-
90-
/**
91-
* When `Card.FullBleed` is the sole child of `Card.Content` and a
92-
* `Card.Header` sits above it, the image bumps against the card's side and
93-
* bottom edges while the header retains its normal padding.
94-
*/
95-
export const FullBleedContentWithHeader: Story = {
96-
args: {
97-
children: (
98-
<>
99-
<Card.Header>
100-
<Card.Title>Card title</Card.Title>
101-
</Card.Header>
102-
<Card.Content>
103-
<Card.FullBleed>
104-
<div
105-
style={ {
106-
height: 180,
107-
background:
108-
'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
109-
} }
110-
/>
111-
</Card.FullBleed>
112-
</Card.Content>
113-
</>
114-
),
115-
},
116-
};
117-
11868
/**
11969
* `Card.FullBleed` breaks out of the card's padding to span
12070
* edge-to-edge. Useful for images, dividers, or embedded content.
@@ -157,68 +107,96 @@ export const HeaderOnly: Story = {
157107
};
158108

159109
/**
160-
* When `Card.FullBleed` is the **first child** of `Card.Header`, it extends
161-
* flush to the card's top and side edges — ideal for hero images. Content
162-
* that follows inside the header is padded normally.
110+
* An image placed directly inside `Card.Root` (before `Card.Header` and
111+
* `Card.Content`) naturally touches all four card edges. The card's
112+
* `overflow: clip` and `border-radius` clip it to the rounded corners, and
113+
* the header and content below retain their normal padding.
163114
*/
164-
export const FullBleedInHeader: Story = {
115+
export const HeroImageWithHeaderAndContent: Story = {
165116
args: {
166117
children: (
167118
<>
119+
<div
120+
style={ {
121+
height: 180,
122+
background:
123+
'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
124+
} }
125+
/>
168126
<Card.Header>
169-
<Card.FullBleed>
170-
<div
171-
style={ {
172-
height: 180,
173-
background:
174-
'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
175-
} }
176-
/>
177-
</Card.FullBleed>
178127
<Card.Title>Hero image card</Card.Title>
179128
</Card.Header>
180129
<Card.Content>
181-
<Text>
182-
The image above bleeds to the card&apos;s top and side
183-
edges.
184-
</Text>
130+
<Text>Card body text below the hero image and title.</Text>
185131
</Card.Content>
186132
</>
187133
),
188134
},
189135
};
190136

191137
/**
192-
* When `Card.FullBleed` is the **only child** of `Card.Header`, it fills the
193-
* header entirely — top and sides flush to the card edges, no extra padding
194-
* below.
138+
* Hero image followed only by a `Card.Header`. No content section below.
195139
*/
196-
export const FullBleedHeroOnly: Story = {
140+
export const HeroImageWithHeader: Story = {
197141
args: {
198142
children: (
199143
<>
144+
<div
145+
style={ {
146+
height: 180,
147+
background:
148+
'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
149+
} }
150+
/>
200151
<Card.Header>
201-
<Card.FullBleed>
202-
<div
203-
style={ {
204-
height: 180,
205-
background:
206-
'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
207-
} }
208-
/>
209-
</Card.FullBleed>
152+
<Card.Title>Hero image card</Card.Title>
210153
</Card.Header>
154+
</>
155+
),
156+
},
157+
};
158+
159+
/**
160+
* Hero image followed only by a `Card.Content` body. No header section.
161+
*/
162+
export const HeroImageWithContent: Story = {
163+
args: {
164+
children: (
165+
<>
166+
<div
167+
style={ {
168+
height: 180,
169+
background:
170+
'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
171+
} }
172+
/>
211173
<Card.Content>
212-
<Text>
213-
The image above bleeds to the card&apos;s top and side
214-
edges.
215-
</Text>
174+
<Text>Card body text below the hero image.</Text>
216175
</Card.Content>
217176
</>
218177
),
219178
},
220179
};
221180

181+
/**
182+
* A single image filling the entire card — no header or content sections.
183+
* The image is placed directly inside `Card.Root` and is clipped to the
184+
* card's rounded corners by `overflow: clip`.
185+
*/
186+
export const CoverImage: Story = {
187+
args: {
188+
children: (
189+
<div
190+
style={ {
191+
height: 180,
192+
background:
193+
'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
194+
} }
195+
/>
196+
),
197+
},
198+
};
199+
222200
/**
223201
* Use the `render` prop to change the underlying HTML elements for
224202
* better semantics. Here, `Card.Root` renders as a `<section>` and

‎packages/ui/src/card/style.module.css‎

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -43,33 +43,4 @@
4343
margin-inline: calc(-1 * var(--wp-ui-card-padding));
4444
width: calc(100% + 2 * var(--wp-ui-card-padding));
4545
}
46-
47-
/* When FullBleed is the first child of Header, extend it flush to the
48-
* card's top edge (the card's overflow:clip + border-radius handle
49-
* the rounded corner clipping).
50-
*/
51-
.header > .fullbleed:first-child {
52-
margin-block-start: calc(-1 * var(--wp-ui-card-padding));
53-
}
54-
55-
/* Restore the padding gap between the FullBleed and any subsequent
56-
* siblings (e.g. Card.Title) inside the header.
57-
*/
58-
.header > .fullbleed:first-child:not(:last-child) {
59-
margin-block-end: var(--wp-ui-card-padding);
60-
}
61-
62-
/* When FullBleed is the only child of Content and Content is the first
63-
* child of the card, extend FullBleed flush to the card's top edge.
64-
*/
65-
.content:first-child > .fullbleed:only-child {
66-
margin-block-start: calc(-1 * var(--wp-ui-card-padding));
67-
}
68-
69-
/* When FullBleed is the only child of Content and Content is the last
70-
* child of the card, extend FullBleed flush to the card's bottom edge.
71-
*/
72-
.content:last-child > .fullbleed:only-child {
73-
margin-block-end: calc(-1 * var(--wp-ui-card-padding));
74-
}
7546
}

0 commit comments

Comments
 (0)