@wordpress/block-library 7.4.0 → 7.5.0

package/src/cover/test/transforms.js

@@ -0,0 +1,301 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createBlock,
+	getBlockTypes,
+	registerBlockType,
+	switchToBlockType,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { metadata as coverMetadata, settings as coverSettings } from '../index';
+import {
+	metadata as groupMetadata,
+	settings as groupSettings,
+} from '../../group';
+
+describe( 'transforms', () => {
+	beforeAll( () => {
+		registerBlockType( coverMetadata, coverSettings );
+		registerBlockType( groupMetadata, groupSettings );
+	} );
+
+	afterAll( () => {
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	describe( 'transform from Group to Cover', () => {
+		it( 'should return child Cover block when Group block contains only a single Cover block', () => {
+			const block = createBlock(
+				'core/group',
+				{ gradient: 'my-gradient' },
+				[ createBlock( 'core/cover', { dimRatio: 10 } ) ]
+			);
+
+			const transformedBlocks = switchToBlockType( block, 'core/cover' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { dimRatio: 10 },
+				innerBlocks: [],
+				name: 'core/cover',
+			} );
+		} );
+
+		it( 'should wrap Group in a Cover block and move named gradient up to the parent Cover block', () => {
+			const block = createBlock( 'core/group', {
+				gradient: 'my-gradient',
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/cover' );
+			const innerGroupBlock = transformedBlocks[ 0 ].innerBlocks[ 0 ];
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { gradient: 'my-gradient' },
+				name: 'core/cover',
+			} );
+
+			expect( innerGroupBlock.name ).toBe( 'core/group' );
+			expect( innerGroupBlock.attributes ).not.toHaveProperty(
+				'gradient'
+			);
+		} );
+
+		it( 'should wrap Group in a Cover block and move custom gradient up to the parent Cover block', () => {
+			const gradient =
+				'linear-gradient(90deg,rgb(188,138,51) 0%,rgb(65,88,208) 100%)';
+			const block = createBlock( 'core/group', {
+				style: {
+					color: {
+						gradient,
+					},
+				},
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/cover' );
+			const innerGroupBlock = transformedBlocks[ 0 ].innerBlocks[ 0 ];
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { customGradient: gradient },
+				name: 'core/cover',
+			} );
+
+			expect( innerGroupBlock.name ).toBe( 'core/group' );
+			expect( innerGroupBlock.attributes ).not.toHaveProperty( 'style' );
+		} );
+
+		it( 'should wrap Group in a Cover block and move named background color up to the parent Cover block', () => {
+			const block = createBlock( 'core/group', {
+				backgroundColor: 'my-background-color',
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/cover' );
+			const innerGroupBlock = transformedBlocks[ 0 ].innerBlocks[ 0 ];
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { overlayColor: 'my-background-color' },
+				name: 'core/cover',
+			} );
+
+			expect( innerGroupBlock.name ).toBe( 'core/group' );
+			expect( innerGroupBlock.attributes ).not.toHaveProperty(
+				'backgroundColor'
+			);
+		} );
+
+		it( 'should wrap Group in a Cover block and move custom background color up to the parent Cover block', () => {
+			const background = '#ff0000';
+			const block = createBlock( 'core/group', {
+				style: {
+					color: {
+						background,
+					},
+				},
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/cover' );
+			const innerGroupBlock = transformedBlocks[ 0 ].innerBlocks[ 0 ];
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { customOverlayColor: background },
+				name: 'core/cover',
+			} );
+
+			expect( innerGroupBlock.name ).toBe( 'core/group' );
+			expect( innerGroupBlock.attributes ).not.toHaveProperty( 'style' );
+		} );
+	} );
+
+	describe( 'transform from Cover to Group', () => {
+		it( 'should transfer named gradient color to Group block', () => {
+			const block = createBlock( 'core/cover', {
+				gradient: 'my-gradient',
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { gradient: 'my-gradient' },
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should transfer custom gradient color to style object in Group block', () => {
+			const gradient =
+				'linear-gradient(90deg,rgb(188,138,51) 0%,rgb(65,88,208) 100%)';
+			const block = createBlock( 'core/cover', {
+				customGradient: gradient,
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { style: { color: { gradient } } },
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should transfer named background color to backgroundColor attribute in Group block', () => {
+			const block = createBlock( 'core/cover', {
+				overlayColor: 'my-background-color',
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { backgroundColor: 'my-background-color' },
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should transfer custom background color to style object in Group block', () => {
+			const block = createBlock( 'core/cover', {
+				customOverlayColor: '#ff0000',
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { style: { color: { background: '#ff0000' } } },
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should merge Cover block named gradient color into child Group block', () => {
+			const block = createBlock(
+				'core/cover',
+				{
+					gradient: 'my-gradient',
+				},
+				[ createBlock( 'core/group', { fontSize: 'medium' } ) ]
+			);
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { fontSize: 'medium', gradient: 'my-gradient' },
+				innerBlocks: [],
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should merge Cover block custom gradient color to style object in child Group block', () => {
+			const gradient =
+				'linear-gradient(90deg,rgb(188,138,51) 0%,rgb(65,88,208) 100%)';
+			const block = createBlock(
+				'core/cover',
+				{
+					customGradient: gradient,
+				},
+				[ createBlock( 'core/group', { fontSize: 'medium' } ) ]
+			);
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: {
+					fontSize: 'medium',
+					style: { color: { gradient } },
+				},
+				innerBlocks: [],
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should merge Cover block named background color to backgroundColor attribute in child Group block', () => {
+			const block = createBlock(
+				'core/cover',
+				{
+					overlayColor: 'my-background-color',
+				},
+				[ createBlock( 'core/group', { fontSize: 'medium' } ) ]
+			);
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: {
+					backgroundColor: 'my-background-color',
+					fontSize: 'medium',
+				},
+				innerBlocks: [],
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should merge Cover block custom background color into child Group block', () => {
+			const block = createBlock(
+				'core/cover',
+				{
+					customOverlayColor: '#ff0000',
+				},
+				[ createBlock( 'core/group', { fontSize: 'medium' } ) ]
+			);
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: {
+					fontSize: 'medium',
+					style: { color: { background: '#ff0000' } },
+				},
+				innerBlocks: [],
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should skip merging Cover block gradient into child Group block if Group block has background color', () => {
+			const block = createBlock(
+				'core/cover',
+				{
+					gradient: 'my-gradient',
+				},
+				[
+					createBlock( 'core/group', {
+						fontSize: 'medium',
+						style: { color: { background: '#ff0000' } },
+					} ),
+				]
+			);
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: {
+					fontSize: 'medium',
+					style: { color: { background: '#ff0000' } },
+				},
+				innerBlocks: [],
+				name: 'core/group',
+			} );
+			expect( transformedBlocks[ 0 ].attributes ).not.toHaveProperty(
+				'gradient'
+			);
+		} );
+	} );
+} );

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";
@@ -49,6 +49,8 @@
 @import "./query-pagination/editor.scss";
 @import "./query-pagination-numbers/editor.scss";
 @import "./post-featured-image/editor.scss";
+@import "./post-comments/editor.scss";
+@import "./post-comments-form/editor.scss";
 
 :root .editor-styles-wrapper {
 	@include background-colors-deprecated();

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/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,13 +214,12 @@ export const __experimentalGetCoreBlocks = () => [
 	commentReplyLink,
 	commentTemplate,
 	commentsTitle,
-	commentsQueryLoop,
 	commentsPagination,
 	commentsPaginationNext,
 	commentsPaginationNumbers,
 	commentsPaginationPrevious,
-
 	postComments,
+	postCommentsForm,
 	homeLink,
 	logInOut,
 	termDescription,
@@ -278,10 +277,8 @@ export const __experimentalRegisterExperimentalCoreBlocks = process.env
 				...( enableFSEBlocks
 					? [
 							commentAuthorAvatar,
-							navigationArea,
 							postComment,
 							postCommentsCount,
-							postCommentsForm,
 							postCommentsLink,
 					  ]
 					: [] ),