Fix: Drag & drop allows to move blocks to not allowed destinations

[jorgefilipecosta]

Fixes: #13099
Part of a general polishing to get #6993.

Currently via drag & drop unless there is a template lock we can always move blocks.
This allows a block to be moved inside a parent even if the parent does not support that block. This also allows a child block to be moved outside of the parent.

This PR makes sure a block can only be moved to a different parent if it is possible to insert blocks of that type inside it.

Child Blocks Test:
https://gist.github.com/noisysocks/9b9503bd6489ffa51088d35c7a2a8ba0

Test block (transforms): gist.github.com/jorgefilipecosta/b958239761a24664685d5efc7ab48fa6
Contains a block that only allows nesting of quotes and lists.

How has this been tested?

I registered the test blocks (pasted the code in the browser console).
I inserted Product block (parent) with a "Buy Button" inside. Then I verified we could not move with drag&drop "Buy Button" outside Product.
I used the "Test transforms" block and tried to move a block e.g.: button, inside the test block, checked it was not possible to do that.

[youknowriad]

While this is good for now, I wonder if we should bake a validation mechanism inside DropZone. That way we can change the cursor to not-allowed when we're hovering an area where we can't drop.

[hacknug]

Any chance we can get this reviewed (and hopefully merged) any time soon?

[gziolo]

Regardless to what you decide in response to DropZone component, I wanted to leave a note about a way how you can avoid passing down selectors as props. A while back we have added 3rd param registry to withDispatch method which allows you to get access to the same selectors without exposing them as props. There is an example added in the docs: https://github.com/WordPress/gutenberg/tree/master/packages/data#withdispatch-mapdispatchtoprops-function--function (2nd example).

In this case, it would be something like the following:

withDispatch( ( dispatch, ownProps, { select } ) => {
    // ...
    moveBlockToPosition( uid, fromRootUID, index ) {
        const { rootUID, layout } = ownProps;
        const { canInsertBlockType, getBlockName } = select( 'core/editor' );
        // and the rest as before
    }
}

[jorgefilipecosta]

Closing in favor of #14003.