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

package/src/cover/block.json

@@ -19,9 +19,6 @@
 		},
 		"alt": {
 			"type": "string",
-			"source": "attribute",
-			"selector": "img",
-			"attribute": "alt",
 			"default": ""
 		},
 		"hasParallax": {

package/src/cover/controls.native.js

@@ -22,7 +22,7 @@ import {
 import { plus } from '@wordpress/icons';
 import { useState, useCallback, useRef } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { useSetting, MediaUpload } from '@wordpress/block-editor';
+import { useSettings, MediaUpload } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -68,14 +68,9 @@ function Controls( {
 		[ minHeight ]
 	);
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'px',
-			'em',
-			'rem',
-			'vw',
-			'vh',
-		],
+		availableUnits: availableUnits || [ 'px', 'em', 'rem', 'vw', 'vh' ],
 		defaultValues: { px: 430, em: 20, rem: 20, vw: 20, vh: 50 },
 	} );
 

package/src/cover/deprecated.js

@@ -244,6 +244,156 @@ const v12BlockSupports = {
 	},
 };
 
+// Deprecation for blocks that does not have the aria-label when the image background is fixed or repeated.
+const v13 = {
+	attributes: v12BlockAttributes,
+	supports: v12BlockSupports,
+	save( { attributes } ) {
+		const {
+			backgroundType,
+			gradient,
+			contentPosition,
+			customGradient,
+			customOverlayColor,
+			dimRatio,
+			focalPoint,
+			useFeaturedImage,
+			hasParallax,
+			isDark,
+			isRepeated,
+			overlayColor,
+			url,
+			alt,
+			id,
+			minHeight: minHeightProp,
+			minHeightUnit,
+			tagName: Tag,
+		} = attributes;
+		const overlayColorClass = getColorClassName(
+			'background-color',
+			overlayColor
+		);
+		const gradientClass = __experimentalGetGradientClass( gradient );
+		const minHeight =
+			minHeightProp && minHeightUnit
+				? `${ minHeightProp }${ minHeightUnit }`
+				: minHeightProp;
+
+		const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
+		const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
+
+		const isImgElement = ! ( hasParallax || isRepeated );
+
+		const style = {
+			minHeight: minHeight || undefined,
+		};
+
+		const bgStyle = {
+			backgroundColor: ! overlayColorClass
+				? customOverlayColor
+				: undefined,
+			background: customGradient ? customGradient : undefined,
+		};
+
+		const objectPosition =
+			// prettier-ignore
+			focalPoint && isImgElement
+					  ? mediaPosition(focalPoint)
+					  : undefined;
+
+		const backgroundImage = url ? `url(${ url })` : undefined;
+
+		const backgroundPosition = mediaPosition( focalPoint );
+
+		const classes = classnames(
+			{
+				'is-light': ! isDark,
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+				'has-custom-content-position':
+					! isContentPositionCenter( contentPosition ),
+			},
+			getPositionClassName( contentPosition )
+		);
+
+		const imgClasses = classnames(
+			'wp-block-cover__image-background',
+			id ? `wp-image-${ id }` : null,
+			{
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+			}
+		);
+
+		const gradientValue = gradient || customGradient;
+
+		return (
+			<Tag { ...useBlockProps.save( { className: classes, style } ) }>
+				<span
+					aria-hidden="true"
+					className={ classnames(
+						'wp-block-cover__background',
+						overlayColorClass,
+						dimRatioToClass( dimRatio ),
+						{
+							'has-background-dim': dimRatio !== undefined,
+							// For backwards compatibility. Former versions of the Cover Block applied
+							// `.wp-block-cover__gradient-background` in the presence of
+							// media, a gradient and a dim.
+							'wp-block-cover__gradient-background':
+								url && gradientValue && dimRatio !== 0,
+							'has-background-gradient': gradientValue,
+							[ gradientClass ]: gradientClass,
+						}
+					) }
+					style={ bgStyle }
+				/>
+
+				{ ! useFeaturedImage &&
+					isImageBackground &&
+					url &&
+					( isImgElement ? (
+						<img
+							className={ imgClasses }
+							alt={ alt }
+							src={ url }
+							style={ { objectPosition } }
+							data-object-fit="cover"
+							data-object-position={ objectPosition }
+						/>
+					) : (
+						<div
+							role="img"
+							className={ imgClasses }
+							style={ { backgroundPosition, backgroundImage } }
+						/>
+					) ) }
+				{ isVideoBackground && url && (
+					<video
+						className={ classnames(
+							'wp-block-cover__video-background',
+							'intrinsic-ignore'
+						) }
+						autoPlay
+						muted
+						loop
+						playsInline
+						src={ url }
+						style={ { objectPosition } }
+						data-object-fit="cover"
+						data-object-position={ objectPosition }
+					/>
+				) }
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-cover__inner-container',
+					} ) }
+				/>
+			</Tag>
+		);
+	},
+};
+
 // Deprecation for blocks to prevent auto overlay color from overriding previously set values.
 const v12 = {
 	attributes: v12BlockAttributes,
@@ -1673,4 +1823,4 @@ const v1 = {
 	},
 };
 
-export default [ v12, v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];
+export default [ v13, v12, v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];

package/src/cover/edit/index.js

@@ -14,7 +14,7 @@ import {
 	withColors,
 	ColorPalette,
 	useBlockProps,
-	useSetting,
+	useSettings,
 	useInnerBlocksProps,
 	__experimentalUseGradient,
 	store as blockEditorStore,
@@ -166,9 +166,12 @@ function CoverEdit( {
 
 	const onSelectMedia = async ( newMedia ) => {
 		const mediaAttributes = attributesFromMedia( newMedia );
+		const isImage = [ newMedia?.type, newMedia?.media_type ].includes(
+			IMAGE_BACKGROUND_TYPE
+		);
 
 		const averageBackgroundColor = await getMediaColor(
-			newMedia?.type === IMAGE_BACKGROUND_TYPE ? newMedia?.url : undefined
+			isImage ? newMedia?.url : undefined
 		);
 
 		let newOverlayColor = overlayColor.color;
@@ -180,7 +183,12 @@ function CoverEdit( {
 			__unstableMarkNextChangeAsNotPersistent();
 		}
 
-		const newDimRatio = dimRatio === 100 ? 50 : dimRatio;
+		// Only set a new dimRatio if there was no previous media selected
+		// to avoid resetting to 50 if it has been explicitly set to 100.
+		// See issue #52835 for context.
+		const newDimRatio =
+			originalUrl === undefined && dimRatio === 100 ? 50 : dimRatio;
+
 		const newIsDark = compositeIsDark(
 			newDimRatio,
 			newOverlayColor,
@@ -310,7 +318,8 @@ function CoverEdit( {
 	const blockProps = useBlockProps( { ref } );
 
 	// Check for fontSize support before we pass a fontSize attribute to the innerBlocks.
-	const hasFontSizes = !! useSetting( 'typography.fontSizes' )?.length;
+	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
+	const hasFontSizes = fontSizes?.length > 0;
 	const innerBlocksTemplate = getInnerBlocksTemplate( {
 		fontSize: hasFontSizes ? 'large' : undefined,
 	} );
@@ -531,7 +540,8 @@ function CoverEdit( {
 					) : (
 						<div
 							ref={ mediaElement }
-							role="img"
+							role={ alt ? 'img' : undefined }
+							aria-label={ alt ? alt : undefined }
 							className={ classnames(
 								classes,
 								'wp-block-cover__image-background'

package/src/cover/edit/inspector-controls.js

@@ -20,7 +20,7 @@ import {
 import { useInstanceId } from '@wordpress/compose';
 import {
 	InspectorControls,
-	useSetting,
+	useSettings,
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseGradient,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
@@ -42,14 +42,9 @@ function CoverHeightInput( {
 	const inputId = `block-cover-height-input-${ instanceId }`;
 	const isPx = unit === 'px';
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'px',
-			'em',
-			'rem',
-			'vw',
-			'vh',
-		],
+		availableUnits: availableUnits || [ 'px', 'em', 'rem', 'vw', 'vh' ],
 		defaultValues: { px: 430, '%': 20, em: 20, rem: 20, vw: 20, vh: 50 },
 	} );
 
@@ -112,7 +107,6 @@ export default function CoverInspectorControls( {
 		isImageBackground,
 		mediaElement,
 		url,
-		isImgElement,
 		overlayColor,
 	} = currentSettings;
 
@@ -202,32 +196,27 @@ export default function CoverInspectorControls( {
 								}
 							/>
 						) }
-						{ ! useFeaturedImage &&
-							url &&
-							isImageBackground &&
-							isImgElement && (
-								<TextareaControl
-									__nextHasNoMarginBottom
-									label={ __( 'Alternative text' ) }
-									value={ alt }
-									onChange={ ( newAlt ) =>
-										setAttributes( { alt: newAlt } )
-									}
-									help={
-										<>
-											<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
-												{ __(
-													'Describe the purpose of the image.'
-												) }
-											</ExternalLink>
-											<br />
+						{ ! useFeaturedImage && url && ! isVideoBackground && (
+							<TextareaControl
+								__nextHasNoMarginBottom
+								label={ __( 'Alternative text' ) }
+								value={ alt }
+								onChange={ ( newAlt ) =>
+									setAttributes( { alt: newAlt } )
+								}
+								help={
+									<>
+										<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
 											{ __(
-												'Leave empty if decorative.'
+												'Describe the purpose of the image.'
 											) }
-										</>
-									}
-								/>
-							) }
+										</ExternalLink>
+										<br />
+										{ __( 'Leave empty if decorative.' ) }
+									</>
+								}
+							/>
+						) }
 						<PanelRow>
 							<Button
 								variant="secondary"

package/src/cover/save.js

@@ -138,7 +138,8 @@ export default function save( { attributes } ) {
 					/>
 				) : (
 					<div
-						role="img"
+						role={ alt ? 'img' : undefined }
+						aria-label={ alt ? alt : undefined }
 						className={ imgClasses }
 						style={ { backgroundPosition, backgroundImage } }
 					/>

package/src/cover/shared.js

@@ -29,7 +29,7 @@ export function mediaPosition( { x, y } = DEFAULT_FOCAL_POINT ) {
 }
 
 export function dimRatioToClass( ratio ) {
-	return ratio === 50 || ! ratio === undefined
+	return ratio === 50 || ratio === undefined
 		? null
 		: 'has-background-dim-' + 10 * Math.round( ratio / 10 );
 }

package/src/editor.scss

@@ -16,6 +16,8 @@
 @import "./details/editor.scss";
 @import "./embed/editor.scss";
 @import "./file/editor.scss";
+@import "./form-input/editor.scss";
+@import "./form-submission-notification/editor.scss";
 @import "./freeform/editor.scss";
 @import "./gallery/editor.scss";
 @import "./group/editor.scss";

package/src/file/index.php

@@ -59,7 +59,8 @@ function render_block_core_file( $attributes, $content, $block ) {
 		$processor->next_tag();
 		$processor->set_attribute( 'data-wp-interactive', '' );
 		$processor->next_tag( 'object' );
-		$processor->set_attribute( 'data-wp-style--display', 'selectors.core.file.hasPdfPreview' );
+		$processor->set_attribute( 'data-wp-bind--hidden', '!selectors.core.file.hasPdfPreview' );
+		$processor->set_attribute( 'hidden', true );
 		return $processor->get_updated_html();
 	}
 

package/src/file/style.scss

@@ -29,12 +29,6 @@
 	margin-bottom: 1em;
 }
 
-@media (max-width: 768px) {
-	.wp-block-file__embed {
-		display: none;
-	}
-}
-
 //This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
 :where(.wp-block-file__button) {
 	border-radius: 2em;

package/src/file/view.js

@@ -5,13 +5,13 @@ import { store } from '@wordpress/interactivity';
 /**
  * Internal dependencies
  */
-import { browserSupportsPdfs } from './utils';
+import { browserSupportsPdfs as hasPdfPreview } from './utils';
 
 store( {
 	selectors: {
 		core: {
 			file: {
-				hasPdfPreview: browserSupportsPdfs() ? 'inherit' : 'none',
+				hasPdfPreview,
 			},
 		},
 	},

package/src/footnotes/block.json

@@ -33,6 +33,7 @@
 		"html": false,
 		"multiple": false,
 		"reusable": false,
+		"inserter": false,
 		"spacing": {
 			"margin": true,
 			"padding": true,

package/src/form/block.json

@@ -0,0 +1,60 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"__experimental": true,
+	"name": "core/form",
+	"title": "Form",
+	"category": "common",
+	"description": "A form.",
+	"keywords": [ "container", "wrapper", "row", "section" ],
+	"textdomain": "default",
+	"icon": "feedback",
+	"attributes": {
+		"submissionMethod": {
+			"type": "string",
+			"default": "email"
+		},
+		"method": {
+			"type": "string",
+			"default": "post"
+		},
+		"action": {
+			"type": "string"
+		},
+		"email": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"className": false,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"__experimentalSelector": "form"
+	},
+	"viewScript": "file:./view.min.js"
+}

package/src/form/edit.js

@@ -0,0 +1,179 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	InnerBlocks,
+	useBlockProps,
+	useInnerBlocksProps,
+	InspectorControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { TextControl, SelectControl, PanelBody } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import {
+	formSubmissionNotificationSuccess,
+	formSubmissionNotificationError,
+} from './utils.js';
+
+const ALLOWED_BLOCKS = [
+	'core/paragraph',
+	'core/heading',
+	'core/form-input',
+	'core/form-submit-button',
+	'core/form-submission-notification',
+];
+
+const TEMPLATE = [
+	formSubmissionNotificationSuccess,
+	formSubmissionNotificationError,
+	[
+		'core/form-input',
+		{
+			type: 'text',
+			label: __( 'Name' ),
+			required: true,
+		},
+	],
+	[
+		'core/form-input',
+		{
+			type: 'email',
+			label: __( 'Email' ),
+			required: true,
+		},
+	],
+	[
+		'core/form-input',
+		{
+			type: 'textarea',
+			label: __( 'Comment' ),
+			required: true,
+		},
+	],
+	[ 'core/form-submit-button', {} ],
+];
+
+const Edit = ( { attributes, setAttributes, clientId } ) => {
+	const { action, method, email, submissionMethod } = attributes;
+	const blockProps = useBlockProps();
+
+	const { hasInnerBlocks } = useSelect(
+		( select ) => {
+			const { getBlock } = select( blockEditorStore );
+			const block = getBlock( clientId );
+			return {
+				hasInnerBlocks: !! ( block && block.innerBlocks.length ),
+			};
+		},
+		[ clientId ]
+	);
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: ALLOWED_BLOCKS,
+		template: TEMPLATE,
+		renderAppender: hasInnerBlocks
+			? undefined
+			: InnerBlocks.ButtonBlockAppender,
+	} );
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings' ) }>
+					<SelectControl
+						// __nextHasNoMarginBottom
+						// size={ '__unstable-large' }
+						label={ __( 'Submissions method' ) }
+						options={ [
+							// TODO: Allow plugins to add their own submission methods.
+							{
+								label: __( 'Send email' ),
+								value: 'email',
+							},
+							{
+								label: __( '- Custom -' ),
+								value: 'custom',
+							},
+						] }
+						value={ submissionMethod }
+						onChange={ ( value ) =>
+							setAttributes( { submissionMethod: value } )
+						}
+						help={
+							submissionMethod === 'custom'
+								? __(
+										'Select the method to use for form submissions. Additional options for the "custom" mode can be found in the "Advanced" section.'
+								  )
+								: __(
+										'Select the method to use for form submissions.'
+								  )
+						}
+					/>
+					{ submissionMethod === 'email' && (
+						<TextControl
+							__nextHasNoMarginBottom
+							autoComplete="off"
+							label={ __( 'Email for form submissions' ) }
+							value={ email }
+							required
+							onChange={ ( value ) => {
+								setAttributes( { email: value } );
+								setAttributes( {
+									action: `mailto:${ value }`,
+								} );
+								setAttributes( { method: 'post' } );
+							} }
+							help={ __(
+								'The email address where form submissions will be sent. Separate multiple email addresses with a comma.'
+							) }
+						/>
+					) }
+				</PanelBody>
+			</InspectorControls>
+			{ submissionMethod !== 'email' && (
+				<InspectorControls group="advanced">
+					<SelectControl
+						__nextHasNoMarginBottom
+						label={ __( 'Method' ) }
+						options={ [
+							{ label: 'Get', value: 'get' },
+							{ label: 'Post', value: 'post' },
+						] }
+						value={ method }
+						onChange={ ( value ) =>
+							setAttributes( { method: value } )
+						}
+						help={ __(
+							'Select the method to use for form submissions.'
+						) }
+					/>
+					<TextControl
+						__nextHasNoMarginBottom
+						autoComplete="off"
+						label={ __( 'Form action' ) }
+						value={ action }
+						onChange={ ( newVal ) => {
+							setAttributes( {
+								action: newVal,
+							} );
+						} }
+						help={ __(
+							'The URL where the form should be submitted.'
+						) }
+					/>
+				</InspectorControls>
+			) }
+			<form
+				{ ...innerBlocksProps }
+				className="wp-block-form"
+				encType={ submissionMethod === 'email' ? 'text/plain' : null }
+			/>
+		</>
+	);
+};
+export default Edit;

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