Fix (design library): Display placeholders in Stackable Patterns (#3553)

* fix placeholders

* add file

Author: kaeizen

gulpfile.js

@@ -411,6 +411,81 @@ ${ blockDesignSystem });
 	cb()
 } )
 
+gulp.task( 'generate-design-library-default-placeholders-php', function( cb ) {
+	const fs = require( 'fs' )
+
+	let defaultPlaceholders = 'array()'
+
+	const toAssocArray = ( key, value, cb, indent ) => {
+		if ( typeof value === 'object' ) {
+			const parsed = cb( value, indent + 1 )
+			return `"${ key }" => ${ parsed }`
+		}
+
+		return `"${ key }" => "${ value }"`
+	}
+
+	const parsePlaceholders = ( obj, indent ) => {
+		let content = ''
+		const tab = '\t'.repeat( indent )
+
+		if ( typeof obj === 'object' ) {
+			content += 'array(\n'
+
+			Object.entries( obj ).forEach( ( [ key, value ], index, bds ) => {
+				content += tab + toAssocArray( key, value, parsePlaceholders, indent )
+
+				if ( index !== bds.length - 1 ) {
+					content += ',\n'
+				} else {
+					content += '\n'
+				}
+			} )
+			content += `\t`.repeat( indent - 1 ) + ')'
+		}
+		return content
+	}
+
+	const jsonPath = path.resolve( __dirname, `src/components/design-library-list/default.json` )
+	if ( fs.existsSync( jsonPath ) ) {
+		const fileContent = fs.readFileSync( jsonPath, 'utf-8' )
+		const raw = JSON.parse( fileContent )
+		defaultPlaceholders = parsePlaceholders( raw, 4 )
+	}
+
+	// Generate PHP variable string
+	const script = `<?php
+// This is a generated file by gulp generate-design-library-default-placeholders-php
+// Use src/components/design-library-list/default.json if you want to edit this file.
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( ! class_exists( 'Stackable_Design_Library_Placeholders' ) ) {
+	class Stackable_Design_Library_Placeholders {
+
+		function __construct() {
+		}
+
+		public static function get_default() {
+			$default_placeholders = ${ defaultPlaceholders };
+
+			return $default_placeholders;
+		}
+	}
+
+	new Stackable_Design_Library_Placeholders();
+}
+?>
+`
+	// Write PHP variable to file
+	fs.writeFileSync( path.resolve( __dirname, 'src/design-library/default-placeholders.php' ), script )
+
+	cb()
+} )
+
 gulp.task( 'generate-translations-js', gulp.series(
 	// The collect function has an issue where it will not continue if the
 	// folder will it writes to doesn't exist, create it to prevent an error.
@@ -703,7 +778,7 @@ gulp.task( 'style-deprecated', gulp.parallel(
  * END deprecated build styles, we still build these
  ********************************************************************/
 
-gulp.task( 'build-process', gulp.parallel( 'style', 'style-editor', 'welcome-styles', 'style-deprecated', 'generate-translations-js', 'generate-stk-block-typesphp' ) )
+gulp.task( 'build-process', gulp.parallel( 'style', 'style-editor', 'welcome-styles', 'style-deprecated', 'generate-translations-js', 'generate-stk-block-typesphp', 'generate-design-library-default-placeholders-php' ) )
 
 gulp.task( 'build-block-design-system', gulp.parallel( 'generate-block-design-system-php', 'generate-block-design-system-scss' ) )
 
@@ -740,6 +815,11 @@ const watchFuncs = ( basePath = '.' ) => {
 		[ `${ basePath }/src/block/**/block.json` ],
 		gulp.parallel( [ 'generate-stk-block-typesphp' ] )
 	)
+
+	gulp.watch(
+		[ `${ basePath }/src/components/design-library-list/default.json` ],
+		gulp.parallel( [ 'generate-design-library-default-placeholders-php' ] )
+	)
 }
 
 gulp.task( 'watch', gulp.series( 'build-block-design-system', 'build-process', function watch( done ) {

plugin.php

@@ -230,6 +230,7 @@ function is_frontend() {
 require_once( plugin_dir_path( __FILE__ ) . 'src/kses.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/dynamic-breakpoints.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/design-library/init.php' );
+require_once( plugin_dir_path( __FILE__ ) . 'src/design-library/default-placeholders.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/styles/block-design-system.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/theme-block-style-inheritance/index.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/global-settings.php' );