fix (wp5.9): text formatting popup closes when clearing highlight color (#2131)

* Fixed the clear highlight button.

* fix: use mousedown instead of click to prevent closing of popover

* fix: aligned formatting toolbar color indicator. fixes #2082

Co-authored-by: Benjamin Intal <[email protected]>

fixes #2083

Author: prconcepcion

src/format-types/highlight/editor.scss

@@ -1,13 +1,8 @@
-.stackable-components-toolbar {
-	border-top: none !important;
-	border-bottom: none !important;
-	border-left: 1px solid #000 !important;
-	border-right: 1px solid #000 !important;
-	.components-icon-button {
-		justify-content: center;
-		svg {
-			margin: 0 !important;
-		}
+.block-editor-block-toolbar .stk-toolbar-button {
+	padding: 6px 12px !important;
+	&::before {
+		left: 8px !important;
+		right: 8px !important;
 	}
 }
 .components-stackable-highlight__popover .components-popover__content {
@@ -26,10 +21,11 @@
 	background: #000;
 	height: 3px;
 	width: 20px;
-	left: auto;
+	left: 50%;
 	right: auto;
 	top: 50%;
 	margin: 9px 0 0;
+	transform: translateX(-50%);
 }
 .ugb-advanced-toolbar-control .components-base-control__field {
 	margin-bottom: 24px;

src/format-types/highlight/index.js

@@ -115,6 +115,7 @@ export const extractColors = styleString => {
 const HighlightButton = props => {
 	const [ isOpen, setIsOpen ] = useState( false )
 	const popoverEl = useRef( null )
+	const [ colorType, setColorType ] = useState( null )
 
 	// Close the window if the user clicks outside.
 	const clickOutsideListener = useCallback( event => {
@@ -127,8 +128,8 @@ const HighlightButton = props => {
 
 	// Assign the outside click listener.
 	useEffect( () => {
-		document.body.addEventListener( 'click', clickOutsideListener )
-		return () => document.body.removeEventListener( 'click', clickOutsideListener )
+		document.body.addEventListener( 'mousedown', clickOutsideListener )
+		return () => document.body.removeEventListener( 'mousedown', clickOutsideListener )
 	}, [ clickOutsideListener ] )
 
 	const {
@@ -141,6 +142,15 @@ const HighlightButton = props => {
 	// Backward compatibility for ugb/highlight.
 	let isActive = _isActive
 	let highlightStyles = activeAttributes?.style
+
+	// Open the popup according to the highlight type.
+	useEffect( () => {
+		const {
+			colorType = '',
+		} = isActive ? extractColors( highlightStyles ) : {}
+		setColorType( colorType )
+	}, [ isOpen ] )
+
 	if ( value ) {
 		( value.activeFormats || [] ).some( format => {
 			if ( format?.type === 'ugb/highlight' ) {
@@ -156,9 +166,7 @@ const HighlightButton = props => {
 	const {
 		textColor = '',
 		highlightColor = '',
-		colorType = '',
 	} = isActive ? extractColors( highlightStyles ) : {}
-
 	// If highlighted, show the highlight color, otherwise show the text color.
 	const displayIconColor = ( colorType !== '' ? highlightColor : textColor ) || textColor
 
@@ -167,11 +175,13 @@ const HighlightButton = props => {
 			<Toolbar className="stackable-components-toolbar">
 				<Button
 					label={ __( 'Color & Highlight', i18n ) }
-					className="components-button components-icon-button components-toolbar__control"
+					className="components-toolbar__control stk-toolbar-button"
 					icon="editor-textcolor"
 					aria-haspopup="true"
 					tooltip={ __( 'Color & Highlight', i18n ) }
-					onClick={ () => setIsOpen( ! isOpen ) }
+					onClick={ () => {
+						setIsOpen( ! isOpen )
+					} }
 					isPressed={ isActive }
 				>
 					<span className="components-stackable-highlight-color__indicator" style={ { backgroundColor: displayIconColor } } />
@@ -181,7 +191,7 @@ const HighlightButton = props => {
 						position="bottom center"
 						className="components-stackable-highlight__popover"
 						focusOnMount="container"
-						useRef={ popoverEl }
+						ref={ popoverEl }
 						isAlternate
 					>
 						<div className="components-stackable-highlight__inner">
@@ -210,6 +220,7 @@ const HighlightButton = props => {
 											: highlightColor || textColor || ''
 
 									onChange( createApplyFormat( value, colorType, defaultTextColor, defaultHighlightColor ), { withoutHistory: true } )
+									setColorType( colorType )
 								} }
 								isSmall
 							/>