Merge pull request #1119 from Yoast/P2-694-create-schema-blocks-redux-store

P2 694 create schema blocks redux store

Author: increddibelly

packages/schema-blocks/src/core/blocks/BlockDefinition.tsx

@@ -85,7 +85,7 @@ export default class BlockDefinition extends Definition {
 		configuration.edit = props => this.edit( props );
 		configuration.save = props => this.save( props );
 
-		logger.info( "registering block " + name );
+		logger.debug( "registering block " + name );
 
 		// Register the block to WordPress.
 		registerBlockType( name, configuration );

packages/schema-blocks/src/functions/gutenberg/storeBlockValidation.ts

@@ -1,6 +1,7 @@
 import { dispatch } from "@wordpress/data";
 import { BlockValidationResult } from "../../core/validation";
 import logger from "../logger";
+import { YOAST_SCHEMA_BLOCKS_STORE_NAME } from "../redux";
 
 /**
  * Updates the store with information about whether a block is valid or why it isn't.
@@ -13,12 +14,14 @@ export default function storeBlockValidation( validations: BlockValidationResult
 
 	logger.debug( "Updating the store with the validation results." );
 
-	const store = dispatch( "yoast-seo/editor" );
+	const store = dispatch( YOAST_SCHEMA_BLOCKS_STORE_NAME );
 	if ( store ) {
 		store.resetBlockValidation();
 		validations.forEach( blockValidation => {
 			logger.debug( "storing validation: ", blockValidation );
 			store.addBlockValidation( blockValidation );
 		} );
+	} else {
+		logger.debug( "No Store!" );
 	}
 }

packages/schema-blocks/src/functions/gutenberg/watch.ts

@@ -122,7 +122,7 @@ export function validateBlocks( blocks: BlockInstance[] ): BlockValidationResult
 export default function watch() {
 	subscribe(
 		debounce( () => {
-			if ( updatingSchema || select( "core/block-editor" ).isTyping() ) {
+			if ( updatingSchema ) {
 				return;
 			}
 

packages/schema-blocks/src/functions/initialize.ts

@@ -1,11 +1,11 @@
-import { registerBlockType } from "@wordpress/blocks";
-
 import "../instructions";
-import logger, { LogLevel } from "./logger";
+import { registerBlockType } from "@wordpress/blocks";
+import { initializeSchemaBlocksStore } from "../functions/redux";
 import { WarningBlock } from "../blocks/warning-block/configuration";
 import { processBlock, processSchema } from "./process";
 import filter from "./gutenberg/filter";
 import watch from "./gutenberg/watch";
+import logger, { LogLevel } from "./logger";
 
 /**
  * Removes all whitespace including line breaks from a string.
@@ -26,7 +26,9 @@ function removeWhitespace( text: string ): string {
 export function initialize( logLevel: LogLevel = LogLevel.ERROR ) {
 	logger.setLogLevel( logLevel );
 
-	registerBlockType( "yoast/warning-block", WarningBlock );
+	initializeSchemaBlocksStore();
+
+	registerInternalBlocks();
 
 	jQuery( 'script[type="text/schema-template"]' ).each( function() {
 		try {
@@ -54,3 +56,10 @@ export function initialize( logLevel: LogLevel = LogLevel.ERROR ) {
 	// Watch Gutenberg for block changes that require schema updates.
 	watch();
 }
+
+/**
+ * Registers additional blocks needed for schema blocks use cases.
+ */
+function registerInternalBlocks() {
+	registerBlockType( "yoast/warning-block", WarningBlock );
+}

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

@@ -1,6 +1,6 @@
 import { select } from "@wordpress/data";
 import { __, sprintf } from "@wordpress/i18n";
-
+import { YOAST_SCHEMA_BLOCKS_STORE_NAME } from "../redux";
 import { BlockValidation, BlockValidationResult } from "../../core/validation";
 import { getHumanReadableBlockName } from "../BlockHelper";
 import { BlockPresence } from "../../core/validation/BlockValidationResult";
@@ -29,7 +29,7 @@ export type SidebarWarning = {
  * @returns {BlockValidationResult} The validation results, or null if none were found.
  */
 function getValidationResult( clientId: string ): BlockValidationResult | null {
-	const validationResults: clientIdValidation = select( "yoast-seo/editor" ).getSchemaBlocksValidationResults();
+	const validationResults: clientIdValidation = select( YOAST_SCHEMA_BLOCKS_STORE_NAME ).getSchemaBlocksValidationResults();
 	if ( ! validationResults ) {
 		return null;
 	}

packages/schema-blocks/src/functions/redux/SchemaBlocksState.ts

@@ -0,0 +1,9 @@
+import { BlockValidationResult } from "../../core/validation";
+
+export interface SchemaBlocksState {
+	validations: Record<string, BlockValidationResult>;
+}
+
+export const SchemaBlocksDefaultState: SchemaBlocksState = {
+	validations: {},
+};

packages/schema-blocks/src/functions/redux/actions/index.ts

@@ -0,0 +1,41 @@
+import { BlockValidationResult } from "../../../core/validation";
+
+import * as schemaBlocksActions from "./schemaBlocks";
+
+const PREFIX = "WPSEO_";
+
+export const SchemaBlocksStoreActions = {
+	ADD_BLOCK_VALIDATION: `${ PREFIX }ADD_BLOCK_VALIDATION`,
+	RESET_BLOCK_VALIDATIONS: `${ PREFIX }CLEAR_BLOCK_VALIDATIONS`,
+};
+
+export interface SchemaBlocksStoreCommand {
+	type: string;
+	validation?: BlockValidationResult;
+}
+
+/**
+ * Configures a redux command to store a validation result.
+ *
+ * @param validation The validation to store.
+ * @returns The configured AddBlockValidation command.
+ */
+export function AddBlockValidationCommand( validation: BlockValidationResult ): SchemaBlocksStoreCommand {
+	return {
+		type: SchemaBlocksStoreActions.ADD_BLOCK_VALIDATION,
+		validation: validation,
+	};
+}
+
+/**
+ * Configures a redux command to reset the current validation results.
+ *
+ * @returns Thge configured ResetBlockValidation command
+ */
+export function ResetBlockValidationCommand(): SchemaBlocksStoreCommand {
+	return {
+		type: SchemaBlocksStoreActions.RESET_BLOCK_VALIDATIONS,
+	};
+}
+
+export { schemaBlocksActions };

packages/schema-blocks/src/functions/redux/actions/schemaBlocks.ts

@@ -0,0 +1,21 @@
+import { BlockValidationResult } from "../../../core/validation";
+import { SchemaBlocksStoreCommand, AddBlockValidationCommand, ResetBlockValidationCommand } from "./";
+
+/**
+ * Updates whether a block is valid.
+ *
+ * @param {blockValidationResult} blockValidationResult The block validation to store.
+ *
+ * @returns {SchemaBlocksStoreAction} An action for redux.
+ */
+export function addBlockValidation( blockValidationResult: BlockValidationResult ): SchemaBlocksStoreCommand {
+	return AddBlockValidationCommand( blockValidationResult );
+}
+
+/**
+ * Commands the store to reset the block validation store to initial state.
+ * @returns {SchemaBlocksStoreAction} The command to set the initial state for the block validation store.
+ */
+export function resetBlockValidation(): SchemaBlocksStoreCommand {
+	return ResetBlockValidationCommand();
+}

packages/schema-blocks/src/functions/redux/index.ts

@@ -0,0 +1,6 @@
+export * from "./actions";
+export * from "./reducer";
+export * from "./selectors";
+export * from "./initializeSchemaStore";
+
+export const YOAST_SCHEMA_BLOCKS_STORE_NAME = "yoast-seo/schema-blocks";

packages/schema-blocks/src/functions/redux/initializeSchemaStore.ts

@@ -0,0 +1,24 @@
+import { registerStore, StoreConfig } from "@wordpress/data";
+import { SchemaBlocksDefaultState, SchemaBlocksState } from "./SchemaBlocksState";
+import { schemaBlocksActions } from "./actions";
+import { schemaBlocksReducer } from "./reducer";
+import * as schemaBlocksSelectors from "./selectors";
+import { YOAST_SCHEMA_BLOCKS_STORE_NAME } from ".";
+
+/**
+ * Initializes the Schema Blocks store.
+ */
+export function initializeSchemaBlocksStore() {
+	const storeOptions: StoreConfig<SchemaBlocksState> = {
+		reducer: schemaBlocksReducer,
+		selectors: {
+			...schemaBlocksSelectors,
+		},
+		actions: {
+			...schemaBlocksActions,
+		},
+		initialState: SchemaBlocksDefaultState,
+	};
+
+	registerStore( YOAST_SCHEMA_BLOCKS_STORE_NAME, storeOptions );
+}