Merge branch 'develop' into feat/design-library-full-pages

Author: kaeizen

src/components/block-styles-control/editor.scss

@@ -109,6 +109,9 @@
 		overflow: hidden !important;
 		min-height: 0 !important;
 		max-height: 0 !important;
+		opacity: 0 !important;
+		margin: 0 !important;
+		padding: 0 !important;
 	}
 
 	.components-panel__body-description {

src/components/block-styles-control/index.js

@@ -340,7 +340,7 @@ const SaveUpdateButtons = props => {
 	const ActionButtons = applyFilters( 'stackable.global-settings.global-block-styles.action-buttons', Fragment )
 
 	return ( <>
-		<Flex style={ { marginTop: '24px' } }>
+		<Flex style={ { marginTop: '24px', justifyContent: 'flex-end' } }>
 			<ActionButtons { ...propsToPass } />
 			<FlexItem style={ ! props.blockStyle || ! props.inOptions ? { marginLeft: 'auto' } : {} }>
 				<Button

src/components/pro-control-button/index.js

@@ -24,7 +24,7 @@ const ProControlButton = props => {
 	} )
 
 	return (
-		<div className="components-base-control">
+		<div className="components-base-control ugb-pro-control-button">
 			<button className="ugb-pro-control-more-dots" onClick={ () => setIsOpen( v => ! v ) }>
 				<div className="ugb-pro-control-more-dots__dot stk-pulsating-circle"></div>
 				<div className="ugb-pro-control-more-dots__dot stk-pulsating-circle"></div>

src/components/pro-control/index.js

@@ -120,32 +120,34 @@ const LABELS = {
 	'font-pairs': {
 		title: __( 'Premium Typography', i18n ),
 		description: <ul>
-			<li>{ __( 'Access to 90+ curated font pairs', i18n ) }</li>
-			<li>{ __( 'Create your own custom font pairs', i18n ) }</li>
+			<li>{ __( 'Apply beautiful typography combinations instantly', i18n ) }</li>
+			<li>{ __( 'Access to 90+ curated font pairs for professional designs', i18n ) }</li>
+			<li>{ __( 'Create custom font combinations for your brand', i18n ) }</li>
 		</ul>,
 	},
 	'color-schemes': {
 		title: __( 'Premium Color Schemes', i18n ),
 		description: <ul>
+			<li>{ __( 'Define site-wide colors that apply to all blocks automatically', i18n ) }</li>
 			<li>{ __( 'Access to 50+ curated color scheme presets', i18n ) }</li>
-			<li>{ __( 'Create your own color schemes', i18n ) }</li>
-			<li>{ __( 'Set default color schemes for blocks and sections', i18n ) }</li>
-			<li>{ __( 'Streamline your design workflow', i18n ) }</li>
+			<li>{ __( 'Create custom color schemes for backgrounds, containers, and buttons', i18n ) }</li>
 		</ul>,
 	},
 	'preset-controls': {
 		title: __( 'Premium Preset Controls', i18n ),
 		description: <ul>
 			<li>{ __( 'Customize your own presets like small, medium, large & x-large', i18n ) }</li>
+			<li>{ __( 'Maintain structured, well-balanced designs effortlessly', i18n ) }</li>
 			<li>{ __( 'Use Global Typography sizes as presets', i18n ) }</li>
 		</ul>,
 	},
 	'global-block-styles': {
 		title: __( 'Global Block Styles', i18n ),
 		description: <ul>
-			<li>{ __( 'Create and use your own block styles', i18n ) }</li>
-			<li>{ __( 'Update your block styles', i18n ) }</li>
-			<li>{ __( 'Organize your custom block styles', i18n ) }</li>
+			<li>{ __( 'Design once, apply everywhere - no more copy-paste', i18n ) }</li>
+			<li>{ __( 'Class-based styling for leaner, faster websites', i18n ) }</li>
+			<li>{ __( 'Sync changes across all blocks instantly', i18n ) }</li>
+			<li>{ __( 'Override styles while keeping them synced', i18n ) }</li>
 		</ul>,
 	},
 }

src/plugins/global-settings/color-schemes/editor.scss

@@ -6,6 +6,10 @@
 	}
 }
 
+.ugb-global-settings-color-picker + .ugb-pro-control-button {
+	margin-bottom: 16px;
+}
+
 .stk-global-color-scheme__color-scheme-item.block-editor-panel-color-gradient-settings__dropdown {
 	height: max-content;
 	padding: 0 8px 0 0;

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

@@ -8,10 +8,11 @@ import ColorSchemePicker from './color-scheme-picker'
 /**
  * External dependencies
  */
-import { i18n } from 'stackable'
+import { i18n, showProNotice } from 'stackable'
 import {
 	PanelAdvancedSettings, HelpTooltip,
 	AdvancedSelectControl, SectionSettings,
+	ProControlButton,
 } from '~stackable/components'
 import { useBlockColorSchemes } from '~stackable/hooks'
 
@@ -96,6 +97,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-color-scheme
 					setItemInEdit={ setItemInEdit }
 					setDisplayHoverNotice={ setDisplayHoverNotice }
 				/>
+				{ ! itemInEdit && showProNotice && <ProControlButton type="color-schemes" /> }
 				{ ! itemInEdit && <>
 					<SectionSettings title={ __( 'Default Block Colors', i18n ) }>
 						<AdvancedSelectControl