Create a new Required component

[fabiankaegy]

It would be great to have a simple react component mark any component as required. It should work similar to the <Optional> component we already have in that you pass it a value that needs to exist in order for the condition to be met.

If the condition is not met, but the block is in the document, the editor should be locked from saving anything using the core APIs.

const { lockPostSaving, unlockPostSaving } = useDispatch( 'core/editor' );

// we can then lock / unlock the editor using these functions here
lockPostSaving( 'title-empty-lock' );
unlockPostSaving( 'title-empty-lock' );

Removing the block should also unlock the editor.

Additionally, it would be great to show the reason why the editor is locked in a notice when the user tries to save the post & also something in the PrePublishCheck to show all the required fields that are empty would be great.

Tasks

Beta Give feedback

1. Lock the editor when a block containing at least one Required component is rendered
2. Unlock the editor when all Required components in the entire editor have their conditional met (Each item will handle it's own locked state)
3. Unlock the editor when the block containing the required field gets removed.

I think we should be able to use the clean up function of a useEffect hook to handle the unlocking on removal for us.

useEffect( () => {

    if (!condition) {
        // lock the editor
    } else {
        // unlock the editor
    }

    return () => {
        // unlock the editor
    }

}, [condition] )

[Sidsector9]

@fabiankaegy I'll pick this up