prep build 10/06

.gitignore

@@ -48,3 +48,4 @@ test/storybook-playwright/specs/__snapshots__
 test/storybook-playwright/specs/*-snapshots/**
 test/gutenberg-test-themes/twentytwentyone
 test/gutenberg-test-themes/twentytwentythree
+packages/react-native-editor/src/setup-local.js

docs/contributors/code/react-native/getting-started-react-native.md

@@ -71,6 +71,40 @@ npm run native ios -- -- --simulator="iPhone Xs Max"
 
 To see a list of all of your available iOS devices, use `xcrun simctl list devices`.
 
+### Customizing the Demo Editor
+
+By default, the Demo editor renders most of the supported core blocks. This is helpful to showcase the editor's capabilities, but can be distracting when focusing on a specific block or feature. One can customize the editor's intial state by leveraging the `native.block_editor_props` hook in a `packages/react-native-editor/src/setup-local.js` file.
+
+<details><summary>Example setup-local.js</summary>
+
+```js
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+
+export default () => {
+	addFilter(
+		'native.block_editor_props',
+		'core/react-native-editor',
+		( props ) => {
+			return {
+				...props,
+				initialHtml,
+			};
+		}
+	);
+};
+
+const initialHtml = `
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Just a Heading</h2>
+<!-- /wp:heading -->
+`;
+```
+
+</details>
+
 ### Troubleshooting
 
 If the Android emulator doesn't start correctly, or compiling fails with `Could not initialize class org.codehaus.groovy.runtime.InvokerHelper` or similar, it may help to double check the set up of your development environment against the latest requirements in [React Native's documentation](https://reactnative.dev/docs/environment-setup). With Android Studio, for example, you will need to configure the `ANDROID_HOME` environment variable and ensure that your version of JDK matches the latest requirements.

docs/reference-guides/core-blocks.md

@@ -274,7 +274,46 @@ Display footnotes added to the page. ([Source](https://github.com/WordPress/gute
 
 -	**Name:** core/footnotes
 -	**Category:** text
--	**Supports:** color (background, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~multiple~~, ~~reusable~~
+-	**Supports:** color (background, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~inserter~~, ~~multiple~~, ~~reusable~~
+-	**Attributes:** 
+
+## Form
+
+A form. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/form))
+
+-	**Name:** core/form
+-	**Category:** common
+-	**Supports:** anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~
+-	**Attributes:** action, email, method, submissionMethod
+
+## Input field
+
+The basic building block for forms. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/form-input))
+
+-	**Name:** core/form-input
+-	**Category:** common
+-	**Parent:** core/form
+-	**Supports:** anchor, spacing (margin), ~~reusable~~
+-	**Attributes:** inlineLabel, label, name, placeholder, required, type, value, visibilityPermissions
+
+## Form Submission Notification
+
+Provide a notification message after the form has been submitted. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/form-submission-notification))
+
+-	**Name:** core/form-submission-notification
+-	**Category:** common
+-	**Parent:** core/form
+-	**Supports:** 
+-	**Attributes:** type
+
+## Form submit button
+
+A submission button for forms. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/form-submit-button))
+
+-	**Name:** core/form-submit-button
+-	**Category:** common
+-	**Parent:** core/form
+-	**Supports:** 
 -	**Attributes:** 
 
 ## Classic

lib/blocks.php

@@ -22,6 +22,8 @@ function gutenberg_reregister_core_block_types() {
 				'column',
 				'columns',
 				'details',
+				'form-input',
+				'form-submit-button',
 				'group',
 				'html',
 				'list',
@@ -66,6 +68,9 @@ function gutenberg_reregister_core_block_types() {
 				'comments.php'                     => 'core/comments',
 				'footnotes.php'                    => 'core/footnotes',
 				'file.php'                         => 'core/file',
+				'form.php'                         => 'core/form',
+				'form-input.php'                   => 'core/form-input',
+				'form-submission-notification.php' => 'core/form-submission-notification',
 				'home-link.php'                    => 'core/home-link',
 				'image.php'                        => 'core/image',
 				'gallery.php'                      => 'core/gallery',

lib/experimental/editor-settings.php

@@ -36,3 +36,15 @@ function gutenberg_enable_experiments() {
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );
+
+/**
+ * Sets a global JS variable used to trigger the availability of form & input blocks.
+ */
+function gutenberg_enable_form_input_blocks() {
+	$gutenberg_experiments = get_option( 'gutenberg-experiments' );
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-form-blocks', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableFormBlocks = true', 'before' );
+	}
+}
+
+add_action( 'admin_init', 'gutenberg_enable_form_input_blocks' );

lib/experimental/kses-allowed-html.php

@@ -0,0 +1,43 @@
+<?php
+/**
+ * Modifies the wp_kses_allowed_html array.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Add the form elements to the allowed tags array.
+ *
+ * @param array $allowedtags The allowed tags.
+ *
+ * @return array The allowed tags.
+ */
+function gutenberg_kses_allowed_html( $allowedtags ) {
+	if ( ! gutenberg_is_experiment_enabled( 'gutenberg-form-blocks' ) ) {
+		return $allowedtags;
+	}
+
+	$allowedtags['input'] = array(
+		'type'          => array(),
+		'name'          => array(),
+		'value'         => array(),
+		'checked'       => array(),
+		'required'      => array(),
+		'aria-required' => array(),
+		'class'         => array(),
+	);
+
+	$allowedtags['label'] = array(
+		'for'   => array(),
+		'class' => array(),
+	);
+
+	$allowedtags['textarea'] = array(
+		'name'          => array(),
+		'required'      => array(),
+		'aria-required' => array(),
+		'class'         => array(),
+	);
+	return $allowedtags;
+}
+add_filter( 'wp_kses_allowed_html', 'gutenberg_kses_allowed_html', 10, 2 );

lib/experiments-page.php

@@ -90,6 +90,17 @@ function gutenberg_initialize_experiments_settings() {
 			'id'    => 'gutenberg-color-randomizer',
 		)
 	);
+	add_settings_field(
+		'gutenberg-form-blocks',
+		__( 'Form and input blocks ', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Test new blocks to allow building forms (Warning: The new feature is not ready. You may experience UX issues that are being addressed)', 'gutenberg' ),
+			'id'    => 'gutenberg-form-blocks',
+		)
+	);
 
 	add_settings_field(
 		'gutenberg-group-grid-variation',

lib/load.php

@@ -66,6 +66,8 @@ function gutenberg_is_experiment_enabled( $name ) {
 	}
 	require_once __DIR__ . '/experimental/class-gutenberg-rest-template-revision-count.php';
 	require_once __DIR__ . '/experimental/rest-api.php';
+
+	require_once __DIR__ . '/experimental/kses-allowed-html.php';
 }
 
 require __DIR__ . '/experimental/editor-settings.php';

packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -219,10 +219,11 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                           aria-label="Color: red"
                           aria-selected="true"
                           class="components-button components-circular-option-picker__option"
+                          data-active-item=""
+                          data-command=""
                           id="components-circular-option-picker-0-0"
                           role="option"
                           style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
-                          tabindex="0"
                           type="button"
                         />
                         <svg

packages/block-editor/src/components/link-control/README.md

@@ -59,6 +59,29 @@ The resulting default properties of `value` include:
 -   `title` (`string`, optional): Link title.
 -   `opensInNewTab` (`boolean`, optional): Whether link should open in a new browser tab. This value is only assigned when not providing a custom `settings` prop.
 
+Note: `<LinkControl>` maintains an internal state tracking temporary user edits to the link `value` prior to submission. To avoid unwanted synchronization of this internal value, it is advised that the `value` prop is stablized (likely via memozation) before it is passed to the component. This will avoid unwanted loss of any changes users have may made whilst interacting with the control.
+
+```jsx
+const memoizedValue = useMemo(
+	() => ( {
+		url: attributes.url,
+		type: attributes.type,
+		opensInNewTab: attributes.target === '_blank',
+		title: attributes.text,
+	} ),
+	[
+		attributes.url,
+		attributes.type,
+		attributes.target,
+		attributes.text,
+	]
+);
+
+<LinkControl
+	value={ memoizedValue }
+>
+```
+
 ### settings
 
 -   Type: `Array`

packages/block-editor/src/components/rich-text/index.native.js

@@ -21,6 +21,7 @@ import {
 	__unstableCreateElement,
 	isEmpty,
 	insert,
+	remove,
 	create,
 	split,
 	toHTMLString,
@@ -70,6 +71,7 @@ function RichTextWrapper(
 		onSplit,
 		__unstableOnSplitAtEnd: onSplitAtEnd,
 		__unstableOnSplitMiddle: onSplitMiddle,
+		__unstableOnSplitAtDoubleLineEnd: onSplitAtDoubleLineEnd,
 		identifier,
 		preserveWhiteSpace,
 		__unstablePastePlainText: pastePlainText,
@@ -339,14 +341,28 @@ function RichTextWrapper(
 				splitStart === splitEnd &&
 				splitEnd === text.length;
 
-			if ( shiftKey || ( ! canSplit && ! canSplitAtEnd ) ) {
+			if ( shiftKey ) {
 				if ( ! disableLineBreaks ) {
 					onChange( insert( value, '\n' ) );
 				}
-			} else if ( ! canSplit && canSplitAtEnd ) {
-				onSplitAtEnd();
 			} else if ( canSplit ) {
 				splitValue( value );
+			} else if ( canSplitAtEnd ) {
+				onSplitAtEnd();
+			} else if (
+				// For some blocks it's desirable to split at the end of the
+				// block when there are two line breaks at the end of the
+				// block, so triple Enter exits the block.
+				onSplitAtDoubleLineEnd &&
+				splitStart === splitEnd &&
+				splitEnd === text.length &&
+				text.slice( -2 ) === '\n\n'
+			) {
+				value.start = value.end - 2;
+				onChange( remove( value ) );
+				onSplitAtDoubleLineEnd();
+			} else if ( ! disableLineBreaks ) {
+				onChange( insert( value, '\n' ) );
 			}
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -9,6 +9,7 @@ import { View } from 'react-native';
 import { PlainText } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -22,7 +23,15 @@ import styles from './theme.scss';
 // Note: styling is applied directly to the (nested) PlainText component. Web-side components
 // apply it to the container 'div' but we don't have a proper proposal for cascading styling yet.
 export function CodeEdit( props ) {
-	const { attributes, setAttributes, onFocus, onBlur, style } = props;
+	const {
+		attributes,
+		setAttributes,
+		onFocus,
+		onBlur,
+		style,
+		insertBlocksAfter,
+		mergeBlocks,
+	} = props;
 	const codeStyle = {
 		...usePreferredColorSchemeStyle(
 			styles.blockCode,
@@ -40,16 +49,21 @@ export function CodeEdit( props ) {
 		<View>
 			<PlainText
 				value={ attributes.content }
+				identifier="content"
 				style={ codeStyle }
 				multiline={ true }
 				underlineColorAndroid="transparent"
 				onChange={ ( content ) => setAttributes( { content } ) }
+				onMerge={ mergeBlocks }
 				placeholder={ __( 'Write code…' ) }
 				aria-label={ __( 'Code' ) }
 				isSelected={ props.isSelected }
 				onFocus={ onFocus }
 				onBlur={ onBlur }
 				placeholderTextColor={ placeholderStyle.color }
+				__unstableOnSplitAtDoubleLineEnd={ () =>
+					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+				}
 			/>
 		</View>
 	);

packages/block-library/src/editor.scss

@@ -16,6 +16,8 @@
 @import "./details/editor.scss";
 @import "./embed/editor.scss";
 @import "./file/editor.scss";
+@import "./form-input/editor.scss";
+@import "./form-submission-notification/editor.scss";
 @import "./freeform/editor.scss";
 @import "./gallery/editor.scss";
 @import "./group/editor.scss";

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

@@ -33,6 +33,7 @@
 		"html": false,
 		"multiple": false,
 		"reusable": false,
+		"inserter": false,
 		"spacing": {
 			"margin": true,
 			"padding": true,