@wordpress/block-library 8.20.1 → 8.21.0

package/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";

package/src/footnotes/block.json

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

package/src/form/block.json

@@ -0,0 +1,60 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"__experimental": true,
+	"name": "core/form",
+	"title": "Form",
+	"category": "common",
+	"description": "A form.",
+	"keywords": [ "container", "wrapper", "row", "section" ],
+	"textdomain": "default",
+	"icon": "feedback",
+	"attributes": {
+		"submissionMethod": {
+			"type": "string",
+			"default": "email"
+		},
+		"method": {
+			"type": "string",
+			"default": "post"
+		},
+		"action": {
+			"type": "string"
+		},
+		"email": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"className": false,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"__experimentalSelector": "form"
+	},
+	"viewScript": "file:./view.min.js"
+}

package/src/form/edit.js

@@ -0,0 +1,179 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	InnerBlocks,
+	useBlockProps,
+	useInnerBlocksProps,
+	InspectorControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { TextControl, SelectControl, PanelBody } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import {
+	formSubmissionNotificationSuccess,
+	formSubmissionNotificationError,
+} from './utils.js';
+
+const ALLOWED_BLOCKS = [
+	'core/paragraph',
+	'core/heading',
+	'core/form-input',
+	'core/form-submit-button',
+	'core/form-submission-notification',
+];
+
+const TEMPLATE = [
+	formSubmissionNotificationSuccess,
+	formSubmissionNotificationError,
+	[
+		'core/form-input',
+		{
+			type: 'text',
+			label: __( 'Name' ),
+			required: true,
+		},
+	],
+	[
+		'core/form-input',
+		{
+			type: 'email',
+			label: __( 'Email' ),
+			required: true,
+		},
+	],
+	[
+		'core/form-input',
+		{
+			type: 'textarea',
+			label: __( 'Comment' ),
+			required: true,
+		},
+	],
+	[ 'core/form-submit-button', {} ],
+];
+
+const Edit = ( { attributes, setAttributes, clientId } ) => {
+	const { action, method, email, submissionMethod } = attributes;
+	const blockProps = useBlockProps();
+
+	const { hasInnerBlocks } = useSelect(
+		( select ) => {
+			const { getBlock } = select( blockEditorStore );
+			const block = getBlock( clientId );
+			return {
+				hasInnerBlocks: !! ( block && block.innerBlocks.length ),
+			};
+		},
+		[ clientId ]
+	);
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: ALLOWED_BLOCKS,
+		template: TEMPLATE,
+		renderAppender: hasInnerBlocks
+			? undefined
+			: InnerBlocks.ButtonBlockAppender,
+	} );
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings' ) }>
+					<SelectControl
+						// __nextHasNoMarginBottom
+						// size={ '__unstable-large' }
+						label={ __( 'Submissions method' ) }
+						options={ [
+							// TODO: Allow plugins to add their own submission methods.
+							{
+								label: __( 'Send email' ),
+								value: 'email',
+							},
+							{
+								label: __( '- Custom -' ),
+								value: 'custom',
+							},
+						] }
+						value={ submissionMethod }
+						onChange={ ( value ) =>
+							setAttributes( { submissionMethod: value } )
+						}
+						help={
+							submissionMethod === 'custom'
+								? __(
+										'Select the method to use for form submissions. Additional options for the "custom" mode can be found in the "Andvanced" section.'
+								  )
+								: __(
+										'Select the method to use for form submissions.'
+								  )
+						}
+					/>
+					{ submissionMethod === 'email' && (
+						<TextControl
+							__nextHasNoMarginBottom
+							autoComplete="off"
+							label={ __( 'Email for form submissions' ) }
+							value={ email }
+							required
+							onChange={ ( value ) => {
+								setAttributes( { email: value } );
+								setAttributes( {
+									action: `mailto:${ value }`,
+								} );
+								setAttributes( { method: 'post' } );
+							} }
+							help={ __(
+								'The email address where form submissions will be sent. Separate multiple email addresses with a comma.'
+							) }
+						/>
+					) }
+				</PanelBody>
+			</InspectorControls>
+			{ submissionMethod !== 'email' && (
+				<InspectorControls group="advanced">
+					<SelectControl
+						__nextHasNoMarginBottom
+						label={ __( 'Method' ) }
+						options={ [
+							{ label: 'Get', value: 'get' },
+							{ label: 'Post', value: 'post' },
+						] }
+						value={ method }
+						onChange={ ( value ) =>
+							setAttributes( { method: value } )
+						}
+						help={ __(
+							'Select the method to use for form submissions.'
+						) }
+					/>
+					<TextControl
+						__nextHasNoMarginBottom
+						autoComplete="off"
+						label={ __( 'Form action' ) }
+						value={ action }
+						onChange={ ( newVal ) => {
+							setAttributes( {
+								action: newVal,
+							} );
+						} }
+						help={ __(
+							'The URL where the form should be submitted.'
+						) }
+					/>
+				</InspectorControls>
+			) }
+			<form
+				{ ...innerBlocksProps }
+				className="wp-block-form"
+				encType={ submissionMethod === 'email' ? 'text/plain' : null }
+			/>
+		</>
+	);
+};
+export default Edit;

package/src/form/index.js

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

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 torequest 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;