Block Editor Form Validation

ui/js/blocks/pods-blocks-api.min.asset.json

@@ -1 +1 @@
-{"dependencies":["lodash","react","react-dom","wp-api-fetch","wp-autop","wp-block-editor","wp-blocks","wp-components","wp-compose","wp-date","wp-element","wp-i18n","wp-keycodes","wp-server-side-render","wp-url"],"version":"559be62f189fbb2870a7"}
+{"dependencies":["lodash","react","react-dom","wp-api-fetch","wp-autop","wp-block-editor","wp-blocks","wp-components","wp-compose","wp-date","wp-element","wp-i18n","wp-keycodes","wp-server-side-render","wp-url"],"version":"455167998375a626b9ff"}

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":"073a6a8b184586b2e522"}
+{"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":"e7b4f23bda29677f21a5"}

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, meetsConditionalLogic ] );
+
 	// 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,92 @@
+/**
+ * WordPress dependencies
+ */
+import {__, sprintf} from '@wordpress/i18n';
+
+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) {
+				notices.removeNotice('pods-validation');
+
+				// 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).');
+				}
+
+				let validationFieldErrorList = [];
+				for (const fieldName in pbe.messages) {
+					editorDispatch?.lockPostSaving(fieldName);
+
+					let fieldRealName = fieldName.replace('pods-field-', '');
+					let fieldData = window.PodsDFVAPI.getField(fieldRealName);
+
+					validationFieldErrorList.push(fieldData?.fieldConfig?.label ?? realFieldName);
+				}
+
+				notices.createErrorNotice(
+					sprintf(__('Please complete these fields before saving: %s', 'pods'), validationFieldErrorList.join(', ')),
+					{id: 'pods-validation', isDismissible: true},
+				);
+
+				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 );
+
+			if (messages.length) {
+				window.PodsBlockEditor.messages[name] = messages;
+				window.PodsBlockEditor.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;