update placeholders, fix design render

Author: kaeizen

src/block/design-library/edit.js

@@ -102,7 +102,7 @@ const Edit = props => {
 	const spacingSize = ! presetMarks || ! Array.isArray( presetMarks ) ? 120 : presetMarks[ presetMarks.length - 2 ].value
 
 	// Replaces the current block with a block made out of attributes.
-	const createBlockWithAttributes = async ( blockName, attributes, innerBlocks, substituteBlocks, parentClientId ) => {
+	const createBlockWithAttributes = async ( category, blockName, attributes, innerBlocks, substituteBlocks, parentClientId ) => {
 		const disabledBlocks = settings.stackable_block_states || {} // eslint-disable-line camelcase
 
 		// Recursively substitute core blocks to disabled Stackable blocks
@@ -189,29 +189,31 @@ const Edit = props => {
 		attributes = block[ 0 ].attributes
 		innerBlocks = block[ 0 ].innerBlocks
 
-		if ( ! parentClientId && attributes.hasBackground ) {
-			attributes.blockMargin = {
-				top: '',
-				right: '',
-				bottom: '0',
-				left: '',
-			}
-		} else if ( ! parentClientId ) {
-			attributes.blockMargin = {
-				top: spacingSize,
-				right: '',
-				bottom: spacingSize,
-				left: '',
+		if ( category !== 'Header' ) {
+			if ( ! parentClientId && attributes.hasBackground ) {
+				attributes.blockMargin = {
+					top: '',
+					right: '',
+					bottom: '0',
+					left: '',
+				}
+			} else if ( ! parentClientId ) {
+				attributes.blockMargin = {
+					top: spacingSize,
+					right: '',
+					bottom: spacingSize,
+					left: '',
+				}
 			}
-		}
 
-		const blockLayouts = select( 'stackable/global-spacing-and-borders' ).getBlockLayouts()
-		if ( attributes.hasBackground && typeof blockLayouts === 'object' && ! blockLayouts[ 'block-background-padding' ] ) {
-			attributes.blockPadding = {
-				top: spacingSize,
-				right: spacingSize,
-				bottom: spacingSize,
-				left: spacingSize,
+			const blockLayouts = select( 'stackable/global-spacing-and-borders' ).getBlockLayouts()
+			if ( attributes.hasBackground && typeof blockLayouts === 'object' && ! blockLayouts[ 'block-background-padding' ] ) {
+				attributes.blockPadding = {
+					top: spacingSize,
+					right: spacingSize,
+					bottom: spacingSize,
+					left: spacingSize,
+				}
 			}
 		}
 
@@ -229,12 +231,13 @@ const Edit = props => {
 		const designs = designsRef.current
 		const blocks = []
 
-		for ( const designData of designs ) {
+		for ( const blockDesign of designs ) {
+			const { designData, category } = blockDesign
 			const {
 				name, attributes, innerBlocks,
 			} = designData
 			if ( name && attributes ) {
-				const block = await createBlockWithAttributes( name, applyFilters( 'stackable.design-library.attributes', attributes ), innerBlocks || [], substituteBlocks, parentClientId )
+				const block = await createBlockWithAttributes( category, name, applyFilters( 'stackable.design-library.attributes', attributes ), innerBlocks || [], substituteBlocks, parentClientId )
 				blocks.push( block )
 			} else {
 				console.error( 'Design library selection failed: No block data found' ) // eslint-disable-line no-console
@@ -319,13 +322,15 @@ const Edit = props => {
 						let disabledBlocks = new Set()
 
 						_designs.forEach( design => {
-							const { designData, blocksForSubstitution } = design
+							const {
+								designData, blocksForSubstitution, category,
+							} = design
 
 							if ( blocksForSubstitution.size ) {
 								disabledBlocks = disabledBlocks.union( blocksForSubstitution )
 							}
 
-							designs.push( designData )
+							designs.push( { designData, category } )
 						} )
 
 						designsRef.current = designs

src/components/design-library-list/default.json

@@ -277,6 +277,47 @@
 		"title-7_placeholder": "Storytelling in Brand Building",
 		"text-7_placeholder": "Learn how compelling narratives can elevate your brand."
 	},
+	"Pricing Table": {
+		"heading_placeholder": "Our Pricing Plans",
+		"description_placeholder": "Choose the perfect plan to fit your needs, from individuals to large organizations. All plans include dedicated support and a commitment to your success.",
+		"btn-1_placeholder": "Get Started",
+		"btn-2_placeholder": "Buy Now",
+		"title-1_placeholder": "Flexible Scaling",
+		"text-1_placeholder": "Easily upgrade or downgrade as your needs evolve.",
+		"title-2_placeholder": "24/7 Customer Support",
+		"text-2_placeholder": "Our team is always ready to assist you.",
+		"title-3_placeholder": "Secure and Reliable Platform",
+		"text-3_placeholder": "We prioritize your data's security and stability.",
+		"title-4_placeholder": "Regular Feature Updates",
+		"text-4_placeholder": "Benefit from continuous improvements and new functionalities.",
+		"plan-1_placeholder": "Free",
+		"plan-description-1_placeholder": "Perfect for individuals.",
+		"plan-1-item-1_placeholder": "Limited Storage (e.g., 500MB)",
+		"plan-1-item-2_placeholder": "Basic Analytics",
+		"plan-1-item-3_placeholder": "Email Support",
+		"plan-1-item-4_placeholder": "1 User Account",
+		"plan-2_placeholder": "Basic",
+		"plan-description-2_placeholder": "Ideal for small teams.",
+		"plan-2-item-1_placeholder": "2GB Storage",
+		"plan-2-item-2_placeholder": "Standard Analytics",
+		"plan-2-item-3_placeholder": "Priority Email Support",
+		"plan-2-item-4_placeholder": "Up to 3 User Accounts",
+		"plan-3_placeholder": "Pro",
+		"plan-description-3_placeholder": "Great for growing businesses.",
+		"plan-3-item-1_placeholder": "10GB Storage",
+		"plan-3-item-2_placeholder": "Advanced Analytics",
+		"plan-3-item-3_placeholder": "Chat & Phone Support",
+		"plan-3-item-4_placeholder": "Up to 10 User Accounts",
+		"plan-4_placeholder": "Premium",
+		"plan-description-4_placeholder": "Designed for established businesses.",
+		"plan-4-item-1_placeholder": "Unlimited Storage",
+		"plan-4-item-2_placeholder": "Real-time Advanced Analytics",
+		"plan-4-item-3_placeholder": "Dedicated Account Manager",
+		"plan-4-item-4_placeholder": "Unlimited User Accounts",
+		"plan-5_placeholder": "Enterprise",
+		"plan-description-5_placeholder": "Tailored for large organizations with unique demands.",
+		"plan-5-details_placeholder": "For customized solutions including specialized features, dedicated infrastructure, and personalized support, please contact us to discuss an Enterprise plan."
+	},
 	"Quote": {
 		"text-1_placeholder": "The journey of a thousand miles begins with a single step.",
 		"name-1_placeholder": "A. B. Johnson",
@@ -336,7 +377,11 @@
 		"tab-2_placeholder": "News",
 		"tab-3_placeholder": "Trending",
 		"tab-4_placeholder": "For You",
-		"tab-5_placeholder": "Favorites"
+		"tab-5_placeholder": "Favorites",
+		"title-1_placeholder": "Our Vision for the Future",
+		"text-1_placeholder": "We envision a world where innovation drives progress, and technology empowers individuals. Our commitment lies in fostering solutions that are not only groundbreaking but also accessible and sustainable, contributing to a brighter tomorrow for everyone.",
+		"title-2_placeholder": "Unlocking Your Potential",
+		"text-2_placeholder": "Discover the tools and resources designed to help you achieve your goals. We believe in providing comprehensive support and personalized guidance, enabling you to navigate challenges and seize opportunities with confidence."
 	},
 	"Team Members": {
 		"heading_placeholder": "Meet Our Team",

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

@@ -63,6 +63,8 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
 	const { getEditorDom } = useSelect( 'stackable/editor-dom' )
 	const editorDom = getEditorDom()
 
+	const siteTitle = useSelect( select => select( 'core' ).getEntityRecord( 'root', 'site' )?.title || 'InnovateCo', [] )
+
 	const mainClasses = classnames( [
 		'ugb-design-library-item',
 		'ugb-design-library-item--toggle',
@@ -131,7 +133,16 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
 
 		setParsedBlocks( blocks )
 
-		const preview = serialize( blocks )
+		let preview = serialize( blocks )
+
+		// The block `wp/site-title` is a dynamic block, so we need to manually replace it for the preview
+		if ( category === 'Header' ) {
+			preview = preview.replace( /<!--\s*wp:site-title(?:\s+[^\/]*?)?\/-->/g, siteTitle )
+		} else if ( category === 'Tabs' ) {
+		// Add a class for the first tab to be the active tab in the preview
+			preview = preview.replace( '"stk-block-tabs__tab"', '"stk-block-tabs__tab stk-block-tabs__tab--active"' )
+		}
+
 		const cleanedBlock = preview.replace( /<!--[\s\S]*?-->/g, '' ) // removes comment
 
 		previewRef.current.render( <DesignPreview
@@ -167,9 +178,11 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
 			// Get all styles needed and make a copy for the shadow DOM
 			const styleNodes = STYLE_IDS.map( id => {
 				let style = null
-				let node = document.getElementById( id )
+				let node = document?.head?.querySelector( `#${ id }` )
 				if ( ! node && editorDom ) {
-					node = editorDom.querySelector( `#${ id }` )
+					const editorBody = editorDom?.closest( 'body' )
+					const editorHead = editorBody?.ownerDocument?.head
+					node = editorHead.querySelector( `#${ id }` )
 				}
 
 				if ( node ) {
@@ -199,7 +212,12 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
 					: ` [stk-design-library__bg-target="true"].stk-block-background:not(.stk--no-padding) { padding: calc(26px + var(--stk-block-background-padding)); }`
 			}
 
+			// Additional styles for blocks to render properly in the preview
 			hostStyles.innerHTML += `.stk-block-count-up__text:not(.stk--count-up-active) { opacity: 1; }`
+			hostStyles.innerHTML += `.stk-block-timeline { --line-bg-color: var(--line-accent-bg-color, #000); }`
+			hostStyles.innerHTML += `.stk-progress-bar .stk-progress-bar__bar { width: var(--progress-percent, 0px); }`
+			hostStyles.innerHTML += `.stk-progress-circle .stk-progress-circle__bar { stroke-dashoffset: var(--progress-dash-offset); }`
+
 			styleNodes.push( hostStyles )
 
 			styleNodes.forEach( node => {
@@ -262,7 +280,7 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
 					scale: previewSize.scale,
 				}
 
-				onClick( designId, parsedBlocks, blocksForSubstitutionRef.current, selectedPreviewSize )
+				onClick( designId, category, parsedBlocks, blocksForSubstitutionRef.current, selectedPreviewSize )
 			} }
 		>
 			{ ! isPro && plan !== 'free' && <span className="stk-pulsating-circle" role="presentation" /> }

src/components/modal-design-library/modal.js

@@ -366,7 +366,7 @@ export const ModalDesignLibrary = props => {
 					designs={ displayDesigns }
 					selectedDesigns={ selectedDesignIds }
 					selectedDesignData={ selectedDesignData }
-					onSelectMulti={ ( designId, parsedBlocks, blocksForSubstitution, selectedPreviewSize ) => {
+					onSelectMulti={ ( designId, category, parsedBlocks, blocksForSubstitution, selectedPreviewSize ) => {
 						const newSelectedDesigns = [ ...selectedDesignIds ]
 						// We also get the design data from displayDesigns
 						// already instead of after clicking the "Add
@@ -385,7 +385,7 @@ export const ModalDesignLibrary = props => {
 							newSelectedDesigns.push( designId )
 							setSelectedDesignIds( newSelectedDesigns )
 							newSelectedDesignData.push( {
-								designData: parsedBlocks, blocksForSubstitution, selectedPreviewSize,
+								designId, category, designData: parsedBlocks, blocksForSubstitution, selectedPreviewSize,
 							} )
 							setSelectedDesignData( newSelectedDesignData )
 						}