@wordpress/block-library 8.20.0 → 8.21.0

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;

package/src/form-input/editor.scss

@@ -0,0 +1,24 @@
+.wp-block-form-input {
+	.is-input-hidden {
+		font-size: 0.85em;
+		opacity: 0.3;
+		border: 1px dashed;
+		padding: 0.5em;
+		box-sizing: border-box;
+		background: repeating-linear-gradient(45deg, transparent, transparent 5px, currentColor 5px, currentColor 6px);
+
+		input[type="text"] {
+			background: transparent;
+		}
+	}
+	&.is-selected {
+		.is-input-hidden {
+			opacity: 1;
+			background: none;
+
+			input[type="text"] {
+				background: unset;
+			}
+		}
+	}
+}

package/src/form-input/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-input/index.php

@@ -0,0 +1,45 @@
+<?php
+/**
+ * Server-side rendering of the `core/form-input` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/form-input` 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_input( $attributes, $content ) {
+	$visibility_permissions = 'all';
+	if ( isset( $attributes['visibilityPermissions'] ) ) {
+		$visibility_permissions = $attributes['visibilityPermissions'];
+	}
+
+	if ( 'logged-in' === $visibility_permissions && ! is_user_logged_in() ) {
+		return '';
+	}
+	if ( 'logged-out' === $visibility_permissions && is_user_logged_in() ) {
+		return '';
+	}
+	return $content;
+}
+
+/**
+ * Registers the `core/form-input` block on server.
+ */
+function register_block_core_form_input() {
+	if ( ! gutenberg_is_experiment_enabled( 'gutenberg-form-blocks' ) ) {
+		return;
+	}
+	register_block_type_from_metadata(
+		__DIR__ . '/form-input',
+		array(
+			'render_callback' => 'render_block_core_form_input',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_form_input' );

package/src/form-input/init.js

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

package/src/form-input/save.js

@@ -0,0 +1,83 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import removeAccents from 'remove-accents';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+} from '@wordpress/block-editor';
+
+/**
+ * Get the name attribute from a content string.
+ *
+ * @param {string} content The block content.
+ *
+ * @return {string} Returns the slug.
+ */
+const getNameFromLabel = ( content ) => {
+	const dummyElement = document.createElement( 'div' );
+	dummyElement.innerHTML = content;
+	// Get the slug.
+	return (
+		removeAccents( dummyElement.innerText )
+			// Convert anything that's not a letter or number to a hyphen.
+			.replace( /[^\p{L}\p{N}]+/gu, '-' )
+			// Convert to lowercase
+			.toLowerCase()
+			// Remove any remaining leading or trailing hyphens.
+			.replace( /(^-+)|(-+$)/g, '' )
+	);
+};
+
+export default function save( { attributes } ) {
+	const { type, name, label, inlineLabel, required, placeholder, value } =
+		attributes;
+
+	const borderProps = getBorderClassesAndStyles( attributes );
+	const colorProps = getColorClassesAndStyles( attributes );
+
+	const inputStyle = {
+		...borderProps.style,
+		...colorProps.style,
+	};
+
+	const inputClasses = classNames(
+		'wp-block-form-input__input',
+		colorProps.className,
+		borderProps.className
+	);
+	const TagName = type === 'textarea' ? 'textarea' : 'input';
+
+	if ( 'hidden' === type ) {
+		return <input type={ type } name={ name } value={ value } />;
+	}
+
+	/* eslint-disable jsx-a11y/label-has-associated-control */
+	return (
+		<label
+			className={ classNames( 'wp-block-form-input__label', {
+				'is-label-inline': inlineLabel,
+			} ) }
+		>
+			<span className="wp-block-form-input__label-content">
+				<RichText.Content value={ label } />
+			</span>
+			<TagName
+				className={ inputClasses }
+				type={ 'textarea' === type ? undefined : type }
+				name={ name || getNameFromLabel( label ) }
+				required={ required }
+				aria-required={ required }
+				placeholder={ placeholder || undefined }
+				style={ inputStyle }
+			/>
+		</label>
+	);
+	/* eslint-enable jsx-a11y/label-has-associated-control */
+}

package/src/form-input/style.scss

@@ -0,0 +1,61 @@
+.wp-block-form-input__label {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 0.25em;
+	margin-bottom: 0.5em;
+
+	&.is-label-inline {
+		flex-direction: row;
+		gap: 0.5em;
+		align-items: center;
+
+		.wp-block-form-input__label-content {
+			margin-bottom: 0.5em;
+		}
+	}
+
+	/*
+	Small tweak to left-align the checkbox.
+	Even though `:has` is not currently supported in Firefox, this is a small tweak
+	and does not affect the functionality of the block or the user's experience.
+	There will be a minor inconsistency between browsers. However, it's more important to provide
+	a better experience for 80+% of users, until Firefox catches up and supports `:has`.
+	*/
+	&:has(input[type="checkbox"]) {
+		width: fit-content;
+		flex-direction: row-reverse;
+	}
+}
+
+.wp-block-form-input__label-content {
+	width: fit-content;
+}
+
+.wp-block-form-input__input {
+	padding: 0 0.5em;
+	font-size: 1em;
+	margin-bottom: 0.5em;
+
+	&[type="text"],
+	&[type="password"],
+	&[type="date"],
+	&[type="datetime"],
+	&[type="datetime-local"],
+	&[type="email"],
+	&[type="month"],
+	&[type="number"],
+	&[type="search"],
+	&[type="tel"],
+	&[type="time"],
+	&[type="url"],
+	&[type="week"] {
+		min-height: 2em;
+		line-height: 2;
+		border: 1px solid;
+	}
+}
+
+textarea.wp-block-form-input__input {
+	min-height: 10em;
+}

package/src/form-input/variations.js

@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+const variations = [
+	{
+		name: 'text',
+		title: __( 'Text input' ),
+		icon: 'edit-page',
+		description: __( 'A generic text input.' ),
+		attributes: { type: 'text' },
+		isDefault: true,
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) =>
+			! blockAttributes?.type || blockAttributes?.type === 'text',
+	},
+	{
+		name: 'textarea',
+		title: __( 'Textarea input' ),
+		icon: 'testimonial',
+		description: __(
+			'A textarea input to allow entering multiple lines of text.'
+		),
+		attributes: { type: 'textarea' },
+		isDefault: true,
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) => blockAttributes?.type === 'textarea',
+	},
+	{
+		name: 'checkbox',
+		title: __( 'Checkbox input' ),
+		description: __( 'A simple checkbox input.' ),
+		icon: 'forms',
+		attributes: { type: 'checkbox', inlineLabel: true },
+		isDefault: true,
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) => blockAttributes?.type === 'checkbox',
+	},
+	{
+		name: 'email',
+		title: __( 'Email input' ),
+		icon: 'email',
+		description: __( 'Used for email addresses.' ),
+		attributes: { type: 'email' },
+		isDefault: true,
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) => blockAttributes?.type === 'email',
+	},
+	{
+		name: 'url',
+		title: __( 'URL input' ),
+		icon: 'admin-site',
+		description: __( 'Used for URLs.' ),
+		attributes: { type: 'url' },
+		isDefault: true,
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) => blockAttributes?.type === 'url',
+	},
+	{
+		name: 'tel',
+		title: __( 'Telephone input' ),
+		icon: 'phone',
+		description: __( 'Used for phone numbers.' ),
+		attributes: { type: 'tel' },
+		isDefault: true,
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) => blockAttributes?.type === 'tel',
+	},
+	{
+		name: 'number',
+		title: __( 'Number input' ),
+		icon: 'edit-page',
+		description: __( 'A numeric input.' ),
+		attributes: { type: 'number' },
+		isDefault: true,
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) => blockAttributes?.type === 'number',
+	},
+];
+
+export default variations;

package/src/form-submission-notification/block.json

@@ -0,0 +1,19 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"__experimental": true,
+	"name": "core/form-submission-notification",
+	"title": "Form Submission Notification",
+	"category": "common",
+	"parent": [ "core/form" ],
+	"description": "Provide a notification message after the form has been submitted.",
+	"keywords": [ "form", "feedback", "notification", "message" ],
+	"textdomain": "default",
+	"icon": "feedback",
+	"attributes": {
+		"type": {
+			"type": "string",
+			"default": "success"
+		}
+	}
+}

package/src/form-submission-notification/edit.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	InnerBlocks,
+	useBlockProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+const TEMPLATE = [
+	[
+		'core/paragraph',
+		{
+			content: __(
+				"Enter the message you wish displayed for form submission error/success, and select the type of the message (success/error) from the block's options."
+			),
+		},
+	],
+];
+
+const Edit = ( { attributes, clientId } ) => {
+	const { type } = attributes;
+	const blockProps = useBlockProps( {
+		className: classnames( 'wp-block-form-submission-notification', {
+			[ `form-notification-type-${ type }` ]: type,
+		} ),
+	} );
+
+	const { hasInnerBlocks } = useSelect(
+		( select ) => {
+			const { getBlock } = select( blockEditorStore );
+			const block = getBlock( clientId );
+			return {
+				hasInnerBlocks: !! ( block && block.innerBlocks.length ),
+			};
+		},
+		[ clientId ]
+	);
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+		renderAppender: hasInnerBlocks
+			? undefined
+			: InnerBlocks.ButtonBlockAppender,
+	} );
+
+	return (
+		<div
+			{ ...innerBlocksProps }
+			data-message-success={ __( 'Submission success notification' ) }
+			data-message-error={ __( 'Submission error notification' ) }
+		/>
+	);
+};
+export default Edit;