fix styling for block styles in style guide

Author: kaeizen

src/components/style-guide/editor.scss

@@ -330,6 +330,10 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
 		.stk-block-timeline > .stk-inner-blocks::after {
 			content: "" !important;
 		}
+
+		.stk-block-notification h3 {
+			color: var(--stk-container-color) !important;
+		}
 	}
 
 	.ugb-style-guide__elements__buttons .stk-button {

src/components/style-guide/images/profile.webp

@@ -1,6 +1,16 @@
 import heroBg from './images/hero-bg.webp'
-import { i18n, srcUrl } from 'stackable'
-import { cleanSerializedBlock, createUniqueClass } from '~stackable/util'
+import profile from './images/profile.webp'
+import {
+	i18n, srcUrl, version as VERSION,
+} from 'stackable'
+
+import { CssSaveCompiler } from '../block-css'
+import {
+	cleanSerializedBlock,
+	createUniqueClass,
+	blockStyleGenerators,
+} from '~stackable/util'
+import { PLACEHOLDER_INNER_BLOCKS } from '~stackable/util/block-templates'
 
 import { __ } from '@wordpress/i18n'
 import { RawHTML } from '@wordpress/element'
@@ -9,7 +19,6 @@ import {
 	createBlocksFromInnerBlocksTemplate,
 	getBlockVariations,
 } from '@wordpress/blocks'
-import { PLACEHOLDER_INNER_BLOCKS } from '~stackable/util/block-templates'
 
 /* eslint-disable jsx-a11y/anchor-is-valid */
 export const DefaultButton = ( {
@@ -90,19 +99,51 @@ const ADDITIONAL_ATTRIBUTES = {
 	'stackable/number-box': { text: __( '1', i18n ) },
 }
 
+const getGeneratedCss = ( blocks, generateForInnerBlocks = false ) => {
+	return blocks.map( block => {
+		if ( ! block.attributes.uniqueId ) {
+			block.attributes.uniqueId = createUniqueClass( block.clientId )
+		}
+
+		const blockStyleGenerator = blockStyleGenerators[ block.name ]
+		const attrNamesWithValues = blockStyleGenerator.getAttributesWithValues( block.attributes )
+		const blockStyleDefs = blockStyleGenerator.getBlockStyles( attrNamesWithValues )
+
+		const cssCompiler = new CssSaveCompiler()
+		const saveCss = blockStyleGenerator.generateBlockStylesForSave(
+			cssCompiler,
+			block.attributes,
+			blockStyleDefs,
+			{
+				version: VERSION,
+			}
+		)
+
+		block.attributes.generatedCss = saveCss
+
+		if ( generateForInnerBlocks ) {
+			block.innerBlocks = getGeneratedCss( block.innerBlocks, generateForInnerBlocks )
+		}
+
+		return block
+	} )
+}
+
 export const RenderBlock = props => {
 	const {
 		blockName, attributes, innerBlocks, name = __( 'Default', i18n ),
 	} = props
 
 	const block = createBlock( blockName, attributes, innerBlocks )
-	block.attributes.uniqueId = createUniqueClass( block.clientId )
-	let serialized = serialize( [ block ] )
+	const newBlock = getGeneratedCss( [ block ] )
+
+	let serialized = serialize( newBlock )
 
 	if ( blockName === 'stackable/timeline' ) {
 		const _block = createBlock( blockName, attributes, innerBlocks )
 		_block.attributes.timelineIsLast = true
-		serialized += '\n' + serialize( [ _block ] )
+		const duplicateBlock = getGeneratedCss( [ _block ] )
+		serialized += '\n' + serialize( duplicateBlock )
 	}
 
 	return (
@@ -113,6 +154,19 @@ export const RenderBlock = props => {
 	)
 }
 
+const INNER_BLOCK_CALLBACKS = {
+	'stackable/team-member': innerBlocks => {
+		innerBlocks[ 0 ].attributes.imageExternalUrl = `${ srcUrl }/${ profile }`
+
+		return innerBlocks
+	},
+	'stackable/testimonial': innerBlocks => {
+		innerBlocks[ 1 ].attributes.imageExternalUrl = `${ srcUrl }/${ profile }`
+
+		return innerBlocks
+	},
+}
+
 export const getPlaceholders = blockName => {
 	let innerBlocks = []
 	let attributes = {}
@@ -123,6 +177,14 @@ export const getPlaceholders = blockName => {
 		innerBlocks = createBlocksFromInnerBlocksTemplate( PLACEHOLDER_INNER_BLOCKS[ blockName ] )
 	} else if ( variations.length && variations[ 0 ].innerBlocks?.length ) {
 		innerBlocks = createBlocksFromInnerBlocksTemplate( variations[ 0 ].innerBlocks )
+
+		if ( blockName in INNER_BLOCK_CALLBACKS ) {
+			innerBlocks = INNER_BLOCK_CALLBACKS[ blockName ]( innerBlocks )
+		}
+	}
+
+	if ( innerBlocks.length ) {
+		innerBlocks = getGeneratedCss( innerBlocks, true )
 	}
 
 	if ( variations.length && variations[ 0 ].attributes ) {
@@ -136,5 +198,7 @@ export const getPlaceholders = blockName => {
 		}
 	}
 
-	return { attributes, innerBlocks }
+	return {
+		attributes, innerBlocks,
+	}
 }

src/components/style-guide/utils.js

@@ -0,0 +1,18 @@
+const fetchBlockStyleGenerators = r => {
+	const blockStyleGenerators = {}
+	r.keys().forEach( key => {
+		const styleGenerator = r( key ).default
+
+		// Get the folder name from the key (e.g., './feature/style.js' => 'feature')
+		const match = key.match( /^\.\/([^/]+)\// )
+		const blockName = match ? match[ 1 ] : null
+
+		if ( blockName ) {
+			blockStyleGenerators[ `stackable/${ blockName }` ] = styleGenerator
+		}
+	} )
+
+	return blockStyleGenerators
+}
+
+export const blockStyleGenerators = fetchBlockStyleGenerators( require.context( '../../block', true, /style\.js$/ ) )

src/util/styles/block-style-generators.js

@@ -15,6 +15,7 @@ import { applyFilters } from '@wordpress/hooks'
 export { default as StyleObject } from './style-object'
 export { useStyles, getStyles } from './style-object'
 export { useQueryLoopInstanceId } from './style-object'
+export { blockStyleGenerators } from './block-style-generators'
 
 export const isDarkColor = _color => {
 	try {