@wordpress/block-library 8.20.1 → 8.21.0

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

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

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

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

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+
+const Save = () => {
+	const blockProps = useBlockProps.save();
+	return (
+		<div className="wp-block-form-submit-wrapper" { ...blockProps }>
+			<InnerBlocks.Content />
+		</div>
+	);
+};
+export default Save;

package/src/form-submit-button/style.scss

@@ -0,0 +1,3 @@
+.wp-block-form-submit-wrapper {
+	margin-bottom: 0.5em;
+}

package/src/group/block.json

@@ -24,7 +24,6 @@
 		"__experimentalOnEnter": true,
 		"__experimentalOnMerge": true,
 		"__experimentalSettings": true,
-		"__experimentalMetadata": true,
 		"align": [ "wide", "full" ],
 		"anchor": true,
 		"ariaLabel": true,

package/src/heading/index.js

@@ -29,10 +29,12 @@ export const settings = {
 	__experimentalLabel( attributes, { context } ) {
 		const { content, level } = attributes;
 
+		const customName = attributes?.metadata?.name;
+
 		// In the list view, use the block's content as the label.
 		// If the content is empty, fall back to the default label.
-		if ( context === 'list-view' && content ) {
-			return content;
+		if ( context === 'list-view' && ( customName || content ) ) {
+			return attributes?.metadata?.name || content;
 		}
 
 		if ( context === 'accessibility' ) {

package/src/image/image.js

@@ -377,6 +377,8 @@ export default function Image( {
 	const lightboxChecked =
 		!! lightbox?.enabled || ( ! lightbox && !! lightboxSetting?.enabled );
 
+	const lightboxToggleDisabled = linkDestination !== 'none';
+
 	const dimensionsControl = (
 		<DimensionsTool
 			value={ { width, height, scale, aspectRatio } }
@@ -555,6 +557,14 @@ export default function Image( {
 										lightbox: { enabled: newValue },
 									} );
 								} }
+								disabled={ lightboxToggleDisabled }
+								help={
+									lightboxToggleDisabled
+										? __(
+												'“Expand on click” scales the image up, and can’t be combined with a link.'
+										  )
+										: ''
+								}
 							/>
 						</ToolsPanelItem>
 					) }