@wordpress/block-library 10.5.2-next.v.202608281122.0 → 11.0.0

package/src/form/variations.js

@@ -1,133 +0,0 @@
-import { __ } from '@wordpress/i18n';
-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

@@ -1,54 +0,0 @@
-let formSettings;
-try {
-	formSettings = JSON.parse(
-		document.getElementById(
-			'wp-script-module-data-@wordpress/block-library/form/view'
-		)?.textContent
-	);
-} catch {}
-
-document.querySelectorAll( 'form.wp-block-form' ).forEach( function ( form ) {
-	// Bail If the form settings not provided or the form is not using the mailto: action.
-	if (
-		! formSettings ||
-		! 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 = formSettings.nonce;
-		formData.action = formSettings.action;
-		formData._wp_http_referer = window.location.href;
-		formData.formAction = form.action;
-
-		try {
-			const response = await fetch( formSettings.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 {
-			redirectNotification( 'error' );
-		}
-	} );
-} );

package/src/form-input/README.md

@@ -1,74 +0,0 @@
-# Input Field
-
-<!-- START TOKEN(Autogenerated block API docs) -->
-<div class="callout callout-warning">This block is <strong>experimental</strong> and may change or be removed without notice.</div>
-
-The basic building block for forms.
-
-- **Name:** `core/form-input`
-- **Category:** [widgets](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-widgets/)
-- **API Version:** [3](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/)
-- **Block Type:** [Hybrid](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/) (static save + server enhancements)
-- **Keywords:** `input`, `form`
-
-## Block Relationships
-
-**[Ancestor](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#ancestor) blocks:**
-- [`core/form`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-widgets/core-block-form/)
-
-## Attributes
-
-_Defined via the [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) property in block.json._
-
-| Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
-|-----------|------|---------|-------------|
-| `type` | `string` | `"text"` | — |
-| `name` | `string` | — | — |
-| `label` | `rich-text` | `"Label"` | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `rich-text`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `.wp-block-form-input__label-content`. [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
-| `inlineLabel` | `boolean` | `false` | — |
-| `required` | `boolean` | `false` | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `attribute`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `.wp-block-form-input__input`. [HTML attr](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#attribute-source): `required` |
-| `placeholder` | `string` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `attribute`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `.wp-block-form-input__input`. [HTML attr](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#attribute-source): `placeholder`. [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
-| `value` | `string` | `""` | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `attribute`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `input`. [HTML attr](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#attribute-source): `value` |
-| `visibilityPermissions` | `string` | `"all"` | — |
-
-## Supports
-
-_Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
-
-- [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
-- [`reusable`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#reusable): `false`
-- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
-  - `margin`: `["top","bottom"]`
-
-## Block Markup
-
-This is a [**hybrid block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It saves static markup that the server may enhance during rendering.
-
-```html
-<!-- wp:form-input -->
-<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="text" name="label" aria-required="false"/></label></div>
-<!-- /wp:form-input -->
-
-<!-- wp:form-input {"type":"email"} -->
-<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="email" name="label" aria-required="false"/></label></div>
-<!-- /wp:form-input -->
-
-<!-- wp:form-input {"type":"number"} -->
-<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="number" name="label" aria-required="false"/></label></div>
-<!-- /wp:form-input -->
-
-<!-- wp:form-input {"type":"tel"} -->
-<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="tel" name="label" aria-required="false"/></label></div>
-<!-- /wp:form-input -->
-
-<!-- wp:form-input {"type":"url"} -->
-<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="url" name="label" aria-required="false"/></label></div>
-<!-- /wp:form-input -->
-```
-
-## Source
-
-- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/form-input/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
-- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/form-input/) — browse the `edit` and `save` source files, `index.php`, and more.
-
-<!-- END TOKEN(Autogenerated block API docs) -->

package/src/form-input/block.json

@@ -1,72 +0,0 @@
-{
-	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 3,
-	"__experimental": true,
-	"name": "core/form-input",
-	"title": "Input Field",
-	"category": "widgets",
-	"ancestor": [ "core/form" ],
-	"description": "The basic building block for forms.",
-	"keywords": [ "input", "form" ],
-	"textdomain": "default",
-	"attributes": {
-		"type": {
-			"type": "string",
-			"default": "text"
-		},
-		"name": {
-			"type": "string"
-		},
-		"label": {
-			"type": "rich-text",
-			"default": "Label",
-			"selector": ".wp-block-form-input__label-content",
-			"source": "rich-text",
-			"role": "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",
-			"role": "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/deprecated.jsx

@@ -1,248 +0,0 @@
-import clsx from 'clsx';
-import removeAccents from 'remove-accents';
-import {
-	RichText,
-	useBlockProps,
-	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
-	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
-} from '@wordpress/block-editor';
-import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
-
-const getNameFromLabelV1 = ( content ) => {
-	return (
-		removeAccents( stripHTML( content ) )
-			// 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, '' )
-	);
-};
-
-const v2 = {
-	attributes: {
-		type: {
-			type: 'string',
-			default: 'text',
-		},
-		name: {
-			type: 'string',
-		},
-		label: {
-			type: 'string',
-			default: 'Label',
-			selector: '.wp-block-form-input__label-content',
-			source: 'html',
-			role: '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',
-			role: '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,
-			},
-		},
-	},
-	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 = clsx(
-			'wp-block-form-input__input',
-			colorProps.className,
-			borderProps.className
-		);
-		const TagName = type === 'textarea' ? 'textarea' : 'input';
-
-		const blockProps = useBlockProps.save();
-
-		if ( 'hidden' === type ) {
-			return <input type={ type } name={ name } value={ value } />;
-		}
-
-		return (
-			<div { ...blockProps }>
-				{ /* eslint-disable jsx-a11y/label-has-associated-control */ }
-				<label
-					className={ clsx( '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 || getNameFromLabelV1( label ) }
-						required={ required }
-						aria-required={ required }
-						placeholder={ placeholder || undefined }
-						style={ inputStyle }
-					/>
-				</label>
-				{ /* eslint-enable jsx-a11y/label-has-associated-control */ }
-			</div>
-		);
-	},
-};
-
-// Version without wrapper div in saved markup
-// See: https://github.com/WordPress/gutenberg/pull/56507
-const v1 = {
-	attributes: {
-		type: {
-			type: 'string',
-			default: 'text',
-		},
-		name: {
-			type: 'string',
-		},
-		label: {
-			type: 'string',
-			default: 'Label',
-			selector: '.wp-block-form-input__label-content',
-			source: 'html',
-			role: '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',
-			role: 'content',
-		},
-		value: {
-			type: 'string',
-			default: '',
-			selector: 'input',
-			source: 'attribute',
-			attribute: 'value',
-		},
-		visibilityPermissions: {
-			type: 'string',
-			default: 'all',
-		},
-	},
-	supports: {
-		className: false,
-		anchor: true,
-		reusable: false,
-		spacing: {
-			margin: [ 'top', 'bottom' ],
-		},
-		__experimentalBorder: {
-			radius: true,
-			__experimentalSkipSerialization: true,
-			__experimentalDefaultControls: {
-				radius: true,
-			},
-		},
-	},
-	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 = clsx(
-			'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={ clsx( '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 || getNameFromLabelV1( label ) }
-					required={ required }
-					aria-required={ required }
-					placeholder={ placeholder || undefined }
-					style={ inputStyle }
-				/>
-			</label>
-		);
-		/* eslint-enable jsx-a11y/label-has-associated-control */
-	},
-};
-
-const deprecated = [ v2, v1 ];
-
-export default deprecated;