Block Editor Form Validation

ui/js/dfv/pods-dfv.min.asset.json

@@ -1 +1 @@
-{"dependencies":["lodash","moment","react","react-dom","react-jsx-runtime","regenerator-runtime","wp-api-fetch","wp-autop","wp-components","wp-compose","wp-data","wp-element","wp-hooks","wp-i18n","wp-keycodes","wp-plugins","wp-primitives","wp-url"],"version":"82c8aaf9e4ae1481502c"}
+{"dependencies":["lodash","moment","react","react-dom","react-jsx-runtime","regenerator-runtime","wp-api-fetch","wp-autop","wp-components","wp-compose","wp-data","wp-element","wp-hooks","wp-i18n","wp-keycodes","wp-plugins","wp-primitives","wp-url"],"version":"2567bc677b5a49687c57"}

ui/js/dfv/src/components/field-wrapper/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { isEqual, uniq } from 'lodash';
 import PropTypes from 'prop-types';
 
@@ -36,6 +36,7 @@ import { FIELD_PROP_TYPE_SHAPE } from 'dfv/src/config/prop-types';
 
 import './field-wrapper.scss';
 import RepeatableFieldList from './repeatable-field-list';
+import useBlockEditor from '../../hooks/useBlockEditor';
 
 export const FieldWrapper = ( props ) => {
 	const {
@@ -192,6 +193,21 @@ export const FieldWrapper = ( props ) => {
 		value
 	);
 
+	// Handle Block Editor save lock.
+	const blockEditor = useBlockEditor();
+	useEffect( () => {
+		if ( ! meetsConditionalLogic || ! validationMessages.length ) {
+			blockEditor.unlockPostSaving( `pods-field-${ name }` );
+		} else {
+			blockEditor.lockPostSaving( `pods-field-${ name }`, validationMessages, () => setHasBlurred( true ) );
+		}
+
+		// Unlock on unmount.
+		return () => {
+			blockEditor.unlockPostSaving( `pods-field-${ name }` );
+		};
+	}, [ validationMessages ] );
+
 	// Don't render a field that hasn't had its dependencies met.
 	if ( ! meetsConditionalLogic ) {
 		return <span ref={ fieldRef } />;
@@ -225,7 +241,7 @@ export const FieldWrapper = ( props ) => {
 								allPodValues={ passAllPodValues ? allPodValues : undefined }
 								allPodFieldsMap={ passAllPodFieldsMap ? allPodFieldsMap : undefined }
 								setOptionValue={ setOptionValue }
-								isValid={ !! validationMessages.length }
+								isValid={ ! validationMessages.length }
 								addValidationRules={ addValidationRules }
 								setHasBlurred={ () => setHasBlurred( true ) }
 								fieldConfig={ field }
@@ -259,7 +275,7 @@ export const FieldWrapper = ( props ) => {
 							allPodValues={ allPodValues }
 							allPodFieldsMap={ allPodFieldsMap }
 							setValue={ setValue }
-							isValid={ !! validationMessages.length }
+							isValid={ ! validationMessages.length }
 							addValidationRules={ addValidationRules }
 							setHasBlurred={ () => setHasBlurred( true ) }
 							fieldConfig={ processedFieldConfig }

ui/js/dfv/src/core/app.js

@@ -14,13 +14,17 @@ import ConnectedFieldWrapper from 'dfv/src/components/connected-field-wrapper';
  * Pods config
  */
 import { FIELD_PROP_TYPE_SHAPE } from 'dfv/src/config/prop-types';
+import useBlockEditor from '../hooks/useBlockEditor';
 
 const App = ( {
 	storeKey,
 } ) => {
 	const fieldsData = PodsDFVAPI._fieldDataByStoreKeyPrefix[ storeKey ];
 	const allPodFieldsMap = new Map( fieldsData.map( ( field ) => [ field.name, field ] ) );
 
+	// Initialize Pods Block Editor overrides if available.
+	useBlockEditor();
+
 	const fieldComponents = fieldsData.map( ( fieldData = {} ) => {
 		const {
 			directRender = false,

ui/js/dfv/src/hooks/useBlockEditor.js

@@ -0,0 +1,77 @@
+
+const useBlockEditor = () => {
+	const editorSelect = wp.data?.select( 'core/editor' );
+	const editorDispatch = wp.data?.dispatch( 'core/editor' );
+	const notices = wp.data?.dispatch( 'core/notices' );
+
+	// @todo Use hook instead of savePost override once stable.
+	if ( ! window.PodsBlockEditor && editorDispatch && editorDispatch.hasOwnProperty( 'savePost' ) ) {
+		// First init.
+		window.PodsBlockEditor = {
+			// Store original.
+			savePost: editorDispatch.savePost,
+			messages: {},
+			callbacks: {},
+		};
+
+		// Override the current editor savePost function.
+		editorDispatch.savePost = async ( options ) => {
+			options = options || {};
+
+			const pbe = window.PodsBlockEditor;
+
+			if ( ! Object.values( pbe.messages ).length ) {
+				// eslint-disable-next-line no-undef
+				return pbe.savePost.apply( this, arguments );
+			}
+
+			return new Promise( function( resolve, reject ) {
+				// Bail early if is autosave or preview.
+				if ( options.isAutosave || options.isPreview ) {
+					return resolve( 'Validation ignored (autosave).' );
+				}
+				for ( const fieldName in pbe.messages ) {
+					if ( pbe.messages.hasOwnProperty( fieldName ) ) {
+						pbe.messages[ fieldName ].forEach( function( message ) {
+							notices.createErrorNotice( 'Pods: ' + message, { id: fieldName, isDismissible: true } );
+						} );
+					}
+					editorDispatch?.lockPostSaving( fieldName );
+				}
+				for ( const fieldCallback in pbe.callbacks ) {
+					if ( pbe.callbacks.hasOwnProperty( fieldCallback ) && 'function' === typeof pbe.callbacks[ fieldCallback ] ) {
+						pbe.callbacks[ fieldCallback ]();
+					}
+				}
+				return reject( 'Pods validation failed' );
+			} );
+		};
+	}
+
+	return {
+		data: wp.data,
+		select: editorSelect,
+		dispatch: editorDispatch,
+		notices,
+		lockPostSaving: ( name, messages, callback ) => {
+			// @todo Use hook instead of savePost override once stable.
+			//wp.hooks.addFilter( 'editor.__unstablePreSavePost', 'editor', filter );
+
+			const pbe = window.PodsBlockEditor;
+			if ( messages.length ) {
+				pbe.messages[ name ] = messages;
+				pbe.callbacks[ name ] = callback;
+			}
+		},
+		unlockPostSaving: ( name ) => {
+			// @todo Use hook instead of savePost override once stable.
+			//wp.hooks.removeFilter( 'editor.__unstablePreSavePost', 'editor', filter );
+
+			delete window.PodsBlockEditor.messages[ name ];
+			delete window.PodsBlockEditor.callbacks[ name ];
+			editorDispatch?.unlockPostSaving( name );
+		},
+	};
+};
+
+export default useBlockEditor;