use slug for category

Author: kaeizen

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

@@ -1,5 +1,5 @@
 {
-	"Call to Action": {
+	"call-to-action": {
 		"heading_placeholder": "Transform Your Business Today",
 		"description_placeholder": "Unlock your full potential with our cutting-edge solutions. We empower businesses of all sizes to achieve their goals through innovative technology and unparalleled support.",
 		"kicker_placeholder": "Seize the Opportunity",
@@ -8,7 +8,7 @@
 		"item-1_placeholder": "Streamline your operations and boost efficiency.",
 		"item-2_placeholder": "Gain actionable insights with advanced analytics."
 	},
-	"Card": {
+	"card": {
 		"heading_placeholder": "Unlock Your Full Potential",
 		"long-description_placeholder": "At XYZ Company, we partner for your growth. Our solutions leverage cutting-edge technology, provide expert guidance, and ensure seamless integration for measurable results. We empower you with the tools and support to confidently navigate challenges, building your success on innovation and reliability.",
 		"description_placeholder": "Discover how our comprehensive solutions empower your journey.",
@@ -34,7 +34,7 @@
 		"c-subtitle-6_placeholder": "Scalable and Adaptable",
 		"c-description-6_placeholder": "Invest in solutions built for tomorrow, with the flexibility to grow and evolve with your needs."
 	},
-	"Carousel": {
+	"carousel": {
 		"subheading_placeholder": "Learn and Grow",
 		"heading_placeholder": "Explore Our Featured Resources",
 		"description_placeholder": "Get inspired, sharpen your skills, and stay ahead with curated content from our team and industry experts.",
@@ -49,7 +49,7 @@
 		"title-4_placeholder": "Marketing Trends You Can't Ignore",
 		"text-4_placeholder": "Stay updated with actionable insights from today's digital landscape."
 	},
-	"Contact": {
+	"contact": {
 		"heading_placeholder": "Get in Touch With Us",
 		"kicker_placeholder": "Contact Us",
 		"description_placeholder": "Whether you have questions, need support, or want to explore opportunities—our team is just a message away.",
@@ -62,7 +62,7 @@
 		"text-3_placeholder": "Discuss your goals with our sales team and discover how our solutions can meet your business needs.",
 		"cta_placeholder": "Contact Us"
 	},
-	"FAQ": {
+	"faq": {
 		"heading_placeholder": "Frequently Asked Questions (FAQs)",
 		"description_placeholder": "Find answers to the most common questions about [Your Product/Service]. If you can't find what you're looking for here, please contact us.",
 		"kicker_placeholder": "Quick Answers to Your Top Questions",
@@ -91,7 +91,7 @@
 		"question-8_placeholder": "How can I provide feedback?",
     	"answer-8_placeholder": "We highly value your feedback as it helps us improve. You can provide feedback through several methods: Use the feedback form on our website, or email your suggestions or comments to [email protected]. You can also participate in surveys. We review all feedback submitted."
 	},
-	"Featured Product": {
+	"featured-product": {
 		"kicker_placeholder": "Discover Innovation",
 		"product-name-1_placeholder": "Smart Lamp",
 		"product-description-1_placeholder": "An intelligent lamp that adapts to your mood and environment with customizable ambiance and smart home integration.",
@@ -114,7 +114,7 @@
 		"btn-1_placeholder": "Buy now",
 		"btn-2_placeholder": "Add to Favorites"
 	},
-	"Footer": {
+	"footer": {
 		"heading_placeholder": "Contact us",
 		"kicker_placeholder": "Stay connected",
 		"company-description_placeholder": "InnovateCo creates cutting-edge solutions for modern living.",
@@ -142,7 +142,7 @@
 		"link-11_placeholder": "Contact Us",
 		"link-12_placeholder": "Shipping & Returns"
 	},
-	"Gallery": {
+	"gallery": {
 		"heading_placeholder": "Nature's Grand Canvas",
 		"description_placeholder": "Explore breathtaking landscapes and the serene beauty of our planet. Each image unveils a unique story from the heart of nature.",
 		"kicker_placeholder": "Earth's Masterpieces",
@@ -177,15 +177,15 @@
 		"img-title-8_placeholder": "Lago di Limides Mirror",
 		"img-description-8_placeholder": "The still, clear waters of Lago di Limides flawlessly reflect the cloudy sky and distant, mist-shrouded Dolomites, framed by pine trees along the shore."
 	},
-	"Header": {
+	"header": {
 		"company_placeholder": "InnovateCo",
 		"link-1_placeholder": "About",
 		"link-2_placeholder": "Products",
 		"link-3_placeholder": "Blog",
 		"link-4_placeholder": "Support",
 		"btn_placeholder": "Login"
 	},
-	"Hero": {
+	"hero": {
 		"heading_placeholder": "Elevate Your Digital Future",
 		"long-description_placeholder": "At XYZ Company, we don't just build products; we forge partnerships. Our dedicated team works tirelessly to understand your unique challenges, crafting tailored strategies for sustainable growth. From concept to execution, we ensure a seamless and transformative experience.",
 		"description_placeholder": "Driving global business growth through innovative solutions and unparalleled expertise.",
@@ -202,7 +202,7 @@
 		"metric-3_placeholder": "20",
 		"metric-label-3_placeholder": "Years of Expertise"
 	},
-	"List": {
+	"list": {
 		"heading_placeholder": "Solutions for Your Growth",
 		"long-description_placeholder": "We offer tailored solutions designed to meet your unique needs, from initial consultation to ongoing support. Our team of experts is dedicated to delivering high-quality results and ensuring your satisfaction.",
 		"description_placeholder": "Here's a glimpse into the comprehensive services we provide to help you succeed. ",
@@ -223,21 +223,21 @@
 		"title-6_placeholder": "Operational Efficiency",
 		"item-6_placeholder": "Streamline your processes and boost productivity with our operational efficiency consulting."
 	},
-	"Logo Farm": {
+	"logo-farm": {
 		"heading_placeholder": "Trusted by Industry Leaders",
 		"description_placeholder": "We're proud to collaborate with a diverse range of companies that trust us to deliver exceptional results. Our partnerships are built on mutual success and shared innovation, driving progress across various sectors.",
 		"kicker_placeholder": "Our Valued Partners",
 		"btn_placeholder": "Learn More"
 	},
-	"Maps": {
+	"map": {
 		"heading_placeholder": "Find us",
 		"description_placeholder": "Our main office is conveniently located and easily accessible for all your inquiries.",
 		"location-1_placeholder": "Main Office",
 		"location-2_placeholder": "Downtown Location",
 		"location-3_placeholder": "Headquarters Annex",
 		"location-4_placeholder": "Northside Hub"
 	},
-	"Media and Text": {
+	"media-and-text": {
 		"long-subheading_placeholder": "Revolutionizing how we interact with the world.",
 		"heading_placeholder": "Future of Connectivity",
 		"long-description_placeholder": "Discover seamless integration and enhanced experiences designed to elevate your daily life. Our innovations transcend traditional boundaries, creating a more interconnected and intuitive world for everyone.",
@@ -257,7 +257,7 @@
 		"title-6_placeholder": "Dedicated Support",
 		"text-6_placeholder": "Our expert team is always ready to assist you. Enjoy comprehensive support and resources designed to ensure your success."
 	},
-	"Post Loop": {
+	"post-loop": {
 		"heading_placeholder": "Our Latest Insights",
 		"post-btn_placeholder": "Read more",
 		"btn_placeholder": "View all",
@@ -293,7 +293,7 @@
 			}
 		]
 	},
-	"Pricing Table": {
+	"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",
@@ -335,15 +335,15 @@
 		"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": {
+	"quote": {
 		"text-1_placeholder": "The journey of a thousand miles begins with a single step.",
 		"name-1_placeholder": "A. B. Johnson",
 		"position-1_placeholder": "Thought Leader",
 		"text-2_placeholder": "Innovation distinguishes between a leader and a follower.",
 		"name-2_placeholder": "C. D. Williams",
 		"position-2_placeholder": "Forward Thinker"
 	},
-	"Service Menu": {
+	"service-menu": {
 		"heading_placeholder": "Our Signature Menu",
 		"description_placeholder": "Crafted with fresh ingredients and bold flavors—perfect for any time of day.",
 		"category-1_placeholder": "Customer Favorites",
@@ -362,7 +362,7 @@
 		"title-6_placeholder": "Breakfast Burrito",
 		"text-6_placeholder": "Fluffy eggs, chorizo, potatoes, and cheese wrapped in a warm tortilla."
 	},
-	"Stats": {
+	"stats": {
 		"heading_placeholder": "Trusted by Teams, Loved by Customers",
 		"description_placeholder": "Our impact speaks for itself—from satisfied clients to successful projects delivered across industries.",
 		"kicker_placeholder": "By the Numbers",
@@ -372,7 +372,7 @@
 		"stat-title-3_placeholder": "Websites",
 		"stat-title-4_placeholder": "New Users"
 	},
-	"Table of Contents": {
+	"table-of-contents": {
 		"heading_placeholder": "Table of Contents",
 		"subtitle-1_placeholder": "Setting Up Your Account",
 		"subtitle-2_placeholder": "Navigating the Interface",
@@ -389,7 +389,7 @@
 		"title-5_placeholder": "Frequently Asked Questions",
 		"title-6_placeholder": "Glossary of Terms"
 	},
-	"Tabs": {
+	"tabs": {
 		"tab-1_placeholder": "All",
 		"tab-2_placeholder": "News",
 		"tab-3_placeholder": "Trending",
@@ -400,7 +400,7 @@
 		"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": {
+	"team-members": {
 		"heading_placeholder": "Meet Our Team",
 		"description_placeholder": "We're a passionate group dedicated to innovation and excellence. Get to know the individuals who drive our success.",
 		"name-1_placeholder": "Eleanor Vance",
@@ -422,7 +422,7 @@
 		"position-6_placeholder": "Senior Software Engineer",
 		"text-6_placeholder": " a key architect behind our robust software solutions"
 	},
-	"Text": {
+	"text": {
 		"heading_placeholder": "Innovating for a Sustainable Future",
 		"long-subtitle_placeholder": "Pioneering Global Solutions for a Greener Tomorrow's Challenges",
 		"long-description-1_placeholder": "We invest in cutting-edge research to create tangible solutions for environmental challenges, integrating sustainable practices across our operations. Our holistic approach aims for long-term benefits for the planet and its inhabitants. True innovation stems from understanding ecological principles and technological advancement.",
@@ -443,7 +443,7 @@
 		"title-6_placeholder": "Environmental Education",
 		"text-6_placeholder": "Empowering communities with knowledge to adopt sustainable lifestyles."
 	},
-	"Testimonials": {
+	"testimonial": {
 		"heading_placeholder": "What Our Clients Say",
 		"description_placeholder": "Here's a look at what people are saying about working with us. We're proud to have helped so many achieve their goals.",
 		"kicker_placeholder": "Testimonials",
@@ -466,7 +466,7 @@
 		"position-6_placeholder": "Real Estate Broker",
 		"text-6_placeholder": "XYZ Company gave me the edge. Their innovative digital advertising brought consistent, qualified leads, directly leading to more property sales."
 	},
-	"Timeline": {
+	"timeline": {
 		"heading_placeholder": "Our Journey Through Time",
 		"kicker_placeholder": "A Legacy of Progress",
 		"description_placeholder": "Explore the key milestones that have shaped our story, from our humble beginnings to our latest achievements.",
@@ -485,7 +485,7 @@
 		"text-6_placeholder": "Hosting an event to discuss the next era of innovation."
 
 	},
-	"Videos": {
+	"video": {
 		"heading_placeholder": "Our Story",
 		"kicker_placeholder": "See Us in Action",
 		"description_placeholder" : "Dive deep into the heart of InnovateCo, exploring our origins, values, and the future we're building.",
@@ -499,4 +499,4 @@
 		"title-6_placeholder": "Sustainability Efforts",
 		"title-7_placeholder": "Future Innovations"
 	}
-}
+}

src/components/design-library-list/use-preview-renderer.js

@@ -10,6 +10,7 @@ import {
 	parseDisabledBlocks, adjustPatternSpacing,
 	replacePlaceholders,
 	replaceImages,
+	getCategorySlug,
 } from './util'
 
 /**
@@ -132,21 +133,21 @@ export const usePreviewRenderer = (
 		}
 
 		if ( selectedTab === 'patterns' ) {
-			adjustPatternSpacing( parsedBlocks[ 0 ].attributes, category, spacingSize, false )
+			adjustPatternSpacing( parsedBlocks[ 0 ].attributes, categoriesRef.current[ 0 ], spacingSize, false )
 		}
 
 		let preview = serialize( parsedBlocks )
 
 		// The block `wp/site-title` is a dynamic block, so we need to manually replace it for the preview
-		if ( categoriesRef.current.includes( 'Header' ) ) {
+		if ( categoriesRef.current.includes( 'header' ) ) {
 			preview = preview.replace( /<!--\s*wp:site-title(?:\s+[^\/]*?)?\/-->/g, escapeHtml( siteTitle ) )
 		}
-		if ( categoriesRef.current.includes( 'Tabs' ) ) {
+		if ( categoriesRef.current.includes( '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"' )
 		}
-		if ( categoriesRef.current.includes( 'Post Loop' ) ) {
-			const defaultValues = DEFAULT_CONTENT[ 'Post Loop' ]
+		if ( categoriesRef.current.includes( 'post-loop' ) ) {
+			const defaultValues = DEFAULT_CONTENT[ 'post-loop' ]
 			preview = addPlaceholderForPostsBlock( preview, defaultValues.posts_placeholder, defaultValues )
 		}
 
@@ -183,12 +184,14 @@ export const usePreviewRenderer = (
 		const initialize = async () => {
 			const _content = template
 			if ( selectedTab === 'patterns' ) {
+				const categorySlug = getCategorySlug( designId )
+
 				// For preview: always replace placeholders (ignore dev mode)
-				const _contentForPreview = replacePlaceholders( _content, category, false )
+				const _contentForPreview = replacePlaceholders( _content, categorySlug, false )
 				// For insertion: only create separate content if dev mode is enabled
-				const _contentForInsertion = isDesignLibraryDevMode ? replacePlaceholders( _content, category, true ) : _contentForPreview
+				const _contentForInsertion = isDesignLibraryDevMode ? replacePlaceholders( _content, categorySlug, true ) : _contentForPreview
 
-				categoriesRef.current.push( category )
+				categoriesRef.current.push( categorySlug )
 
 				if ( _contentForPreview.includes( 'stk-design-library__bg-target="true"' ) ) {
 					hasBackgroundTargetRef.current = true
@@ -199,13 +202,15 @@ export const usePreviewRenderer = (
 			} else {
 				for ( let i = 0; i < _content.length; i++ ) {
 					const section = _content[ i ]
-					const design = await fetchDesign( section.id )
+					const design = await fetchDesign( section.designId || section.id )
+					const categorySlug = getCategorySlug( section.designId || section.id )
+
 					// For preview: always replace placeholders (ignore dev mode)
-					const designContentForPreview = replacePlaceholders( design.template || design.content, design.category, false )
+					const designContentForPreview = replacePlaceholders( design.template || design.content, categorySlug, false )
 					// For insertion: only create separate content if dev mode is enabled
-					const designContentForInsertion = isDesignLibraryDevMode ? replacePlaceholders( design.template || design.content, design.category, true ) : designContentForPreview
+					const designContentForInsertion = isDesignLibraryDevMode ? replacePlaceholders( design.template || design.content, categorySlug, true ) : designContentForPreview
 
-					categoriesRef.current.push( design.category )
+					categoriesRef.current.push( categorySlug )
 
 					let _block = cleanParse( designContentForPreview )[ 0 ]
 					let _blockForInsertion = isDesignLibraryDevMode ? cleanParse( designContentForInsertion )[ 0 ] : null
@@ -217,9 +222,9 @@ export const usePreviewRenderer = (
 						}
 					}
 
-					adjustPatternSpacing( _block.attributes, design.category, spacingSize, false )
+					adjustPatternSpacing( _block.attributes, categorySlug, spacingSize, false )
 					if ( _blockForInsertion ) {
-						adjustPatternSpacing( _blockForInsertion.attributes, design.category, spacingSize, true )
+						adjustPatternSpacing( _blockForInsertion.attributes, categorySlug, spacingSize, true )
 					}
 					_parsedBlocks.push( _block )
 					if ( _blockForInsertion ) {

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

@@ -157,7 +157,7 @@ export const adjustPatternSpacing = ( attributes, category, spacingSize, isDesig
 	// to the generatedCss attribute for preview purposes. This generatedCss will be regenerated
 	// by the BlockCssGenerator once the pattern is actually added to the editor.
 	let additionalCss = ''
-	if ( ! isDesignLibraryDevMode && category !== 'Header' ) {
+	if ( ! isDesignLibraryDevMode && category !== 'header' ) {
 		if ( attributes.hasBackground ) {
 			additionalCss += 'margin-bottom: 0px !important;'
 		} else {
@@ -302,6 +302,18 @@ export const replaceImages = content => {
 	)
 }
 
+export const getCategorySlug = id => {
+	if ( typeof id !== 'string' ) {
+		return ''
+	}
+	if ( id.startsWith( 'section-' ) ) {
+		// Remove 'section-' prefix and trailing dash + number
+		return id.replace( /^section-/, '' ).replace( /-\d+$/, '' )
+	}
+	// Remove trailing dash + number for other ids
+	return id.replace( /-\d+$/, '' )
+}
+
 // Additional styles for blocks to render properly in the preview
 export const getAdditionalStylesForPreview = () => {
 	let styles = ''