From 6f0a38b1b3fa077f8180db28e635422ec008a4ac Mon Sep 17 00:00:00 2001 From: Joost Boomkamp <3604126+increddibelly@users.noreply.github.com> Date: Tue, 23 Mar 2021 17:40:47 +0100 Subject: [PATCH 1/7] move schema blocks store from free to monorepo; add typings --- .../src/functions/redux/SchemaBlocksAction.ts | 6 ++ .../src/functions/redux/SchemaBlocksState.ts | 9 +++ .../src/functions/redux/actions/index.ts | 1 + .../functions/redux/actions/schemaBlocks.ts | 32 ++++++++ .../src/functions/redux/index.ts | 1 + .../functions/redux/initializeSchemaStore.ts | 78 +++++++++++++++++++ .../src/functions/redux/reducer/index.ts | 1 + .../functions/redux/reducer/schemaBlocks.ts | 31 ++++++++ .../src/functions/redux/selectors/index.ts | 1 + .../functions/redux/selectors/schemaBlocks.ts | 12 +++ 10 files changed, 172 insertions(+) create mode 100644 packages/schema-blocks/src/functions/redux/SchemaBlocksAction.ts create mode 100644 packages/schema-blocks/src/functions/redux/SchemaBlocksState.ts create mode 100644 packages/schema-blocks/src/functions/redux/actions/index.ts create mode 100644 packages/schema-blocks/src/functions/redux/actions/schemaBlocks.ts create mode 100644 packages/schema-blocks/src/functions/redux/index.ts create mode 100644 packages/schema-blocks/src/functions/redux/initializeSchemaStore.ts create mode 100644 packages/schema-blocks/src/functions/redux/reducer/index.ts create mode 100644 packages/schema-blocks/src/functions/redux/reducer/schemaBlocks.ts create mode 100644 packages/schema-blocks/src/functions/redux/selectors/index.ts create mode 100644 packages/schema-blocks/src/functions/redux/selectors/schemaBlocks.ts diff --git a/packages/schema-blocks/src/functions/redux/SchemaBlocksAction.ts b/packages/schema-blocks/src/functions/redux/SchemaBlocksAction.ts new file mode 100644 index 0000000000..7ab321ac11 --- /dev/null +++ b/packages/schema-blocks/src/functions/redux/SchemaBlocksAction.ts @@ -0,0 +1,6 @@ +import { BlockValidationResult } from "../../core/validation"; + +export type SchemaBlocksAction = { + type: string; + validation: BlockValidationResult; +} diff --git a/packages/schema-blocks/src/functions/redux/SchemaBlocksState.ts b/packages/schema-blocks/src/functions/redux/SchemaBlocksState.ts new file mode 100644 index 0000000000..52f508fbd0 --- /dev/null +++ b/packages/schema-blocks/src/functions/redux/SchemaBlocksState.ts @@ -0,0 +1,9 @@ +import { BlockValidationResult } from "../../core/validation"; + +export type SchemaBlocksState = { + validations: Record; +}; + +export const SchemaBlocksDefaultState: SchemaBlocksState = { + validations: {}, +}; diff --git a/packages/schema-blocks/src/functions/redux/actions/index.ts b/packages/schema-blocks/src/functions/redux/actions/index.ts new file mode 100644 index 0000000000..b842f41955 --- /dev/null +++ b/packages/schema-blocks/src/functions/redux/actions/index.ts @@ -0,0 +1 @@ +export * from "./schemaBlocks"; diff --git a/packages/schema-blocks/src/functions/redux/actions/schemaBlocks.ts b/packages/schema-blocks/src/functions/redux/actions/schemaBlocks.ts new file mode 100644 index 0000000000..6e17af5226 --- /dev/null +++ b/packages/schema-blocks/src/functions/redux/actions/schemaBlocks.ts @@ -0,0 +1,32 @@ +import { BlockValidationResult } from "../../../core/validation"; + +const PREFIX = "WPSEO_"; + +export const SchemaBlocksStoreActions = { + ADD_BLOCK_VALIDATION: `${ PREFIX }ADD_BLOCK_VALIDATION`, + RESET_BLOCK_VALIDATIONS: `${ PREFIX }CLEAR_BLOCK_VALIDATIONS`, +}; + +/** + * Updates whether a block is valid. + * + * @param {blockValidationResult} blockValidationResult The block validation to store. + * + * @returns {Object} An action for redux. + */ +export function addBlockValidation( blockValidationResult: BlockValidationResult ): object { + return { + type: SchemaBlocksStoreActions.ADD_BLOCK_VALIDATION, + validation: blockValidationResult, + }; +} + +/** + * Commands the store to reset the block validation store to initial state. + * @returns {object} The command to set the initial state for the block validation store. + */ +export function resetBlockValidation(): object { + return { + type: SchemaBlocksStoreActions.RESET_BLOCK_VALIDATIONS, + }; +} diff --git a/packages/schema-blocks/src/functions/redux/index.ts b/packages/schema-blocks/src/functions/redux/index.ts new file mode 100644 index 0000000000..b842f41955 --- /dev/null +++ b/packages/schema-blocks/src/functions/redux/index.ts @@ -0,0 +1 @@ +export * from "./schemaBlocks"; diff --git a/packages/schema-blocks/src/functions/redux/initializeSchemaStore.ts b/packages/schema-blocks/src/functions/redux/initializeSchemaStore.ts new file mode 100644 index 0000000000..fe4e8c6f74 --- /dev/null +++ b/packages/schema-blocks/src/functions/redux/initializeSchemaStore.ts @@ -0,0 +1,78 @@ +import { registerStore, StoreConfig } from "@wordpress/data"; +import { pickBy } from "lodash"; +import { SchemaBlocksDefaultState, SchemaBlocksState } from "./SchemaBlocksState"; +import * as actions from "./actions"; +import * as reducer from "./reducer"; +import * as selectors from "./selectors"; + +export const YOAST_SCHEMA_STORE_NAME = "yoast-seo/schema-blocks"; +/** + * Initializes the Schema Blocks store. + * + * @returns {object} The Schema Blocks store. + */ +export default function initEditorStore() { + const storeOptions: StoreConfig = { + reducer: reducer, + selectors: { ...getFunctions( "function", selectors ) }, + actions: { ...getFunctions( "function", actions ) }, + initialState: SchemaBlocksDefaultState, + }; + + const store = registerStore( YOAST_SCHEMA_STORE_NAME, storeOptions ); + + populateStore( store ); + + return store; +} + +function getFunctions( ...items: any[] ): Function[] { + return pickBy( { ...items }, ( item: unknown ) => if ( typeof item === "function" ) ); +} + + +/** + * Populates the store. + * + * @param {Object} store The store to populate. + * + * @returns {void} + */ +const populateStore = store => { + // Initialize the cornerstone content. + store.dispatch( actions.loadCornerstoneContent() ); + // Initialize the focus keyphrase. + store.dispatch( actions.loadFocusKeyword() ); + // Hide marker buttons. + store.dispatch( actions.setMarkerStatus( "hidden" ) ); + + store.dispatch( + actions.setSettings( { + socialPreviews: { + sitewideImage: window.wpseoScriptData.metabox.sitewide_social_image, + authorName: window.wpseoScriptData.metabox.author_name, + siteName: window.wpseoScriptData.metabox.site_name, + contentImage: window.wpseoScriptData.metabox.first_content_image, + twitterCardType: window.wpseoScriptData.metabox.twitterCardType, + }, + snippetEditor: { + baseUrl: window.wpseoScriptData.metabox.base_url, + date: window.wpseoScriptData.metabox.metaDescriptionDate, + recommendedReplacementVariables: window.wpseoScriptData.analysis.plugins.replaceVars.recommended_replace_vars, + siteIconUrl: window.wpseoScriptData.metabox.siteIconUrl, + }, + } ), + ); + + // Initialize the Social Preview data depending on which platform should be present + const { facebook: showFacebook, twitter: showTwitter } = window.wpseoScriptData.metabox.showSocial; + if ( showFacebook ) { + store.dispatch( actions.loadFacebookPreviewData() ); + } + if ( showTwitter ) { + store.dispatch( actions.loadTwitterPreviewData() ); + } + + store.dispatch( actions.setSEMrushChangeCountry( window.wpseoScriptData.metabox.countryCode ) ); + store.dispatch( actions.setSEMrushLoginStatus( window.wpseoScriptData.metabox.SEMrushLoginStatus ) ); +}; diff --git a/packages/schema-blocks/src/functions/redux/reducer/index.ts b/packages/schema-blocks/src/functions/redux/reducer/index.ts new file mode 100644 index 0000000000..b842f41955 --- /dev/null +++ b/packages/schema-blocks/src/functions/redux/reducer/index.ts @@ -0,0 +1 @@ +export * from "./schemaBlocks"; diff --git a/packages/schema-blocks/src/functions/redux/reducer/schemaBlocks.ts b/packages/schema-blocks/src/functions/redux/reducer/schemaBlocks.ts new file mode 100644 index 0000000000..ea50c8eb94 --- /dev/null +++ b/packages/schema-blocks/src/functions/redux/reducer/schemaBlocks.ts @@ -0,0 +1,31 @@ +import { SchemaBlocksStoreActions } from "../actions/schemaBlocks"; +import { SchemaBlocksState, SchemaBlocksDefaultState } from "../SchemaBlocksState"; +import { SchemaBlocksAction } from "../schemaBlocksAction"; + +/** + * A reducer for the Schema blocks. + * + * @param {SchemaBlocksState} state The current state of the object. + * @param {SetBlockValidation} action The received action. + * + * @returns {Object} The state. + */ +export default function schemaBlocksReducer( state: SchemaBlocksState = SchemaBlocksDefaultState, action: SchemaBlocksAction ): SchemaBlocksState { + switch ( action.type ) { + case SchemaBlocksStoreActions.RESET_BLOCK_VALIDATIONS: { + return SchemaBlocksDefaultState; + } + case SchemaBlocksStoreActions.ADD_BLOCK_VALIDATION: { + const newState = Object.assign( {}, state ); + const validation = action.validation; + + newState.validations = newState.validations || {}; + newState.validations[ validation.clientId ] = validation; + + return newState; + } + default: { + return state; + } + } +} diff --git a/packages/schema-blocks/src/functions/redux/selectors/index.ts b/packages/schema-blocks/src/functions/redux/selectors/index.ts new file mode 100644 index 0000000000..b842f41955 --- /dev/null +++ b/packages/schema-blocks/src/functions/redux/selectors/index.ts @@ -0,0 +1 @@ +export * from "./schemaBlocks"; diff --git a/packages/schema-blocks/src/functions/redux/selectors/schemaBlocks.ts b/packages/schema-blocks/src/functions/redux/selectors/schemaBlocks.ts new file mode 100644 index 0000000000..8ae3ba99f8 --- /dev/null +++ b/packages/schema-blocks/src/functions/redux/selectors/schemaBlocks.ts @@ -0,0 +1,12 @@ +import { SchemaBlocksState, SchemaBlocksDefaultState } from "../SchemaBlocksState"; + +/** + * The schema validation results. + * + * @param {object} state The current state. + * + * @returns {Record} The schema blocks validation results. + */ +export function getSchemaBlocksValidationResults( state: SchemaBlocksState ): object { + return state.validations || SchemaBlocksDefaultState.validations; +} From 4b367d5bb2c8cf9681cd8f0390ceeeb82fbcde39 Mon Sep 17 00:00:00 2001 From: Joost Boomkamp <3604126+increddibelly@users.noreply.github.com> Date: Tue, 23 Mar 2021 17:58:55 +0100 Subject: [PATCH 2/7] initialize Schema Store --- .../src/functions/redux/SchemaBlocksAction.ts | 9 ++- .../src/functions/redux/SchemaBlocksState.ts | 3 + .../functions/redux/actions/schemaBlocks.ts | 17 ++-- .../src/functions/redux/index.ts | 5 +- .../functions/redux/initializeSchemaStore.ts | 77 +++---------------- .../src/functions/redux/reducer/index.ts | 2 +- .../functions/redux/reducer/schemaBlocks.ts | 5 +- packages/schema-blocks/src/index.ts | 9 ++- 8 files changed, 41 insertions(+), 86 deletions(-) diff --git a/packages/schema-blocks/src/functions/redux/SchemaBlocksAction.ts b/packages/schema-blocks/src/functions/redux/SchemaBlocksAction.ts index 7ab321ac11..9fdaee0c51 100644 --- a/packages/schema-blocks/src/functions/redux/SchemaBlocksAction.ts +++ b/packages/schema-blocks/src/functions/redux/SchemaBlocksAction.ts @@ -1,6 +1,13 @@ import { BlockValidationResult } from "../../core/validation"; -export type SchemaBlocksAction = { +const PREFIX = "WPSEO_"; + +export const SchemaBlocksStoreActions = { + ADD_BLOCK_VALIDATION: `${ PREFIX }ADD_BLOCK_VALIDATION`, + RESET_BLOCK_VALIDATIONS: `${ PREFIX }CLEAR_BLOCK_VALIDATIONS`, +}; + +export type SchemaBlocksStoreAction = { type: string; validation: BlockValidationResult; } diff --git a/packages/schema-blocks/src/functions/redux/SchemaBlocksState.ts b/packages/schema-blocks/src/functions/redux/SchemaBlocksState.ts index 52f508fbd0..5efa6d1bda 100644 --- a/packages/schema-blocks/src/functions/redux/SchemaBlocksState.ts +++ b/packages/schema-blocks/src/functions/redux/SchemaBlocksState.ts @@ -1,5 +1,8 @@ import { BlockValidationResult } from "../../core/validation"; + +export const YOAST_SCHEMA_STORE_NAME = "yoast-seo/schema-blocks"; + export type SchemaBlocksState = { validations: Record; }; diff --git a/packages/schema-blocks/src/functions/redux/actions/schemaBlocks.ts b/packages/schema-blocks/src/functions/redux/actions/schemaBlocks.ts index 6e17af5226..2f239c4555 100644 --- a/packages/schema-blocks/src/functions/redux/actions/schemaBlocks.ts +++ b/packages/schema-blocks/src/functions/redux/actions/schemaBlocks.ts @@ -1,20 +1,14 @@ import { BlockValidationResult } from "../../../core/validation"; - -const PREFIX = "WPSEO_"; - -export const SchemaBlocksStoreActions = { - ADD_BLOCK_VALIDATION: `${ PREFIX }ADD_BLOCK_VALIDATION`, - RESET_BLOCK_VALIDATIONS: `${ PREFIX }CLEAR_BLOCK_VALIDATIONS`, -}; +import { SchemaBlocksStoreAction, SchemaBlocksStoreActions } from "../SchemaBlocksAction"; /** * Updates whether a block is valid. * * @param {blockValidationResult} blockValidationResult The block validation to store. * - * @returns {Object} An action for redux. + * @returns {SchemaBlocksStoreAction} An action for redux. */ -export function addBlockValidation( blockValidationResult: BlockValidationResult ): object { +export function addBlockValidation( blockValidationResult: BlockValidationResult ): SchemaBlocksStoreAction { return { type: SchemaBlocksStoreActions.ADD_BLOCK_VALIDATION, validation: blockValidationResult, @@ -23,10 +17,11 @@ export function addBlockValidation( blockValidationResult: BlockValidationResult /** * Commands the store to reset the block validation store to initial state. - * @returns {object} The command to set the initial state for the block validation store. + * @returns {SchemaBlocksStoreAction} The command to set the initial state for the block validation store. */ -export function resetBlockValidation(): object { +export function resetBlockValidation(): SchemaBlocksStoreAction { return { type: SchemaBlocksStoreActions.RESET_BLOCK_VALIDATIONS, + validation: null, }; } diff --git a/packages/schema-blocks/src/functions/redux/index.ts b/packages/schema-blocks/src/functions/redux/index.ts index b842f41955..0eae4ed6f7 100644 --- a/packages/schema-blocks/src/functions/redux/index.ts +++ b/packages/schema-blocks/src/functions/redux/index.ts @@ -1 +1,4 @@ -export * from "./schemaBlocks"; +export * from "./actions"; +export * from "./reducer"; +export * from "./selectors"; +export * from "./initializeSchemaStore"; diff --git a/packages/schema-blocks/src/functions/redux/initializeSchemaStore.ts b/packages/schema-blocks/src/functions/redux/initializeSchemaStore.ts index fe4e8c6f74..82dab27d09 100644 --- a/packages/schema-blocks/src/functions/redux/initializeSchemaStore.ts +++ b/packages/schema-blocks/src/functions/redux/initializeSchemaStore.ts @@ -1,78 +1,23 @@ import { registerStore, StoreConfig } from "@wordpress/data"; -import { pickBy } from "lodash"; -import { SchemaBlocksDefaultState, SchemaBlocksState } from "./SchemaBlocksState"; +import { SchemaBlocksDefaultState, SchemaBlocksState, YOAST_SCHEMA_STORE_NAME } from "./SchemaBlocksState"; import * as actions from "./actions"; -import * as reducer from "./reducer"; +import { schemaBlocksReducer } from "./reducer"; import * as selectors from "./selectors"; -export const YOAST_SCHEMA_STORE_NAME = "yoast-seo/schema-blocks"; /** * Initializes the Schema Blocks store. - * - * @returns {object} The Schema Blocks store. */ -export default function initEditorStore() { +export function initializeSchemaBlocksStore() { const storeOptions: StoreConfig = { - reducer: reducer, - selectors: { ...getFunctions( "function", selectors ) }, - actions: { ...getFunctions( "function", actions ) }, + reducer: schemaBlocksReducer, + selectors: { + ...selectors, + }, + actions: { + ...actions, + }, initialState: SchemaBlocksDefaultState, }; - const store = registerStore( YOAST_SCHEMA_STORE_NAME, storeOptions ); - - populateStore( store ); - - return store; -} - -function getFunctions( ...items: any[] ): Function[] { - return pickBy( { ...items }, ( item: unknown ) => if ( typeof item === "function" ) ); + registerStore( YOAST_SCHEMA_STORE_NAME, storeOptions ); } - - -/** - * Populates the store. - * - * @param {Object} store The store to populate. - * - * @returns {void} - */ -const populateStore = store => { - // Initialize the cornerstone content. - store.dispatch( actions.loadCornerstoneContent() ); - // Initialize the focus keyphrase. - store.dispatch( actions.loadFocusKeyword() ); - // Hide marker buttons. - store.dispatch( actions.setMarkerStatus( "hidden" ) ); - - store.dispatch( - actions.setSettings( { - socialPreviews: { - sitewideImage: window.wpseoScriptData.metabox.sitewide_social_image, - authorName: window.wpseoScriptData.metabox.author_name, - siteName: window.wpseoScriptData.metabox.site_name, - contentImage: window.wpseoScriptData.metabox.first_content_image, - twitterCardType: window.wpseoScriptData.metabox.twitterCardType, - }, - snippetEditor: { - baseUrl: window.wpseoScriptData.metabox.base_url, - date: window.wpseoScriptData.metabox.metaDescriptionDate, - recommendedReplacementVariables: window.wpseoScriptData.analysis.plugins.replaceVars.recommended_replace_vars, - siteIconUrl: window.wpseoScriptData.metabox.siteIconUrl, - }, - } ), - ); - - // Initialize the Social Preview data depending on which platform should be present - const { facebook: showFacebook, twitter: showTwitter } = window.wpseoScriptData.metabox.showSocial; - if ( showFacebook ) { - store.dispatch( actions.loadFacebookPreviewData() ); - } - if ( showTwitter ) { - store.dispatch( actions.loadTwitterPreviewData() ); - } - - store.dispatch( actions.setSEMrushChangeCountry( window.wpseoScriptData.metabox.countryCode ) ); - store.dispatch( actions.setSEMrushLoginStatus( window.wpseoScriptData.metabox.SEMrushLoginStatus ) ); -}; diff --git a/packages/schema-blocks/src/functions/redux/reducer/index.ts b/packages/schema-blocks/src/functions/redux/reducer/index.ts index b842f41955..23e3adebf4 100644 --- a/packages/schema-blocks/src/functions/redux/reducer/index.ts +++ b/packages/schema-blocks/src/functions/redux/reducer/index.ts @@ -1 +1 @@ -export * from "./schemaBlocks"; +export { schemaBlocksReducer } from "./schemaBlocks"; diff --git a/packages/schema-blocks/src/functions/redux/reducer/schemaBlocks.ts b/packages/schema-blocks/src/functions/redux/reducer/schemaBlocks.ts index ea50c8eb94..6ef8e09109 100644 --- a/packages/schema-blocks/src/functions/redux/reducer/schemaBlocks.ts +++ b/packages/schema-blocks/src/functions/redux/reducer/schemaBlocks.ts @@ -1,6 +1,5 @@ -import { SchemaBlocksStoreActions } from "../actions/schemaBlocks"; import { SchemaBlocksState, SchemaBlocksDefaultState } from "../SchemaBlocksState"; -import { SchemaBlocksAction } from "../schemaBlocksAction"; +import { SchemaBlocksStoreAction, SchemaBlocksStoreActions } from "../SchemaBlocksAction"; /** * A reducer for the Schema blocks. @@ -10,7 +9,7 @@ import { SchemaBlocksAction } from "../schemaBlocksAction"; * * @returns {Object} The state. */ -export default function schemaBlocksReducer( state: SchemaBlocksState = SchemaBlocksDefaultState, action: SchemaBlocksAction ): SchemaBlocksState { +export function schemaBlocksReducer( state: SchemaBlocksState = SchemaBlocksDefaultState, action: SchemaBlocksStoreAction ): SchemaBlocksState { switch ( action.type ) { case SchemaBlocksStoreActions.RESET_BLOCK_VALIDATIONS: { return SchemaBlocksDefaultState; diff --git a/packages/schema-blocks/src/index.ts b/packages/schema-blocks/src/index.ts index a77f597a52..9fbd39e23f 100644 --- a/packages/schema-blocks/src/index.ts +++ b/packages/schema-blocks/src/index.ts @@ -1,10 +1,11 @@ -import "./instructions"; +import { registerBlockType } from "@wordpress/blocks"; import { processSchema, processBlock } from "./functions/process"; import watch from "./functions/gutenberg/watch"; import filter from "./functions/gutenberg/filter"; -import { registerBlockType } from "@wordpress/blocks"; -import { WarningBlock } from "./blocks/warning-block/configuration"; import logger, { LogLevel } from "./functions/logger"; +import { initializeSchemaBlocksStore } from "./functions/redux"; +import { WarningBlock } from "./blocks/warning-block/configuration"; +import "./instructions"; export { LogLevel }; @@ -27,6 +28,8 @@ function removeWhitespace( text: string ): string { export default function initialize( logLevel: LogLevel = LogLevel.ERROR ) { logger.setLogLevel( logLevel ); + initializeSchemaBlocksStore(); + registerBlockType( "yoast/warning-block", WarningBlock ); jQuery( 'script[type="text/schema-template"]' ).each( function() { From f8bae10ab086dd0aa9381f3d4f51768e7f89a60a Mon Sep 17 00:00:00 2001 From: Joost Boomkamp <3604126+increddibelly@users.noreply.github.com> Date: Thu, 25 Mar 2021 11:21:22 +0100 Subject: [PATCH 3/7] apply CR comments --- .../gutenberg/storeBlockValidation.ts | 3 +- .../presenters/SidebarWarningPresenter.ts | 5 +- .../src/functions/redux/SchemaBlocksAction.ts | 13 ----- .../src/functions/redux/SchemaBlocksState.ts | 3 -- .../src/functions/redux/actions/index.ts | 49 ++++++++++++++++++- .../functions/redux/actions/schemaBlocks.ts | 16 ++---- .../src/functions/redux/index.ts | 2 + .../functions/redux/initializeSchemaStore.ts | 13 ++--- .../functions/redux/reducer/schemaBlocks.ts | 14 +++--- packages/schema-blocks/src/index.ts | 9 +++- 10 files changed, 82 insertions(+), 45 deletions(-) delete mode 100644 packages/schema-blocks/src/functions/redux/SchemaBlocksAction.ts diff --git a/packages/schema-blocks/src/functions/gutenberg/storeBlockValidation.ts b/packages/schema-blocks/src/functions/gutenberg/storeBlockValidation.ts index b840352069..46f4aac413 100644 --- a/packages/schema-blocks/src/functions/gutenberg/storeBlockValidation.ts +++ b/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,7 +14,7 @@ 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 => { diff --git a/packages/schema-blocks/src/functions/presenters/SidebarWarningPresenter.ts b/packages/schema-blocks/src/functions/presenters/SidebarWarningPresenter.ts index c8f9a615b8..05d14357ac 100644 --- a/packages/schema-blocks/src/functions/presenters/SidebarWarningPresenter.ts +++ b/packages/schema-blocks/src/functions/presenters/SidebarWarningPresenter.ts @@ -1,9 +1,10 @@ -import { getBlockType } from "../BlockHelper"; import { select } from "@wordpress/data"; import { __ } from "@wordpress/i18n"; import { get } from "lodash"; import { BlockValidationResult } from "../../core/validation"; import { BlockValidation } from "../../core/validation"; +import { getBlockType } from "../BlockHelper"; +import { YOAST_SCHEMA_BLOCKS_STORE_NAME } from "../redux"; const analysisMessageTemplates: Record = { [ BlockValidation.MissingBlock ]: "The '{child}' block is {status} but missing.", @@ -32,7 +33,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; } diff --git a/packages/schema-blocks/src/functions/redux/SchemaBlocksAction.ts b/packages/schema-blocks/src/functions/redux/SchemaBlocksAction.ts deleted file mode 100644 index 9fdaee0c51..0000000000 --- a/packages/schema-blocks/src/functions/redux/SchemaBlocksAction.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { BlockValidationResult } from "../../core/validation"; - -const PREFIX = "WPSEO_"; - -export const SchemaBlocksStoreActions = { - ADD_BLOCK_VALIDATION: `${ PREFIX }ADD_BLOCK_VALIDATION`, - RESET_BLOCK_VALIDATIONS: `${ PREFIX }CLEAR_BLOCK_VALIDATIONS`, -}; - -export type SchemaBlocksStoreAction = { - type: string; - validation: BlockValidationResult; -} diff --git a/packages/schema-blocks/src/functions/redux/SchemaBlocksState.ts b/packages/schema-blocks/src/functions/redux/SchemaBlocksState.ts index 5efa6d1bda..52f508fbd0 100644 --- a/packages/schema-blocks/src/functions/redux/SchemaBlocksState.ts +++ b/packages/schema-blocks/src/functions/redux/SchemaBlocksState.ts @@ -1,8 +1,5 @@ import { BlockValidationResult } from "../../core/validation"; - -export const YOAST_SCHEMA_STORE_NAME = "yoast-seo/schema-blocks"; - export type SchemaBlocksState = { validations: Record; }; diff --git a/packages/schema-blocks/src/functions/redux/actions/index.ts b/packages/schema-blocks/src/functions/redux/actions/index.ts index b842f41955..73027c33a4 100644 --- a/packages/schema-blocks/src/functions/redux/actions/index.ts +++ b/packages/schema-blocks/src/functions/redux/actions/index.ts @@ -1 +1,48 @@ -export * from "./schemaBlocks"; +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; +} + +/** + * Redux store command to add Block validation result to the store. + */ +export class AddBlockValidationCommand implements SchemaBlocksStoreCommand { + type: string = SchemaBlocksStoreActions.ADD_BLOCK_VALIDATION; + validation?: BlockValidationResult; + + /** + * Creates an AddBlockValidation command. + * @param validation The BlockValidationResult to add. + */ + constructor( validation: BlockValidationResult ) { + this.validation = validation; + } +} + +/** + * Redux store command to clear current validation data in the store. + */ +export class ResetBlockValidationCommand implements SchemaBlocksStoreCommand { + type: string = SchemaBlocksStoreActions.RESET_BLOCK_VALIDATIONS; + validation?: BlockValidationResult = null; + + /** + * Creates an ResetBlockValidation command. + */ + constructor() { + this.validation = null; + } +} + +export { schemaBlocksActions }; diff --git a/packages/schema-blocks/src/functions/redux/actions/schemaBlocks.ts b/packages/schema-blocks/src/functions/redux/actions/schemaBlocks.ts index 2f239c4555..ccb1c331d9 100644 --- a/packages/schema-blocks/src/functions/redux/actions/schemaBlocks.ts +++ b/packages/schema-blocks/src/functions/redux/actions/schemaBlocks.ts @@ -1,5 +1,5 @@ import { BlockValidationResult } from "../../../core/validation"; -import { SchemaBlocksStoreAction, SchemaBlocksStoreActions } from "../SchemaBlocksAction"; +import { SchemaBlocksStoreCommand, AddBlockValidationCommand, ResetBlockValidationCommand } from "./"; /** * Updates whether a block is valid. @@ -8,20 +8,14 @@ import { SchemaBlocksStoreAction, SchemaBlocksStoreActions } from "../SchemaBloc * * @returns {SchemaBlocksStoreAction} An action for redux. */ -export function addBlockValidation( blockValidationResult: BlockValidationResult ): SchemaBlocksStoreAction { - return { - type: SchemaBlocksStoreActions.ADD_BLOCK_VALIDATION, - validation: blockValidationResult, - }; +export function addBlockValidation( blockValidationResult: BlockValidationResult ): SchemaBlocksStoreCommand { + return new 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(): SchemaBlocksStoreAction { - return { - type: SchemaBlocksStoreActions.RESET_BLOCK_VALIDATIONS, - validation: null, - }; +export function resetBlockValidation(): SchemaBlocksStoreCommand { + return new ResetBlockValidationCommand(); } diff --git a/packages/schema-blocks/src/functions/redux/index.ts b/packages/schema-blocks/src/functions/redux/index.ts index 0eae4ed6f7..58e3619d9d 100644 --- a/packages/schema-blocks/src/functions/redux/index.ts +++ b/packages/schema-blocks/src/functions/redux/index.ts @@ -2,3 +2,5 @@ export * from "./actions"; export * from "./reducer"; export * from "./selectors"; export * from "./initializeSchemaStore"; + +export const YOAST_SCHEMA_BLOCKS_STORE_NAME = "yoast-seo/schema-blocks"; diff --git a/packages/schema-blocks/src/functions/redux/initializeSchemaStore.ts b/packages/schema-blocks/src/functions/redux/initializeSchemaStore.ts index 82dab27d09..8cb47a66c7 100644 --- a/packages/schema-blocks/src/functions/redux/initializeSchemaStore.ts +++ b/packages/schema-blocks/src/functions/redux/initializeSchemaStore.ts @@ -1,8 +1,9 @@ import { registerStore, StoreConfig } from "@wordpress/data"; -import { SchemaBlocksDefaultState, SchemaBlocksState, YOAST_SCHEMA_STORE_NAME } from "./SchemaBlocksState"; -import * as actions from "./actions"; +import { SchemaBlocksDefaultState, SchemaBlocksState } from "./SchemaBlocksState"; +import { schemaBlocksActions } from "./actions"; import { schemaBlocksReducer } from "./reducer"; -import * as selectors from "./selectors"; +import * as schemaBlocksSelectors from "./selectors"; +import { YOAST_SCHEMA_BLOCKS_STORE_NAME } from "."; /** * Initializes the Schema Blocks store. @@ -11,13 +12,13 @@ export function initializeSchemaBlocksStore() { const storeOptions: StoreConfig = { reducer: schemaBlocksReducer, selectors: { - ...selectors, + ...schemaBlocksSelectors, }, actions: { - ...actions, + ...schemaBlocksActions, }, initialState: SchemaBlocksDefaultState, }; - registerStore( YOAST_SCHEMA_STORE_NAME, storeOptions ); + registerStore( YOAST_SCHEMA_BLOCKS_STORE_NAME, storeOptions ); } diff --git a/packages/schema-blocks/src/functions/redux/reducer/schemaBlocks.ts b/packages/schema-blocks/src/functions/redux/reducer/schemaBlocks.ts index 6ef8e09109..61a5d910a6 100644 --- a/packages/schema-blocks/src/functions/redux/reducer/schemaBlocks.ts +++ b/packages/schema-blocks/src/functions/redux/reducer/schemaBlocks.ts @@ -1,22 +1,22 @@ +import { SchemaBlocksStoreCommand, SchemaBlocksStoreActions } from "../actions"; import { SchemaBlocksState, SchemaBlocksDefaultState } from "../SchemaBlocksState"; -import { SchemaBlocksStoreAction, SchemaBlocksStoreActions } from "../SchemaBlocksAction"; /** * A reducer for the Schema blocks. * - * @param {SchemaBlocksState} state The current state of the object. - * @param {SetBlockValidation} action The received action. + * @param {SchemaBlocksState} state The current state of the object. + * @param {SetBlockValidation} command The received command. * - * @returns {Object} The state. + * @returns {SchemaBlocksState} The state. */ -export function schemaBlocksReducer( state: SchemaBlocksState = SchemaBlocksDefaultState, action: SchemaBlocksStoreAction ): SchemaBlocksState { - switch ( action.type ) { +export function schemaBlocksReducer( state: SchemaBlocksState = SchemaBlocksDefaultState, command: SchemaBlocksStoreCommand ): SchemaBlocksState { + switch ( command.type ) { case SchemaBlocksStoreActions.RESET_BLOCK_VALIDATIONS: { return SchemaBlocksDefaultState; } case SchemaBlocksStoreActions.ADD_BLOCK_VALIDATION: { const newState = Object.assign( {}, state ); - const validation = action.validation; + const validation = command.validation; newState.validations = newState.validations || {}; newState.validations[ validation.clientId ] = validation; diff --git a/packages/schema-blocks/src/index.ts b/packages/schema-blocks/src/index.ts index 9fbd39e23f..8dbe687c1d 100644 --- a/packages/schema-blocks/src/index.ts +++ b/packages/schema-blocks/src/index.ts @@ -30,7 +30,7 @@ export default function initialize( logLevel: LogLevel = LogLevel.ERROR ) { initializeSchemaBlocksStore(); - registerBlockType( "yoast/warning-block", WarningBlock ); + registerInternalBlocks(); jQuery( 'script[type="text/schema-template"]' ).each( function() { try { @@ -58,3 +58,10 @@ export default 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 ); +} From 1eb1c4242c02a26ac967a4f5cbd68a9cd399981c Mon Sep 17 00:00:00 2001 From: Joost Boomkamp <3604126+increddibelly@users.noreply.github.com> Date: Mon, 29 Mar 2021 15:31:09 +0200 Subject: [PATCH 4/7] make redux commands into functions --- .../src/core/blocks/BlockDefinition.tsx | 2 +- .../gutenberg/storeBlockValidation.ts | 2 + .../src/functions/gutenberg/watch.ts | 4 -- .../src/functions/redux/SchemaBlocksState.ts | 4 +- .../src/functions/redux/actions/index.ts | 39 ++++++++----------- .../functions/redux/actions/schemaBlocks.ts | 4 +- 6 files changed, 23 insertions(+), 32 deletions(-) diff --git a/packages/schema-blocks/src/core/blocks/BlockDefinition.tsx b/packages/schema-blocks/src/core/blocks/BlockDefinition.tsx index a6fca8ca1a..faf4217866 100644 --- a/packages/schema-blocks/src/core/blocks/BlockDefinition.tsx +++ b/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 ); diff --git a/packages/schema-blocks/src/functions/gutenberg/storeBlockValidation.ts b/packages/schema-blocks/src/functions/gutenberg/storeBlockValidation.ts index 46f4aac413..5619f1150e 100644 --- a/packages/schema-blocks/src/functions/gutenberg/storeBlockValidation.ts +++ b/packages/schema-blocks/src/functions/gutenberg/storeBlockValidation.ts @@ -21,5 +21,7 @@ export default function storeBlockValidation( validations: BlockValidationResult logger.debug( "storing validation: ", blockValidation ); store.addBlockValidation( blockValidation ); } ); + } else { + logger.debug( "No Store!" ); } } diff --git a/packages/schema-blocks/src/functions/gutenberg/watch.ts b/packages/schema-blocks/src/functions/gutenberg/watch.ts index bcee7635ef..1391a22831 100644 --- a/packages/schema-blocks/src/functions/gutenberg/watch.ts +++ b/packages/schema-blocks/src/functions/gutenberg/watch.ts @@ -121,10 +121,6 @@ export function validateBlocks( blocks: BlockInstance[] ): BlockValidationResult export default function watch() { subscribe( debounce( () => { - if ( updatingSchema || select( "core/block-editor" ).isTyping() ) { - return; - } - const rootBlocks: BlockInstance[] = select( "core/block-editor" ).getBlocks(); if ( rootBlocks === previousRootBlocks ) { return; diff --git a/packages/schema-blocks/src/functions/redux/SchemaBlocksState.ts b/packages/schema-blocks/src/functions/redux/SchemaBlocksState.ts index 52f508fbd0..6627f99e07 100644 --- a/packages/schema-blocks/src/functions/redux/SchemaBlocksState.ts +++ b/packages/schema-blocks/src/functions/redux/SchemaBlocksState.ts @@ -1,8 +1,8 @@ import { BlockValidationResult } from "../../core/validation"; -export type SchemaBlocksState = { +export interface SchemaBlocksState { validations: Record; -}; +} export const SchemaBlocksDefaultState: SchemaBlocksState = { validations: {}, diff --git a/packages/schema-blocks/src/functions/redux/actions/index.ts b/packages/schema-blocks/src/functions/redux/actions/index.ts index 73027c33a4..2de1ad2555 100644 --- a/packages/schema-blocks/src/functions/redux/actions/index.ts +++ b/packages/schema-blocks/src/functions/redux/actions/index.ts @@ -15,34 +15,27 @@ export interface SchemaBlocksStoreCommand { } /** - * Redux store command to add Block validation result to the store. + * Configures a redux command to store a validation result. + * + * @param validation The validation to store. + * @returns The configured AddBlockValidation command. */ -export class AddBlockValidationCommand implements SchemaBlocksStoreCommand { - type: string = SchemaBlocksStoreActions.ADD_BLOCK_VALIDATION; - validation?: BlockValidationResult; - - /** - * Creates an AddBlockValidation command. - * @param validation The BlockValidationResult to add. - */ - constructor( validation: BlockValidationResult ) { - this.validation = validation; - } +export function AddBlockValidationCommand( validation: BlockValidationResult ): SchemaBlocksStoreCommand { + return { + type: SchemaBlocksStoreActions.ADD_BLOCK_VALIDATION, + validation: validation, + }; } /** - * Redux store command to clear current validation data in the store. + * Configures a redux command to reset the current validation results. + * + * @returns Thge configured ResetBlockValidation command */ -export class ResetBlockValidationCommand implements SchemaBlocksStoreCommand { - type: string = SchemaBlocksStoreActions.RESET_BLOCK_VALIDATIONS; - validation?: BlockValidationResult = null; - - /** - * Creates an ResetBlockValidation command. - */ - constructor() { - this.validation = null; - } +export function ResetBlockValidationCommand(): SchemaBlocksStoreCommand { + return { + type: SchemaBlocksStoreActions.RESET_BLOCK_VALIDATIONS, + }; } export { schemaBlocksActions }; diff --git a/packages/schema-blocks/src/functions/redux/actions/schemaBlocks.ts b/packages/schema-blocks/src/functions/redux/actions/schemaBlocks.ts index ccb1c331d9..bb99c57b9f 100644 --- a/packages/schema-blocks/src/functions/redux/actions/schemaBlocks.ts +++ b/packages/schema-blocks/src/functions/redux/actions/schemaBlocks.ts @@ -9,7 +9,7 @@ import { SchemaBlocksStoreCommand, AddBlockValidationCommand, ResetBlockValidati * @returns {SchemaBlocksStoreAction} An action for redux. */ export function addBlockValidation( blockValidationResult: BlockValidationResult ): SchemaBlocksStoreCommand { - return new AddBlockValidationCommand( blockValidationResult ); + return AddBlockValidationCommand( blockValidationResult ); } /** @@ -17,5 +17,5 @@ export function addBlockValidation( blockValidationResult: BlockValidationResult * @returns {SchemaBlocksStoreAction} The command to set the initial state for the block validation store. */ export function resetBlockValidation(): SchemaBlocksStoreCommand { - return new ResetBlockValidationCommand(); + return ResetBlockValidationCommand(); } From 7e69a3b1e579c3d2535f4dcc0e9ed663a82c3296 Mon Sep 17 00:00:00 2001 From: Joost Boomkamp <3604126+increddibelly@users.noreply.github.com> Date: Mon, 29 Mar 2021 15:55:13 +0200 Subject: [PATCH 5/7] fix a merge conflict --- .../src/functions/presenters/SidebarWarningPresenter.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/schema-blocks/src/functions/presenters/SidebarWarningPresenter.ts b/packages/schema-blocks/src/functions/presenters/SidebarWarningPresenter.ts index f9ced89361..0c9e54cfe6 100644 --- a/packages/schema-blocks/src/functions/presenters/SidebarWarningPresenter.ts +++ b/packages/schema-blocks/src/functions/presenters/SidebarWarningPresenter.ts @@ -4,6 +4,7 @@ import { get } from "lodash"; import { BlockValidationResult } from "../../core/validation"; import { BlockValidation } from "../../core/validation"; import { BlockPresence } from "../../core/validation/BlockValidationResult"; +import { getBlockType } from "../BlockHelper"; import { YOAST_SCHEMA_BLOCKS_STORE_NAME } from "../redux"; const analysisMessageTemplates: Record = { From ac006f7b3d1479ffa99518823c05c9919d3bff93 Mon Sep 17 00:00:00 2001 From: Joost Boomkamp <3604126+increddibelly@users.noreply.github.com> Date: Tue, 30 Mar 2021 08:16:22 +0200 Subject: [PATCH 6/7] partially redo removed code --- packages/schema-blocks/src/functions/gutenberg/watch.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/schema-blocks/src/functions/gutenberg/watch.ts b/packages/schema-blocks/src/functions/gutenberg/watch.ts index a303e6fd92..fbad85cae4 100644 --- a/packages/schema-blocks/src/functions/gutenberg/watch.ts +++ b/packages/schema-blocks/src/functions/gutenberg/watch.ts @@ -122,6 +122,10 @@ export function validateBlocks( blocks: BlockInstance[] ): BlockValidationResult export default function watch() { subscribe( debounce( () => { + if ( updatingSchema ) { + return; + } + const rootBlocks: BlockInstance[] = select( "core/block-editor" ).getBlocks(); if ( rootBlocks === previousRootBlocks ) { return; From 114403ed7ab4b126112c6f03451bc236bab55e0b Mon Sep 17 00:00:00 2001 From: Joost Boomkamp <3604126+increddibelly@users.noreply.github.com> Date: Tue, 30 Mar 2021 15:47:24 +0200 Subject: [PATCH 7/7] removed unused import and whitespace. --- .../src/functions/presenters/SidebarWarningPresenter.ts | 2 -- packages/schema-blocks/src/index.ts | 1 - 2 files changed, 3 deletions(-) diff --git a/packages/schema-blocks/src/functions/presenters/SidebarWarningPresenter.ts b/packages/schema-blocks/src/functions/presenters/SidebarWarningPresenter.ts index 78984dea1a..107539567c 100644 --- a/packages/schema-blocks/src/functions/presenters/SidebarWarningPresenter.ts +++ b/packages/schema-blocks/src/functions/presenters/SidebarWarningPresenter.ts @@ -1,8 +1,6 @@ import { select } from "@wordpress/data"; import { __, sprintf } from "@wordpress/i18n"; -import { getBlockType } from "../BlockHelper"; import { YOAST_SCHEMA_BLOCKS_STORE_NAME } from "../redux"; - import { BlockValidation, BlockValidationResult } from "../../core/validation"; import { getHumanReadableBlockName } from "../BlockHelper"; import { BlockPresence } from "../../core/validation/BlockValidationResult"; diff --git a/packages/schema-blocks/src/index.ts b/packages/schema-blocks/src/index.ts index bde6c386eb..d055838ca6 100644 --- a/packages/schema-blocks/src/index.ts +++ b/packages/schema-blocks/src/index.ts @@ -4,5 +4,4 @@ import { RenderEditProps, RenderSaveProps } from "./core/blocks/BlockDefinition" import { LogLevel } from "./functions/logger"; export { BlockInstruction, RenderSaveProps, RenderEditProps, LogLevel }; - export default initialize;