@wordpress/block-library 8.20.1 → 8.21.0

package/build-style/style-rtl.css

@@ -1154,6 +1154,54 @@ section.wp-block-cover-image > h2,
   text-decoration: none;
 }
 
+.wp-block-form-input__label {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+  margin-bottom: 0.5em;
+  /*
+  Small tweak to left-align the checkbox.
+  Even though `:has` is not currently supported in Firefox, this is a small tweak
+  and does not affect the functionality of the block or the user's experience.
+  There will be a minor inconsistency between browsers. However, it's more important to provide
+  a better experience for 80+% of users, until Firefox catches up and supports `:has`.
+  */
+}
+.wp-block-form-input__label.is-label-inline {
+  flex-direction: row;
+  gap: 0.5em;
+  align-items: center;
+}
+.wp-block-form-input__label.is-label-inline .wp-block-form-input__label-content {
+  margin-bottom: 0.5em;
+}
+.wp-block-form-input__label:has(input[type=checkbox]) {
+  width: -moz-fit-content;
+  width: fit-content;
+  flex-direction: row-reverse;
+}
+
+.wp-block-form-input__label-content {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.wp-block-form-input__input {
+  padding: 0 0.5em;
+  font-size: 1em;
+  margin-bottom: 0.5em;
+}
+.wp-block-form-input__input[type=text], .wp-block-form-input__input[type=password], .wp-block-form-input__input[type=date], .wp-block-form-input__input[type=datetime], .wp-block-form-input__input[type=datetime-local], .wp-block-form-input__input[type=email], .wp-block-form-input__input[type=month], .wp-block-form-input__input[type=number], .wp-block-form-input__input[type=search], .wp-block-form-input__input[type=tel], .wp-block-form-input__input[type=time], .wp-block-form-input__input[type=url], .wp-block-form-input__input[type=week] {
+  min-height: 2em;
+  line-height: 2;
+  border: 1px solid;
+}
+
+textarea.wp-block-form-input__input {
+  min-height: 10em;
+}
+
 .wp-block-gallery:not(.has-nested-images),
 .blocks-gallery-grid:not(.has-nested-images) {
   display: flex;
@@ -1617,21 +1665,46 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 
 .wp-lightbox-container {
   position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.wp-lightbox-container img {
+  cursor: zoom-in;
+}
+.wp-lightbox-container img:hover + button {
+  opacity: 1;
 }
 .wp-lightbox-container button {
+  opacity: 0;
   border: none;
-  background: none;
+  background: #000;
   cursor: zoom-in;
-  width: 100%;
-  height: 100%;
+  width: 24px;
+  height: 24px;
   position: absolute;
   z-index: 100;
+  top: 10px;
+  left: 10px;
+  text-align: center;
+  padding: 0;
+  border-radius: 10%;
 }
 .wp-lightbox-container button:focus-visible {
   outline: 5px auto #212121;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: 5px;
 }
+.wp-lightbox-container button:hover {
+  cursor: pointer;
+  opacity: 1;
+}
+.wp-lightbox-container button:focus {
+  opacity: 1;
+}
+.wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
+  background: #000;
+  border: none;
+}
 
 .wp-lightbox-overlay {
   position: fixed;
@@ -1647,11 +1720,20 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 }
 .wp-lightbox-overlay .close-button {
   position: absolute;
-  top: calc(env(safe-area-inset-top) + 20px);
-  left: calc(env(safe-area-inset-left) + 20px);
+  top: calc(env(safe-area-inset-top) + 16px);
+  left: calc(env(safe-area-inset-left) + 16px);
   padding: 0;
   cursor: pointer;
   z-index: 5000000;
+  min-width: 40px;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.wp-lightbox-overlay .close-button:hover, .wp-lightbox-overlay .close-button:focus, .wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background) {
+  background: none;
+  border: none;
 }
 .wp-lightbox-overlay .lightbox-image-container {
   position: absolute;

package/build-style/style.css

@@ -1162,6 +1162,54 @@ section.wp-block-cover-image > h2,
   text-decoration: none;
 }
 
+.wp-block-form-input__label {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+  margin-bottom: 0.5em;
+  /*
+  Small tweak to left-align the checkbox.
+  Even though `:has` is not currently supported in Firefox, this is a small tweak
+  and does not affect the functionality of the block or the user's experience.
+  There will be a minor inconsistency between browsers. However, it's more important to provide
+  a better experience for 80+% of users, until Firefox catches up and supports `:has`.
+  */
+}
+.wp-block-form-input__label.is-label-inline {
+  flex-direction: row;
+  gap: 0.5em;
+  align-items: center;
+}
+.wp-block-form-input__label.is-label-inline .wp-block-form-input__label-content {
+  margin-bottom: 0.5em;
+}
+.wp-block-form-input__label:has(input[type=checkbox]) {
+  width: -moz-fit-content;
+  width: fit-content;
+  flex-direction: row-reverse;
+}
+
+.wp-block-form-input__label-content {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.wp-block-form-input__input {
+  padding: 0 0.5em;
+  font-size: 1em;
+  margin-bottom: 0.5em;
+}
+.wp-block-form-input__input[type=text], .wp-block-form-input__input[type=password], .wp-block-form-input__input[type=date], .wp-block-form-input__input[type=datetime], .wp-block-form-input__input[type=datetime-local], .wp-block-form-input__input[type=email], .wp-block-form-input__input[type=month], .wp-block-form-input__input[type=number], .wp-block-form-input__input[type=search], .wp-block-form-input__input[type=tel], .wp-block-form-input__input[type=time], .wp-block-form-input__input[type=url], .wp-block-form-input__input[type=week] {
+  min-height: 2em;
+  line-height: 2;
+  border: 1px solid;
+}
+
+textarea.wp-block-form-input__input {
+  min-height: 10em;
+}
+
 .wp-block-gallery:not(.has-nested-images),
 .blocks-gallery-grid:not(.has-nested-images) {
   display: flex;
@@ -1631,21 +1679,46 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 
 .wp-lightbox-container {
   position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.wp-lightbox-container img {
+  cursor: zoom-in;
+}
+.wp-lightbox-container img:hover + button {
+  opacity: 1;
 }
 .wp-lightbox-container button {
+  opacity: 0;
   border: none;
-  background: none;
+  background: #000;
   cursor: zoom-in;
-  width: 100%;
-  height: 100%;
+  width: 24px;
+  height: 24px;
   position: absolute;
   z-index: 100;
+  top: 10px;
+  right: 10px;
+  text-align: center;
+  padding: 0;
+  border-radius: 10%;
 }
 .wp-lightbox-container button:focus-visible {
   outline: 5px auto #212121;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: 5px;
 }
+.wp-lightbox-container button:hover {
+  cursor: pointer;
+  opacity: 1;
+}
+.wp-lightbox-container button:focus {
+  opacity: 1;
+}
+.wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
+  background: #000;
+  border: none;
+}
 
 .wp-lightbox-overlay {
   position: fixed;
@@ -1661,11 +1734,20 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 }
 .wp-lightbox-overlay .close-button {
   position: absolute;
-  top: calc(env(safe-area-inset-top) + 20px);
-  right: calc(env(safe-area-inset-right) + 20px);
+  top: calc(env(safe-area-inset-top) + 16px);
+  right: calc(env(safe-area-inset-right) + 16px);
   padding: 0;
   cursor: pointer;
   z-index: 5000000;
+  min-width: 40px;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.wp-lightbox-overlay .close-button:hover, .wp-lightbox-overlay .close-button:focus, .wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background) {
+  background: none;
+  border: none;
 }
 .wp-lightbox-overlay .lightbox-image-container {
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.20.1",
+	"version": "8.21.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,36 +31,36 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.43.0",
-		"@wordpress/api-fetch": "^6.40.0",
-		"@wordpress/autop": "^3.43.0",
-		"@wordpress/blob": "^3.43.0",
-		"@wordpress/block-editor": "^12.11.1",
-		"@wordpress/blocks": "^12.20.1",
-		"@wordpress/components": "^25.9.1",
-		"@wordpress/compose": "^6.20.0",
-		"@wordpress/core-data": "^6.20.1",
-		"@wordpress/data": "^9.13.1",
-		"@wordpress/date": "^4.43.0",
-		"@wordpress/deprecated": "^3.43.0",
-		"@wordpress/dom": "^3.43.0",
-		"@wordpress/element": "^5.20.0",
-		"@wordpress/escape-html": "^2.43.0",
-		"@wordpress/hooks": "^3.43.0",
-		"@wordpress/html-entities": "^3.43.0",
-		"@wordpress/i18n": "^4.43.0",
-		"@wordpress/icons": "^9.34.0",
-		"@wordpress/interactivity": "^2.4.0",
-		"@wordpress/keycodes": "^3.43.0",
-		"@wordpress/notices": "^4.11.1",
-		"@wordpress/primitives": "^3.41.0",
-		"@wordpress/private-apis": "^0.25.0",
-		"@wordpress/reusable-blocks": "^4.20.1",
-		"@wordpress/rich-text": "^6.20.1",
-		"@wordpress/server-side-render": "^4.20.1",
-		"@wordpress/url": "^3.44.0",
-		"@wordpress/viewport": "^5.20.1",
-		"@wordpress/wordcount": "^3.43.0",
+		"@wordpress/a11y": "^3.44.0",
+		"@wordpress/api-fetch": "^6.41.0",
+		"@wordpress/autop": "^3.44.0",
+		"@wordpress/blob": "^3.44.0",
+		"@wordpress/block-editor": "^12.12.0",
+		"@wordpress/blocks": "^12.21.0",
+		"@wordpress/components": "^25.10.0",
+		"@wordpress/compose": "^6.21.0",
+		"@wordpress/core-data": "^6.21.0",
+		"@wordpress/data": "^9.14.0",
+		"@wordpress/date": "^4.44.0",
+		"@wordpress/deprecated": "^3.44.0",
+		"@wordpress/dom": "^3.44.0",
+		"@wordpress/element": "^5.21.0",
+		"@wordpress/escape-html": "^2.44.0",
+		"@wordpress/hooks": "^3.44.0",
+		"@wordpress/html-entities": "^3.44.0",
+		"@wordpress/i18n": "^4.44.0",
+		"@wordpress/icons": "^9.35.0",
+		"@wordpress/interactivity": "^2.5.0",
+		"@wordpress/keycodes": "^3.44.0",
+		"@wordpress/notices": "^4.12.0",
+		"@wordpress/primitives": "^3.42.0",
+		"@wordpress/private-apis": "^0.26.0",
+		"@wordpress/reusable-blocks": "^4.21.0",
+		"@wordpress/rich-text": "^6.21.0",
+		"@wordpress/server-side-render": "^4.21.0",
+		"@wordpress/url": "^3.45.0",
+		"@wordpress/viewport": "^5.21.0",
+		"@wordpress/wordcount": "^3.44.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e17f760ed0dc11cce78157d7c2f2086b1b3c09d8"
+	"gitHead": "f83bb1a71e8fa416131b81a9f282a72a1dc6c694"
 }

package/src/block/block.json

@@ -15,6 +15,7 @@
 	"supports": {
 		"customClassName": false,
 		"html": false,
-		"inserter": false
+		"inserter": false,
+		"renaming": false
 	}
 }

package/src/code/edit.native.js

@@ -9,6 +9,7 @@ import { View } from 'react-native';
 import { PlainText } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -22,7 +23,15 @@ import styles from './theme.scss';
 // Note: styling is applied directly to the (nested) PlainText component. Web-side components
 // apply it to the container 'div' but we don't have a proper proposal for cascading styling yet.
 export function CodeEdit( props ) {
-	const { attributes, setAttributes, onFocus, onBlur, style } = props;
+	const {
+		attributes,
+		setAttributes,
+		onFocus,
+		onBlur,
+		style,
+		insertBlocksAfter,
+		mergeBlocks,
+	} = props;
 	const codeStyle = {
 		...usePreferredColorSchemeStyle(
 			styles.blockCode,
@@ -40,16 +49,21 @@ export function CodeEdit( props ) {
 		<View>
 			<PlainText
 				value={ attributes.content }
+				identifier="content"
 				style={ codeStyle }
 				multiline={ true }
 				underlineColorAndroid="transparent"
 				onChange={ ( content ) => setAttributes( { content } ) }
+				onMerge={ mergeBlocks }
 				placeholder={ __( 'Write code…' ) }
 				aria-label={ __( 'Code' ) }
 				isSelected={ props.isSelected }
 				onFocus={ onFocus }
 				onBlur={ onBlur }
 				placeholderTextColor={ placeholderStyle.color }
+				__unstableOnSplitAtDoubleLineEnd={ () =>
+					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+				}
 			/>
 		</View>
 	);

package/src/cover/block.json

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

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

@@ -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,
@@ -531,7 +539,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

@@ -112,7 +112,6 @@ export default function CoverInspectorControls( {
 		isImageBackground,
 		mediaElement,
 		url,
-		isImgElement,
 		overlayColor,
 	} = currentSettings;
 
@@ -202,32 +201,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 );
 }