fix (global color schemes): tweak descriptions and labels

Author: [email protected]

src/plugins/global-settings/color-schemes/color-scheme-picker.js

@@ -376,6 +376,10 @@ const ColorSchemePicker = props => {
 		}
 	}
 
+	const isNameReadOnly = itemInEdit?.key === 'scheme-default-1' ? true
+		: ! isPro && itemInEdit?.key === 'scheme-default-2' ? true
+			: false
+
 	return ( ! itemInEdit ? <SortablePicker
 		ref={ ref }
 		{ ...props }
@@ -404,18 +408,22 @@ const ColorSchemePicker = props => {
 			onDuplicate={ () => onDuplicate( itemInEdit ) }
 		/>
 		<div className="stk-global-color-scheme__edit-panel-preview">
-			<p> { __( 'Editing this scheme will also change all blocks that currently use this color scheme.', i18n ) } </p>
+			{
+				! isPro && itemInEdit.key === 'scheme-default-1'
+					? <p> { __( 'Change the color scheme used for all blocks, and when the container option is enabled for a block.', i18n ) } </p>
+					: ! isPro && itemInEdit.key === 'scheme-default-2'
+						? <p> { __( 'Change the color scheme applied when the background option is enabled for a block.', i18n ) } </p>
+						: <p> { __( 'Editing this scheme will also change all blocks that currently use this color scheme.', i18n ) } </p>
+			}
 
 			<ItemPreview item={ itemInEdit } withWrapper={ true } />
 			<AdvancedTextControl
 				label={ __( 'Color Scheme Name', i18n ) }
 				hasPanelModifiedIndicator={ false }
 				value={ itemInEdit?.name }
 				allowReset={ false }
-				{ ...{
-					readOnly: itemInEdit?.key === 'scheme-default-1' ? true : false,
-					onChange: itemInEdit?.key === 'scheme-default-1' ? null : name => onChangeName( name ),
-				} }
+				readOnly={ isNameReadOnly }
+				onChange={ onChangeName }
 			/>
 		</div>
 
@@ -443,7 +451,13 @@ const ColorSchemePicker = props => {
 				hover={ getAllowedHover( settings.property ) }
 				forceUpdateHoverState={ true }
 				onChange={ color => onChange( settings.property, color ) }
-				help={ settings.property === 'backgroundColor' ? __( 'Note: Background color is not used for Base Color Scheme.', i18n ) : '' }
+				help={
+					! isPro && itemInEdit.key === 'scheme-default-1' && settings.property === 'backgroundColor'
+						? __( 'Note: This background color is used when the container option of the block is enabled.', i18n )
+						: isPro && settings.property === 'backgroundColor'
+							? __( 'Note: Background color is not used for Base Color Scheme.', i18n )
+							: ''
+				}
 				hasGradientPicker={ hasGradientPicker( settings.property ) }
 				enableGradient={ currentHoverState === 'normal' || settings.property === 'buttonBackgroundColor' }
 				additionalToggleProps={ getToggleProps( settings ) }

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { fetchSettings } from '~stackable/util'
+import { i18n } from 'stackable'
 
 /**
  * WordPress dependencies
@@ -10,6 +11,7 @@ import {
 	register, createReduxStore, dispatch,
 } from '@wordpress/data'
 import domReady from '@wordpress/dom-ready'
+import { __ } from '@wordpress/i18n'
 
 // Include all the stored state.
 const DEFAULT_STATE = {
@@ -78,7 +80,7 @@ domReady( () => {
 		} = response
 
 		const colorSchemes = Array.isArray( _colorSchemes ) && _colorSchemes.length > 0 ? _colorSchemes : [ {
-			name: 'Default Scheme',
+			name: __( 'Default Scheme', i18n ),
 			key: 'scheme-default-1',
 			colorScheme: {
 				backgroundColor: { desktop: '' },
@@ -92,7 +94,7 @@ domReady( () => {
 			},
 			hideInPicker: false,
 		}, {
-			name: 'Color Scheme 2',
+			name: __( 'Background Scheme', i18n ),
 			key: 'scheme-default-2',
 			colorScheme: {
 				backgroundColor: { desktop: '' },