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

package/src/form-input/edit.jsx

@@ -1,187 +0,0 @@
-import clsx from 'clsx';
-import { __ } from '@wordpress/i18n';
-import {
-	InspectorControls,
-	RichText,
-	useBlockProps,
-	__experimentalUseBorderProps as useBorderProps,
-	__experimentalUseColorProps as useColorProps,
-} from '@wordpress/block-editor';
-import {
-	TextControl,
-	CheckboxControl,
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
-import { useRef } from '@wordpress/element';
-import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
-
-function InputFieldBlock( { attributes, setAttributes, className } ) {
-	const { type, name, label, inlineLabel, required, placeholder, value } =
-		attributes;
-	const blockProps = useBlockProps();
-	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-	const ref = useRef();
-	const TagName = type === 'textarea' ? 'textarea' : 'input';
-
-	const borderProps = useBorderProps( attributes );
-	const colorProps = useColorProps( attributes );
-	if ( ref.current ) {
-		ref.current.focus();
-	}
-
-	// Note: radio inputs aren't implemented yet.
-	const isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
-
-	const controls = (
-		<>
-			{ 'hidden' !== type && (
-				<InspectorControls>
-					<ToolsPanel
-						label={ __( 'Settings' ) }
-						resetAll={ () => {
-							setAttributes( {
-								inlineLabel: false,
-								required: false,
-							} );
-						} }
-						dropdownMenuProps={ dropdownMenuProps }
-					>
-						{ 'checkbox' !== type && (
-							<ToolsPanelItem
-								label={ __( 'Inline label' ) }
-								hasValue={ () => !! inlineLabel }
-								onDeselect={ () =>
-									setAttributes( { inlineLabel: false } )
-								}
-								isShownByDefault
-							>
-								<CheckboxControl
-									label={ __( 'Inline label' ) }
-									checked={ inlineLabel }
-									onChange={ ( newVal ) => {
-										setAttributes( {
-											inlineLabel: newVal,
-										} );
-									} }
-								/>
-							</ToolsPanelItem>
-						) }
-
-						<ToolsPanelItem
-							label={ __( 'Required' ) }
-							hasValue={ () => !! required }
-							onDeselect={ () =>
-								setAttributes( { required: false } )
-							}
-							isShownByDefault
-						>
-							<CheckboxControl
-								label={ __( 'Required' ) }
-								checked={ required }
-								onChange={ ( newVal ) => {
-									setAttributes( {
-										required: newVal,
-									} );
-								} }
-							/>
-						</ToolsPanelItem>
-					</ToolsPanel>
-				</InspectorControls>
-			) }
-			<InspectorControls group="advanced">
-				<TextControl
-					autoComplete="off"
-					label={ __( 'Name' ) }
-					value={ name }
-					onChange={ ( newVal ) => {
-						setAttributes( {
-							name: newVal,
-						} );
-					} }
-					help={ __(
-						'Affects the "name" attribute of the input element, and is used as a name for the form submission results.'
-					) }
-				/>
-				{ 'hidden' === type && (
-					<TextControl
-						autoComplete="off"
-						label={ __( 'Value' ) }
-						value={ value }
-						onChange={ ( newVal ) =>
-							setAttributes( { value: newVal } )
-						}
-						help={ __(
-							'Sets the stored value for this hidden field.'
-						) }
-					/>
-				) }
-			</InspectorControls>
-		</>
-	);
-
-	const content = (
-		<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 }
-			placeholder={ __( 'Type the label for this input' ) }
-		/>
-	);
-
-	if ( 'hidden' === type ) {
-		return (
-			<div { ...blockProps }>
-				{ controls }
-				<span
-					className="wp-block-form-input__label is-input-hidden"
-					data-message={ __( 'Hidden field' ) }
-				/>
-			</div>
-		);
-	}
-
-	return (
-		<div { ...blockProps }>
-			{ controls }
-			<span
-				className={ clsx( 'wp-block-form-input__label', {
-					'is-label-inline': inlineLabel || 'checkbox' === type,
-				} ) }
-			>
-				{ ! isCheckboxOrRadio && content }
-				<TagName
-					type={ 'textarea' === type ? undefined : type }
-					className={ clsx(
-						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,
-					} }
-				/>
-				{ isCheckboxOrRadio && content }
-			</span>
-		</div>
-	);
-}
-
-export default InputFieldBlock;

package/src/form-input/editor.scss

@@ -1,24 +0,0 @@
-.wp-block-form-input {
-	.is-input-hidden {
-		display: flex;
-		position: relative;
-		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);
-		justify-content: center;
-		align-items: center;
-
-		&::after {
-			content: attr(data-message);
-		}
-	}
-	&.is-selected {
-		.is-input-hidden {
-			opacity: 1;
-			background: none;
-		}
-	}
-}

package/src/form-input/icons.jsx

@@ -1,7 +0,0 @@
-import { SVG, Path } from '@wordpress/primitives';
-
-export const icon = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M5.547 18.892A.99.99 0 0 0 6 19h.72v1H6a1.99 1.99 0 0 1-.908-.22l.455-.888ZM9.12 20H7.68v-1h1.44v1Zm2.4 0h-1.44v-1h1.44v1Zm2.4 0h-1.44v-1h1.44v1Zm2.4 0h-1.44v-1h1.44v1Zm2.587-.22c-.272.14-.58.22-.907.22h-.72v-1H18a.99.99 0 0 0 .453-.108l.454.888ZM5.108 17.547a.99.99 0 0 0 0 .906l-.89.454a1.99 1.99 0 0 1 0-1.815l.89.455Zm14.672-.455a1.99 1.99 0 0 1 0 1.815l-.888-.454a.99.99 0 0 0 0-.906l.888-.455ZM6.72 17H6a.99.99 0 0 0-.453.108l-.455-.89A1.99 1.99 0 0 1 6 16h.72v1ZM18 16c.327 0 .635.08.907.219l-.454.89A.99.99 0 0 0 18 17h-.72v-1H18Zm-8.88 1H7.68v-1h1.44v1Zm2.4 0h-1.44v-1h1.44v1Zm2.4 0h-1.44v-1h1.44v1Zm2.4 0h-1.44v-1h1.44v1ZM5.5 14.28H4.25v-1H5.5v1Zm2.5 0H6.5v-1H8v1Zm2.5 0H9v-1h1.5v1Zm2.25 0H11.5v-1h1.25v1ZM18 7a2 2 0 1 1 0 4H6a2 2 0 1 1 0-4h12ZM6 8.5a.5.5 0 0 0 0 1h12a.5.5 0 0 0 0-1H6Zm7-3H4V4h9v1.5Z" />
-	</SVG>
-);

package/src/form-input/index.js

@@ -1,22 +0,0 @@
-import initBlock from '../utils/init-block';
-import deprecated from './deprecated';
-import edit from './edit';
-import metadata from './block.json';
-import save from './save';
-import variations from './variations';
-import { icon } from './icons';
-
-const { name } = metadata;
-
-export { metadata, name };
-
-export const settings = {
-	icon,
-	deprecated,
-	edit,
-	save,
-	variations,
-	example: {},
-};
-
-export const init = () => initBlock( { name, metadata, settings } );

package/src/form-input/index.php

@@ -1,47 +0,0 @@
-<?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'];
-	}
-
-	$user_logged_in = is_user_logged_in();
-
-	if ( 'logged-in' === $visibility_permissions && ! $user_logged_in ) {
-		return '';
-	}
-	if ( 'logged-out' === $visibility_permissions && $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

@@ -1,3 +0,0 @@
-import { init } from './';
-
-export default init();

package/src/form-input/save.jsx

@@ -1,89 +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';
-
-/**
- * Get the name attribute from a content string.
- *
- * @param {string} content The block content.
- *
- * @return {string} Returns the slug.
- */
-const getNameFromLabel = ( 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, '' )
-	);
-};
-
-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 = clsx(
-		'wp-block-form-input__input',
-		colorProps.className,
-		borderProps.className
-	);
-	const TagName = type === 'textarea' ? 'textarea' : 'input';
-
-	const blockProps = useBlockProps.save();
-
-	// Note: radio inputs aren't implemented yet.
-	const isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
-
-	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,
-				} ) }
-			>
-				{ ! isCheckboxOrRadio && (
-					<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 }
-				/>
-				{ isCheckboxOrRadio && (
-					<span className="wp-block-form-input__label-content">
-						<RichText.Content value={ label } />
-					</span>
-				) }
-			</label>
-			{ /* eslint-enable jsx-a11y/label-has-associated-control */ }
-		</div>
-	);
-}

package/src/form-input/style.scss

@@ -1,64 +0,0 @@
-:where(.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;
-		}
-	}
-
-	&:has(input[type="checkbox"]) {
-		flex-direction: row;
-		width: fit-content;
-
-		.wp-block-form-input__label-content {
-			margin: 0;
-		}
-	}
-
-	&:has(.wp-block-form-input__label-content + input[type="checkbox"]) {
-		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This style is required for old markup. */
-		flex-direction: row-reverse;
-	}
-}
-
-:where(.wp-block-form-input__label-content) {
-	width: fit-content;
-}
-
-:where(.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-width: 1px;
-		border-style: solid;
-	}
-}
-
-textarea.wp-block-form-input__input {
-	min-height: 10em;
-}

package/src/form-input/variations.js

@@ -1,82 +0,0 @@
-import { __ } from '@wordpress/i18n';
-
-const variations = [
-	{
-		name: 'text',
-		title: __( 'Text Input' ),
-		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' ),
-		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.' ),
-		attributes: { type: 'checkbox', inlineLabel: true },
-		isDefault: true,
-		scope: [ 'inserter', 'transform' ],
-		isActive: ( blockAttributes ) => blockAttributes?.type === 'checkbox',
-	},
-	{
-		name: 'email',
-		title: __( 'Email Input' ),
-		description: __( 'Used for email addresses.' ),
-		attributes: { type: 'email' },
-		isDefault: true,
-		scope: [ 'inserter', 'transform' ],
-		isActive: ( blockAttributes ) => blockAttributes?.type === 'email',
-	},
-	{
-		name: 'url',
-		title: __( 'URL Input' ),
-		description: __( 'Used for URLs.' ),
-		attributes: { type: 'url' },
-		isDefault: true,
-		scope: [ 'inserter', 'transform' ],
-		isActive: ( blockAttributes ) => blockAttributes?.type === 'url',
-	},
-	{
-		name: 'tel',
-		title: __( 'Telephone Input' ),
-		description: __( 'Used for phone numbers.' ),
-		attributes: { type: 'tel' },
-		isDefault: true,
-		scope: [ 'inserter', 'transform' ],
-		isActive: ( blockAttributes ) => blockAttributes?.type === 'tel',
-	},
-	{
-		name: 'number',
-		title: __( 'Number Input' ),
-		description: __( 'A numeric input.' ),
-		attributes: { type: 'number' },
-		isDefault: true,
-		scope: [ 'inserter', 'transform' ],
-		isActive: ( blockAttributes ) => blockAttributes?.type === 'number',
-	},
-	{
-		name: 'hidden',
-		title: __( 'Hidden Input' ),
-		icon: 'visibility',
-		description: __( 'A hidden input field.' ),
-		attributes: { type: 'hidden' },
-		isDefault: true,
-		scope: [ 'inserter', 'transform' ],
-		isActive: ( blockAttributes ) => blockAttributes?.type === 'hidden',
-	},
-];
-
-export default variations;

package/src/form-submission-notification/README.md

@@ -1,50 +0,0 @@
-# Form Submission Notification
-
-<!-- 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>
-
-Provide a notification message after the form has been submitted.
-
-- **Name:** `core/form-submission-notification`
-- **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:** `form`, `feedback`, `notification`, `message`
-
-## 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` | `"success"` | — |
-
-## Supports
-
-_Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
-
-_This block does not declare explicit supports._
-
-## 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-submission-notification -->
-<div class="wp-block-form-submission-notification form-notification-type-success"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"#000000"}}}},"backgroundColor":"#00D084","textColor":"#000000"} -->
-<p class="has-000000-color has-00-d-084-background-color has-text-color has-background has-link-color">Your form has been submitted successfully.</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:form-submission-notification -->
-```
-
-## Source
-
-- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/form-submission-notification/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-submission-notification/) — browse the `edit` and `save` source files, `index.php`, and more.
-
-<!-- END TOKEN(Autogenerated block API docs) -->

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

@@ -1,19 +0,0 @@
-{
-	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 3,
-	"__experimental": true,
-	"name": "core/form-submission-notification",
-	"title": "Form Submission Notification",
-	"category": "widgets",
-	"ancestor": [ "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.jsx

@@ -1,44 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import {
-	InnerBlocks,
-	useBlockProps,
-	useInnerBlocksProps,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import clsx from 'clsx';
-
-const Edit = ( { attributes, clientId } ) => {
-	const { type } = attributes;
-	const blockProps = useBlockProps( {
-		className: clsx( '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, {
-		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

@@ -1,45 +0,0 @@
-.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);
-		}
-	}
-}