add orange indicator and description

Author: kaeizen

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

@@ -90,7 +90,7 @@
 	}
 
 	.components-panel__body-description {
-		margin: 0;
+		margin: -12px 0 0;
 	}
 
 	.ugb-block-styles-controls__selected-icon {

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

@@ -152,8 +152,7 @@ export const BlockStylesControl = props => {
 						iconPosition="right"
 						iconSize={ 12 }
 						onClick={ () => {
-							// Clicking this button when the popover is open also triggers the popover's `onClose`,
-							// so the popover will close automatically.
+							// Clicking this button when the popover is open also triggers the popover's `onClose`, so the popover will close automatically.
 							if ( ! openPopover && ! popoverOnCloseRef.current ) {
 								setOpenPopover( true )
 							}
@@ -198,7 +197,9 @@ export const BlockStylesControl = props => {
 				>
 					<PanelBody>
 						<h2 className="components-panel__body-title">{ __( 'Block Styles', i18n ) }</h2>
-						<p className="components-panel__body-description">Description</p>
+						<p className="components-panel__body-description">
+							{ __( 'Choose a block style to quickly apply a predefined set of styles to this block.', i18n ) }
+						</p>
 						<ul className="ugb-block-styles-controls__list">
 							<li>
 								<Button

src/plugins/global-settings/block-styles/index.js

@@ -20,12 +20,18 @@ import {
  */
 import { addFilter, applyFilters } from '@wordpress/hooks'
 import { Fragment, useState } from '@wordpress/element'
+import { useSelect } from '@wordpress/data'
 import { __ } from '@wordpress/i18n'
 
 export { GlobalBlockStyles } from './editor-loader'
 
 addFilter( 'stackable.global-settings.inspector', 'stackable/global-block-styles', output => {
 	const [ isOpen, setIsOpen ] = useState( false )
+	const hasBlockStyles = useSelect( select => {
+		const blockStyles = select( 'stackable/global-block-styles' ).getAllBlockStyles()
+
+		return Object.keys( blockStyles ).length > 0
+	}, [] )
 
 	if ( showProNotice || isPro ) {
 		return (
@@ -35,6 +41,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-block-styles
 					title={ __( 'Global Block Styles', i18n ) }
 					className="ugb-global-block-styles__panel"
 					isPremiumPanel={ ! isPro }
+					showModifiedIndicator={ isPro && hasBlockStyles }
 					onToggle={ isOpen => setIsOpen( isOpen ) }
 				>
 					{ ! isPro && <ProControl type="global-block-styles" /> }