|
1 | 1 | /* eslint-disable no-console */ |
2 | 2 | import DEFAULT from './default.json' |
3 | | -import { settings } from 'stackable' |
| 3 | +import { settings, isPro } from 'stackable' |
4 | 4 | import { parse, serialize } from '@wordpress/blocks' |
5 | 5 |
|
6 | 6 | const DEFAULT_CONTENT = { ...DEFAULT } |
@@ -198,3 +198,100 @@ export const parseDisabledBlocks = parsedBlock => { |
198 | 198 | const block = addOriginalAttributes( [ parsedBlock ] )[ 0 ] |
199 | 199 | return { block, blocksForSubstitution } |
200 | 200 | } |
| 201 | + |
| 202 | +const IMAGE_STORAGE = 'https://storage.googleapis.com/stackable-plugin-assets/library-v4/images/' |
| 203 | + |
| 204 | +export const addPlaceholderForPostsBlock = ( content, postsPlaceholder, defaultValues ) => { |
| 205 | + const remainingPosts = [ ...postsPlaceholder ] |
| 206 | + |
| 207 | + // Normalize special characters |
| 208 | + const normalized = content |
| 209 | + .replace( /</g, '<' ) |
| 210 | + .replace( />/g, '>' ) |
| 211 | + .replace( /–/g, '-' ) |
| 212 | + .replace( /\u2013|\u2014/g, '-' ) |
| 213 | + |
| 214 | + // Regex to match all stackable/posts blocks |
| 215 | + const postBlockRegex = /<!--\s*wp:stackable\/posts\s+(\{[\s\S]*?\})\s*-->([\s\S]*?)<!--\s*\/wp:stackable\/posts\s*-->/g |
| 216 | + |
| 217 | + return normalized.replace( postBlockRegex, ( match, jsonStr, innerHtml ) => { |
| 218 | + let attrs |
| 219 | + try { |
| 220 | + attrs = JSON.parse( jsonStr ) |
| 221 | + } catch { |
| 222 | + return match // Skip if JSON is invalid |
| 223 | + } |
| 224 | + |
| 225 | + const numItems = attrs.numberOfItems ?? 6 |
| 226 | + const width = attrs.imageWidth ? attrs.imageWidth + ( attrs.imageWidthUnit ?? 'px' ) : 'auto' |
| 227 | + |
| 228 | + // Get the post template inside the block |
| 229 | + const templateMatch = innerHtml.match( /<!--\s*\/stk-start:posts\/template\s*-->([\s\S]*?)<!--\s*\/stk-end:post\/template\s*-->/ ) |
| 230 | + if ( ! templateMatch ) { |
| 231 | + return match // Skip if template is missing |
| 232 | + } |
| 233 | + |
| 234 | + const template = templateMatch[ 1 ].trim() |
| 235 | + const currentPosts = remainingPosts.splice( 0, numItems ) // Slice the posts for this block |
| 236 | + |
| 237 | + const renderedPosts = currentPosts.map( ( post, index ) => |
| 238 | + template |
| 239 | + .replace( /!#title!#/g, post.title_placeholder ) |
| 240 | + .replace( /!#excerpt!#/g, post.text_placeholder ) |
| 241 | + .replace( /!#date!#/g, 'March 1, 2025' ) |
| 242 | + .replace( /!#readmoreText!#/g, defaultValues[ 'post-btn_placeholder' ] ) |
| 243 | + .replace( /!#category!#/g, defaultValues.tag_placeholder ) |
| 244 | + .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;"` ) |
| 245 | + ).join( '\n' ) |
| 246 | + |
| 247 | + // Replace just the template portion, keep rest of the block |
| 248 | + const updatedInnerHtml = innerHtml.replace( |
| 249 | + /<!--\s*\/stk-start:posts\/template\s*-->([\s\S]*?)<!--\s*\/stk-end:post\/template\s*-->/, |
| 250 | + renderedPosts |
| 251 | + ) |
| 252 | + |
| 253 | + return `<!-- wp:stackable/posts ${ jsonStr } -->${ updatedInnerHtml }<!-- /wp:stackable/posts -->` |
| 254 | + } ) |
| 255 | +} |
| 256 | + |
| 257 | +// Additional styles for blocks to render properly in the preview |
| 258 | +export const getAdditionalStylesForPreview = () => { |
| 259 | + let styles = '' |
| 260 | + |
| 261 | + // Make sure count up block numbers are visible |
| 262 | + styles += `.stk-block-count-up__text:not(.stk--count-up-active) { opacity: 1; }` |
| 263 | + |
| 264 | + // Fill the vertical line in timeline blocks |
| 265 | + styles += `.stk-block-timeline { --line-bg-color: var(--line-accent-bg-color, #000); }` |
| 266 | + |
| 267 | + // Display correctly the progress in progress bar and progress circle blocks |
| 268 | + styles += `.stk-progress-bar .stk-progress-bar__bar { width: var(--progress-percent, 0px); }` |
| 269 | + styles += `.stk-progress-circle .stk-progress-circle__bar { stroke-dashoffset: var(--progress-dash-offset); }` |
| 270 | + |
| 271 | + // Display correctly the styles for posts block. |
| 272 | + // Do this only if in Free version, since we will be able to load the correct CSS for Premium. |
| 273 | + if ( ! isPro ) { |
| 274 | + styles += `.stk-block-posts.is-style-horizontal-2 { |
| 275 | + .stk-block-posts__item > .stk-container { |
| 276 | + padding: 0; |
| 277 | + display: flex; |
| 278 | + flex-direction: row; |
| 279 | +
|
| 280 | + > .stk-block-posts__image-link:empty ~ .stk-container-padding, |
| 281 | + .stk-container-padding:only-child { |
| 282 | + width: 100%; |
| 283 | + } |
| 284 | + } |
| 285 | + .stk-img-wrapper { |
| 286 | + height: 100%; |
| 287 | + margin-top: 0; |
| 288 | + margin-bottom: 0; |
| 289 | + } |
| 290 | + .stk-block-posts__image-link { |
| 291 | + margin-bottom: 0; |
| 292 | + } |
| 293 | +}` |
| 294 | + } |
| 295 | + |
| 296 | + return styles |
| 297 | +} |
0 commit comments