Merge remote-tracking branch 'origin/feature/fix-assessments' into 16…

…22-ai-assessment-lock-icon

packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js

@@ -12,6 +12,7 @@ import { Paper } from "yoastseo";
 /* Internal dependencies */
 import { ModalContent } from "./modal-content";
 import { SparklesIcon } from "./sparkles-icon";
+import { getAllBlocks } from "../../helpers/getAllBlocks";
 import { ReactComponent as LockClosed } from "../../../images/lock-closed.svg";
 
 /**
@@ -32,6 +33,17 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => {
 	const focusElementRef = useRef( null );
 	const [ buttonClass, setButtonClass ] = useState( "" );
 
+	// Only enable the button when the editor is in visual mode and all blocks are in visual mode.
+	const isEnabled = useSelect( ( select ) => {
+		const editorMode = select( "core/edit-post" ).getEditorMode();
+		if ( editorMode !== "visual" ) {
+			return false;
+		}
+
+		const blocks = getAllBlocks( select( "core/block-editor" ).getBlocks() );
+		return blocks.every( block => select( "core/block-editor" ).getBlockMode( block.clientId ) === "visual" );
+	}, [] );
+
 	/**
 	 * Handles the button press state.
 	 * @returns {void}
@@ -96,6 +108,7 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => {
 				id={ aiFixesId }
 				className={ `ai-button ${buttonClass}` }
 				pressed={ isButtonPressed }
+				disabled={ ! isEnabled }
 			>
 				{ ! isPremium &&  <LockClosed className="yst-fixes-button__lock-icon" /> }
 				<SparklesIcon pressed={ isButtonPressed } gradientId={ gradientId } />

packages/js/src/helpers/getAllBlocks.js

@@ -0,0 +1,16 @@
+/**
+ * Returns all Gutenberg blocks given the (current) top-level blocks.
+ * @param {object[]} blocks The (current) top-level blocks.
+ * @returns {object[]} All blocks.
+ */
+export const getAllBlocks = ( blocks ) => {
+	let allBlocks = [ ...blocks ];
+
+	blocks.forEach( block => {
+		if ( block.innerBlocks && block.innerBlocks.length > 0 ) {
+			allBlocks = [ ...allBlocks, ...getAllBlocks( block.innerBlocks ) ];
+		}
+	} );
+
+	return allBlocks;
+};

packages/js/tests/ai-assessment-fixes/components/AIAssessmentFixesButton.test.js

@@ -18,12 +18,18 @@ jest.mock( "@wordpress/data", () => {
 /**
  * Mock the useSelect function.
  * @param {string} activeAIButton The active AI button ID.
+ * @param {string} editorMode The editor mode.
+ * @param {object[]} blocks The blocks.
  * @returns {function} The mock.
  */
-const mockSelect = ( activeAIButton ) => useSelect.mockImplementation( select => select( () => ( {
-	getActiveAIFixesButton: () => activeAIButton,
-	getActiveMarker: () => null,
-} ) ) );
+const mockSelect = ( activeAIButton, editorMode = "visual", blocks = [] ) =>
+	useSelect.mockImplementation( select => select( () => ( {
+		getActiveAIFixesButton: () => activeAIButton,
+		getActiveMarker: () => null,
+		getBlocks: () => blocks,
+		getBlockMode: ( clientId ) => clientId === "htmlTest" ? "html" : "visual",
+		getEditorMode: () => editorMode,
+	} ) ) );
 
 describe( "AIAssessmentFixesButton", () => {
 	test( "should find the correct aria-label in the document", () => {
@@ -56,5 +62,28 @@ describe( "AIAssessmentFixesButton", () => {
 		const buttonWithTooltip = document.getElementsByClassName( "yoast-tooltip yoast-tooltip-w" );
 		expect( buttonWithTooltip ).toHaveLength( 0 );
 	} );
+
+	test( "should be enabled under the default circumstances", () => {
+		render( <AIAssessmentFixesButton id="keyphraseDensity" isPremium={ true } /> );
+		const button = screen.getByRole( "button" );
+		expect( button ).toBeInTheDocument();
+		expect( button.disabled ).toBeFalsy();
+	} );
+
+	test( "should be disabled in HTML editing mode", () => {
+		mockSelect( "keyphraseDensityAIFixes", "html", [ { clientId: "test" } ] );
+		render( <AIAssessmentFixesButton id="keyphraseDensity" isPremium={ true } /> );
+		const button = screen.getByRole( "button" );
+		expect( button ).toBeInTheDocument();
+		expect( button.disabled ).toBeTruthy();
+	} );
+
+	test( "should be disabled when one of the blocks is in HTML editing mode", () => {
+		mockSelect( "keyphraseDensityAIFixes", "visual", [ { clientId: "test" }, { clientId: "htmlTest" } ] );
+		render( <AIAssessmentFixesButton id="keyphraseDensity" isPremium={ true } /> );
+		const button = screen.getByRole( "button" );
+		expect( button ).toBeInTheDocument();
+		expect( button.disabled ).toBeTruthy();
+	} );
 } );
 

packages/js/tests/helpers/getAllBlocks.test.js

@@ -0,0 +1,18 @@
+import { getAllBlocks } from "../../src/helpers/getAllBlocks";
+
+describe( "getAllBlocks", () => {
+	it( "should return the same blocks when no inner blocks are defined", () => {
+		const blocks = [ { clientId: 1 }, { clientId: 2 }, { clientId: 3 } ];
+		const expected = [ 1, 2, 3 ];
+		expect( expected ).toEqual( getAllBlocks( blocks ).map( ( { clientId } ) => clientId ) );
+	} );
+
+	it( "should return all blocks when inner blocks are defined", () => {
+		const blocks = [
+			{ clientId: 1, innerBlocks: [ { clientId: 2 }, { clientId: 3, innerBlocks: [ { clientId: 4 } ] } ] },
+			{ clientId: 5, innerBlocks: [] },
+		];
+		const expected = [ 1, 2, 3, 4, 5 ];
+		expect( expected ).toEqual( getAllBlocks( blocks ).map( ( { clientId } ) => clientId ).sort() );
+	} );
+} );

packages/ui-library/src/components/notifications/index.js

@@ -93,7 +93,7 @@ Notification.propTypes = {
 	title: PropTypes.string,
 	description: PropTypes.oneOfType( [ PropTypes.node, PropTypes.arrayOf( PropTypes.node ) ] ),
 	onDismiss: PropTypes.func,
-	autoDismiss: PropTypes.oneOfType( [ PropTypes.number, null ] ),
+	autoDismiss: PropTypes.number,
 	dismissScreenReaderLabel: PropTypes.string.isRequired,
 };
 

packages/ui-library/src/elements/toast/index.js

@@ -158,7 +158,7 @@ Toast.propTypes = {
 	className: PropTypes.string,
 	position: PropTypes.string,
 	onDismiss: PropTypes.func,
-	autoDismiss: PropTypes.oneOfType( [ PropTypes.number, null ] ),
+	autoDismiss: PropTypes.number,
 	isVisible: PropTypes.bool.isRequired,
 	setIsVisible: PropTypes.func.isRequired,
 };