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

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;

package/src/form-submission-notification/editor.scss

@@ -0,0 +1,45 @@
+.wp-block-form-submission-notification {
+	> * {
+		opacity: 0.25;
+		border: 1px dashed;
+		box-sizing: border-box;
+		background: repeating-linear-gradient(45deg, transparent, transparent 5px, currentColor 5px, currentColor 6px);
+	}
+
+	&.is-selected,
+	&:has(.is-selected) {
+		> * {
+			opacity: 1;
+			background: none;
+		}
+
+		&::after {
+			display: none !important;
+		}
+	}
+
+	&::after {
+		display: flex;
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		justify-content: center;
+		align-items: center;
+		font-size: 1.1em;
+		// font-weight: bold;
+	}
+
+	&.form-notification-type-success {
+		&::after {
+			content: attr(data-message-success);
+		}
+	}
+
+	&.form-notification-type-error {
+		&::after {
+			content: attr(data-message-error);
+		}
+	}
+}

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

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { group as icon } from '@wordpress/icons';
+
+/**
+ * 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 = {
+	icon,
+	edit,
+	save,
+	variations,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/form-submission-notification/index.php

@@ -0,0 +1,48 @@
+<?php
+/**
+ * Server-side rendering of the `core/form-submission-notification` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/form-submission-notification` 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_submission_notification( $attributes, $content ) {
+	$show = isset( $_GET['wp-form-result'] ) && sanitize_text_field( wp_unslash( $_GET['wp-form-result'] ) ) === $attributes['type'];
+	/**
+	 * Filters whether to show the form submission notification block.
+	 *
+	 * @param bool   $show       Whether to show the form submission notification block.
+	 * @param array  $attributes The block attributes.
+	 * @param string $content    The saved content.
+	 *
+	 * @return bool Whether to show the form submission notification block.
+	 */
+	$show = apply_filters( 'show_form_submission_notification_block', $show, $attributes, $content );
+	if ( ! $show ) {
+		return '';
+	}
+	return $content;
+}
+
+/**
+ * Registers the `core/form-submission-notification` block on server.
+ */
+function register_block_core_form_submission_notification() {
+	if ( ! gutenberg_is_experiment_enabled( 'gutenberg-form-blocks' ) ) {
+		return;
+	}
+	register_block_type_from_metadata(
+		__DIR__ . '/form-submission-notification',
+		array(
+			'render_callback' => 'render_block_core_form_submission_notification',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_form_submission_notification' );

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

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

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

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+export default function save( { attributes } ) {
+	const { type } = attributes;
+
+	return (
+		<div
+			{ ...useInnerBlocksProps.save(
+				useBlockProps.save( {
+					className: classnames(
+						'wp-block-form-submission-notification',
+						{
+							[ `form-notification-type-${ type }` ]: type,
+						}
+					),
+				} )
+			) }
+		/>
+	);
+}

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

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+const variations = [
+	{
+		name: 'form-submission-success',
+		title: __( 'Form Submission Success' ),
+		description: __( 'Success message for form submissions.' ),
+		attributes: {
+			type: 'success',
+		},
+		isDefault: true,
+		innerBlocks: [
+			[
+				'core/paragraph',
+				{
+					content: __( 'Your form has been submitted successfully.' ),
+					backgroundColor: '#00D084',
+					textColor: '#000000',
+					style: {
+						elements: { link: { color: { text: '#000000' } } },
+					},
+				},
+			],
+		],
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) =>
+			! blockAttributes?.type || blockAttributes?.type === 'success',
+	},
+	{
+		name: 'form-submission-error',
+		title: __( 'Form Submission Error' ),
+		description: __( 'Error/failure message for form submissions.' ),
+		attributes: {
+			type: 'error',
+		},
+		isDefault: false,
+		innerBlocks: [
+			[
+				'core/paragraph',
+				{
+					content: __( 'There was an error submitting your form.' ),
+					backgroundColor: '#CF2E2E',
+					textColor: '#FFFFFF',
+					style: {
+						elements: { link: { color: { text: '#FFFFFF' } } },
+					},
+				},
+			],
+		],
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) =>
+			! blockAttributes?.type || blockAttributes?.type === 'error',
+	},
+];
+
+export default variations;

package/src/form-submit-button/block.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"__experimental": true,
+	"name": "core/form-submit-button",
+	"title": "Form Submit Button",
+	"category": "common",
+	"icon": "button",
+	"parent": [ "core/form" ],
+	"description": "A submission button for forms.",
+	"keywords": [ "submit", "button", "form" ],
+	"textdomain": "default",
+	"style": [ "wp-block-form-submit-button" ]
+}

package/src/form-submit-button/edit.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+const TEMPLATE = [
+	[
+		'core/buttons',
+		{},
+		[
+			[
+				'core/button',
+				{
+					text: __( 'Submit' ),
+					tagName: 'button',
+				},
+			],
+		],
+	],
+];
+const Edit = () => {
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: TEMPLATE,
+		template: TEMPLATE,
+		templateLock: 'all',
+	} );
+	return (
+		<div className="wp-block-form-submit-wrapper" { ...innerBlocksProps } />
+	);
+};
+export default Edit;

package/src/form-submit-button/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 } );