Skip to content

Commit 642b0b4

Browse files
kaeizenkaeizen
committed
fix style guide block styles preview
- table of contents - posts
1 parent 09d2505 commit 642b0b4

File tree

5 files changed

+120
-11
lines changed

5 files changed

+120
-11
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import { serialize } from '@wordpress/blocks'
3333
import { applyFilters } from '@wordpress/hooks'
3434
import { cloneDeep } from 'lodash'
3535

36-
const DEFAULT_CONTENT = { ...DEFAULT }
36+
export const DEFAULT_CONTENT = { ...DEFAULT }
3737

3838
const DesignLibraryListItem = forwardRef( ( props, ref ) => {
3939
const {

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

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
settings, isPro, cdnUrl,
55
} from 'stackable'
66
import { parse, serialize } from '@wordpress/blocks'
7+
import { META_SEPARATORS } from '~stackable/block/posts/util'
78

89
const DEFAULT_CONTENT = { ...DEFAULT }
910
const PARSER = new DOMParser()
@@ -203,7 +204,7 @@ export const parseDisabledBlocks = parsedBlock => {
203204

204205
const IMAGE_STORAGE = cdnUrl.replace( /\/$/, '' ) + '/library-v4/images/'
205206

206-
export const addPlaceholderForPostsBlock = ( content, postsPlaceholder, defaultValues ) => {
207+
export const addPlaceholderForPostsBlock = ( content, postsPlaceholder, defaultValues, img = null ) => {
207208
const remainingPosts = [ ...postsPlaceholder ]
208209

209210
// Normalize special characters
@@ -226,6 +227,7 @@ export const addPlaceholderForPostsBlock = ( content, postsPlaceholder, defaultV
226227

227228
const numItems = attrs.numberOfItems ?? 6
228229
const width = attrs.imageWidth ? attrs.imageWidth + ( attrs.imageWidthUnit ?? 'px' ) : 'auto'
230+
const separator = META_SEPARATORS[ attrs.metaSeparator ?? 'dot' ]
229231

230232
// Get the post template inside the block
231233
const templateMatch = innerHtml.match( /<!--\s*\/stk-start:posts\/template\s*-->([\s\S]*?)<!--\s*\/stk-end:post\/template\s*-->/ )
@@ -234,17 +236,35 @@ export const addPlaceholderForPostsBlock = ( content, postsPlaceholder, defaultV
234236
}
235237

236238
const template = templateMatch[ 1 ].trim()
237-
const currentPosts = remainingPosts.splice( 0, numItems ) // Slice the posts for this block
238239

239-
const renderedPosts = currentPosts.map( ( post, index ) =>
240-
template
240+
let currentPosts
241+
if ( numItems <= remainingPosts.length ) {
242+
currentPosts = remainingPosts.slice( 0, numItems )
243+
} else {
244+
const needed = numItems
245+
const postsToUse = [
246+
...remainingPosts,
247+
...Array.from(
248+
{ length: needed - remainingPosts.length },
249+
( _, i ) => postsPlaceholder[ i % postsPlaceholder.length ] // reuse placeholders if numberOfItems > 6
250+
),
251+
]
252+
currentPosts = postsToUse.slice( 0, numItems )
253+
}
254+
255+
const renderedPosts = currentPosts.map( ( post, index ) => {
256+
const imgSrc = img ?? `${ IMAGE_STORAGE }stk-design-library-image-${ index + 1 }.jpeg`
257+
return template
241258
.replace( /!#title!#/g, post.title_placeholder )
242259
.replace( /!#excerpt!#/g, post.text_placeholder )
260+
.replace( /!#authorName!#/g, 'John Doe' )
261+
.replaceAll( /!#metaSeparator!#/g, separator )
262+
.replace( /!#commentsNum!#/g, '3 comments' )
243263
.replace( /!#date!#/g, 'March 1, 2025' )
244264
.replace( /!#readmoreText!#/g, defaultValues[ 'post-btn_placeholder' ] )
245265
.replace( /!#category!#/g, defaultValues.tag_placeholder )
246-
.replace( /img class="stk-img"/g, `img class="stk-img" src="${ IMAGE_STORAGE }stk-design-library-image-${ index + 1 }.jpeg" width="${ width }" style="width: ${ width } !important;"` )
247-
).join( '\n' )
266+
.replace( /img class="stk-img"/g, `img class="stk-img" src="${ imgSrc }" width="${ width }" style="width: ${ width } !important;"` )
267+
} ).join( '\n' )
248268

249269
// Replace just the template portion, keep rest of the block
250270
const updatedInnerHtml = innerHtml.replace(

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

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,7 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
273273

274274
> * {
275275
margin-bottom: 0;
276+
pointer-events: none;
276277
}
277278
> p {
278279
margin-top: 12px;
@@ -288,15 +289,15 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
288289
max-width: calc(100% / 3 - 16px);
289290
}
290291

291-
> div:has(> .stk-block-hero, > .stk-block-horizontal-scroller, > .stk-block-notification, > .stk-block-timeline) {
292+
> div:has(> .stk-block-hero, > .stk-block-horizontal-scroller, > .stk-block-notification, > .stk-block-timeline, > .stk-block-posts) {
292293
max-width: calc(100% / 2 - 12px);
293294
}
294295

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+
> 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, > .stk-block-table-of-contents) {
296297
width: calc(100% / 3 - 16px);
297298
}
298299

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+
> 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, .stk-block-table-of-contents) {
300301
width: 100%;
301302
}
302303

@@ -348,6 +349,18 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
348349

349350
:where(.ugb-style-guide__elements .stk-block-table-of-contents ul) {
350351
list-style-type: initial;
352+
:where(a) {
353+
color: currentColor;
354+
}
355+
}
356+
357+
:where(.ugb-style-guide__elements .stk-block-posts) {
358+
:where(h1, h2, h3, h4, h5, h6) {
359+
color: var(--stk-heading-color, currentColor);
360+
}
361+
:where(a) {
362+
color: currentColor;
363+
}
351364
}
352365

353366
.ugb-style-guide__elements__buttons .stk-button {

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

Lines changed: 76 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,15 @@ import {
1212
} from '~stackable/util'
1313
import { PLACEHOLDER_INNER_BLOCKS } from '~stackable/util/block-templates'
1414

15-
import { __ } from '@wordpress/i18n'
15+
import { __, sprintf } from '@wordpress/i18n'
1616
import { RawHTML } from '@wordpress/element'
1717
import {
1818
createBlock, serialize,
1919
createBlocksFromInnerBlocksTemplate,
2020
getBlockVariations,
2121
} from '@wordpress/blocks'
22+
import { DEFAULT_CONTENT } from '../design-library-list/design-library-list-item'
23+
import { addPlaceholderForPostsBlock } from '../design-library-list/util'
2224

2325
export const DUMMY_COLOR_SCHEMES = [
2426
{
@@ -84,6 +86,74 @@ const ADDITIONAL_ATTRIBUTES = {
8486
'stackable/count-up': { text: '1,234.56' },
8587
'stackable/icon-list-item': { text: __( 'List Item', i18n ) },
8688
'stackable/number-box': { text: __( '1', i18n ) },
89+
'stackable/table-of-contents': {
90+
headings: [
91+
{
92+
content: sprintf( __( 'Heading %s', i18n ), 1 ),
93+
level: 1,
94+
anchor: 'heading-1',
95+
clientId: '72dfd683-3844-47a3-af9d-76eddbf6d51c',
96+
tag: 1,
97+
isExcluded: false,
98+
},
99+
{
100+
content: sprintf( __( 'Heading %s', i18n ), 2 ),
101+
level: 2,
102+
anchor: 'heading-2-1',
103+
clientId: 'd9208411-5aef-4446-893b-f41226ba7858',
104+
tag: 2,
105+
isExcluded: false,
106+
},
107+
{
108+
content: sprintf( __( 'Heading %s', i18n ), 3 ),
109+
level: 3,
110+
anchor: 'heading-3',
111+
clientId: 'fb915b6c-f956-44dc-8c50-44ccbb8e430c',
112+
tag: 3,
113+
isExcluded: false,
114+
},
115+
{
116+
content: sprintf( __( 'Heading %s', i18n ), 4 ),
117+
level: 4,
118+
anchor: 'heading-4',
119+
clientId: '350dd450-77f6-430d-a9f3-0be449c64235',
120+
tag: 4,
121+
isExcluded: false,
122+
},
123+
{
124+
content: sprintf( __( 'Heading %s', i18n ), 5 ),
125+
level: 5,
126+
anchor: 'heading-5',
127+
clientId: '41cde9d8-2585-47ea-a6ba-a3a208a0ede3',
128+
tag: 5,
129+
isExcluded: false,
130+
},
131+
{
132+
content: sprintf( __( 'Heading %s', i18n ), 6 ),
133+
level: 6,
134+
anchor: 'heading-6',
135+
clientId: '375f0cb3-2aa1-478b-a3a7-de5dedd3dd38',
136+
tag: 6,
137+
isExcluded: false,
138+
},
139+
{
140+
content: sprintf( __( 'Heading %s', i18n ), 2 ),
141+
level: 2,
142+
anchor: 'heading-2-2',
143+
clientId: '642f3b01-8ead-4813-a092-22d9995610c0',
144+
tag: 2,
145+
isExcluded: false,
146+
},
147+
{
148+
content: sprintf( __( 'Heading %s', i18n ), 2 ),
149+
level: 2,
150+
anchor: 'heading-2-3',
151+
clientId: 'f0ad1cb6-332f-406b-9f3f-d41e08725740',
152+
tag: 2,
153+
isExcluded: false,
154+
},
155+
],
156+
},
87157
}
88158

89159
const INNER_BLOCK_CALLBACKS = {
@@ -194,6 +264,11 @@ const getSerializedBlock = props => {
194264
blockName = 'stackable/icon-list'
195265
}
196266

267+
if ( blockName === 'stackable/posts' ) {
268+
const defaultValues = DEFAULT_CONTENT[ 'Post Loop' ]
269+
serialized = addPlaceholderForPostsBlock( serialized, defaultValues.posts_placeholder, defaultValues, `${ srcUrl }/${ heroBg }` )
270+
}
271+
197272
return {
198273
serialized, blockName, attributes: block.attributes,
199274
}

‎src/util/block-styles.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { select } from '@wordpress/data'
44

55
const BLOCK_STYLES_FILTER = {
66
'stackable/column': [ 'columnWidth', 'columnAdjacentCount' ],
7+
'stackable/table-of-contents': [ 'text', 'headings' ],
78
'stackable/icon-list-item': [ 'parentUniqueId' ],
89
}
910

0 commit comments

Comments
 (0)