fine tune variationpicker validation

packages/schema-blocks/src/core/Instruction.ts

@@ -75,11 +75,11 @@ export default abstract class Instruction {
 	 * @returns {void}
 	 */
 	static register<I extends typeof Instruction>( this: I, name: string, instruction: InstructionClass<I["prototype"]> ): void {
-		if ( typeof Instruction.registeredInstructions === "undefined" ) {
-			Instruction.registeredInstructions = {};
+		if ( typeof this.registeredInstructions === "undefined" ) {
+			this.registeredInstructions = {};
 		}
 
-		Instruction.registeredInstructions[ name ] = instruction;
+		this.registeredInstructions[ name ] = instruction;
 	}
 
 	/**
@@ -93,11 +93,11 @@ export default abstract class Instruction {
 	 * @returns The instruction instance.
 	 */
 	static create<I extends typeof Instruction>( this: I, name: string, id: number, options: InstructionOptions ): I["prototype"] {
-		if ( typeof Instruction.registeredInstructions === "undefined" ) {
-			Instruction.registeredInstructions = {};
+		if ( typeof this.registeredInstructions === "undefined" ) {
+			this.registeredInstructions = {};
 		}
 
-		const klass = Instruction.registeredInstructions[ name ];
+		const klass = this.registeredInstructions[ name ];
 
 		if ( ! klass ) {
 			logger.error( "Invalid instruction: ", name );

packages/schema-blocks/src/core/validation/BlockValidationResult.ts

@@ -53,7 +53,6 @@ export class BlockValidationResult {
 	constructor( clientId: string, name: string, result: BlockValidation, blockPresence: BlockPresence, message?: string ) {
 		this.name = name;
 		this.clientId = clientId;
-		this.name = name;
 		this.result = result;
 		this.blockPresence = blockPresence;
 		this.issues = [];

packages/schema-blocks/src/functions/presenters/InnerBlocksSidebar.tsx

@@ -51,7 +51,6 @@ export function InnerBlocksSidebar( props: InnerBlocksSidebarProps ): ReactEleme
 	return <Fragment key={ "innerblocks-sidebar-" + props.currentBlock.clientId }>
 		<SidebarHeader />
 		<WarningList warnings={ warnings } />
-		henk
 		<BlockSuggestions
 			heading={ __( "Required Blocks", "yoast-schema-blocks" ) }
 			parentClientId={ props.currentBlock.clientId }
@@ -108,7 +107,7 @@ function WarningList( props: WarningListProps ): ReactElement {
 			<div className="yoast-block-sidebar-warnings">
 				<div className="yoast-block-sidebar-title">{ __( "Analysis", "yoast-schema-blocks" ) }</div>
 				<ul className="yoast-block-sidebar-warnings">
-					{ ...props.warnings.map( warning => <Warning warning={ warning } key={ warning.text } /> ) }
+					{...props.warnings.map( warning => <Warning warning={ warning } key={ warning.text } /> )}
 				</ul>
 			</div>
 		</Fragment>

packages/schema-blocks/src/functions/presenters/SidebarWarningPresenter.ts

@@ -2,7 +2,6 @@ import { __, sprintf } from "@wordpress/i18n";
 import { BlockValidation, BlockValidationResult, BlockPresence } from "../../core/validation";
 import { getHumanReadableBlockName } from "../BlockHelper";
 import { getAllDescendantIssues } from "../validators";
-import logger from "../logger";
 
 /**
  * A warning message for in the sidebar schema analysis.
@@ -90,8 +89,6 @@ export function createAnalysisMessages( validation: BlockValidationResult ): Sid
 	}
 
 	const issues = getAllDescendantIssues( validation );
-	logger.debug( "Issues:", issues );
-
 	const messages = [];
 
 	messages.push( ...getErrorMessages( issues ) );

packages/schema-blocks/src/functions/validators/validateResults.ts

@@ -21,10 +21,7 @@ export function isValidResult( source: BlockValidation ): boolean {
 export function isMissingResult( source: BlockValidation ): boolean {
 	return [
 		BlockValidation.MissingRecommendedBlock,
-		BlockValidation.MissingRecommendedVariation,
-
 		BlockValidation.MissingRequiredBlock,
-		BlockValidation.MissingRequiredVariation,
 	].includes( source );
 }
 
@@ -39,6 +36,8 @@ export function isEmptyResult( source: BlockValidation ): boolean {
 	return [
 		BlockValidation.MissingRecommendedAttribute,
 		BlockValidation.MissingRequiredAttribute,
+		BlockValidation.MissingRecommendedVariation,
+		BlockValidation.MissingRequiredVariation,
 	].includes( source );
 }
 

packages/schema-blocks/src/instructions/blocks/Heading.tsx

@@ -1,13 +1,14 @@
+import { Fragment } from "react";
 import { BlockControls, RichText as WordPressRichText } from "@wordpress/block-editor";
-import { BlockConfiguration } from "@wordpress/blocks";
+import { BlockConfiguration, BlockInstance } from "@wordpress/blocks";
 import { createElement } from "@wordpress/element";
-import { Fragment } from "react";
 
-import BlockInstruction from "../../core/blocks/BlockInstruction";
+import { BlockInstruction, BlockLeaf } from "../../core/blocks";
 import { RenderEditProps, RenderSaveProps } from "../../core/blocks/BlockDefinition";
+import { BlockValidationResult } from "../../core/validation";
 import RichTextBase, { RichTextEditProps, RichTextSaveProps } from "./abstract/RichTextBase";
-import BlockLeaf from "../../core/blocks/BlockLeaf";
 import HeadingLevelDropdown from "../../functions/presenters/HeadingLevelDropdown";
+import { defaultValidate } from "../../functions/validators/defaultValidate";
 
 
 /**
@@ -121,6 +122,17 @@ export class Heading extends RichTextBase {
 			key: i,
 		};
 	}
+
+	/**
+	 * Checks if the instruction block is valid.
+	 *
+	 * @param blockInstance The attributes from the block.
+	 *
+	 * @returns {BlockValidationResult} The validation result.
+	 */
+	validate( blockInstance: BlockInstance ): BlockValidationResult {
+		return defaultValidate( blockInstance, this );
+	}
 }
 
 BlockInstruction.register( "heading", Heading );

packages/schema-blocks/src/instructions/blocks/abstract/RichTextBase.ts

@@ -1,9 +1,9 @@
-import { BlockConfiguration, BlockInstance } from "@wordpress/blocks";
+import { BlockConfiguration, BlockInstance, getBlockContent } from "@wordpress/blocks";
 import { RichText as WordPressRichText } from "@wordpress/block-editor";
 import { createElement } from "@wordpress/element";
 import { BlockLeaf, BlockInstruction } from "../../../core/blocks";
 import { RenderSaveProps, RenderEditProps } from "../../../core/blocks/BlockDefinition";
-import { BlockPresence, BlockValidationResult } from "../../../core/validation";
+import { BlockPresence, BlockValidation, BlockValidationResult } from "../../../core/validation";
 
 export interface RichTextSaveProps extends WordPressRichText.ContentProps<keyof HTMLElementTagNameMap> {
 	"data-id": string;
@@ -86,25 +86,26 @@ export default abstract class RichTextBase extends BlockInstruction {
 	 */
 	validate( blockInstance: BlockInstance ): BlockValidationResult {
 		let presence = BlockPresence.Unknown;
+		let validation = BlockValidation.Unknown;
 		if ( this.options.required === true ) {
 			presence = BlockPresence.Required;
+			validation = BlockValidation.MissingRequiredAttribute;
 		} else {
-			if ( this.options.required === false ) {
-				presence = BlockPresence.Recommended;
-			}
+			presence = BlockPresence.Recommended;
+			validation = BlockValidation.MissingRecommendedAttribute;
 		}
 
-		// Does this block have any HTML content?
-		if ( blockInstance.originalContent ) {
+		// Get the current editor content of this block from the store.
+		const content: string = getBlockContent( blockInstance ) || "";
+		if ( content ) {
 			// Remove all characters from < up to and including > (i.e. strip the tags).
-			const innerText = blockInstance.originalContent.replace( /(<([^>]+)>)/ig, "" );
-
-			if ( innerText.length > 0 ) {
-				return BlockValidationResult.Valid( blockInstance, this.constructor.name, presence );
+			const innerText = content.replace( /(<([^>]+)>)/ig, "" );
+			if ( innerText.trim().length > 0 ) {
+				return BlockValidationResult.Valid( blockInstance, this.options.name, presence );
 			}
 		}
 
-		return BlockValidationResult.MissingBlock( this.constructor.name, presence );
+		return new BlockValidationResult( blockInstance.clientId, this.options.name, validation, presence );
 	}
 
 	/**