@wordpress/block-library 7.4.0 → 7.7.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.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/embed/embed-preview.js

@@ -15,7 +15,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { Placeholder, SandBox } from '@wordpress/components';
 import { RichText, BlockIcon } from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -145,7 +145,9 @@ class EmbedPreview extends Component {
 						onChange={ onCaptionChange }
 						inlineToolbar
 						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter( createBlock( 'core/paragraph' ) )
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
 						}
 					/>
 				) }

package/src/file/edit.js

@@ -22,6 +22,7 @@ import {
 	RichText,
 	useBlockProps,
 	store as blockEditorStore,
+	__experimentalElementButtonClassName,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { useCopyToClipboard } from '@wordpress/compose';
@@ -301,7 +302,10 @@ function FileEdit( {
 							<RichText
 								tagName="div" // Must be block-level or else cursor disappears.
 								aria-label={ __( 'Download button text' ) }
-								className={ 'wp-block-file__button' }
+								className={ classnames(
+									'wp-block-file__button',
+									__experimentalElementButtonClassName
+								) }
 								value={ downloadButtonText }
 								withoutInteractiveFormatting
 								placeholder={ __( 'Add text…' ) }

package/src/file/edit.native.js

@@ -452,7 +452,6 @@ export class FileEdit extends Component {
 						<TouchableWithoutFeedback
 							accessible={ ! isSelected }
 							onPress={ this.onFilePressed }
-							onLongPress={ openMediaOptions }
 							disabled={ ! isSelected }
 						>
 							<View

package/src/file/save.js

@@ -1,7 +1,16 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalElementButtonClassName,
+} from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 
 export default function save( { attributes } ) {
@@ -63,7 +72,10 @@ export default function save( { attributes } ) {
 				{ showDownloadButton && (
 					<a
 						href={ href }
-						className="wp-block-file__button"
+						className={ classnames(
+							'wp-block-file__button',
+							__experimentalElementButtonClassName
+						) }
 						download={ true }
 						aria-describedby={ describedById }
 					>

package/src/gallery/block.json

@@ -110,7 +110,7 @@
 		"html": false,
 		"units": [ "px", "em", "rem", "vh", "vw" ],
 		"spacing": {
-			"blockGap": true,
+			"blockGap": [ "horizontal", "vertical" ],
 			"__experimentalSkipSerialization": [ "blockGap" ],
 			"__experimentalDefaultControls": {
 				"blockGap": true

package/src/gallery/edit.js

@@ -204,10 +204,11 @@ function GalleryEdit( props ) {
 				: undefined;
 		}
 		return {
-			...pickRelevantMediaFiles( imageAttributes, sizeSlug ),
+			...pickRelevantMediaFiles( image, sizeSlug ),
 			...getHrefAndDestination( image, linkTo ),
 			...getUpdatedLinkTargetSettings( linkTarget, attributes ),
 			className: newClassName,
+			caption: imageAttributes.caption,
 			sizeSlug,
 		};
 	}

package/src/gallery/gallery.js

@@ -10,7 +10,7 @@ import { RichText, useInnerBlocksProps } from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { View } from '@wordpress/primitives';
 
 const allowedBlocks = [ 'core/image' ];
@@ -89,7 +89,7 @@ export const Gallery = ( props ) => {
 				onChange={ ( value ) => setAttributes( { caption: value } ) }
 				inlineToolbar
 				__unstableOnSplitAtEnd={ () =>
-					insertBlocksAfter( createBlock( 'core/paragraph' ) )
+					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
 				}
 			/>
 		</figure>

package/src/gallery/gap-styles.js

@@ -8,12 +8,27 @@ export default function GapStyles( { blockGap, clientId } ) {
 	const styleElement = useContext( BlockList.__unstableElementContext );
 	// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
 	// gap on the gallery.
-	const gapValue = blockGap
-		? blockGap
-		: `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;
-	const gap = `#block-${ clientId } { 
-		--wp--style--unstable-gallery-gap: ${ gapValue };
-		gap: ${ gapValue } 
+	const fallbackValue = `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;
+	let gapValue = fallbackValue;
+	let column = fallbackValue;
+	let row;
+
+	// Check for the possibility of split block gap values. See: https://github.com/WordPress/gutenberg/pull/37736
+	if ( !! blockGap ) {
+		row =
+			typeof blockGap === 'string'
+				? blockGap
+				: blockGap?.top || fallbackValue;
+		column =
+			typeof blockGap === 'string'
+				? blockGap
+				: blockGap?.left || fallbackValue;
+		gapValue = row === column ? row : `${ row } ${ column }`;
+	}
+
+	const gap = `#block-${ clientId } {
+		--wp--style--unstable-gallery-gap: ${ column };
+		gap: ${ gapValue }
 	}`;
 
 	const GapStyle = () => {