Merge branch 'develop' into fix/design-library-add-new-patterns-to-stackable-category

Author: bfintal

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' );

src/block-components/image/edit.js

@@ -175,7 +175,7 @@ const Controls = props => {
 							newAttributes.imageWidth = ''
 							newAttributes.imageWidthUnit = '%'
 							// We need the width of the image block to compare
-							if ( width < imageBlockWidth ) {
+							if ( width && width < imageBlockWidth ) {
 								newAttributes.imageWidth = width
 								newAttributes.imageWidthUnit = 'px'
 							}

src/block/progress-bar/edit.js

@@ -120,7 +120,7 @@ const Edit = props => {
 				</div>
 				{ /* Add our progress style here because we're adjusting the value using a hook */ }
 				<style>
-					{ `.editor-styles-wrapper .stk-${ props.attributes.uniqueId } .stk-progress-bar { --progress-value:${ derivedValue }% !important; }` }
+					{ `.editor-styles-wrapper .stk-${ props.attributes.uniqueId } .stk-progress-bar { --progress-value:${ derivedProgressValue }% !important; }` }
 				</style>
 			</BlockDiv>
 			{ props.isHovered && <MarginBottom /> }

src/block/progress-circle/edit.js

@@ -132,7 +132,7 @@ const Edit = props => {
 				</div>
 				{ /* Add our progress style here because we're adjusting the value using a hook */ }
 				<style>
-					{ `.editor-styles-wrapper .stk-${ props.attributes.uniqueId } .stk-progress-circle { --progress-value:${ derivedValue } }` }
+					{ `.editor-styles-wrapper .stk-${ props.attributes.uniqueId } .stk-progress-circle { --progress-value:${ derivedProgressValue } }` }
 				</style>
 			</BlockDiv>
 			{ props.isHovered && <MarginBottom /> }

src/components/advanced-autosuggest-control/index.js

@@ -279,7 +279,7 @@ class AdvancedAutosuggestControl extends Component {
 								this.setState( { isShowingSuggestions: false } )
 							}
 
-							if ( shouldShowSuggestions ) {
+							if ( shouldShowSuggestions && this.state.containerRect ) {
 								// We need to add styling to position the
 								// suggestion drop down correctly. Scrolling
 								// the editor/inspector breaks the position, so

src/components/variation-picker/index.js

@@ -18,7 +18,7 @@ const VariationPicker = props => {
 	const {
 		icon = layout,
 		label = __( 'Choose variation' ), // Dev note: no text domain here since this will use WP's translation.
-		instructions = __( 'Select a variation to start with.' ), // Dev note: no text domain here since this will use WP's translation.
+		instructions = __( 'Select a variation to start with.', i18n ),
 		variations,
 		onSelect,
 		allowSkip,