@wordpress/block-library 8.34.0 → 9.0.0

package/src/cover/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -305,7 +305,7 @@ const v13 = {
 
 		const backgroundPosition = mediaPosition( focalPoint );
 
-		const classes = classnames(
+		const classes = clsx(
 			{
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
@@ -316,7 +316,7 @@ const v13 = {
 			getPositionClassName( contentPosition )
 		);
 
-		const imgClasses = classnames(
+		const imgClasses = clsx(
 			'wp-block-cover__image-background',
 			id ? `wp-image-${ id }` : null,
 			{
@@ -331,7 +331,7 @@ const v13 = {
 			<Tag { ...useBlockProps.save( { className: classes, style } ) }>
 				<span
 					aria-hidden="true"
-					className={ classnames(
+					className={ clsx(
 						'wp-block-cover__background',
 						overlayColorClass,
 						dimRatioToClass( dimRatio ),
@@ -370,7 +370,7 @@ const v13 = {
 					) ) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -467,7 +467,7 @@ const v12 = {
 
 		const backgroundPosition = mediaPosition( focalPoint );
 
-		const classes = classnames(
+		const classes = clsx(
 			{
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
@@ -478,7 +478,7 @@ const v12 = {
 			getPositionClassName( contentPosition )
 		);
 
-		const imgClasses = classnames(
+		const imgClasses = clsx(
 			'wp-block-cover__image-background',
 			id ? `wp-image-${ id }` : null,
 			{
@@ -493,7 +493,7 @@ const v12 = {
 			<Tag { ...useBlockProps.save( { className: classes, style } ) }>
 				<span
 					aria-hidden="true"
-					className={ classnames(
+					className={ clsx(
 						'wp-block-cover__background',
 						overlayColorClass,
 						dimRatioToClass( dimRatio ),
@@ -532,7 +532,7 @@ const v12 = {
 					) ) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -616,7 +616,7 @@ const v11 = {
 
 		const backgroundPosition = mediaPosition( focalPoint );
 
-		const classes = classnames(
+		const classes = clsx(
 			{
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
@@ -627,7 +627,7 @@ const v11 = {
 			getPositionClassName( contentPosition )
 		);
 
-		const imgClasses = classnames(
+		const imgClasses = clsx(
 			'wp-block-cover__image-background',
 			id ? `wp-image-${ id }` : null,
 			{
@@ -642,7 +642,7 @@ const v11 = {
 			<div { ...useBlockProps.save( { className: classes, style } ) }>
 				<span
 					aria-hidden="true"
-					className={ classnames(
+					className={ clsx(
 						'wp-block-cover__background',
 						overlayColorClass,
 						dimRatioToClass( dimRatio ),
@@ -681,7 +681,7 @@ const v11 = {
 					) ) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -765,7 +765,7 @@ const v10 = {
 				 ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
 				 : undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			{
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
@@ -782,7 +782,7 @@ const v10 = {
 			<div { ...useBlockProps.save( { className: classes, style } ) }>
 				<span
 					aria-hidden="true"
-					className={ classnames(
+					className={ clsx(
 						'wp-block-cover__background',
 						overlayColorClass,
 						dimRatioToClass( dimRatio ),
@@ -805,7 +805,7 @@ const v10 = {
 					isImgElement &&
 					url && (
 						<img
-							className={ classnames(
+							className={ clsx(
 								'wp-block-cover__image-background',
 								id ? `wp-image-${ id }` : null
 							) }
@@ -818,7 +818,7 @@ const v10 = {
 					) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -900,7 +900,7 @@ const v9 = {
 				 ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
 				 : undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			{
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
@@ -917,7 +917,7 @@ const v9 = {
 			<div { ...useBlockProps.save( { className: classes, style } ) }>
 				<span
 					aria-hidden="true"
-					className={ classnames(
+					className={ clsx(
 						'wp-block-cover__background',
 						overlayColorClass,
 						dimRatioToClass( dimRatio ),
@@ -937,7 +937,7 @@ const v9 = {
 
 				{ isImageBackground && isImgElement && url && (
 					<img
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__image-background',
 							id ? `wp-image-${ id }` : null
 						) }
@@ -950,7 +950,7 @@ const v9 = {
 				) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -1032,7 +1032,7 @@ const v8 = {
 				 ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
 				 : undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			{
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
@@ -1047,7 +1047,7 @@ const v8 = {
 			<div { ...useBlockProps.save( { className: classes, style } ) }>
 				<span
 					aria-hidden="true"
-					className={ classnames(
+					className={ clsx(
 						overlayColorClass,
 						dimRatioToClass( dimRatio ),
 						'wp-block-cover__gradient-background',
@@ -1064,7 +1064,7 @@ const v8 = {
 
 				{ isImageBackground && isImgElement && url && (
 					<img
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__image-background',
 							id ? `wp-image-${ id }` : null
 						) }
@@ -1077,7 +1077,7 @@ const v8 = {
 				) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -1182,7 +1182,7 @@ const v7 = {
 					? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
 					: undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
 			{
@@ -1202,7 +1202,7 @@ const v7 = {
 				{ url && ( gradient || customGradient ) && dimRatio !== 0 && (
 					<span
 						aria-hidden="true"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__gradient-background',
 							gradientClass
 						) }
@@ -1215,7 +1215,7 @@ const v7 = {
 				) }
 				{ isImageBackground && isImgElement && url && (
 					<img
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__image-background',
 							id ? `wp-image-${ id }` : null
 						) }
@@ -1228,7 +1228,7 @@ const v7 = {
 				) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -1333,7 +1333,7 @@ const v6 = {
 			}
 		}
 
-		const classes = classnames(
+		const classes = clsx(
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
 			{
@@ -1353,7 +1353,7 @@ const v6 = {
 				{ url && ( gradient || customGradient ) && dimRatio !== 0 && (
 					<span
 						aria-hidden="true"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__gradient-background',
 							gradientClass
 						) }
@@ -1436,7 +1436,7 @@ const v5 = {
 		}
 		style.minHeight = minHeight || undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
 			{
@@ -1452,7 +1452,7 @@ const v5 = {
 				{ url && ( gradient || customGradient ) && dimRatio !== 0 && (
 					<span
 						aria-hidden="true"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__gradient-background',
 							gradientClass
 						) }
@@ -1533,7 +1533,7 @@ const v4 = {
 		}
 		style.minHeight = minHeight || undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
 			{
@@ -1549,7 +1549,7 @@ const v4 = {
 				{ url && ( gradient || customGradient ) && dimRatio !== 0 && (
 					<span
 						aria-hidden="true"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__gradient-background',
 							gradientClass
 						) }
@@ -1623,7 +1623,7 @@ const v3 = {
 			}%`;
 		}
 
-		const classes = classnames(
+		const classes = clsx(
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
 			{
@@ -1716,7 +1716,7 @@ const v2 = {
 			style.backgroundColor = customOverlayColor;
 		}
 
-		const classes = classnames(
+		const classes = clsx(
 			'wp-block-cover-image',
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
@@ -1785,7 +1785,7 @@ const v1 = {
 	save( { attributes } ) {
 		const { url, title, hasParallax, dimRatio, align } = attributes;
 		const style = backgroundImageStyles( url );
-		const classes = classnames(
+		const classes = clsx(
 			'wp-block-cover-image',
 			dimRatioToClassV1( dimRatio ),
 			{

package/src/cover/edit/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -447,10 +447,7 @@ function CoverEdit( {
 				) }
 				<TagName
 					{ ...blockProps }
-					className={ classnames(
-						'is-placeholder',
-						blockProps.className
-					) }
+					className={ clsx( 'is-placeholder', blockProps.className ) }
 					style={ {
 						...blockProps.style,
 						minHeight: minHeightWithUnit || undefined,
@@ -476,7 +473,7 @@ function CoverEdit( {
 		);
 	}
 
-	const classes = classnames(
+	const classes = clsx(
 		{
 			'is-dark-theme': isDark,
 			'is-light': ! isDark,
@@ -498,7 +495,7 @@ function CoverEdit( {
 			{ inspectorControls }
 			<TagName
 				{ ...blockProps }
-				className={ classnames( classes, blockProps.className ) }
+				className={ clsx( classes, blockProps.className ) }
 				style={ { ...style, ...blockProps.style } }
 				data-url={ url }
 			>
@@ -506,7 +503,7 @@ function CoverEdit( {
 				{ showOverlay && (
 					<span
 						aria-hidden="true"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__background',
 							dimRatioToClass( dimRatio ),
 							{
@@ -547,7 +544,7 @@ function CoverEdit( {
 							ref={ mediaElement }
 							role={ alt ? 'img' : undefined }
 							aria-label={ alt ? alt : undefined }
-							className={ classnames(
+							className={ clsx(
 								classes,
 								'wp-block-cover__image-background'
 							) }

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

@@ -79,7 +79,7 @@ function CoverHeightInput( {
 			min={ min }
 			onChange={ handleOnChange }
 			onUnitChange={ onUnitChange }
-			__unstableInputWidth={ '80px' }
+			__unstableInputWidth="80px"
 			units={ units }
 			value={ computedValue }
 		/>
@@ -211,7 +211,14 @@ export default function CoverInspectorControls( {
 								}
 								help={
 									<>
-										<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+										<ExternalLink
+											href={
+												// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+												__(
+													'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+												)
+											}
+										>
 											{ __(
 												'Describe the purpose of the image.'
 											) }

package/src/cover/edit/resizable-cover-popover.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -42,7 +42,7 @@ export default function ResizableCoverPopover( {
 	const [ isResizing, setIsResizing ] = useState( false );
 
 	const resizableBoxProps = {
-		className: classnames( className, { 'is-resizing': isResizing } ),
+		className: clsx( className, { 'is-resizing': isResizing } ),
 		enable: RESIZABLE_BOX_ENABLE_OPTION,
 		onResizeStart: ( _event, _direction, elt ) => {
 			onResizeStart( elt.clientHeight );

package/src/cover/edit.native.js

@@ -10,7 +10,7 @@ import {
 	Platform,
 } from 'react-native';
 import Video from 'react-native-video';
-import classnames from 'classnames/dedupe';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -33,7 +33,6 @@ import {
 	ColorPicker,
 	BottomSheetConsumer,
 	useConvertUnitToMobile,
-	useMobileGlobalStylesColors,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -47,6 +46,8 @@ import {
 	getColorObjectByAttributeValues,
 	getGradientValueBySlug,
 	store as blockEditorStore,
+	useGlobalStyles,
+	useMobileGlobalStylesColors,
 } from '@wordpress/block-editor';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { useDispatch, withSelect, withDispatch } from '@wordpress/data';
@@ -156,9 +157,11 @@ const Cover = ( {
 		mediaUploadSync();
 	}, [] );
 
+	const globalStyles = useGlobalStyles();
 	const convertedMinHeight = useConvertUnitToMobile(
 		minHeight || COVER_DEFAULT_HEIGHT,
-		minHeightUnit
+		minHeightUnit,
+		globalStyles
 	);
 
 	const isImage = backgroundType === MEDIA_TYPE_IMAGE;
@@ -218,6 +221,21 @@ const Cover = ( {
 		} );
 	};
 
+	const onUpdateMediaProgress = useCallback(
+		( payload ) => {
+			const { mediaUrl, state } = payload;
+
+			setIsUploadInProgress( true );
+
+			if ( isUploadInProgress && isImage && mediaUrl && ! state ) {
+				setAttributes( {
+					url: mediaUrl,
+				} );
+			}
+		},
+		[ isImage, isUploadInProgress, setAttributes ]
+	);
+
 	const onMediaPressed = () => {
 		if ( isUploadInProgress ) {
 			requestImageUploadCancelDialog( id );
@@ -298,7 +316,7 @@ const Cover = ( {
 
 		// Ensure that "is-light" is removed from "className" attribute if cover background is dark.
 		if ( isCoverDark && attributes.className?.includes( 'is-light' ) ) {
-			const className = classnames( attributes.className, {
+			const className = clsx( attributes.className, {
 				'is-light': false,
 			} );
 			setAttributes( {
@@ -447,9 +465,7 @@ const Cover = ( {
 					toolbarControls( openMediaOptionsRef.current ) }
 				<MediaUploadProgress
 					mediaId={ id }
-					onUpdateMediaProgress={ () => {
-						setIsUploadInProgress( true );
-					} }
+					onUpdateMediaProgress={ onUpdateMediaProgress }
 					onFinishMediaUploadWithSuccess={ ( {
 						mediaServerId,
 						mediaUrl,
@@ -496,7 +512,7 @@ const Cover = ( {
 						muted
 						disableFocus
 						repeat
-						resizeMode={ 'cover' }
+						resizeMode="cover"
 						source={ { uri: url } }
 						onLoad={ onVideoLoad }
 						onLoadStart={ onVideoLoadStart }

package/src/cover/editor.scss

@@ -123,10 +123,3 @@
 .color-block-support-panel__inner-wrapper > :not(.block-editor-tools-panel-color-gradient-settings__item) {
 	margin-top: $grid-unit-30;
 }
-
-
-// The frontend style.scss includes a min-height as an IE11 fix.
-// This fix causes extra spacing for the focus style in the editor, so we omit it here.
-.wp-block-cover::after {
-	min-height: auto;
-}

package/src/cover/overlay-color-settings.native.js

@@ -12,9 +12,9 @@ import {
 	getGradientValueBySlug,
 	getGradientSlugByValue,
 	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
+	useMobileGlobalStylesColors,
 } from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
-import { useMobileGlobalStylesColors } from '@wordpress/components';
 
 function OverlayColorSettings( {
 	overlayColor,

package/src/cover/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -80,7 +80,7 @@ export default function save( { attributes } ) {
 
 	const backgroundPosition = mediaPosition( focalPoint );
 
-	const classes = classnames(
+	const classes = clsx(
 		{
 			'is-light': ! isDark,
 			'has-parallax': hasParallax,
@@ -91,7 +91,7 @@ export default function save( { attributes } ) {
 		getPositionClassName( contentPosition )
 	);
 
-	const imgClasses = classnames(
+	const imgClasses = clsx(
 		'wp-block-cover__image-background',
 		id ? `wp-image-${ id }` : null,
 		{
@@ -106,7 +106,7 @@ export default function save( { attributes } ) {
 		<Tag { ...useBlockProps.save( { className: classes, style } ) }>
 			<span
 				aria-hidden="true"
-				className={ classnames(
+				className={ clsx(
 					'wp-block-cover__background',
 					overlayColorClass,
 					dimRatioToClass( dimRatio ),
@@ -146,7 +146,7 @@ export default function save( { attributes } ) {
 				) ) }
 			{ isVideoBackground && url && (
 				<video
-					className={ classnames(
+					className={ clsx(
 						'wp-block-cover__video-background',
 						'intrinsic-ignore'
 					) }

package/src/cover/style.scss

@@ -1,11 +1,7 @@
-// Lowest specificity styles are used to ensure that the default styles for the cover block can be overridden by global styles.
-:where(.wp-block-cover-image, .wp-block-cover) {
-	min-height: 430px;
-	padding: 1em;
-}
-
 .wp-block-cover-image,
 .wp-block-cover {
+	min-height: 430px;
+	padding: 1em;
 	position: relative;
 	background-position: center center;
 	display: flex;
@@ -91,20 +87,6 @@
 		width: 100%;
 	}
 
-	// Using flexbox without an assigned height property breaks vertical center alignment in IE11.
-	// Appending an empty ::after element tricks IE11 into giving the cover image an implicit height, which sidesteps this issue.
-	&::after {
-		display: block;
-		content: "";
-		font-size: 0;
-		min-height: inherit;
-
-		// IE doesn't support flex so omit that.
-		@supports (position: sticky) {
-			content: none;
-		}
-	}
-
 	// Aligned cover blocks should not use our global alignment rules
 	&.aligncenter,
 	&.alignleft,
@@ -120,18 +102,6 @@
 		/*rtl:raw: direction: rtl; */
 	}
 
-	p,
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		&:where(:not(.has-text-color)) {
-			color: inherit;
-		}
-	}
-
 	// Position: Top
 	&.is-position-top-left {
 		align-items: flex-start;
@@ -314,3 +284,15 @@ section.wp-block-cover-image > h2,
 :where(.wp-block-cover-image.is-light:not(.has-text-color)) {
 	color: $black;
 }
+
+:root {
+	:where(.wp-block-cover p:not(.has-text-color)),
+	:where(.wp-block-cover h1:not(.has-text-color)),
+	:where(.wp-block-cover h2:not(.has-text-color)),
+	:where(.wp-block-cover h3:not(.has-text-color)),
+	:where(.wp-block-cover h4:not(.has-text-color)),
+	:where(.wp-block-cover h5:not(.has-text-color)),
+	:where(.wp-block-cover h6:not(.has-text-color)) {
+		color: inherit;
+	}
+}

package/src/editor.scss

@@ -1,7 +1,6 @@
 @import "./archives/editor.scss";
 @import "./audio/editor.scss";
 @import "./avatar/editor.scss";
-@import "./block/editor.scss";
 @import "./button/editor.scss";
 @import "./buttons/editor.scss";
 @import "./categories/editor.scss";

package/src/embed/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -26,7 +26,7 @@ const v2 = {
 			return null;
 		}
 
-		const className = classnames( 'wp-block-embed', {
+		const className = clsx( 'wp-block-embed', {
 			[ `is-type-${ type }` ]: type,
 			[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
 			[ `wp-block-embed-${ providerNameSlug }` ]: providerNameSlug,
@@ -52,7 +52,7 @@ const v1 = {
 			return null;
 		}
 
-		const embedClassName = classnames( 'wp-block-embed', {
+		const embedClassName = clsx( 'wp-block-embed', {
 			[ `is-type-${ type }` ]: type,
 			[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
 		} );