Allow using groups and columns inside the experimental form block (#5…

…5758)

* Allow using groups and columns inside forms

* Prevent nesting forms

* Move the hook inside our init call

docs/reference-guides/core-blocks.md

@@ -294,7 +294,6 @@ The basic building block for forms. ([Source](https://github.com/WordPress/guten
 -	**Name:** core/form-input
 -	**Experimental:** true
 -	**Category:** common
--	**Parent:** core/form
 -	**Supports:** anchor, spacing (margin), ~~reusable~~
 -	**Attributes:** inlineLabel, label, name, placeholder, required, type, value, visibilityPermissions
 
@@ -305,7 +304,6 @@ Provide a notification message after the form has been submitted. ([Source](http
 -	**Name:** core/form-submission-notification
 -	**Experimental:** true
 -	**Category:** common
--	**Parent:** core/form
 -	**Supports:** 
 -	**Attributes:** type
 
@@ -316,7 +314,6 @@ A submission button for forms. ([Source](https://github.com/WordPress/gutenberg/
 -	**Name:** core/form-submit-button
 -	**Experimental:** true
 -	**Category:** common
--	**Parent:** core/form
 -	**Supports:** 
 -	**Attributes:** 
 

packages/block-library/src/form-input/block.json

@@ -5,7 +5,7 @@
 	"name": "core/form-input",
 	"title": "Input Field",
 	"category": "common",
-	"parent": [ "core/form" ],
+	"ancestor": [ "core/form" ],
 	"description": "The basic building block for forms.",
 	"keywords": [ "input", "form" ],
 	"textdomain": "default",

packages/block-library/src/form-submission-notification/block.json

@@ -5,7 +5,7 @@
 	"name": "core/form-submission-notification",
 	"title": "Form Submission Notification",
 	"category": "common",
-	"parent": [ "core/form" ],
+	"ancestor": [ "core/form" ],
 	"description": "Provide a notification message after the form has been submitted.",
 	"keywords": [ "form", "feedback", "notification", "message" ],
 	"textdomain": "default",

packages/block-library/src/form-submit-button/block.json

@@ -6,7 +6,7 @@
 	"title": "Form Submit Button",
 	"category": "common",
 	"icon": "button",
-	"parent": [ "core/form" ],
+	"ancestor": [ "core/form" ],
 	"description": "A submission button for forms.",
 	"keywords": [ "submit", "button", "form" ],
 	"textdomain": "default",

packages/block-library/src/form/edit.js

@@ -26,6 +26,8 @@ const ALLOWED_BLOCKS = [
 	'core/form-input',
 	'core/form-submit-button',
 	'core/form-submission-notification',
+	'core/group',
+	'core/columns',
 ];
 
 const TEMPLATE = [

packages/block-library/src/form/index.js

@@ -7,6 +7,11 @@ import metadata from './block.json';
 import save from './save';
 import variations from './variations';
 
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+
 const { name } = metadata;
 
 export { metadata, name };
@@ -17,4 +22,36 @@ export const settings = {
 	variations,
 };
 
-export const init = () => initBlock( { name, metadata, settings } );
+export const init = () => {
+	// Prevent adding forms inside forms.
+	const DISALLOWED_PARENTS = [ 'core/form' ];
+	addFilter(
+		'blockEditor.__unstableCanInsertBlockType',
+		'removeTemplatePartsFromPostTemplates',
+		(
+			canInsert,
+			blockType,
+			rootClientId,
+			{ getBlock, getBlockParentsByBlockName }
+		) => {
+			if ( blockType.name !== 'core/form' ) {
+				return canInsert;
+			}
+
+			for ( const disallowedParentType of DISALLOWED_PARENTS ) {
+				const hasDisallowedParent =
+					getBlock( rootClientId )?.name === disallowedParentType ||
+					getBlockParentsByBlockName(
+						rootClientId,
+						disallowedParentType
+					).length;
+				if ( hasDisallowedParent ) {
+					return false;
+				}
+			}
+			return true;
+		}
+	);
+
+	return initBlock( { name, metadata, settings } );
+};