Shows a link in the warning

packages/schema-blocks/css/schema-blocks.css

@@ -50,6 +50,11 @@
 	color: #0073aa;
 }
 
+.wp-block .yoast-warning-block > .yoast-warning-block-message > a {
+	text-decoration: underline;
+	color: #0073aa;
+}
+
 .yoast-warning-block > div > button:not(:last-child) {
 	margin-right: 24px;
 }

packages/schema-blocks/src/functions/gutenberg/watchers/warningWatcher.ts

@@ -47,25 +47,29 @@ function getInnerBlocksInstruction( blockName: string ): InnerBlocks | null {
 function getDefaultWarningMessage( blockTitle: string, warningType: WarningType ): string {
 	switch ( warningType ) {
 		case WarningType.BLOCK_REQUIRED: {
-			/* translators: %s expands to the block name that is removed. */
+			/* translators: %1$s: the block name that is removed, %2$s: the anchor to a page about required blocks, %3$s the closing anchor tag. */
 			return sprintf(
 				__(
-					"You've just removed the ‘%s’ block, but this is a required block for Schema output. " +
+					"You've just removed the ‘%1$s’ block, but this is a %2$srequired block for Schema output%3$s. " +
 					"Without this block no Schema will be generated. Are you sure you want to do this?",
 					"yoast-schema-blocks",
 				),
 				blockTitle,
+				'<a href="' + ( window as any ).yoastSchemaBlocks.requiredLink + '" target="_blank">',
+				"</a>",
 			);
 		}
 		case WarningType.BLOCK_RECOMMENDED: {
-			/* translators: %s expands to the block name that is removed. */
+			/* translators: %1$s: the block name that is removed, %2$s: the anchor to a page about recommended blocks, %3$s the closing anchor tag. */
 			return sprintf(
 				__(
-					"You've just removed the ‘%s’ block, but this is a recommended block for Schema output. " +
+					"You've just removed the ‘%1$s’ block, but this is a %2$srecommended block for Schema output%3$s. " +
 					"Are you sure you want to do this?",
 					"yoast-schema-blocks",
 				),
 				blockTitle,
+				'<a href="' + ( window as any ).yoastSchemaBlocks.recommendedLink + '" target="_blank">',
+				"</a>",
 			);
 		}
 	}

packages/schema-blocks/tests/functions/gutenberg/watchers/warningWatcher.test.ts

@@ -10,7 +10,13 @@ import { RequiredBlock, RequiredBlockOption } from "../../../../src/core/validat
 
 jest.mock( "@wordpress/i18n", () => ( {
 	__: jest.fn( text => text ),
-	sprintf: jest.fn( ( text, value ) => text.replace( "%s", value ) ),
+	sprintf: jest.fn( ( text, value, value2, value3 ) => {
+		text = text.replace( "%1$s", value );
+		text = text.replace( "%2$s", value2 );
+		text = text.replace( "%3$s", value3 );
+
+		return text;
+	} ),
 } ) );
 
 jest.mock( "@wordpress/block-editor", () => ( {
@@ -54,6 +60,11 @@ jest.mock( "@yoast/components", () => {
 	};
 } );
 
+( window as any ).yoastSchemaBlocks = {
+	requiredLink: "https://yoa.st/required-fields",
+	recommendedLink: "https://yoa.st/recommended-fields",
+};
+
 describe( "The warning watcher", () => {
 	it( "adds warnings when required blocks are removed", () => {
 		const previousBlocks = [
@@ -106,7 +117,8 @@ describe( "The warning watcher", () => {
 					innerBlocks: [],
 					name: "yoast/ingredients",
 				},
-				warningText: "You've just removed the ‘Ingredients’ block, but this is a required block for Schema output. " +
+				warningText: "You've just removed the ‘Ingredients’ block, but this is a " +
+					"<a href=\"https://yoa.st/required-fields\" target=\"_blank\">required block for Schema output</a>. " +
 					"Without this block no Schema will be generated. Are you sure you want to do this?",
 			},
 		);
@@ -164,7 +176,9 @@ describe( "The warning watcher", () => {
 					name: "yoast/ingredients",
 				},
 				// eslint-disable-next-line max-len
-				warningText: "You've just removed the ‘Ingredients’ block, but this is a recommended block for Schema output. Are you sure you want to do this?",
+				warningText: "You've just removed the ‘Ingredients’ block, but this is a " +
+					"<a href=\"https://yoa.st/recommended-fields\" target=\"_blank\">recommended block for Schema output</a>. " +
+					"Are you sure you want to do this?",
 			},
 		);
 		expect( dispatch ).toBeCalled();