@wordpress/block-library 8.20.1 → 8.21.1-next.f8d8eceb.0

package/src/form/index.php

@@ -0,0 +1,214 @@
+<?php
+/**
+ * Server-side rendering of the `core/form` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/form` block on server.
+ *
+ * @param array  $attributes The block attributes.
+ * @param string $content The saved content.
+ *
+ * @return string The content of the block being rendered.
+ */
+function render_block_core_form( $attributes, $content ) {
+
+	$processed_content = new WP_HTML_Tag_Processor( $content );
+	$processed_content->next_tag( 'form' );
+
+	// Get the action for this form.
+	$action = '';
+	if ( isset( $attributes['action'] ) ) {
+		$action = str_replace(
+			array( '{SITE_URL}', '{ADMIN_URL}' ),
+			array( site_url(), admin_url() ),
+			$attributes['action']
+		);
+	}
+	$processed_content->set_attribute( 'action', esc_attr( $action ) );
+
+	// Add the method attribute. If it is not set, default to `post`.
+	$method = empty( $attributes['method'] ) ? 'post' : $attributes['method'];
+	$processed_content->set_attribute( 'method', $method );
+
+	$extra_fields = apply_filters( 'render_block_core_form_extra_fields', '', $attributes );
+
+	return str_replace(
+		'</form>',
+		$extra_fields . '</form>',
+		$processed_content->get_updated_html()
+	);
+}
+
+/**
+ * Additional data to add to the view.js script for this block.
+ */
+function block_core_form_view_script() {
+	if ( ! gutenberg_is_experiment_enabled( 'gutenberg-form-blocks' ) ) {
+		return;
+	}
+
+	wp_localize_script(
+		'wp-block-form-view',
+		'wpBlockFormSettings',
+		array(
+			'nonce'   => wp_create_nonce( 'wp-block-form' ),
+			'ajaxUrl' => admin_url( 'admin-ajax.php' ),
+			'action'  => 'wp_block_form_email_submit',
+		)
+	);
+}
+add_action( 'wp_enqueue_scripts', 'block_core_form_view_script' );
+
+/**
+ * Adds extra fields to the form.
+ *
+ * If the form is a comment form, adds the post ID as a hidden field,
+ * to allow the comment to be associated with the post.
+ *
+ * @param string $extra_fields The extra fields.
+ * @param array  $attributes   The block attributes.
+ *
+ * @return string The extra fields.
+ */
+function block_core_form_extra_fields_comment_form( $extra_fields, $attributes ) {
+	if ( ! empty( $attributes['action'] ) && str_ends_with( $attributes['action'], '/wp-comments-post.php' ) ) {
+		$extra_fields .= '<input type="hidden" name="comment_post_ID" value="' . get_the_ID() . '" id="comment_post_ID">';
+	}
+	return $extra_fields;
+}
+add_filter( 'render_block_core_form_extra_fields', 'block_core_form_extra_fields_comment_form', 10, 2 );
+
+/**
+ * Sends an email if the form is a contact form.
+ */
+function block_core_form_send_email() {
+	check_ajax_referer( 'wp-block-form' );
+
+	// Get the POST data.
+	$params = wp_unslash( $_POST );
+	// Start building the email content.
+	$content = sprintf(
+		/* translators: %s: The request URI. */
+		__( 'Form submission from %1$s', 'gutenberg' ) . '</br>',
+		'<a href="' . esc_url( get_site_url( null, $params['_wp_http_referer'] ) ) . '">' . get_bloginfo( 'name' ) . '</a>'
+	);
+
+	$skip_fields = array( 'formAction', '_ajax_nonce', 'action' );
+	foreach ( $params as $key => $value ) {
+		if ( in_array( $key, $skip_fields, true ) ) {
+			continue;
+		}
+		$content .= sanitize_key( $key ) . ': ' . wp_kses_post( $value ) . '</br>';
+	}
+
+	// Filter the email content.
+	$content = apply_filters( 'render_block_core_form_email_content', $content, $params );
+
+	// Send the email.
+	$result = wp_mail(
+		str_replace( 'mailto:', '', $params['wp-email-address'] ),
+		__( 'Form submission', 'gutenberg' ),
+		$content
+	);
+
+	if ( ! $result ) {
+		wp_send_json_error( $result );
+	}
+	wp_send_json_success( $result );
+}
+add_action( 'wp_ajax_wp_block_form_email_submit', 'block_core_form_send_email' );
+add_action( 'wp_ajax_nopriv_wp_block_form_email_submit', 'block_core_form_send_email' );
+
+/**
+ * Send the data export/remove request if the form is a privacy-request form.
+ */
+function block_core_form_privacy_form() {
+	// Get the POST data.
+	$params = wp_unslash( $_POST );
+
+	// Bail early if not a form submission, or if the nonce is not valid.
+	if ( empty( $params['wp-action'] )
+		|| 'wp_privacy_send_request' !== $params['wp-action']
+		|| empty( $params['wp-privacy-request'] )
+		|| '1' !== $params['wp-privacy-request']
+		|| empty( $params['email'] )
+	) {
+		return;
+	}
+
+	// Get the request types.
+	$request_types  = _wp_privacy_action_request_types();
+	$requests_found = array();
+	foreach ( $request_types as $request_type ) {
+		if ( ! empty( $params[ $request_type ] ) ) {
+			$requests_found[] = $request_type;
+		}
+	}
+
+	// Bail early if no requests were found.
+	if ( empty( $requests_found ) ) {
+		return;
+	}
+
+	// Process the requests.
+	$actions_errored   = array();
+	$actions_performed = array();
+	foreach ( $requests_found as $action_name ) {
+		// Get the request ID.
+		$request_id = wp_create_user_request( $params['email'], $action_name );
+
+		// Bail early if the request ID is invalid.
+		if ( is_wp_error( $request_id ) ) {
+			$actions_errored[] = $action_name;
+			continue;
+		}
+
+		// Send the request email.
+		wp_send_user_request( $request_id );
+		$actions_performed[] = $action_name;
+	}
+
+	/**
+	 * Determine whether the core/form-submission-notification block should be shown.
+	 *
+	 * @param bool   $show       Whether to show the core/form-submission-notification block.
+	 * @param array  $attributes The block attributes.
+	 *
+	 * @return bool Whether to show the core/form-submission-notification block.
+	 */
+	$show_notification = static function ( $show, $attributes ) use ( $actions_performed, $actions_errored ) {
+		switch ( $attributes['type'] ) {
+			case 'success':
+				return ! empty( $actions_performed ) && empty( $actions_errored );
+
+			case 'error':
+				return ! empty( $actions_errored );
+
+			default:
+				return $show;
+		}
+	};
+
+	// Add filter to show the core/form-submission-notification block.
+	add_filter( 'show_form_submission_notification_block', $show_notification, 10, 2 );
+}
+add_action( 'wp', 'block_core_form_privacy_form' );
+
+/**
+ * Registers the `core/form` block on server.
+ */
+function register_block_core_form() {
+	if ( ! gutenberg_is_experiment_enabled( 'gutenberg-form-blocks' ) ) {
+		return;
+	}
+	register_block_type_from_metadata(
+		__DIR__ . '/form',
+		array(
+			'render_callback' => 'render_block_core_form',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_form' );

package/src/form/init.js

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

package/src/form/save.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+const Save = ( { attributes } ) => {
+	const blockProps = useBlockProps.save();
+	const { submissionMethod } = attributes;
+
+	return (
+		<form
+			{ ...blockProps }
+			className="wp-block-form"
+			encType={ submissionMethod === 'email' ? 'text/plain' : null }
+		>
+			<InnerBlocks.Content />
+		</form>
+	);
+};
+export default Save;

package/src/form/utils.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const formSubmissionNotificationSuccess = [
+	'core/form-submission-notification',
+	{
+		type: 'success',
+	},
+	[
+		[
+			'core/paragraph',
+			{
+				content:
+					'<mark style="background-color:rgba(0, 0, 0, 0);color:#345C00" class="has-inline-color">' +
+					__( 'Your form has been submitted successfully' ) +
+					'</mark>',
+			},
+		],
+	],
+];
+export const formSubmissionNotificationError = [
+	'core/form-submission-notification',
+	{
+		type: 'error',
+	},
+	[
+		[
+			'core/paragraph',
+			{
+				content:
+					'<mark style="background-color:rgba(0, 0, 0, 0);color:#CF2E2E" class="has-inline-color">' +
+					__( 'There was an error submitting your form.' ) +
+					'</mark>',
+			},
+		],
+	],
+];

package/src/form/variations.js

@@ -0,0 +1,139 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import {
+	formSubmissionNotificationSuccess,
+	formSubmissionNotificationError,
+} from './utils.js';
+
+const variations = [
+	{
+		name: 'comment-form',
+		title: __( 'Experimental Comment form' ),
+		description: __( 'A comment form for posts and pages.' ),
+		attributes: {
+			submissionMethod: 'custom',
+			action: '{SITE_URL}/wp-comments-post.php',
+			method: 'post',
+			anchor: 'comment-form',
+		},
+		isDefault: false,
+		innerBlocks: [
+			[
+				'core/form-input',
+				{
+					type: 'text',
+					name: 'author',
+					label: __( 'Name' ),
+					required: true,
+					visibilityPermissions: 'logged-out',
+				},
+			],
+			[
+				'core/form-input',
+				{
+					type: 'email',
+					name: 'email',
+					label: __( 'Email' ),
+					required: true,
+					visibilityPermissions: 'logged-out',
+				},
+			],
+			[
+				'core/form-input',
+				{
+					type: 'textarea',
+					name: 'comment',
+					label: __( 'Comment' ),
+					required: true,
+					visibilityPermissions: 'all',
+				},
+			],
+			[ 'core/form-submit-button', {} ],
+		],
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) =>
+			! blockAttributes?.type || blockAttributes?.type === 'text',
+	},
+	{
+		name: 'wp-privacy-form',
+		title: __( 'Experimental privacy request form' ),
+		keywords: [ 'GDPR' ],
+		description: __( 'A form to request data exports and/or deletion.' ),
+		attributes: {
+			submissionMethod: 'custom',
+			action: '',
+			method: 'post',
+			anchor: 'gdpr-form',
+		},
+		isDefault: false,
+		innerBlocks: [
+			formSubmissionNotificationSuccess,
+			formSubmissionNotificationError,
+			[
+				'core/paragraph',
+				{
+					content: __(
+						'To request an export or deletion of your personal data on this site, please fill-in the form below. You can define the type of request you wish to perform, and your email address. Once the form is submitted, you will receive a confirmation email with instructions on the next steps.'
+					),
+				},
+			],
+			[
+				'core/form-input',
+				{
+					type: 'email',
+					name: 'email',
+					label: __( 'Enter your email address.' ),
+					required: true,
+					visibilityPermissions: 'all',
+				},
+			],
+			[
+				'core/form-input',
+				{
+					type: 'checkbox',
+					name: 'export_personal_data',
+					label: __( 'Request data export' ),
+					required: false,
+					visibilityPermissions: 'all',
+				},
+			],
+			[
+				'core/form-input',
+				{
+					type: 'checkbox',
+					name: 'remove_personal_data',
+					label: __( 'Request data deletion' ),
+					required: false,
+					visibilityPermissions: 'all',
+				},
+			],
+			[ 'core/form-submit-button', {} ],
+			[
+				'core/form-input',
+				{
+					type: 'hidden',
+					name: 'wp-action',
+					value: 'wp_privacy_send_request',
+				},
+			],
+			[
+				'core/form-input',
+				{
+					type: 'hidden',
+					name: 'wp-privacy-request',
+					value: '1',
+				},
+			],
+		],
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) =>
+			! blockAttributes?.type || blockAttributes?.type === 'text',
+	},
+];
+
+export default variations;

package/src/form/view.js

@@ -0,0 +1,41 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable no-undef */
+document.querySelectorAll( 'form.wp-block-form' ).forEach( function ( form ) {
+	// Bail If the form is not using the mailto: action.
+	if ( ! form.action || ! form.action.startsWith( 'mailto:' ) ) {
+		return;
+	}
+
+	const redirectNotification = ( status ) => {
+		const urlParams = new URLSearchParams( window.location.search );
+		urlParams.append( 'wp-form-result', status );
+		window.location.search = urlParams.toString();
+	};
+
+	// Add an event listener for the form submission.
+	form.addEventListener( 'submit', async function ( event ) {
+		event.preventDefault();
+		// Get the form data and merge it with the form action and nonce.
+		const formData = Object.fromEntries( new FormData( form ).entries() );
+		formData.formAction = form.action;
+		formData._ajax_nonce = wpBlockFormSettings.nonce;
+		formData.action = wpBlockFormSettings.action;
+
+		try {
+			const response = await fetch( wpBlockFormSettings.ajaxUrl, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/x-www-form-urlencoded',
+				},
+				body: new URLSearchParams( formData ).toString(),
+			} );
+			if ( response.ok ) {
+				redirectNotification( 'success' );
+			} else {
+				redirectNotification( 'error' );
+			}
+		} catch ( error ) {
+			redirectNotification( 'error' );
+		}
+	} );
+} );

package/src/form-input/block.json

@@ -0,0 +1,73 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"__experimental": true,
+	"name": "core/form-input",
+	"title": "Input Field",
+	"category": "common",
+	"parent": [ "core/form" ],
+	"description": "The basic building block for forms.",
+	"keywords": [ "input", "form" ],
+	"textdomain": "default",
+	"icon": "forms",
+	"attributes": {
+		"type": {
+			"type": "string",
+			"default": "text"
+		},
+		"name": {
+			"type": "string"
+		},
+		"label": {
+			"type": "string",
+			"default": "Label",
+			"selector": ".wp-block-form-input__label-content",
+			"source": "html",
+			"__experimentalRole": "content"
+		},
+		"inlineLabel": {
+			"type": "boolean",
+			"default": false
+		},
+		"required": {
+			"type": "boolean",
+			"default": false,
+			"selector": ".wp-block-form-input__input",
+			"source": "attribute",
+			"attribute": "required"
+		},
+		"placeholder": {
+			"type": "string",
+			"selector": ".wp-block-form-input__input",
+			"source": "attribute",
+			"attribute": "placeholder",
+			"__experimentalRole": "content"
+		},
+		"value": {
+			"type": "string",
+			"default": "",
+			"selector": "input",
+			"source": "attribute",
+			"attribute": "value"
+		},
+		"visibilityPermissions": {
+			"type": "string",
+			"default": "all"
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"reusable": false,
+		"spacing": {
+			"margin": [ "top", "bottom" ]
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"radius": true
+			}
+		}
+	},
+	"style": [ "wp-block-form-input" ]
+}

package/src/form-input/edit.js

@@ -0,0 +1,151 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	InspectorControls,
+	RichText,
+	useBlockProps,
+	__experimentalUseBorderProps as useBorderProps,
+	__experimentalUseColorProps as useColorProps,
+} from '@wordpress/block-editor';
+import { PanelBody, TextControl, CheckboxControl } from '@wordpress/components';
+
+import { useRef } from '@wordpress/element';
+
+function InputFieldBlock( { attributes, setAttributes, className } ) {
+	const { type, name, label, inlineLabel, required, placeholder, value } =
+		attributes;
+	const blockProps = useBlockProps();
+	const ref = useRef();
+	const TagName = type === 'textarea' ? 'textarea' : 'input';
+
+	const borderProps = useBorderProps( attributes );
+	const colorProps = useColorProps( attributes );
+	if ( ref.current ) {
+		ref.current.focus();
+	}
+
+	const controls = (
+		<>
+			{ 'hidden' !== type && (
+				<InspectorControls>
+					<PanelBody title={ __( 'Input settings' ) }>
+						{ 'checkbox' !== type && (
+							<CheckboxControl
+								label={ __( 'Inline label' ) }
+								checked={ inlineLabel }
+								onChange={ ( newVal ) => {
+									setAttributes( {
+										inlineLabel: newVal,
+									} );
+								} }
+							/>
+						) }
+						<CheckboxControl
+							label={ __( 'Required' ) }
+							checked={ required }
+							onChange={ ( newVal ) => {
+								setAttributes( {
+									required: newVal,
+								} );
+							} }
+						/>
+					</PanelBody>
+				</InspectorControls>
+			) }
+			<InspectorControls __experimentalGroup="advanced">
+				<TextControl
+					autoComplete="off"
+					label={ __( 'Name' ) }
+					value={ name }
+					onChange={ ( newVal ) => {
+						setAttributes( {
+							name: newVal,
+						} );
+					} }
+					help={ __(
+						'Affects the "name" atribute of the input element, and is used as a name for the form submission results.'
+					) }
+				/>
+			</InspectorControls>
+		</>
+	);
+
+	if ( 'hidden' === type ) {
+		return (
+			<>
+				{ controls }
+				<input
+					type="hidden"
+					className={ classNames(
+						className,
+						'wp-block-form-input__input',
+						colorProps.className,
+						borderProps.className
+					) }
+					aria-label={ __( 'Value' ) }
+					value={ value }
+					onChange={ ( event ) =>
+						setAttributes( { value: event.target.value } )
+					}
+				/>
+			</>
+		);
+	}
+
+	return (
+		<div { ...blockProps }>
+			{ controls }
+			<span
+				className={ classNames( 'wp-block-form-input__label', {
+					'is-label-inline': inlineLabel || 'checkbox' === type,
+				} ) }
+			>
+				<RichText
+					tagName="span"
+					className="wp-block-form-input__label-content"
+					value={ label }
+					onChange={ ( newLabel ) =>
+						setAttributes( { label: newLabel } )
+					}
+					aria-label={ label ? __( 'Label' ) : __( 'Empty label' ) }
+					data-empty={ label ? false : true }
+					placeholder={ __( 'Type the label for this input' ) }
+				/>
+				<TagName
+					type={ 'textarea' === type ? undefined : type }
+					className={ classNames(
+						className,
+						'wp-block-form-input__input',
+						colorProps.className,
+						borderProps.className
+					) }
+					aria-label={ __( 'Optional placeholder text' ) }
+					// We hide the placeholder field's placeholder when there is a value. This
+					// stops screen readers from reading the placeholder field's placeholder
+					// which is confusing.
+					placeholder={
+						placeholder ? undefined : __( 'Optional placeholder…' )
+					}
+					value={ placeholder }
+					onChange={ ( event ) =>
+						setAttributes( { placeholder: event.target.value } )
+					}
+					aria-required={ required }
+					style={ {
+						...borderProps.style,
+						...colorProps.style,
+					} }
+				/>
+			</span>
+		</div>
+	);
+}
+
+export default InputFieldBlock;