UI Tweaks

Author: [email protected]

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

@@ -85,6 +85,7 @@
 	}
 	.components-button {
 		width: 100%;
+		position: relative;
 
 		&.ugb-block-styles-controls__selected {
 			outline: 2px solid var(--stk-skin-dark) !important;
@@ -96,6 +97,13 @@
 		}
 	}
 
+	.components-panel__body:has(.ugb-pro-control-button__wrapper:not(.ugb-pro-control-button--hidden)) > *:not(.ugb-pro-control-button__wrapper) {
+		height: 0 !important;
+		overflow: hidden !important;
+		min-height: 0 !important;
+		max-height: 0 !important;
+	}
+
 	.components-panel__body-description {
 		margin: -12px 0 0;
 	}

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

@@ -52,6 +52,13 @@ export const BlockStylesControl = props => {
 	const popoverOnCloseTimeout = useRef( null )
 	const popoverOnCloseRef = useRef( false )
 
+	// Reset openProNotice when the popover is closed
+	useEffect( () => {
+		if ( ! openPopover ) {
+			setOpenProNotice( false )
+		}
+	}, [ openPopover ] )
+
 	const mainClasses = classnames( [
 		'components-panel__body',
 		'ugb-block-styles-controls',
@@ -196,7 +203,8 @@ export const BlockStylesControl = props => {
 					 } }
 					anchor={ buttonRef.current }
 					offset={ 8 }
-					placement="left"
+					placement="left-start"
+					resize={ false }
 				>
 					<PanelBody>
 						<h2 className="components-panel__body-title">{ __( 'Block Styles', i18n ) }</h2>