@wordpress/block-library 10.6.1-next.v.202609031004.0 → 11.0.0

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);
-		}
-	}
-}

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

@@ -1,33 +0,0 @@
-import { group as icon } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-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 };
-
-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."
-			),
-		},
-	],
-];
-
-export const settings = {
-	icon,
-	template: TEMPLATE,
-	edit,
-	save,
-	variations,
-	example: {},
-};
-
-export const init = () => initBlock( { name, metadata, settings } );

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

@@ -1,48 +0,0 @@
-<?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

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

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

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

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

@@ -1,56 +0,0 @@
-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/README.md

@@ -1,54 +0,0 @@
-# Form Submit Button
-
-<!-- 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>
-
-A submission button for forms.
-
-- **Name:** `core/form-submit-button`
-- **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:** [Static](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/) (saved in post content)
-- **Keywords:** `submit`, `button`, `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/)
-
-**[Allowed](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#allowed-blocks) inner blocks:**
-- [`core/buttons`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/core-block-buttons/)
-- [`core/button`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/core-block-button/)
-
-## Attributes
-
-_Defined via the [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) property in block.json._
-
-_This block has no custom attributes._
-
-## 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 [**static block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). The markup is saved directly in the post content.
-
-```html
-<!-- wp:form-submit-button -->
-<div class="wp-block-form-submit-button"><!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button {"tagName":"button","type":"submit"} -->
-<div class="wp-block-button"><button type="submit" class="wp-block-button__link wp-element-button">Submit</button></div>
-<!-- /wp:button --></div>
-<!-- /wp:buttons --></div>
-<!-- /wp:form-submit-button -->
-```
-
-## Source
-
-- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/form-submit-button/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-submit-button/) — browse the `edit` and `save` source files, `index.php`, and more.
-
-<!-- END TOKEN(Autogenerated block API docs) -->

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

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