update UI, add unlink button, add arrow key navigation

Author: kaeizen

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

@@ -79,6 +79,9 @@
 }
 
 .ugb-block-styles-controls__popover {
+	.components-popover__content {
+		width: 350px !important;
+	}
 	.components-button {
 		width: 100%;
 		position: relative;

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

@@ -43,33 +43,29 @@ export const BlockStylesControl = props => {
 	const blockAttributesFilter = getBlockStyleAttributesFilter( blockName )
 	const defaultBlockAttributes = useMemo( () => getFilteredAttributes( blockType.attributes, blockAttributesFilter ), [] )
 
+	const [ userCanManageOptions, setUserCanManageOptions ] = useState( false )
 	const [ openProNotice, setOpenProNotice ] = useState( false )
 	const [ openSaveModal, setOpenSaveModal ] = useState( false )
 	const [ openPopover, setOpenPopover ] = useState( false )
+	const [ focusedIndex, setFocusedIndex ] = useState( 0 )
 
 	const prevBlockStyleRef = useRef( null )
 	const buttonRef = useRef( null )
-	const panelBodyRef = useRef( null )
+	const blockStylesListRef = useRef( null )
+	const blockStyleButtonsRef = useRef( [] )
 
-	const [ userCanManageOptions, setUserCanManageOptions ] = useState( false )
 	const id = useSelect( select => select( 'core' ).getCurrentUser()?.id, [] )
 
-	// Check if the user has "manage options" capabilities and can manage block styles.
-	useEffect( () => {
-		const checkCapabilities = async () => {
-			const capabilities = await currentUserHasCapability( 'manage_options' )
-			setUserCanManageOptions( capabilities )
-		}
-
-		checkCapabilities()
-	}, [ id ] )
+	const attributes = useBlockAttributesContext()
+	const setAttributes = useBlockSetAttributesContext()
 
-	// Reset openProNotice when the popover is closed
-	useEffect( () => {
-		if ( ! openPopover ) {
-			setOpenProNotice( false )
-		}
-	}, [ openPopover ] )
+	const {
+		blockStyle,
+		modifiedBlockStyle: isModified,
+		uniqueId: _uniqueId,
+		generatedCss: _generatedCss,
+		...otherAttributes
+	} = attributes
 
 	const mainClasses = classnames( [
 		'components-panel__body',
@@ -82,17 +78,75 @@ export const BlockStylesControl = props => {
 		'ugb-pro-control-button--hidden': ! openProNotice,
 	} )
 
-	const attributes = useBlockAttributesContext()
+	// Handle keyboard navigation for block style buttons
+	const handleKeyDown = event => {
+	// eslint-disable-next-line @wordpress/no-global-active-element
+		if ( ! blockStyleButtonsRef.current.includes( document.activeElement ) ) {
+			return
+		}
 
-	const {
-		blockStyle,
-		modifiedBlockStyle: isModified,
-		uniqueId: _uniqueId,
-		generatedCss: _generatedCss,
-		...otherAttributes
-	} = attributes
+		if ( event.key === 'ArrowDown' ) {
+			event.preventDefault()
+			setFocusedIndex( prevIndex => ( prevIndex + 1 ) % blockStyleButtonsRef.current.length )
+		} else if ( event.key === 'ArrowUp' ) {
+			event.preventDefault()
+			setFocusedIndex( prevIndex => ( prevIndex - 1 + blockStyleButtonsRef.current.length ) % blockStyleButtonsRef.current.length )
+		}
+	}
 
-	const setAttributes = useBlockSetAttributesContext()
+	// Update focused block style
+	useEffect( () => {
+		if ( blockStyleButtonsRef.current[ focusedIndex ] ) {
+			blockStyleButtonsRef.current[ focusedIndex ].focus()
+		}
+	}, [ focusedIndex ] )
+
+	useEffect( () => {
+		// Reset openProNotice, focusedIndex, and blockStyleButtonsRef when the popover is closed
+		if ( ! openPopover ) {
+			setOpenProNotice( false )
+			setFocusedIndex( -1 )
+			blockStyleButtonsRef.current = []
+
+			return
+		}
+
+		const list = blockStylesListRef.current
+
+		if ( ! list ) {
+			return
+		}
+
+		if ( ! blockStyleButtonsRef.current.length ) {
+			blockStyleButtonsRef.current = Array.from( list.querySelectorAll( 'button' ) )
+		}
+
+		// Focus on the selected block style button when the popover is opened.
+		const selected = list.querySelector( '.ugb-block-styles-controls__selected' )
+
+		if ( selected && blockStyleButtonsRef.current.length ) {
+			const index = blockStyleButtonsRef.current.indexOf( selected )
+			setFocusedIndex( index )
+		}
+
+		list.addEventListener( 'keydown', handleKeyDown )
+
+		return () => {
+			if ( list ) {
+				list.removeEventListener( 'keydown', handleKeyDown )
+			}
+		}
+	}, [ openPopover ] )
+
+	// Check if the user has "manage options" capabilities and can manage block styles.
+	useEffect( () => {
+		const checkCapabilities = async () => {
+			const capabilities = await currentUserHasCapability( 'manage_options' )
+			setUserCanManageOptions( capabilities )
+		}
+
+		checkCapabilities()
+	}, [ id ] )
 
 	useEffect( () => {
 		if ( prevBlockStyleRef.current === null ) {
@@ -137,6 +191,8 @@ export const BlockStylesControl = props => {
 	}, [ blockStyle ] )
 
 	const onSelectDefaultBlockStyle = () => {
+		setFocusedIndex( 0 )
+
 		// Do nothing if block style is already "Default"
 		if ( ! blockStyle ) {
 			return
@@ -145,7 +201,9 @@ export const BlockStylesControl = props => {
 		setAttributes( { ...defaultBlockAttributes, modifiedBlockStyle: false } )
 	}
 
-	const onSelectBlockStyle = option => {
+	const onSelectBlockStyle = ( option, index ) => {
+		setFocusedIndex( index )
+
 		if ( isPro ) {
 			doAction( 'stackable.global-settings.global-block-styles.select-block-style',
 				option,	blockStyle, globalBlockStyles, defaultBlockAttributes, setAttributes )
@@ -176,13 +234,7 @@ export const BlockStylesControl = props => {
 						size="small"
 						icon="edit"
 						iconSize={ 12 }
-						onMouseDown={ () => {
-							setOpenPopover( isOpen => ! isOpen )
-							// Focus on the selected block style button when the popover is opened.
-							setTimeout( () => {
-								panelBodyRef.current?.querySelector( '.ugb-block-styles-controls__selected' )?.focus()
-							}, 50 )
-						} }
+						onMouseDown={ () => setOpenPopover( isOpen => ! isOpen ) }
 						ref={ buttonRef }
 					>
 						{ `${ __( 'Block Style', i18n ) }:` } <wbr /> { blockStyleLabel }{ isModified && inBlockStyleOptions ? <span className="stk-panel-modified-indicator stk--visible"></span> : '' }
@@ -210,22 +262,22 @@ export const BlockStylesControl = props => {
 			{ openPopover && (
 				<Popover
 					className="ugb-button-icon-control__popover ugb-block-styles-controls__popover"
-					focusOnMount={ false }
+					anchor={ buttonRef.current }
 					onEscape={ () => setOpenPopover( false ) }
 					onClose={ () => setOpenPopover( false ) }
-					anchor={ buttonRef.current }
-					offset={ 8 }
+					focusOnMount={ false }
 					placement="left-start"
 					resize={ false }
+					offset={ 8 }
 				>
-					<PanelBody ref={ panelBodyRef }>
+					<PanelBody>
 						<h2 className="components-panel__body-title">{ __( 'Block Styles', i18n ) }</h2>
 						<p className="components-panel__body-description">
 							{ __( 'Save the styles of this block to reuse on others. You can also update a saved style, and the changes will apply wherever it\'s used.', i18n ) }
 							&nbsp;
 							<a href="https://docs.wpstackable.com/article/737-how-to-use-block-styles" target="_docs" rel="noreferrer">{ __( 'Learn more', i18n ) }</a>
 						</p>
-						<ul className="ugb-block-styles-controls__list">
+						<ul className="ugb-block-styles-controls__list" ref={ blockStylesListRef }>
 							<li>
 								<Button
 									onClick={ () => onSelectDefaultBlockStyle() }
@@ -239,7 +291,7 @@ export const BlockStylesControl = props => {
 							{ globalBlockStyles.map( ( option, index ) => {
 								return <li key={ index }>
 									<Button
-										onClick={ () => onSelectBlockStyle( option.slug ) }
+										onClick={ () => onSelectBlockStyle( option.slug, index + 1 ) }
 										className={ blockStyle === option.slug ? 'ugb-block-styles-controls__selected' : '' }
 										tabIndex={ 0 }
 									>
@@ -254,6 +306,7 @@ export const BlockStylesControl = props => {
 						</ul>
 						{ userCanManageOptions && (
 							<SaveUpdateButtons
+								blockName={ blockName }
 								blockStyle={ blockStyle }
 								inOptions={ inBlockStyleOptions }
 								isModified={ isModified }
@@ -280,26 +333,17 @@ export const BlockStylesControl = props => {
 }
 
 const SaveUpdateButtons = props => {
-	const {
-		blockStyle, inOptions, isModified, setOpenSaveModal, onAddBlockStyle,
-	} = props
-
-	const UpdateButton = applyFilters( 'stackable.global-settings.global-block-styles.update-button', Fragment )
+	const { onAddBlockStyle, ...propsToPass } = props
+	const ActionButtons = applyFilters( 'stackable.global-settings.global-block-styles.action-buttons', Fragment )
 
 	return ( <>
 		<Flex style={ { marginTop: '24px' } }>
-			<FlexItem>
-				<UpdateButton
-					blockStyle={ blockStyle }
-					inOptions={ inOptions }
-					isModified={ isModified }
-					setOpenSaveModal={ setOpenSaveModal }
-				/>
-			</FlexItem>
-			<FlexItem>
+			<ActionButtons { ...propsToPass } />
+			<FlexItem style={ ! props.blockStyle || ! props.inOptions ? { marginLeft: 'auto' } : {} }>
 				<Button
 					variant="primary"
 					onClick={ () => onAddBlockStyle() }
+					size="small"
 				>
 					{ __( 'Save as New Style', i18n ) }
 					{ ! isPro && <span className="stk-pulsating-circle" role="presentation" /> }