@wordpress/block-library 8.19.2 → 8.20.0

package/src/audio/test/edit.native.js

@@ -1,13 +1,20 @@
 /**
  * External dependencies
  */
-import { render } from 'test/helpers';
+import {
+	addBlock,
+	dismissModal,
+	fireEvent,
+	initializeEditor,
+	render,
+	screen,
+	setupCoreBlocks,
+} from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
 import { BlockEdit } from '@wordpress/block-editor';
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
 import {
 	subscribeMediaUpload,
 	sendMediaUpload,
@@ -16,7 +23,7 @@ import {
 /**
  * Internal dependencies
  */
-import { metadata, settings, name } from '../index';
+import { name } from '../index';
 
 // react-native-aztec shouldn't be mocked because these tests are based on
 // snapshot testing where we want to keep the original component.
@@ -42,18 +49,9 @@ const getTestComponentWithContent = ( attributes = {} ) => {
 	);
 };
 
-describe( 'Audio block', () => {
-	beforeAll( () => {
-		registerBlockType( name, {
-			...metadata,
-			...settings,
-		} );
-	} );
-
-	afterAll( () => {
-		unregisterBlockType( name );
-	} );
+setupCoreBlocks( [ 'core/audio' ] );
 
+describe( 'Audio block', () => {
 	it( 'renders placeholder without crashing', () => {
 		const component = getTestComponentWithContent();
 		const rendered = component.toJSON();
@@ -86,4 +84,20 @@ describe( 'Audio block', () => {
 		const rendered = component.toJSON();
 		expect( rendered ).toMatchSnapshot();
 	} );
+
+	it( 'should gracefully handle invalid URLs', async () => {
+		await initializeEditor();
+
+		await addBlock( screen, 'Audio' );
+		fireEvent.press( screen.getByText( 'Insert from URL' ) );
+		fireEvent.changeText(
+			screen.getByPlaceholderText( 'Type a URL' ),
+			'h://wordpress.org/audio.mp3'
+		);
+		dismissModal( screen.getByTestId( 'bottom-sheet' ) );
+
+		expect(
+			screen.getByText( 'Invalid URL. Audio file not found.' )
+		).toBeVisible();
+	} );
 } );

package/src/button/constants.js

@@ -0,0 +1,3 @@
+export const NEW_TAB_REL = 'noreferrer noopener';
+export const NEW_TAB_TARGET = '_blank';
+export const NOFOLLOW_REL = 'nofollow';

package/src/button/edit.js

@@ -3,6 +3,12 @@
  */
 import classnames from 'classnames';
 
+/**
+ * Internal dependencies
+ */
+import { NEW_TAB_TARGET, NOFOLLOW_REL } from './constants';
+import { getUpdatedLinkAttributes } from './get-updated-link-attributes';
+
 /**
  * WordPress dependencies
  */
@@ -32,9 +38,14 @@ import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
 import { link, linkOff } from '@wordpress/icons';
 import { createBlock } from '@wordpress/blocks';
 import { useMergeRefs } from '@wordpress/compose';
-import { prependHTTP } from '@wordpress/url';
 
-const NEW_TAB_REL = 'noreferrer noopener';
+const LINK_SETTINGS = [
+	...LinkControl.DEFAULT_LINK_SETTINGS,
+	{
+		id: 'nofollow',
+		title: __( 'Mark as nofollow' ),
+	},
+];
 
 function WidthPanel( { selectedWidth, setAttributes } ) {
 	function handleChange( newWidth ) {
@@ -92,22 +103,6 @@ function ButtonEdit( props ) {
 
 	const TagName = tagName || 'a';
 
-	function onToggleOpenInNewTab( value ) {
-		const newLinkTarget = value ? '_blank' : undefined;
-
-		let updatedRel = rel;
-		if ( newLinkTarget && ! rel ) {
-			updatedRel = NEW_TAB_REL;
-		} else if ( ! newLinkTarget && rel === NEW_TAB_REL ) {
-			updatedRel = undefined;
-		}
-
-		setAttributes( {
-			linkTarget: newLinkTarget,
-			rel: updatedRel,
-		} );
-	}
-
 	function setButtonText( newText ) {
 		// Remove anchor tags from button text content.
 		setAttributes( { text: newText.replace( /<\/?a[^>]*>/g, '' ) } );
@@ -138,7 +133,8 @@ function ButtonEdit( props ) {
 
 	const [ isEditingURL, setIsEditingURL ] = useState( false );
 	const isURLSet = !! url;
-	const opensInNewTab = linkTarget === '_blank';
+	const opensInNewTab = linkTarget === NEW_TAB_TARGET;
+	const nofollow = !! rel?.includes( NOFOLLOW_REL );
 	const isLinkTag = 'a' === TagName;
 
 	function startEditing( event ) {
@@ -164,8 +160,8 @@ function ButtonEdit( props ) {
 	// Memoize link value to avoid overriding the LinkControl's internal state.
 	// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/51256.
 	const linkValue = useMemo(
-		() => ( { url, opensInNewTab } ),
-		[ url, opensInNewTab ]
+		() => ( { url, opensInNewTab, nofollow } ),
+		[ url, opensInNewTab, nofollow ]
 	);
 
 	return (
@@ -256,20 +252,25 @@ function ButtonEdit( props ) {
 					<LinkControl
 						value={ linkValue }
 						onChange={ ( {
-							url: newURL = '',
+							url: newURL,
 							opensInNewTab: newOpensInNewTab,
-						} ) => {
-							setAttributes( { url: prependHTTP( newURL ) } );
-
-							if ( opensInNewTab !== newOpensInNewTab ) {
-								onToggleOpenInNewTab( newOpensInNewTab );
-							}
-						} }
+							nofollow: newNofollow,
+						} ) =>
+							setAttributes(
+								getUpdatedLinkAttributes( {
+									rel,
+									url: newURL,
+									opensInNewTab: newOpensInNewTab,
+									nofollow: newNofollow,
+								} )
+							)
+						}
 						onRemove={ () => {
 							unlink();
 							richTextRef.current?.focus();
 						} }
 						forceIsEditingLink={ isEditingURL }
+						settings={ LINK_SETTINGS }
 					/>
 				</Popover>
 			) }

package/src/button/get-updated-link-attributes.js

@@ -0,0 +1,54 @@
+/**
+ * Internal dependencies
+ */
+import { NEW_TAB_REL, NEW_TAB_TARGET, NOFOLLOW_REL } from './constants';
+
+/**
+ * WordPress dependencies
+ */
+import { prependHTTP } from '@wordpress/url';
+
+/**
+ * Updates the link attributes.
+ *
+ * @param {Object}  attributes               The current block attributes.
+ * @param {string}  attributes.rel           The current link rel attribute.
+ * @param {string}  attributes.url           The current link url.
+ * @param {boolean} attributes.opensInNewTab Whether the link should open in a new window.
+ * @param {boolean} attributes.nofollow      Whether the link should be marked as nofollow.
+ */
+export function getUpdatedLinkAttributes( {
+	rel = '',
+	url = '',
+	opensInNewTab,
+	nofollow,
+} ) {
+	let newLinkTarget;
+	// Since `rel` is editable attribute, we need to check for existing values and proceed accordingly.
+	let updatedRel = rel;
+
+	if ( opensInNewTab ) {
+		newLinkTarget = NEW_TAB_TARGET;
+		updatedRel = updatedRel?.includes( NEW_TAB_REL )
+			? updatedRel
+			: updatedRel + ` ${ NEW_TAB_REL }`;
+	} else {
+		const relRegex = new RegExp( `\\b${ NEW_TAB_REL }\\s*`, 'g' );
+		updatedRel = updatedRel?.replace( relRegex, '' ).trim();
+	}
+
+	if ( nofollow ) {
+		updatedRel = updatedRel?.includes( NOFOLLOW_REL )
+			? updatedRel
+			: updatedRel + ` ${ NOFOLLOW_REL }`;
+	} else {
+		const relRegex = new RegExp( `\\b${ NOFOLLOW_REL }\\s*`, 'g' );
+		updatedRel = updatedRel?.replace( relRegex, '' ).trim();
+	}
+
+	return {
+		url: prependHTTP( url ),
+		linkTarget: newLinkTarget,
+		rel: updatedRel || undefined,
+	};
+}

package/src/button/test/get-updated-link-attributes.js

@@ -0,0 +1,113 @@
+/**
+ * Internal dependencies
+ */
+import { getUpdatedLinkAttributes } from '../get-updated-link-attributes';
+
+describe( 'getUpdatedLinkAttributes method', () => {
+	it( 'should correctly handle unassigned rel', () => {
+		const options = {
+			url: 'example.com',
+			opensInNewTab: true,
+			nofollow: false,
+		};
+
+		const result = getUpdatedLinkAttributes( options );
+
+		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.linkTarget ).toEqual( '_blank' );
+		expect( result.rel ).toEqual( 'noreferrer noopener' );
+	} );
+
+	it( 'should return empty rel value as undefined', () => {
+		const options = {
+			url: 'example.com',
+			opensInNewTab: false,
+			nofollow: false,
+		};
+
+		const result = getUpdatedLinkAttributes( options );
+
+		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.linkTarget ).toEqual( undefined );
+		expect( result.rel ).toEqual( undefined );
+	} );
+
+	it( 'should correctly handle rel with existing values', () => {
+		const options = {
+			url: 'example.com',
+			opensInNewTab: true,
+			nofollow: true,
+			rel: 'rel_value',
+		};
+
+		const result = getUpdatedLinkAttributes( options );
+
+		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.linkTarget ).toEqual( '_blank' );
+		expect( result.rel ).toEqual(
+			'rel_value noreferrer noopener nofollow'
+		);
+	} );
+
+	it( 'should correctly update link attributes with opensInNewTab', () => {
+		const options = {
+			url: 'example.com',
+			opensInNewTab: true,
+			nofollow: false,
+			rel: 'rel_value',
+		};
+
+		const result = getUpdatedLinkAttributes( options );
+
+		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.linkTarget ).toEqual( '_blank' );
+		expect( result.rel ).toEqual( 'rel_value noreferrer noopener' );
+	} );
+
+	it( 'should correctly update link attributes with nofollow', () => {
+		const options = {
+			url: 'example.com',
+			opensInNewTab: false,
+			nofollow: true,
+			rel: 'rel_value',
+		};
+
+		const result = getUpdatedLinkAttributes( options );
+
+		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.linkTarget ).toEqual( undefined );
+		expect( result.rel ).toEqual( 'rel_value nofollow' );
+	} );
+
+	it( 'should correctly handle rel with existing nofollow values and remove duplicates', () => {
+		const options = {
+			url: 'example.com',
+			opensInNewTab: true,
+			nofollow: true,
+			rel: 'rel_value nofollow',
+		};
+
+		const result = getUpdatedLinkAttributes( options );
+
+		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.linkTarget ).toEqual( '_blank' );
+		expect( result.rel ).toEqual(
+			'rel_value nofollow noreferrer noopener'
+		);
+	} );
+
+	it( 'should correctly handle rel with existing new tab values and remove duplicates', () => {
+		const options = {
+			url: 'example.com',
+			opensInNewTab: true,
+			nofollow: false,
+			rel: 'rel_value noreferrer noopener',
+		};
+
+		const result = getUpdatedLinkAttributes( options );
+
+		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.linkTarget ).toEqual( '_blank' );
+		expect( result.rel ).toEqual( 'rel_value noreferrer noopener' );
+	} );
+} );

package/src/categories/index.php

@@ -70,8 +70,7 @@ function render_block_core_categories( $attributes ) {
 function build_dropdown_script_block_core_categories( $dropdown_id ) {
 	ob_start();
 	?>
-	<script type='text/javascript'>
-	/* <![CDATA[ */
+	<script>
 	( function() {
 		var dropdown = document.getElementById( '<?php echo esc_js( $dropdown_id ); ?>' );
 		function onCatChange() {
@@ -81,10 +80,9 @@ function build_dropdown_script_block_core_categories( $dropdown_id ) {
 		}
 		dropdown.onchange = onCatChange;
 	})();
-	/* ]]> */
 	</script>
 	<?php
-	return ob_get_clean();
+	return wp_get_inline_script_tag( str_replace( array( '<script>', '</script>' ), '', ob_get_clean() ) );
 }
 
 /**

package/src/comment-template/edit.js

@@ -105,7 +105,7 @@ const getCommentsPlaceholder = ( {
  * @param {Array}  [props.firstCommentId]     - ID of the first comment in the array.
  * @param {Array}  [props.blocks]             - Array of blocks returned from
  *                                            getBlocks() in parent .
- * @return {WPElement}                 		Inner blocks of the Comment Template
+ * @return {Element}                 		Inner blocks of the Comment Template
  */
 function CommentTemplateInnerBlocks( {
 	comment,
@@ -202,7 +202,7 @@ const MemoizedCommentTemplatePreview = memo( CommentTemplatePreview );
  * @param {Array}  [props.blocks]             - Array of blocks returned from getBlocks() in parent.
  * @param {Object} [props.firstCommentId]     - The ID of the first comment in the array of
  *                                            comment objects.
- * @return {WPElement}                 		List of comments.
+ * @return {Element}                 		List of comments.
  */
 const CommentsList = ( {
 	comments,

package/src/cover/block.json

@@ -42,6 +42,9 @@
 		"customOverlayColor": {
 			"type": "string"
 		},
+		"isUserOverlayColor": {
+			"type": "boolean"
+		},
 		"backgroundType": {
 			"type": "string",
 			"default": "image"

package/src/cover/deprecated.js

@@ -97,7 +97,7 @@ const blockAttributes = {
 	},
 };
 
-const v8ToV10BlockAttributes = {
+const v8ToV11BlockAttributes = {
 	url: {
 		type: 'string',
 	},
@@ -164,7 +164,19 @@ const v8ToV10BlockAttributes = {
 	},
 };
 
-const v7toV10BlockSupports = {
+const v12BlockAttributes = {
+	...v8ToV11BlockAttributes,
+	useFeaturedImage: {
+		type: 'boolean',
+		default: false,
+	},
+	tagName: {
+		type: 'string',
+		default: 'div',
+	},
+};
+
+const v7toV11BlockSupports = {
 	anchor: true,
 	align: true,
 	html: false,
@@ -182,10 +194,222 @@ const v7toV10BlockSupports = {
 	},
 };
 
+const v12BlockSupports = {
+	...v7toV11BlockSupports,
+	spacing: {
+		padding: true,
+		margin: [ 'top', 'bottom' ],
+		blockGap: true,
+		__experimentalDefaultControls: {
+			padding: true,
+			blockGap: true,
+		},
+	},
+	__experimentalBorder: {
+		color: true,
+		radius: true,
+		style: true,
+		width: true,
+		__experimentalDefaultControls: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+		},
+	},
+	color: {
+		__experimentalDuotone:
+			'> .wp-block-cover__image-background, > .wp-block-cover__video-background',
+		heading: true,
+		text: true,
+		background: false,
+		__experimentalSkipSerialization: [ 'gradients' ],
+		enableContrastChecker: false,
+	},
+	typography: {
+		fontSize: true,
+		lineHeight: true,
+		__experimentalFontFamily: true,
+		__experimentalFontWeight: true,
+		__experimentalFontStyle: true,
+		__experimentalTextTransform: true,
+		__experimentalTextDecoration: true,
+		__experimentalLetterSpacing: true,
+		__experimentalDefaultControls: {
+			fontSize: true,
+		},
+	},
+	layout: {
+		allowJustification: false,
+	},
+};
+
+// Deprecation for blocks to prevent auto overlay color from overriding previously set values.
+const v12 = {
+	attributes: v12BlockAttributes,
+	supports: v12BlockSupports,
+	isEligible( attributes ) {
+		return (
+			attributes.customOverlayColor !== undefined ||
+			attributes.overlayColor !== undefined
+		);
+	},
+	migrate( attributes ) {
+		return {
+			...attributes,
+			isUserOverlayColor: true,
+		};
+	},
+	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 that does not have a HTML tag option.
 const v11 = {
-	attributes: v8ToV10BlockAttributes,
-	supports: v7toV10BlockSupports,
+	attributes: v8ToV11BlockAttributes,
+	supports: v7toV11BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,
@@ -334,8 +558,8 @@ const v11 = {
 
 // Deprecation for blocks that renders fixed background as backgroud from the main block container.
 const v10 = {
-	attributes: v8ToV10BlockAttributes,
-	supports: v7toV10BlockSupports,
+	attributes: v8ToV11BlockAttributes,
+	supports: v7toV11BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,
@@ -471,8 +695,8 @@ const v10 = {
 
 // Deprecation for blocks with `minHeightUnit` set but no `minHeight`.
 const v9 = {
-	attributes: v8ToV10BlockAttributes,
-	supports: v7toV10BlockSupports,
+	attributes: v8ToV11BlockAttributes,
+	supports: v7toV11BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,
@@ -603,8 +827,8 @@ const v9 = {
 
 // v8: deprecated to remove duplicated gradient classes and swap `wp-block-cover__gradient-background` for `wp-block-cover__background`.
 const v8 = {
-	attributes: v8ToV10BlockAttributes,
-	supports: v7toV10BlockSupports,
+	attributes: v8ToV11BlockAttributes,
+	supports: v7toV11BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,
@@ -758,7 +982,7 @@ const v7 = {
 			default: '',
 		},
 	},
-	supports: v7toV10BlockSupports,
+	supports: v7toV11BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,
@@ -1449,4 +1673,4 @@ const v1 = {
 	},
 };
 
-export default [ v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];
+export default [ v12, v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];