QA from Coderabbit comments fixed

Author: [email protected]

src/components/guided-modal-tour/tours/blocks.js

@@ -77,8 +77,8 @@ export const blocks = {
 		)
 
 		// Delete all blocks
-		const allBlocks = select( 'core/block-editor' ).getBlocks()
-		dispatch( 'core/block-editor' ).removeBlocks( allBlocks.map( block => block.clientId ) )
+		// const allBlocks = select( 'core/block-editor' ).getBlocks()
+		// dispatch( 'core/block-editor' ).removeBlocks( allBlocks.map( block => block.clientId ) )
 
 		// Insert our block
 		dispatch( 'core/block-editor' ).insertBlocks( [ blockObject ], 0 )

src/components/guided-modal-tour/tours/design-library.js

@@ -42,7 +42,7 @@ export const designLibrary = {
 			postStep: () => {
 				const el = document.querySelector( '.ugb-modal-design-library__enable-background input' )
 				// If the input is not checked, click the button.
-				if ( ! el.checked ) {
+				if ( el && ! el.checked ) {
 					el.click()
 				}
 			},

src/components/guided-modal-tour/tours/design-system.js

@@ -82,7 +82,7 @@ export const designSystem = {
 					// Scroll this to the top.
 					el.scrollTo( {
 						top: 0,
-						behavior: 'instant',
+						behavior: 'auto',
 					} )
 				}
 			},

src/components/style-guide/index.js

@@ -20,10 +20,10 @@ export { default as StyleGuidePopover } from './popover'
 
 // TODO: This is not yet finished
 const StyleGuide = props => {
-	const { designSystem, contentRef = null } = props
+	const { designSystem = {}, contentRef = null } = props
 
 	const {
-		colors,
+		colors = [],
 		colorSchemes = DUMMY_COLOR_SCHEMES,
 		typography = {
 			desktop: [], tablet: [], mobile: [],
@@ -33,7 +33,8 @@ const StyleGuide = props => {
 		previewClassNames = '',
 	} = designSystem
 
-	const THEME_STYLES = wpGlobalStylesInlineCss.replaceAll( ':root', '&' ).replace( /[^\-](\bbody)/g, ( match, p1 ) => {
+	const src = typeof wpGlobalStylesInlineCss === 'string' ? wpGlobalStylesInlineCss : ''
+	const THEME_STYLES = src.replaceAll( ':root', '&' ).replace( /[^\-](\bbody)/g, ( match, p1 ) => {
 		return match.replace( p1, '.ugb-style-guide__preview-root' )
 	} )
 

src/components/style-guide/popover.js

@@ -47,6 +47,7 @@ const StyleGuidePopover = props => {
 				className="ugb-style-guide-popover__close-button"
 				variant="tertiary"
 				onClick={ onClose }
+				aria-label={ __( 'Close', i18n ) }
 			>
 				<Icon icon={ closeIcon } />
 			</Button>
@@ -87,7 +88,7 @@ const ExportButton = props => {
 	return (
 		<Button
 			className="ugb-style-guide__print-button"
-			isSecondary
+			variant="secondary"
 			onClick={ handlePrint }
 			icon={ <Icon icon={ downloadIcon } /> }
 			isBusy={ isExporting }

src/components/style-guide/utils.js

@@ -157,12 +157,16 @@ const ADDITIONAL_ATTRIBUTES = {
 
 const INNER_BLOCK_CALLBACKS = {
 	'stackable/team-member': innerBlocks => {
-		innerBlocks[ 0 ].attributes.imageExternalUrl = `${ srcUrl }/${ profile }`
+		if ( innerBlocks?.[ 0 ]?.attributes ) {
+			innerBlocks[ 0 ].attributes.imageExternalUrl = `${ srcUrl }/${ profile }`
+		}
 
 		return innerBlocks
 	},
 	'stackable/testimonial': innerBlocks => {
-		innerBlocks[ 1 ].attributes.imageExternalUrl = `${ srcUrl }/${ profile }`
+		if ( innerBlocks?.[ 1 ]?.attributes ) {
+			innerBlocks[ 1 ].attributes.imageExternalUrl = `${ srcUrl }/${ profile }`
+		}
 
 		return innerBlocks
 	},
@@ -199,7 +203,8 @@ export const DefaultOutlineButton = ( {
 }
 
 const getGeneratedCss = ( blocks, generateForInnerBlocks = false ) => {
-	return blocks.map( block => {
+	const list = Array.isArray( blocks ) ? blocks : []
+	return list.map( block => {
 		if ( ! block.attributes.uniqueId ) {
 			block.attributes.uniqueId = createUniqueClass( block.clientId )
 		}
@@ -220,7 +225,7 @@ const getGeneratedCss = ( blocks, generateForInnerBlocks = false ) => {
 
 		block.attributes.generatedCss = saveCss
 
-		if ( generateForInnerBlocks ) {
+		if ( generateForInnerBlocks && Array.isArray( block.innerBlocks ) ) {
 			block.innerBlocks = getGeneratedCss( block.innerBlocks, generateForInnerBlocks )
 		}
 
@@ -290,10 +295,12 @@ export const RenderBlock = props => {
 	} = getSerializedBlock( propsToPass )
 
 	return (
-		<RawHTML>
-			{ cleanSerializedBlock( serialized, SERIALIZE_CALLBACKS[ blockName ], attributes ) }
-			{ `<p>${ name }</p>` }
-		</RawHTML>
+		<>
+			<RawHTML>
+				{ cleanSerializedBlock( serialized, SERIALIZE_CALLBACKS[ blockName ], attributes ) }
+			</RawHTML>
+			<p>{ name }</p>
+		</>
 	)
 }
 

src/hooks/use-design-system.js

@@ -69,11 +69,11 @@ export const useDesignSystem = () => {
 
 	const buttonIconStyles = useMemo( () => {
 		return renderGlobalBlockLayoutStyles( buttonsAndIcons, blockLayoutDefaults, NOOP, 'normal', null, null, true )?.replaceAll( ':root', '.ugb-style-guide__preview-root' ) || ''
-	}, [ buttonsAndIcons ] )
+	}, [ buttonsAndIcons, blockLayoutDefaults ] )
 
 	const spacingBorderStyles = useMemo( () => {
 		return renderGlobalBlockLayoutStyles( spacingAndBorders, blockLayoutDefaults, NOOP, 'normal', null, null, true )?.replaceAll( ':root', '.ugb-style-guide__preview-root, .ugb-style-guide__preview' ) || ''
-	}, [ spacingAndBorders ] )
+	}, [ spacingAndBorders, blockLayoutDefaults ] )
 
 	const {
 		getSortedColorSchemes,

src/plugins/global-settings/colors/index.js

@@ -113,7 +113,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-colors', out
 				<p className="components-base-control__help">
 					{ __( 'Change your color palette for all your blocks across your site.', i18n ) }
 					&nbsp;
-					<a href="https://docs.wpstackable.com/article/362-how-to-use-global-colors?utm_source=wp-global-settings&utm_campaign=learnmore&utm_medium=gutenberg" target="_docs">
+					<a href="https://docs.wpstackable.com/article/362-how-to-use-global-colors?utm_source=wp-global-settings&utm_campaign=learnmore&utm_medium=gutenberg" target="_docs" rel="noopener noreferrer">
 						{ __( 'Learn more about Global Colors', i18n ) }
 					</a>
 				</p>

src/plugins/guided-modal-tour-trigger/index.js

@@ -10,24 +10,29 @@ import { dispatch } from '@wordpress/data'
 
 const TourTrigger = () => {
 	useEffect( () => {
-		// Check th
-		const tourId = window?.location?.search?.includes( 'tour=' ) ? window?.location?.search?.split( 'tour=' )[ 1 ] : null
+		// Check the GET parameter for the tour ID.
+		const params = new URLSearchParams( window?.location?.search || '' )
+		const tourId = params.get( 'tour' )
+		const tids = []
+
 		switch ( tourId ) {
 			case 'editor':
 				// When the editor tour is to be shown, no need to do anything here.
 				break
 			case 'design-library':
 				// When the design library tour is to be shown, simluate a click on the design library button.
-				setTimeout( () => {
+				tids.push( setTimeout( () => {
 					document.querySelector( '.ugb-insert-library-button' )?.click()
-				}, 500 )
+				}, 500 ) )
 				break
 			case 'design-system':
 				// When the design system tour is to be shown, open the sidebar
-				setTimeout( () => {
+				tids.push( setTimeout( () => {
 					dispatch( 'core/edit-post' )?.openGeneralSidebar( 'stackable-global-settings/sidebar' ) // For Block Editor
-				}, 500 )
+				}, 500 ) )
 		}
+
+		return () => tids.forEach( id => clearTimeout( id ) )
 	}, [] )
 
 	return null

src/util/block-templates.js

@@ -1,6 +1,8 @@
 import { i18n } from 'stackable'
 
-import { __, sprintf } from '@wordpress/i18n'
+import {
+	__, _x, sprintf,
+} from '@wordpress/i18n'
 
 export const LONG_TEXT = [
 	// Translators: This is placeholder text used in the style guide.
@@ -142,7 +144,7 @@ const TIMELINE_TEMPLATE = [
 			left: 0,
 		},
 	}, [
-		[ 'stackable/text', { text: __( 'Description for this block. Use this space for describing your block. Any text will do.', 'Content placeholder', i18n ) } ],
+		[ 'stackable/text', { text: _x( 'Description for this block. Use this space for describing your block. Any text will do.', 'Content placeholder', i18n ) } ],
 	] ],
 ]