Merge pull request #483 from tomusborne/release/3.2.4

Release: 3.2.4

assets/dist/customizer.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-components', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-polyfill'), 'version' => '8ea6e41d478be8b7d0dac74069cb0dba');
+<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-components', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-polyfill'), 'version' => '481830d227feca63c062a3e2d512e01c');

assets/dist/dashboard.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-api-fetch', 'wp-components', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-polyfill'), 'version' => '42891bd78f46f557a7fcfe466a6f3080');
+<?php return array('dependencies' => array('wp-api-fetch', 'wp-components', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-polyfill'), 'version' => '0b0b00a375613f57beee85895b88af90');

functions.php

@@ -12,7 +12,7 @@
 }
 
 // Set our theme version.
-define( 'GENERATE_VERSION', '3.2.3' );
+define( 'GENERATE_VERSION', '3.2.4' );
 
 if ( ! function_exists( 'generate_setup' ) ) {
 	add_action( 'after_setup_theme', 'generate_setup' );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "generatepress",
-  "version": "3.2.3",
+  "version": "3.2.4",
   "description": "A super lightweight WordPress theme.",
   "main": "Gruntfile.js",
   "scripts": {

readme.txt

@@ -6,7 +6,7 @@ License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Tags: two-columns, three-columns, one-column, right-sidebar, left-sidebar, footer-widgets, blog, e-commerce, flexible-header, full-width-template, buddypress, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, rtl-language-support, featured-images, theme-options
 Requires at least: 5.2
 Tested up to: 6.1
-Stable tag: 3.2.3
+Stable tag: 3.2.4
 
 GeneratePress is a lightweight WordPress theme built with a focus on speed and usability.
 
@@ -99,6 +99,12 @@ MIT License: https://github.com/JedWatson/react-select/blob/master/LICENSE
 
 == Changelog ==
 
+= 3.2.4 =
+
+Release date: November 22, 2022
+
+* Fix: Kebab-case formatting for global colors variable names
+
 = 3.2.3 =
 
 Release date: November 17, 2022

src/components/color-picker/GlobalColorPicker.js

@@ -1,8 +1,23 @@
-import { kebabCase, toLower } from 'lodash';
+import { toLower } from 'lodash';
 import ColorPicker from './index';
 import { useCallback, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Transform a string to kebab case.
+ *
+ * @param {string} input The input to transform.
+ * @return {string} The input transformed to kebab case.
+ */
+function kebabCase( input ) {
+	return input
+		.replace( /[^a-zA-Z0-9\s-_]/g, '' ) // Remove special characters, except spaces, underscore, and the dash.
+		.trim() // Remove starting/ending spaces.
+		.replace( /[\s_]+/g, '-' ) // Replaces spaces and underscores to single dash.
+		.replace( /([a-z])([A-Z])/g, '$1-$2' ) // Split when lower case is before an upper case.
+		.toLowerCase();
+}
+
 export default function GlobalColorPicker( props ) {
 	const { index, value, variableName, onChange, onChangeVariableName, checkVariableNameIsAvailable } = props;
 	const [ isVariableNameDisabled, setVariableNameDisabled ] = useState( !! value );
@@ -18,7 +33,7 @@ export default function GlobalColorPicker( props ) {
 	useEffect( () => {
 		setVariableNameValid( checkVariableNameIsAvailable( toLower( localVariableName ), index ) );
 
-		const regex = new RegExp("[^a-z0-9\\-]");
+		const regex = new RegExp( /[^a-z0-9\\-]/ );
 		setVariableNameHasSpecialChars( regex.test( localVariableName ) );
 	}, [ localVariableName ] );
 
@@ -38,7 +53,10 @@ export default function GlobalColorPicker( props ) {
 
 	const updateVariableName = useCallback( () => {
 		if ( isVariableNameValid ) {
-			onChangeVariableName( kebabCase( toLower( localVariableName ) ) );
+			const kebabVariable = kebabCase( localVariableName );
+
+			onChangeVariableName( kebabVariable );
+			setLocalVariableName( kebabVariable );
 		} else {
 			setLocalVariableName( variableName );
 		}
@@ -60,7 +78,6 @@ export default function GlobalColorPicker( props ) {
 			onChange={ onChange }
 			onClosePanel={ () => {
 				setVariableNameDisabled( true );
-				updateVariableName();
 			} }
 			onChangeVariableName={ setLocalVariableName }
 			onBlurVariableName={ updateVariableName }

style.css

@@ -4,7 +4,7 @@ Theme URI: https://generatepress.com
 Author: Tom Usborne
 Author URI: https://tomusborne.com
 Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
-Version: 3.2.3
+Version: 3.2.4
 Requires at least: 5.2
 Tested up to: 6.1
 Requires PHP: 5.6