Skip to content

Commit 8ac2498

Browse files
kaeizenkaeizen
committed
fix block style previews in style guide
1 parent e4e88d3 commit 8ac2498

File tree

7 files changed

+344
-155
lines changed

7 files changed

+344
-155
lines changed

‎src/components/design-library-list/design-library-list-item.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
/**
1414
* External dependencies.
1515
*/
16-
import { createRoot } from '~stackable/util'
16+
import { cleanSerializedBlock, createRoot } from '~stackable/util'
1717
import {
1818
isPro, i18n, wpGlobalStylesInlineCss, devMode,
1919
} from 'stackable'
@@ -149,7 +149,7 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
149149
preview = addPlaceholderForPostsBlock( preview, defaultValues[ 'posts_placeholder' ], defaultValues )
150150
}
151151

152-
const cleanedBlock = preview.replace( /<!--[\s\S]*?-->/g, '' ) // removes comment
152+
const cleanedBlock = cleanSerializedBlock( preview )
153153

154154
previewRef.current.render( <DesignPreview
155155
blocks={ cleanedBlock }

‎src/components/style-guide/components.js‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
/* eslint-disable jsx-a11y/anchor-is-valid */
22
import {
3-
LONG_TEXT, DefaultButton, DefaultImage,
4-
DefaultOutlineButton, RenderBlock,
3+
DefaultButton,
4+
DefaultOutlineButton,
5+
RenderBlock,
6+
getPlaceholders,
57
} from './utils'
68
import heroBg from './images/hero-bg.webp'
79
import mediaText from './images/media-text.webp'
810
import { COLOR_SCHEME_PROPERTY_LABELS } from '../color-scheme-preview'
911

1012
import { i18n, srcUrl } from 'stackable'
1113
import { isDarkColor } from '~stackable/util'
14+
import { LONG_TEXT } from '~stackable/util/block-templates'
1215

1316
import { __, sprintf } from '@wordpress/i18n'
1417
import {
@@ -208,32 +211,38 @@ export const BlockStyles = ( { allBlockStyles, className } ) => {
208211
<h1 className="ugb-style-guide__section-title ugb-style-guide__title">{ __( 'Web Elements', i18n ) }</h1>
209212
<h2 className="ugb-style-guide__section-subheading ugb-style-guide__title">{ __( 'Buttons', i18n ) }</h2>
210213
<div className={ `ugb-style-guide__elements ugb-style-guide__elements__buttons ugb-style-guide__preview-root ${ className }` }>
211-
<DefaultButton text={ __( 'Default', i18n ) } />
214+
<RenderBlock blockName="stackable/button" attributes={ { text: __( 'Button', i18n ) } } />
212215
{ 'stackable/button' in allBlockStyles && allBlockStyles[ 'stackable/button' ].length > 0 && <>
213216
{ allBlockStyles[ 'stackable/button' ].map( ( blockStyle, index ) => {
214217
return <RenderBlock
215218
key={ index }
216219
blockName="stackable/button"
217220
attributes={ {
218221
...blockStyle.attributes,
219-
text: blockStyle.name,
222+
text: __( 'Button', i18n ),
220223
blockStyle: blockStyle.slug,
221-
} } />
224+
} }
225+
name={ blockStyle.name }
226+
/>
222227
} ) }
223228
</> }
224229
</div>
225230
<h2 className="ugb-style-guide__section-subheading ugb-style-guide__title">{ __( 'Images', i18n ) }</h2>
226231
<div className={ `ugb-style-guide__elements ugb-style-guide__elements__images ugb-style-guide__preview-root ${ className }` }>
227-
<DefaultImage imgSrc={ srcUrl + '/' + heroBg } />
232+
{ /* <DefaultImage imgSrc={ srcUrl + '/' + heroBg } /> */ }
233+
<RenderBlock blockName="stackable/image" attributes={ { imageExternalUrl: `${ srcUrl }/${ heroBg }` } } />
228234
{ 'stackable/image' in allBlockStyles && allBlockStyles[ 'stackable/image' ].length > 0 && <>
229235
{ allBlockStyles[ 'stackable/image' ].map( ( blockStyle, index ) => {
230236
return <RenderBlock
231237
key={ index }
232238
blockName="stackable/image"
233239
attributes={ {
234240
...blockStyle.attributes,
241+
imageExternalUrl: `${ srcUrl }/${ heroBg }`,
235242
blockStyle: blockStyle.slug,
236-
} } />
243+
} }
244+
name={ blockStyle.name }
245+
/>
237246
} ) }
238247
</> }
239248
</div>
@@ -246,19 +255,23 @@ export const BlockStyles = ( { allBlockStyles, className } ) => {
246255
}
247256

248257
const blockTitle = getBlockType( blockName ).title
258+
const { attributes, innerBlocks } = getPlaceholders( blockName )
249259
return ( <Fragment key={ index }>
250260
<h2 className="ugb-style-guide__section-subheading ugb-style-guide__title">{ blockTitle }</h2>
251261
<div className={ `ugb-style-guide__elements ugb-style-guide__preview-root ${ className }` }>
252262
{ /* Render Default Block Style */ }
253-
<RenderBlock key={ 0 } blockName={ blockName } />
263+
<RenderBlock key={ 0 } blockName={ blockName } attributes={ attributes } innerBlocks={ innerBlocks } />
254264
{ blockStyles.map( ( blockStyle, styleIndex ) => (
255265
<RenderBlock
256266
key={ styleIndex + 1 }
257267
blockName={ blockName }
258268
attributes={ {
269+
...attributes,
259270
...blockStyle.attributes,
260271
blockStyle: blockStyle.slug,
261272
} }
273+
innerBlocks={ innerBlocks }
274+
name={ blockStyle.name }
262275
/>
263276
) ) }
264277
</div>

‎src/components/style-guide/editor.scss‎

Lines changed: 75 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -171,46 +171,6 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
171171
}
172172
}
173173

174-
:where(.ugb-style-guide__color-scheme):hover .ugb-style-guide__color-scheme__button {
175-
background-color: var(--parent-hover-background-color) !important;
176-
color: var(--parent-hover-color) !important;
177-
}
178-
.ugb-style-guide__color-scheme__button {
179-
background-color: var(--stk-button-background-color);
180-
color: var(--stk-button-text-color);
181-
&::before {
182-
border-style: var(--stk-button-border-style, none);
183-
border-width: var(--stk-button-border-width, 0);
184-
}
185-
186-
&:hover {
187-
background-color: var(--hover-background-color, var(--stk-button-background-color)) !important;
188-
color: var(--hover-color, var(--stk-button-text-color)) !important;
189-
}
190-
}
191-
:where(.ugb-style-guide__color-scheme):hover .ugb-style-guide__color-scheme__button--outline {
192-
color: var(--parent-hover-color) !important;
193-
&::before {
194-
border-color: var(--parent-hover-border-color) !important;
195-
}
196-
}
197-
.ugb-style-guide__color-scheme__button--outline {
198-
background: transparent;
199-
color: var(--stk-button-outline-color);
200-
&::before {
201-
border-color: var(--stk-button-outline-color) !important;
202-
border-width: var(--stk-button-ghost-border-width, 2px);
203-
border-style: solid;
204-
}
205-
&:hover {
206-
color: var(--hover-color, var(--stk-button-outline-color)) !important;
207-
&::before {
208-
border-color: var(--hover-border-color, var(--stk-button-outline-color)) !important;
209-
}
210-
}
211-
}
212-
213-
214174
.ugb-style-guide__color-scheme__colors {
215175
p {
216176
margin: 0;
@@ -301,16 +261,85 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
301261
display: flex;
302262
flex-wrap: wrap;
303263
gap: 24px;
264+
265+
.is-style-plain .stk-button {
266+
background: transparent !important;
267+
}
268+
269+
> div {
270+
display: flex;
271+
flex-direction: column;
272+
align-items: center;
273+
274+
> * {
275+
margin-bottom: 0;
276+
}
277+
> p {
278+
margin-top: 12px;
279+
}
280+
}
281+
> div:has(> .stk-block-divider, > .stk-block-separator, > .stk-block-spacer) {
282+
&,
283+
> div {
284+
width: 100%;
285+
}
286+
}
287+
> div:has(> .stk-block-image, > .stk-block-blockquote, > .stk-block-card, > .stk-block-team-member, > .stk-block-testimonial) {
288+
max-width: calc(100% / 3 - 16px);
289+
}
290+
291+
> div:has(> .stk-block-hero, > .stk-block-horizontal-scroller, > .stk-block-notification, > .stk-block-timeline) {
292+
max-width: calc(100% / 2 - 12px);
293+
}
294+
295+
> div:has(> .stk-block-accordion, > .stk-block-icon-box, > .stk-block-icon-label, > .stk-block-icon-list, > .stk-block-map, > .stk-block-number-box, > .stk-block-price, > .stk-block-pricing-box, > .stk-block-progress-bar, > .stk-block-progress-circle) {
296+
width: calc(100% / 3 - 16px);
297+
}
298+
299+
> div > :is(.stk-block-horizontal-scroller, .stk-block-icon-box, .stk-block-icon-label, .stk-block-icon-list, .stk-block-map, .stk-block-number-box, .stk-block-price, .stk-block-pricing-box, .stk-block-progress-circle) {
300+
width: 100%;
301+
}
302+
303+
> div:has(> .stk-block-count-up) .stk-block-count-up__text:not(.stk--count-up-active) {
304+
opacity: 1;
305+
}
306+
307+
> div > .stk-block-progress-bar .stk-progress-bar .stk-progress-bar__bar {
308+
width: var(--progress-percent, 0px);
309+
}
310+
311+
> div > .stk-block-progress-circle .stk-progress-circle .stk-progress-circle__bar {
312+
stroke-dashoffset: var(--progress-dash-offset);
313+
}
314+
315+
> div > .stk-block-timeline {
316+
--line-bg-color: var(--line-accent-bg-color, #000);
317+
}
318+
319+
.stk-block-spacer {
320+
height: 50px;
321+
}
322+
323+
.stk-block-timeline > .stk-inner-blocks::after,
324+
.stk-block-timeline__middle,
325+
.stk-block-timeline__middle::after {
326+
background: var(--fixed-bg) !important;
327+
background-attachment: fixed !important;
328+
}
329+
.stk-block-timeline__middle::after,
330+
.stk-block-timeline > .stk-inner-blocks::after {
331+
content: "" !important;
332+
}
333+
}
334+
335+
.ugb-style-guide__elements__buttons .stk-button {
336+
height: 100%;
304337
}
305338

306339
.ugb-style-guide__elements__images {
307340
.stk-img-wrapper:hover img {
308341
opacity: 1;
309342
}
310-
img {
311-
width: 60% !important;
312-
height: auto !important;
313-
}
314343
}
315344

316345
// Design System Preview
@@ -358,62 +387,10 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
358387
}
359388

360389
.ugb-style-guide__preview-hero {
361-
// Fade the background image
362390
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), var(--bg-image);
363-
// background-size: cover;
364-
// background-position: center;
365-
// background-repeat: no-repeat;
366-
// min-height: 300px;
367-
// display: flex;
368-
// flex-direction: column;
369-
// justify-content: center;
370-
// padding: var(--stk-block-background-padding, 100px 50px);
371-
// text-align: center;
372-
// color: #fff;
373-
}
374-
375-
// .ugb-style-guide__preview-content {
376-
// padding: 50px;
377-
// // TODO: These should all be the design system: background padding.
378-
// > h2,
379-
// p {
380-
// text-align: center;
381-
// }
382-
// }
383-
// .ugb-style-guide__preview-content__grid {
384-
// margin-top: 36px;
385-
// display: grid;
386-
// grid-template-columns: 1fr 1fr 1fr;
387-
// // TODO: These should all be the design system
388-
// column-gap: var(--stk-columns-column-gap, 0px);
389-
// }
390-
391-
// .ugb-style-guide__preview-content__grid-item {
392-
// text-align: center;
393-
// margin: var(--stk-column-margin, 12px);
394-
// }
395-
396-
// .ugb-style-guide__preview-content-2 {
397-
// // TODO: These should all be the design system
398-
// background: #eee;
399-
// display: grid;
400-
// grid-template-columns: 1fr 1fr;
401-
// gap: 24px;
402-
// min-height: 500px;
403-
// align-content: center;
404-
// padding: var(--stk-block-background-padding, 50px);
405-
// .ugb-style-guide__preview-content__media {
406-
// img {
407-
// object-fit: cover;
408-
// width: 100%;
409-
// height: 400px;
410-
// }
411-
// }
412-
// .ugb-style-guide__preview-content__text {
413-
// padding-top: 50px;
414-
// }
415-
// }
391+
}
416392
}
393+
417394
.ugb-style-guide-popover__heading {
418395
margin: 70px 70px 0;
419396
.ugb-style-guide-popover__title {

0 commit comments

Comments
 (0)