add required component

components/index.js

@@ -25,3 +25,4 @@ export { PostPrimaryTerm } from './post-primary-term';
 export { PostPrimaryCategory } from './post-primary-category';
 export { RichTextCharacterLimit, getCharacterCount } from './rich-text-character-limit';
 export { CircularProgressBar, Counter } from './counter';
+export { Required } from './required';

components/required/index.js

@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+import { v4 as uuidv4 } from 'uuid';
+import { store as editorStore } from '@wordpress/editor';
+import { store as requiredFieldsStore } from './store';
+
+const lockKey = 'tenup-required-fields-lock-post'
+
+export const Required = ({ value, children }) => {
+	const { current: componentId } = useRef( uuidv4() );
+	const { lockPostSaving, unlockPostSaving } = useDispatch( editorStore );
+	const { setIsFilled } = useDispatch( requiredFieldsStore );
+
+	useEffect( () => {
+		setIsFilled( componentId, !! value );
+	}, [ value ] );
+
+	const { shouldLock } = useSelect( ( select ) => {
+		return {
+			shouldLock: select( requiredFieldsStore ).shouldLock(),
+		}
+	} );
+
+	useEffect( () => {
+		if ( shouldLock ) {
+			lockPostSaving( lockKey );
+		} else {
+			unlockPostSaving( lockKey );
+		}
+
+		return () => unlockPostSaving( lockKey );
+	}, [ shouldLock ] );
+
+	return children;
+};
+
+Required.defaultProps = {
+	value: '',
+};
+
+Required.propTypes = {
+	value: PropTypes.string || PropTypes.bool,
+	children: PropTypes.node.isRequired,
+};

components/required/readme.md

@@ -0,0 +1 @@
+# Required

components/required/store.js

@@ -0,0 +1,38 @@
+import { createReduxStore, register } from '@wordpress/data';
+
+const DEFAULT_STATE = {
+	fields: {},
+};
+
+export const store = createReduxStore( 'required-fields-store', {
+	reducer( state = DEFAULT_STATE, action ) {
+		switch ( action.type ) {
+			case 'SET_FIELD_REQUIRED_STATUS':
+				return {
+					...state,
+					fields: {
+						...state.fields,
+						[ action.componentId ]: action.status
+					}
+				};
+		}
+
+		return state;
+	},
+	actions: {
+		setIsFilled( componentId, status ) {
+			return {
+				type: 'SET_FIELD_REQUIRED_STATUS',
+				componentId,
+				status,
+			};
+		},
+	},
+	selectors: {
+		shouldLock( state ) {
+			return Object.keys( state.fields ).filter( field => ! state.fields[ field ] ).length > 0;
+		}
+	},
+} );
+
+register( store );

example/src/blocks/required-component-example/index.js

@@ -0,0 +1,55 @@
+import { registerBlockType } from '@wordpress/blocks';
+import { useBlockProps } from '@wordpress/block-editor';
+import { TextControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+import { Required } from '@10up/block-components';
+
+const NAMESPACE = 'example';
+
+registerBlockType( `${ NAMESPACE }/required-component-example`, {
+	apiVersion: 2,
+	title: __( 'Required Component Example', NAMESPACE ),
+	icon: 'smiley',
+	category: 'common',
+	example: {},
+	supports: {
+		html: false
+	},
+	attributes: {
+		fname: {
+			type: 'string',
+			default: '',
+		},
+		lname: {
+			type: 'string',
+			default: ''
+		}
+	},
+	transforms: {},
+	variations: [],
+	edit: ( { attributes, setAttributes } ) => {
+		const blockProps = useBlockProps();
+		const { fname, lname } = attributes;
+
+		return (
+			<div {...blockProps}>
+				<Required value={ fname }>
+					<TextControl
+						label="First name"
+						value={ fname }
+						onChange={ ( val ) => setAttributes( { fname: val } ) }
+					/>
+				</Required>
+				<Required value={ lname }>
+					<TextControl
+						label="Last name"
+						value={ lname }
+						onChange={ ( val ) => setAttributes( { lname: val } ) }
+					/>
+				</Required>
+			</div>
+		)
+	},
+	save: () => null
+} );

example/src/index.js

@@ -11,3 +11,4 @@ import './blocks/post-featured-image';
 import './blocks/content-item';
 import './blocks/hero';
 import './blocks/post-meta';
+import './blocks/required-component-example';