@wordpress/block-library 8.19.6 → 8.20.1

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 ];

package/src/cover/edit/color-utils.js

@@ -0,0 +1,122 @@
+/**
+ * External dependencies
+ */
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+import { FastAverageColor } from 'fast-average-color';
+import memoize from 'memize';
+
+/**
+ * WordPress dependencies
+ */
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * @typedef {import('colord').RgbaColor} RgbaColor
+ */
+
+extend( [ namesPlugin ] );
+
+/**
+ * Fallback color when the average color can't be computed. The image may be
+ * rendering as transparent, and most sites have a light color background.
+ */
+export const DEFAULT_BACKGROUND_COLOR = '#FFF';
+
+/**
+ * Default dim color specified in style.css.
+ */
+export const DEFAULT_OVERLAY_COLOR = '#000';
+
+/**
+ * Performs a Porter Duff composite source over operation on two rgba colors.
+ *
+ * @see {@link https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcover}
+ *
+ * @param {RgbaColor} source Source color.
+ * @param {RgbaColor} dest   Destination color.
+ *
+ * @return {RgbaColor} Composite color.
+ */
+export function compositeSourceOver( source, dest ) {
+	return {
+		r: source.r * source.a + dest.r * dest.a * ( 1 - source.a ),
+		g: source.g * source.a + dest.g * dest.a * ( 1 - source.a ),
+		b: source.b * source.a + dest.b * dest.a * ( 1 - source.a ),
+		a: source.a + dest.a * ( 1 - source.a ),
+	};
+}
+
+/**
+ * Retrieves the FastAverageColor singleton.
+ *
+ * @return {FastAverageColor} The FastAverageColor singleton.
+ */
+export function retrieveFastAverageColor() {
+	if ( ! retrieveFastAverageColor.fastAverageColor ) {
+		retrieveFastAverageColor.fastAverageColor = new FastAverageColor();
+	}
+	return retrieveFastAverageColor.fastAverageColor;
+}
+
+/**
+ * Computes the average color of an image.
+ *
+ * @param {string} url The url of the image.
+ *
+ * @return {Promise<string>} Promise of an average color as a hex string.
+ */
+export const getMediaColor = memoize( async ( url ) => {
+	if ( ! url ) {
+		return DEFAULT_BACKGROUND_COLOR;
+	}
+
+	// making the default color rgb for compat with FAC
+	const { r, g, b, a } = colord( DEFAULT_BACKGROUND_COLOR ).toRgb();
+
+	try {
+		const imgCrossOrigin = applyFilters(
+			'media.crossOrigin',
+			undefined,
+			url
+		);
+		const color = await retrieveFastAverageColor().getColorAsync( url, {
+			// The default color is white, which is the color
+			// that is returned if there's an error.
+			// colord returns alpga 0-1, FAC needs 0-255
+			defaultColor: [ r, g, b, a * 255 ],
+			// Errors that come up don't reject the promise,
+			// so error logging has to be silenced
+			// with this option.
+			silent: process.env.NODE_ENV === 'production',
+			crossOrigin: imgCrossOrigin,
+		} );
+		return color.hex;
+	} catch ( error ) {
+		// If there's an error return the fallback color.
+		return DEFAULT_BACKGROUND_COLOR;
+	}
+} );
+
+/**
+ * Computes if the color combination of the overlay and background color is dark.
+ *
+ * @param {number} dimRatio        Opacity of the overlay between 0 and 100.
+ * @param {string} overlayColor    CSS color string for the overlay.
+ * @param {string} backgroundColor CSS color string for the background.
+ *
+ * @return {boolean} true if the color combination composite result is dark.
+ */
+export function compositeIsDark( dimRatio, overlayColor, backgroundColor ) {
+	// Opacity doesn't matter if you're overlaying the same color on top of itself.
+	// And background doesn't matter when overlay is fully opaque.
+	if ( overlayColor === backgroundColor || dimRatio === 100 ) {
+		return colord( overlayColor ).isDark();
+	}
+	const overlay = colord( overlayColor )
+		.alpha( dimRatio / 100 )
+		.toRgb();
+	const background = colord( backgroundColor ).toRgb();
+	const composite = compositeSourceOver( overlay, background );
+	return colord( composite ).isDark();
+}