@wordpress/block-library 7.3.5 → 7.5.0

package/src/cover/transforms.js

@@ -7,6 +7,7 @@ import { createBlock } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE } from './shared';
+import cleanEmptyObject from '../utils/clean-empty-object';
 
 const transforms = {
 	from: [
@@ -73,6 +74,19 @@ const transforms = {
 					style,
 				} = attributes;
 
+				// If the Group block being transformed has a Cover block as its
+				// only child return that Cover block.
+				if (
+					innerBlocks?.length === 1 &&
+					innerBlocks[ 0 ]?.name === 'core/cover'
+				) {
+					return createBlock(
+						'core/cover',
+						innerBlocks[ 0 ].attributes,
+						innerBlocks[ 0 ].innerBlocks
+					);
+				}
+
 				// If no background or gradient color is provided, default to 50% opacity.
 				// This matches the styling of a Cover block with a background image,
 				// in the state where a background image has been removed.
@@ -99,14 +113,16 @@ const transforms = {
 					...attributes,
 					backgroundColor: undefined,
 					gradient: undefined,
-					style: {
+					style: cleanEmptyObject( {
 						...attributes?.style,
-						color: {
-							...attributes?.style?.color,
-							background: undefined,
-							gradient: undefined,
-						},
-					},
+						color: style?.color
+							? {
+									...style?.color,
+									background: undefined,
+									gradient: undefined,
+							  }
+							: undefined,
+					} ),
 				};
 
 				// Preserve the block by nesting it within the Cover block,
@@ -192,6 +208,95 @@ const transforms = {
 					anchor,
 				} ),
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/group' ],
+			isMatch: ( { url } ) => {
+				// If the Cover block uses background media, skip this transform,
+				// and instead use the Group block's default transform.
+				if ( url ) {
+					return false;
+				}
+				return true;
+			},
+			transform: ( attributes, innerBlocks ) => {
+				// Convert Cover overlay colors to comparable Group background colors.
+				const transformedColorAttributes = {
+					backgroundColor: attributes?.overlayColor,
+					gradient: attributes?.gradient,
+					style: cleanEmptyObject( {
+						...attributes?.style,
+						color:
+							attributes?.customOverlayColor ||
+							attributes?.customGradient ||
+							attributes?.style?.color
+								? {
+										background:
+											attributes?.customOverlayColor,
+										gradient: attributes?.customGradient,
+										...attributes?.style?.color,
+								  }
+								: undefined,
+					} ),
+				};
+
+				// If the Cover block contains only a single Group block as a direct child,
+				// then attempt to merge the Cover's background colors with the child Group block,
+				// and remove the Cover block as the wrapper.
+				if (
+					innerBlocks?.length === 1 &&
+					innerBlocks[ 0 ]?.name === 'core/group'
+				) {
+					const groupAttributes = cleanEmptyObject(
+						innerBlocks[ 0 ].attributes || {}
+					);
+
+					// If the Group block contains any kind of background color or gradient,
+					// skip merging Cover background colors, and preserve the Group block's colors.
+					if (
+						groupAttributes?.backgroundColor ||
+						groupAttributes?.gradient ||
+						groupAttributes?.style?.color?.background ||
+						groupAttributes?.style?.color?.gradient
+					) {
+						return createBlock(
+							'core/group',
+							groupAttributes,
+							innerBlocks[ 0 ]?.innerBlocks
+						);
+					}
+
+					return createBlock(
+						'core/group',
+						{
+							...transformedColorAttributes,
+							...groupAttributes,
+							style: cleanEmptyObject( {
+								...groupAttributes?.style,
+								color:
+									transformedColorAttributes?.style?.color ||
+									groupAttributes?.style?.color
+										? {
+												...transformedColorAttributes
+													?.style?.color,
+												...groupAttributes?.style
+													?.color,
+										  }
+										: undefined,
+							} ),
+						},
+						innerBlocks[ 0 ]?.innerBlocks
+					);
+				}
+
+				// In all other cases, transform the Cover block directly to a Group block.
+				return createBlock(
+					'core/group',
+					{ ...attributes, ...transformedColorAttributes },
+					innerBlocks
+				);
+			},
+		},
 	],
 };
 

package/src/cover/use-cover-is-dark.js

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import FastAverageColor from 'fast-average-color';
+import { colord } from 'colord';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+
+function retrieveFastAverageColor() {
+	if ( ! retrieveFastAverageColor.fastAverageColor ) {
+		retrieveFastAverageColor.fastAverageColor = new FastAverageColor();
+	}
+	return retrieveFastAverageColor.fastAverageColor;
+}
+
+/**
+ * useCoverIsDark is a hook that returns a boolean variable specifying if the cover
+ * background is dark or not.
+ *
+ * @param {?string} url          Url of the media background.
+ * @param {?number} dimRatio     Transparency of the overlay color. If an image and
+ *                               color are set, dimRatio is used to decide what is used
+ *                               for background darkness checking purposes.
+ * @param {?string} overlayColor String containing the overlay color value if one exists.
+ * @param {?Object} elementRef   If a media background is set, elementRef should contain a reference to a
+ *                               dom element that renders that media.
+ *
+ * @return {boolean} True if the cover background is considered "dark" and false otherwise.
+ */
+export default function useCoverIsDark(
+	url,
+	dimRatio = 50,
+	overlayColor,
+	elementRef
+) {
+	const [ isDark, setIsDark ] = useState( false );
+	useEffect( () => {
+		// If opacity is lower than 50 the dominant color is the image or video color,
+		// so use that color for the dark mode computation.
+		if ( url && dimRatio <= 50 && elementRef.current ) {
+			retrieveFastAverageColor().getColorAsync(
+				elementRef.current,
+				( color ) => {
+					setIsDark( color.isDark );
+				}
+			);
+		}
+	}, [ url, url && dimRatio <= 50 && elementRef.current, setIsDark ] );
+	useEffect( () => {
+		// If opacity is greater than 50 the dominant color is the overlay color,
+		// so use that color for the dark mode computation.
+		if ( dimRatio > 50 || ! url ) {
+			if ( ! overlayColor ) {
+				// If no overlay color exists the overlay color is black (isDark )
+				setIsDark( true );
+				return;
+			}
+			setIsDark( colord( overlayColor ).isDark() );
+		}
+	}, [ overlayColor, dimRatio > 50 || ! url, setIsDark ] );
+	useEffect( () => {
+		if ( ! url && ! overlayColor ) {
+			// Reset isDark.
+			setIsDark( false );
+		}
+	}, [ ! url && ! overlayColor, setIsDark ] );
+	return isDark;
+}

package/src/cover/use-cover-is-dark.native.js

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+
+import { colord } from 'colord';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * useCoverIsDark is a hook that returns a boolean variable specifying if the cover
+ * background is dark or not.
+ *
+ * @param {?boolean} initialValue Initial value.
+ * @param {?string}  url          Url of the media background.
+ * @param {?number}  dimRatio     Transparency of the overlay color. If an image and
+ *                                color are set, dimRatio is used to decide what is used
+ *                                for background darkness checking purposes.
+ * @param {?string}  overlayColor String containing the overlay color value if one exists.
+ *
+ * @return {boolean} True if the cover background is considered "dark" and false otherwise.
+ */
+export default function useCoverIsDark(
+	initialValue = false,
+	url,
+	dimRatio = 50,
+	overlayColor
+) {
+	const [ isDark, setIsDark ] = useState( initialValue );
+	useEffect( () => {
+		// If opacity is greater than 50 the dominant color is the overlay color,
+		// so use that color for the dark mode computation.
+		if ( dimRatio > 50 || ! url ) {
+			if ( ! overlayColor ) {
+				// If no overlay color exists the overlay color is black (isDark )
+				setIsDark( true );
+				return;
+			}
+			setIsDark( colord( overlayColor ).isDark() );
+		}
+	}, [ overlayColor, dimRatio > 50 || ! url, setIsDark ] );
+	useEffect( () => {
+		if ( ! url && ! overlayColor ) {
+			// Reset isDark.
+			setIsDark( false );
+		}
+	}, [ ! url && ! overlayColor, setIsDark ] );
+	return isDark;
+}

package/src/editor.scss

@@ -6,8 +6,8 @@
 @import "./buttons/editor.scss";
 @import "./categories/editor.scss";
 @import "./columns/editor.scss";
+@import "./comments/editor.scss";
 @import "./comment-author-avatar/editor.scss";
-@import "./comments-query-loop/editor.scss";
 @import "./comments-pagination/editor.scss";
 @import "./comments-pagination-numbers/editor.scss";
 @import "./comments-title/editor.scss";

package/src/embed/edit.js

@@ -5,8 +5,8 @@ import {
 	createUpgradedEmbedBlock,
 	getClassNames,
 	fallback,
-	getAttributesFromPreview,
 	getEmbedInfoByProvider,
+	getMergedAttributesWithPreview,
 } from './util';
 import EmbedControls from './embed-controls';
 import { embedContentIcon } from './icons';
@@ -99,21 +99,19 @@ const EmbedEdit = ( props ) => {
 	);
 
 	/**
-	 * @return {Object} Attributes derived from the preview, merged with the current attributes.
+	 * Returns the attributes derived from the preview, merged with the current attributes.
+	 *
+	 * @param {boolean} ignorePreviousClassName Determines if the previous className attribute should be ignored when merging.
+	 * @return {Object} Merged attributes.
 	 */
-	const getMergedAttributes = () => {
-		const { allowResponsive, className } = attributes;
-		return {
-			...attributes,
-			...getAttributesFromPreview(
-				preview,
-				title,
-				className,
-				responsive,
-				allowResponsive
-			),
-		};
-	};
+	const getMergedAttributes = ( ignorePreviousClassName = false ) =>
+		getMergedAttributesWithPreview(
+			attributes,
+			preview,
+			title,
+			responsive,
+			ignorePreviousClassName
+		);
 
 	const toggleResponsive = () => {
 		const { allowResponsive, className } = attributes;
@@ -145,15 +143,12 @@ const EmbedEdit = ( props ) => {
 	// Handle incoming preview.
 	useEffect( () => {
 		if ( preview && ! isEditingURL ) {
-			// Even though we set attributes that get derived from the preview,
-			// we don't access them directly because for the initial render,
-			// the `setAttributes` call will not have taken effect. If we're
-			// rendering responsive content, setting the responsive classes
-			// after the preview has been rendered can result in unwanted
-			// clipping or scrollbars. The `getAttributesFromPreview` function
-			// that `getMergedAttributes` uses is memoized so that we're not
-			// calculating them on every render.
-			setAttributes( getMergedAttributes() );
+			// When obtaining an incoming preview, we set the attributes derived from
+			// the preview data. In this case when getting the merged attributes,
+			// we ignore the previous classname because it might not match the expected
+			// classes by the new preview.
+			setAttributes( getMergedAttributes( true ) );
+
 			if ( onReplace ) {
 				const upgradedBlock = createUpgradedEmbedBlock(
 					props,

package/src/embed/edit.native.js

@@ -5,8 +5,8 @@ import {
 	createUpgradedEmbedBlock,
 	getClassNames,
 	fallback,
-	getAttributesFromPreview,
 	getEmbedInfoByProvider,
+	getMergedAttributesWithPreview,
 } from './util';
 import EmbedControls from './embed-controls';
 import { embedContentIcon } from './icons';
@@ -130,19 +130,14 @@ const EmbedEdit = ( props ) => {
 	 * @param {boolean} ignorePreviousClassName Determines if the previous className attribute should be ignored when merging.
 	 * @return {Object} Merged attributes.
 	 */
-	const getMergedAttributes = ( ignorePreviousClassName = false ) => {
-		const { allowResponsive, className } = attributes;
-		return {
-			...attributes,
-			...getAttributesFromPreview(
-				preview,
-				title,
-				ignorePreviousClassName ? undefined : className,
-				responsive,
-				allowResponsive
-			),
-		};
-	};
+	const getMergedAttributes = ( ignorePreviousClassName = false ) =>
+		getMergedAttributesWithPreview(
+			attributes,
+			preview,
+			title,
+			responsive,
+			ignorePreviousClassName
+		);
 
 	const toggleResponsive = () => {
 		const { allowResponsive, className } = attributes;

package/src/embed/util.js

@@ -66,9 +66,11 @@ export const isFromWordPress = ( html ) =>
 	html && html.includes( 'class="wp-embedded-content"' );
 
 export const getPhotoHtml = ( photo ) => {
+	// If full image url not found use thumbnail.
+	const imageUrl = photo.url || photo.thumbnail_url;
+
 	// 100% width for the preview so it fits nicely into the document, some "thumbnails" are
-	// actually the full size photo. If thumbnails not found, use full image.
-	const imageUrl = photo.thumbnail_url || photo.url;
+	// actually the full size photo.
 	const photoPreview = (
 		<p>
 			<img src={ imageUrl } alt={ photo.title } width="100%" />
@@ -290,3 +292,33 @@ export const getAttributesFromPreview = memoize(
 		return attributes;
 	}
 );
+
+/**
+ * Returns the attributes derived from the preview, merged with the current attributes.
+ *
+ * @param {Object}  currentAttributes       The current attributes of the block.
+ * @param {Object}  preview                 The preview data.
+ * @param {string}  title                   The block's title, e.g. Twitter.
+ * @param {boolean} isResponsive            Boolean indicating if the block supports responsive content.
+ * @param {boolean} ignorePreviousClassName Determines if the previous className attribute should be ignored when merging.
+ * @return {Object} Merged attributes.
+ */
+export const getMergedAttributesWithPreview = (
+	currentAttributes,
+	preview,
+	title,
+	isResponsive,
+	ignorePreviousClassName = false
+) => {
+	const { allowResponsive, className } = currentAttributes;
+	return {
+		...currentAttributes,
+		...getAttributesFromPreview(
+			preview,
+			title,
+			ignorePreviousClassName ? undefined : className,
+			isResponsive,
+			allowResponsive
+		),
+	};
+};

package/src/file/inspector.js

@@ -68,7 +68,7 @@ export default function FileBlockInspector( {
 						) }
 					</PanelBody>
 				) }
-				<PanelBody title={ __( 'Text link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<SelectControl
 						label={ __( 'Link to' ) }
 						value={ textLinkHref }
@@ -80,8 +80,6 @@ export default function FileBlockInspector( {
 						checked={ openInNewWindow }
 						onChange={ changeOpenInNewWindow }
 					/>
-				</PanelBody>
-				<PanelBody title={ __( 'Download button settings' ) }>
 					<ToggleControl
 						label={ __( 'Show download button' ) }
 						checked={ showDownloadButton }

package/src/gallery/edit.js

@@ -478,7 +478,7 @@ function GalleryEdit( props ) {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Gallery settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					{ images.length > 1 && (
 						<RangeControl
 							label={ __( 'Columns' ) }

package/src/gallery/v1/edit.js

@@ -420,7 +420,7 @@ function GalleryEdit( props ) {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Gallery settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					{ images.length > 1 && (
 						<RangeControl
 							label={ __( 'Columns' ) }

package/src/group/block.json

@@ -18,6 +18,7 @@
 		}
 	},
 	"supports": {
+		"__experimentalSettings": true,
 		"align": [ "wide", "full" ],
 		"anchor": true,
 		"html": false,

package/src/heading/transforms.js

@@ -16,10 +16,11 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				attributes.map( ( { content, anchor } ) =>
+				attributes.map( ( { content, anchor, align: textAlign } ) =>
 					createBlock( name, {
 						content,
 						anchor,
+						textAlign,
 					} )
 				),
 		},
@@ -84,8 +85,8 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				attributes.map( ( { content } ) =>
-					createBlock( 'core/paragraph', { content } )
+				attributes.map( ( { content, textAlign: align } ) =>
+					createBlock( 'core/paragraph', { content, align } )
 				),
 		},
 	],

package/src/html/edit.js

@@ -59,14 +59,14 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 						isPressed={ ! isPreview }
 						onClick={ switchToHTML }
 					>
-						<span>HTML</span>
+						HTML
 					</ToolbarButton>
 					<ToolbarButton
 						className="components-tab-button"
 						isPressed={ isPreview }
 						onClick={ switchToPreview }
 					>
-						<span>{ __( 'Preview' ) }</span>
+						{ __( 'Preview' ) }
 					</ToolbarButton>
 				</ToolbarGroup>
 			</BlockControls>

package/src/image/edit.js

@@ -22,8 +22,6 @@ import { useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { image as icon } from '@wordpress/icons';
 
-/* global wp */
-
 /**
  * Internal dependencies
  */
@@ -97,7 +95,7 @@ function hasDefaultSize( image, defaultSize ) {
  * @return {boolean} Whether the image has been destroyed.
  */
 export function isMediaDestroyed( id ) {
-	const attachment = wp?.media?.attachment( id ) || {};
+	const attachment = window?.wp?.media?.attachment( id ) || {};
 	return attachment.destroyed;
 }
 
@@ -232,7 +230,7 @@ export function ImageEdit( {
 			// The constants used in Gutenberg do not match WP options so a little more complicated than ideal.
 			// TODO: fix this in a follow up PR, requires updating media-text and ui component.
 			switch (
-				wp?.media?.view?.settings?.defaultProps?.link ||
+				window?.wp?.media?.view?.settings?.defaultProps?.link ||
 				LINK_DESTINATION_NONE
 			) {
 				case 'file':

package/src/image/edit.native.js

@@ -670,7 +670,7 @@ export class ImageEdit extends Component {
 
 		const getInspectorControls = () => (
 			<InspectorControls>
-				<PanelBody title={ __( 'Image settings' ) } />
+				<PanelBody title={ __( 'Settings' ) } />
 				<PanelBody style={ styles.panelBody }>
 					<BlockStyles clientId={ clientId } url={ url } />
 				</PanelBody>

package/src/image/image.js

@@ -370,7 +370,7 @@ export default function Image( {
 				</BlockControls>
 			) }
 			<InspectorControls>
-				<PanelBody title={ __( 'Image settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					{ ! multiImageSelection && (
 						<TextareaControl
 							label={ __( 'Alt text (alternative text)' ) }

package/src/index.js

@@ -23,6 +23,7 @@ import * as classic from './freeform';
 import * as code from './code';
 import * as column from './column';
 import * as columns from './columns';
+import * as comments from './comments';
 import * as commentAuthorAvatar from './comment-author-avatar';
 import * as commentAuthorName from './comment-author-name';
 import * as commentContent from './comment-content';
@@ -31,7 +32,6 @@ import * as commentEditLink from './comment-edit-link';
 import * as commentReplyLink from './comment-reply-link';
 import * as commentTemplate from './comment-template';
 import * as commentsPaginationPrevious from './comments-pagination-previous';
-import * as commentsQueryLoop from './comments-query-loop';
 import * as commentsPagination from './comments-pagination';
 import * as commentsPaginationNext from './comments-pagination-next';
 import * as commentsPaginationNumbers from './comments-pagination-numbers';
@@ -54,7 +54,6 @@ import * as mediaText from './media-text';
 import * as missing from './missing';
 import * as more from './more';
 import * as navigation from './navigation';
-import * as navigationArea from './navigation-area';
 import * as navigationLink from './navigation-link';
 import * as navigationSubmenu from './navigation-submenu';
 import * as nextpage from './nextpage';
@@ -207,6 +206,7 @@ export const __experimentalGetCoreBlocks = () => [
 	queryPaginationPrevious,
 	queryNoResults,
 	readMore,
+	comments,
 	commentAuthorName,
 	commentContent,
 	commentDate,
@@ -214,12 +214,10 @@ export const __experimentalGetCoreBlocks = () => [
 	commentReplyLink,
 	commentTemplate,
 	commentsTitle,
-	commentsQueryLoop,
 	commentsPagination,
 	commentsPaginationNext,
 	commentsPaginationNumbers,
 	commentsPaginationPrevious,
-
 	postComments,
 	postCommentsForm,
 	homeLink,
@@ -279,7 +277,6 @@ export const __experimentalRegisterExperimentalCoreBlocks = process.env
 				...( enableFSEBlocks
 					? [
 							commentAuthorAvatar,
-							navigationArea,
 							postComment,
 							postCommentsCount,
 							postCommentsLink,

package/src/index.native.js

@@ -179,6 +179,14 @@ const devOnly = ( block ) => ( !! __DEV__ ? block : null );
 const iOSOnly = ( block ) =>
 	Platform.OS === 'ios' ? block : devOnly( block );
 
+// To be removed once Quote V2 is released on the web editor.
+function quoteCheck( quoteBlock, blocksFlags ) {
+	if ( blocksFlags?.__experimentalEnableQuoteBlockV2 ) {
+		quoteBlock.settings = quoteBlock?.settingsV2;
+	}
+	return quoteBlock;
+}
+
 // Hide the Classic block and SocialLink block
 addFilter(
 	'blocks.registerBlockType',
@@ -230,8 +238,10 @@ addFilter(
  *
  * registerCoreBlocks();
  * ```
+ * @param {Object} [blocksFlags] Experimental flags
+ *
  */
-export const registerCoreBlocks = () => {
+export const registerCoreBlocks = ( blocksFlags ) => {
 	// When adding new blocks to this list please also consider updating /src/block-support/supported-blocks.json in the Gutenberg-Mobile repo
 	[
 		paragraph,
@@ -244,7 +254,7 @@ export const registerCoreBlocks = () => {
 		nextpage,
 		separator,
 		list,
-		quote,
+		quoteCheck( quote, blocksFlags ),
 		mediaText,
 		preformatted,
 		gallery,

package/src/latest-comments/edit.js

@@ -35,7 +35,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
 	return (
 		<div { ...useBlockProps() }>
 			<InspectorControls>
-				<PanelBody title={ __( 'Latest comments settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						label={ __( 'Display avatar' ) }
 						checked={ displayAvatar }