Initial forms POC

docs/reference-guides/core-blocks.md

@@ -251,6 +251,15 @@ Add a link to a downloadable file. ([Source](https://github.com/WordPress/gutenb
 -	**Supports:** align, anchor
 -	**Attributes:** displayPreview, downloadButtonText, fileId, fileName, href, id, previewHeight, showDownloadButton, textLinkHref, textLinkTarget
 
+## Form
+
+A form. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/form))
+
+-	**Name:** core/form
+-	**Category:** common
+-	**Supports:** 
+-	**Attributes:** 
+
 ## Classic
 
 Use the classic WordPress editor. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/freeform))
@@ -314,6 +323,15 @@ Insert an image to make a visual statement. ([Source](https://github.com/WordPre
 -	**Supports:** anchor, color (~~background~~, ~~text~~)
 -	**Attributes:** align, alt, caption, height, href, id, linkClass, linkDestination, linkTarget, rel, sizeSlug, title, url, width
 
+## Input field
+
+The basic building block for forms. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/input-field))
+
+-	**Name:** core/input-field
+-	**Category:** common
+-	**Supports:** 
+-	**Attributes:** inlineLabel, label, type
+
 ## Latest Comments
 
 Display a list of your most recent comments. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/latest-comments))

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

@@ -0,0 +1,10 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/form",
+	"title": "Form",
+	"category": "common",
+	"description": "A form.",
+	"keywords": [ "container", "wrapper", "row", "section" ],
+	"textdomain": "default"
+}

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

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+const Edit = () => {
+	const blockProps = useBlockProps();
+	return (
+		<form { ...blockProps }>
+			<InnerBlocks />
+		</form>
+	);
+};
+export default Edit;

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

@@ -0,0 +1,137 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { withSelect } from '@wordpress/data';
+import {
+	compose,
+	withPreferredColorScheme,
+	useResizeObserver,
+} from '@wordpress/compose';
+import {
+	InnerBlocks,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useCallback } from '@wordpress/element';
+import { alignmentHelpers } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import styles from './editor.scss';
+
+const { isFullWidth } = alignmentHelpers;
+
+function GroupEdit( {
+	attributes,
+	hasInnerBlocks,
+	isSelected,
+	isLastInnerBlockSelected,
+	getStylesFromColorScheme,
+	style,
+	blockWidth,
+} ) {
+	const { align } = attributes;
+	const [ resizeObserver, sizes ] = useResizeObserver();
+	const { width } = sizes || { width: 0 };
+
+	const renderAppender = useCallback(
+		() => (
+			<View
+				style={ [
+					! hasInnerBlocks && styles.groupAppender,
+					isFullWidth( align ) &&
+						! hasInnerBlocks &&
+						styles.fullwidthGroupAppender,
+					isFullWidth( align ) &&
+						hasInnerBlocks &&
+						styles.fullwidthHasInnerGroupAppender,
+				] }
+			>
+				<InnerBlocks.ButtonBlockAppender />
+			</View>
+		),
+		[ align, hasInnerBlocks ]
+	);
+
+	if ( ! isSelected && ! hasInnerBlocks ) {
+		return (
+			<View
+				style={ [
+					getStylesFromColorScheme(
+						styles.groupPlaceholder,
+						styles.groupPlaceholderDark
+					),
+					! hasInnerBlocks && {
+						...styles.marginVerticalDense,
+						...styles.marginHorizontalNone,
+					},
+				] }
+			/>
+		);
+	}
+
+	return (
+		<View
+			style={ [
+				isSelected && hasInnerBlocks && styles.innerBlocks,
+				style,
+				isSelected &&
+					hasInnerBlocks &&
+					style?.backgroundColor &&
+					styles.hasBackgroundAppender,
+				isLastInnerBlockSelected &&
+					style?.backgroundColor &&
+					styles.isLastInnerBlockSelected,
+			] }
+		>
+			{ resizeObserver }
+			<InnerBlocks
+				renderAppender={ isSelected && renderAppender }
+				parentWidth={ width }
+				blockWidth={ blockWidth }
+			/>
+		</View>
+	);
+}
+
+export default compose( [
+	withSelect( ( select, { clientId } ) => {
+		const {
+			getBlock,
+			getBlockIndex,
+			hasSelectedInnerBlock,
+			getBlockRootClientId,
+			getSelectedBlockClientId,
+			getBlockAttributes,
+		} = select( blockEditorStore );
+
+		const block = getBlock( clientId );
+		const hasInnerBlocks = !! ( block && block.innerBlocks.length );
+		const isInnerBlockSelected =
+			hasInnerBlocks && hasSelectedInnerBlock( clientId, true );
+		let isLastInnerBlockSelected = false;
+
+		if ( isInnerBlockSelected ) {
+			const { innerBlocks } = block;
+			const selectedBlockClientId = getSelectedBlockClientId();
+			const totalInnerBlocks = innerBlocks.length - 1;
+			const blockIndex = getBlockIndex( selectedBlockClientId );
+			isLastInnerBlockSelected = totalInnerBlocks === blockIndex;
+		}
+
+		const parentId = getBlockRootClientId( clientId );
+		const parentBlockAlignment = getBlockAttributes( parentId )?.align;
+
+		return {
+			hasInnerBlocks,
+			isLastInnerBlockSelected,
+			parentBlockAlignment,
+		};
+	} ),
+	withPreferredColorScheme,
+] )( GroupEdit );

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

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import edit from './edit';
+import metadata from './block.json';
+import save from './save';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	edit,
+	save,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

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

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

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

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+const Save = () => {
+	const blockProps = useBlockProps.save();
+	return (
+		<form { ...blockProps }>
+			<InnerBlocks.Content />
+		</form>
+	);
+};
+export default Save;

packages/block-library/src/index.js

@@ -47,12 +47,14 @@ import * as commentsTitle from './comments-title';
 import * as cover from './cover';
 import * as embed from './embed';
 import * as file from './file';
+import * as form from './form';
 import * as gallery from './gallery';
 import * as group from './group';
 import * as heading from './heading';
 import * as homeLink from './home-link';
 import * as html from './html';
 import * as image from './image';
+import * as inputField from './input-field';
 import * as latestComments from './latest-comments';
 import * as latestPosts from './latest-posts';
 import * as list from './list';
@@ -146,8 +148,10 @@ const getAllBlocks = () =>
 		cover,
 		embed,
 		file,
+		form,
 		group,
 		html,
+		inputField,
 		latestComments,
 		latestPosts,
 		mediaText,

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

@@ -0,0 +1,26 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/input-field",
+	"title": "Input field",
+	"category": "common",
+	"parent": [ "core/form" ],
+	"description": "The basic building block for forms.",
+	"keywords": [ "input", "text", "textarea" ],
+	"textdomain": "default",
+	"attributes": {
+		"type": {
+			"type": "string",
+			"default": "text"
+		},
+		"label": {
+			"type": "string",
+			"default": "Label"
+		},
+		"inlineLabel": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"style": [ "wp-block-input-field" ]
+}