minor fixes

translatable text,
use lodash's kebabCase,
add prefix,
use array_column,
rename namespace

Author: kaeizen

src/block-components/block-div/index.js

@@ -57,7 +57,7 @@ export const BlockDiv = memo( props => {
 			{
 				[ uniqueBlockClass ]: withUniqueClass,
 				'stk-block-background': attributes.hasBackground,
-				[ `background-${ attributes.backgroundColorScheme }` ]: attributes.hasBackground && attributes.backgroundColorScheme,
+				[ `stk--background-scheme--${ attributes.backgroundColorScheme }` ]: attributes.hasBackground && attributes.backgroundColorScheme,
 				// When the block has auto margins, we need to "add" those margins to
 				// the main block div so we can simulate the effect inside the editor.
 				// This works in conjunction with the styles in
@@ -133,7 +133,7 @@ BlockDiv.Content = props => {
 			uniqueBlockClass,
 			{
 				'stk-block-background': attributes.hasBackground,
-				[ `background-${ attributes.backgroundColorScheme }` ]: attributes.hasBackground && attributes.backgroundColorScheme,
+				[ `stk--background-scheme--${ attributes.backgroundColorScheme }` ]: attributes.hasBackground && attributes.backgroundColorScheme,
 				// When the block has auto top/bottom margins, we need to force the
 				// parent container to be 100% height or else the auto won't have any
 				// effect in the frontend. This is okay in the editor-side.

src/block-components/container-div/index.js

@@ -39,7 +39,7 @@ export const ContainerDiv = props => {
 		'stk-hover-parent': attributes.hasContainer && attributes.triggerHoverState, // This is needed to trigger parent-hover hover styles.
 		'stk--no-background': ! attributes.hasContainer,
 		'stk--no-padding': ! attributes.hasContainer,
-		[ `container-${ attributes.containerColorScheme }` ]: attributes.hasContainer && attributes.containerColorScheme,
+		[ `stk--container-scheme--${ attributes.containerColorScheme }` ]: attributes.hasContainer && attributes.containerColorScheme,
 	} )
 
 	return <Div
@@ -73,7 +73,7 @@ ContainerDiv.Content = props => {
 		'stk-hover-parent': attributes.hasContainer && attributes.triggerHoverState, // This is needed to trigger parent-hover hover styles.
 		'stk--no-background': ! attributes.hasContainer,
 		'stk--no-padding': ! attributes.hasContainer,
-		[ `container-${ attributes.containerColorScheme }` ]: attributes.hasContainer && attributes.containerColorScheme,
+		[ `stk--container-scheme--${ attributes.containerColorScheme }` ]: attributes.hasContainer && attributes.containerColorScheme,
 	} )
 
 	return <Div.Content

src/hooks/use-block-color-schemes.js

@@ -1,5 +1,9 @@
+import { i18n } from 'stackable'
+import { kebabCase } from 'lodash'
+
 import { useSelect } from '@wordpress/data'
 import { applyFilters } from '@wordpress/hooks'
+import { __ } from '@wordpress/i18n'
 
 export const useBlockColorSchemes = () => {
 	const {
@@ -21,7 +25,7 @@ export const useBlockColorSchemes = () => {
 
 		const allColorSchemes = applyFilters( 'stackable.global-settings.global-color-schemes.custom-color-schemes', colorSchemes, true )
 		const COLOR_SCHEME_OPTIONS = [ {
-			label: 'Scheme unavailable', // This will be displayed when a custom color scheme is deleted or when a license gets deactivated
+			label: __( 'Scheme unavailable', i18n ), // This will be displayed when a custom color scheme is deleted or when a license gets deactivated
 			value: 'scheme-unavailable',
 			hidden: true,
 			disabled: true,
@@ -47,8 +51,8 @@ export const useBlockColorSchemes = () => {
 		// Converts property name to kebab-cased string with scheme key as prefix
 		// (e.g., backgroundColor --> --stk-scheme-default-1-background-color)
 		const toKebab = ( property, slug ) => {
-			const result = property.replace( /([a-z0-9])([A-Z])/g, '$1-$2' )
-			return '--stk-' + slug + '-' + result.toLowerCase()
+			const result = kebabCase( property )
+			return '--stk-' + slug + '-' + result
 		}
 
 		// get color groups for color palette picker.

src/plugins/global-settings/color-schemes/editor-loader.js

@@ -79,18 +79,18 @@ const renderGlobalStyles = (
 
 		decls = getCSS( scheme, currentHoverState, 'background' )
 		if ( decls.desktop.length || decls.desktopHover.length ) {
-			rules.background.push( `.background-${ key }{ ${ [ ...decls.desktop, ...decls.desktopHover ].join( '' ) } }` )
+			rules.background.push( `.stk--background-scheme--${ key }{ ${ [ ...decls.desktop, ...decls.desktopHover ].join( '' ) } }` )
 		}
 		if ( decls.desktopParentHover.length ) {
-			rules.background.push( `:where(.stk-hover-parent:hover) .background-${ key }{ ${ decls.desktopParentHover.join( '' ) } }` )
+			rules.background.push( `:where(.stk-hover-parent:hover) .stk--background-scheme--${ key }{ ${ decls.desktopParentHover.join( '' ) } }` )
 		}
 
 		decls = getCSS( scheme, currentHoverState, 'container' )
 		if ( decls.desktop.length || decls.desktopHover.length ) {
-			rules.container.push( `.container-${ key }{ ${ [ ...decls.desktop, ...decls.desktopHover ].join( '' ) } }` )
+			rules.container.push( `.stk--container-scheme--${ key }{ ${ [ ...decls.desktop, ...decls.desktopHover ].join( '' ) } }` )
 		}
 		if ( decls.desktopParentHover.length ) {
-			rules.container.push( `.container-${ key }:where(:hover), :where(.stk-hover-parent:hover) .container-${ key }{ ${ decls.desktopParentHover.join( '' ) } }` )
+			rules.container.push( `.stk--container-scheme--${ key }:where(:hover), :where(.stk-hover-parent:hover) .stk--container-scheme--${ key }{ ${ decls.desktopParentHover.join( '' ) } }` )
 		}
 	} )
 

src/plugins/global-settings/color-schemes/index.php

@@ -122,7 +122,9 @@ public function register_color_schemes() {
 			);
 		}
 
-		public function sanitize_array_setting( $input ) {
+		// Make this function static so it can be used when
+		// registering the custom color schemes in premium
+		public static function sanitize_array_setting( $input ) {
 			return ! is_array( $input ) ? array( array() ) : $input;
 		}
 
@@ -179,7 +181,7 @@ public function add_global_color_schemes_styles( $current_css ) {
 			$schemes_array = is_array( get_option( 'stackable_global_color_schemes' ) ) ? get_option( 'stackable_global_color_schemes' ) : [];
 
 			// Get all color schemes, including custom color schemes if any
-			$all_color_schemes = apply_filters( 'stackable_global_color_schemes.get_color_schemes', $schemes_array );
+			$all_color_schemes = apply_filters( 'stackable_global_color_schemes/get_color_schemes', $schemes_array );
 
 			if ( ! is_array( $all_color_schemes ) ) {
 				return $current_css;
@@ -231,16 +233,16 @@ public function add_global_color_schemes_styles( $current_css ) {
 					'key' => $key,
 					'mode' => 'background',
 					'selectors' => array(
-						'desktop' => ".background-$key",
-						'desktopParentHover' => ":where(.stk-hover-parent:hover) .background-$key"
+						'desktop' => ".stk--background-scheme--$key",
+						'desktopParentHover' => ":where(.stk-hover-parent:hover) .stk--background-scheme--$key"
 					)
 				);
 				$block_color_schemes['container'][] = array(
 					'key' => $key,
 					'mode' => 'container',
 					'selectors' => array(
-						'desktop' => ".container-$key",
-						'desktopParentHover' => array(".container-$key:where(:hover)",":where(.stk-hover-parent:hover) .container-$key")
+						'desktop' => ".stk--container-scheme--$key",
+						'desktopParentHover' => array(".stk--container-scheme--$key:where(:hover)",":where(.stk-hover-parent:hover) .stk--container-scheme--$key")
 					)
 				);
 			}
@@ -281,13 +283,7 @@ public function add_global_color_schemes_styles( $current_css ) {
 		 * @return Array
 		 */
 		public function convert_to_assoc_array( $schemes_array ) {
-			$schemes = array();
-
-			foreach( $schemes_array as $scheme ) {
-				$schemes[ $scheme['key'] ] = $scheme[ 'colorScheme' ];
-			}
-
-			return $schemes;
+			return array_column( $schemes_array, 'colorScheme', 'key' );
 		}
 
 		/**

src/plugins/global-settings/color-schemes/utils.js

@@ -1,3 +1,5 @@
+import { kebabCase } from 'lodash'
+
 import { applyFilters } from '@wordpress/hooks'
 
 /*
@@ -33,10 +35,10 @@ export const schemeHasValue = scheme => {
 }
 
 const camelToKebab = property => {
-	const result = property.replace( /([a-z0-9])([A-Z])/g, '$1-$2' )
+	const result = kebabCase( property )
 
 	// Convert the result to lowercase and return with '--stk-' prefix
-	return '--stk-' + result.toLowerCase()
+	return '--stk-' + result
 }
 
 const getInheritedValue = ( property, currentState, mode ) => {