@wordpress/block-library 7.3.10 → 7.6.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.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/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/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/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/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

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

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/shared.js

@@ -8,11 +8,12 @@ export function defaultColumnsNumber( imageCount ) {
 }
 
 export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
-	const imageProps = pick( image, [ 'alt', 'id', 'link', 'caption' ] );
+	const imageProps = pick( image, [ 'alt', 'id', 'link' ] );
 	imageProps.url =
 		get( image, [ 'sizes', sizeSlug, 'url' ] ) ||
 		get( image, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] ) ||
-		image.url;
+		image.url ||
+		image.source_url;
 	const fullUrl =
 		get( image, [ 'sizes', 'full', 'url' ] ) ||
 		get( image, [ 'media_details', 'sizes', 'full', 'source_url' ] );

package/src/gallery/use-get-media.js

@@ -32,7 +32,8 @@ export default function useGetMedia( innerBlockImages ) {
 
 			return select( coreStore ).getMediaItems( {
 				include: imageIds.join( ',' ),
-				per_page: -1,
+				per_page: imageIds.length,
+				orderby: 'include',
 			} );
 		},
 		[ innerBlockImages ]

package/src/gallery/use-short-code-transform.js

@@ -23,20 +23,13 @@ export default function useShortCodeTransform( shortCodeTransforms ) {
 			if ( ! shortCodeTransforms || shortCodeTransforms.length === 0 ) {
 				return;
 			}
-			const getMedia = select( coreStore ).getMedia;
-			return shortCodeTransforms.map( ( image ) => {
-				const imageData = getMedia( image.id );
-				if ( imageData ) {
-					return {
-						id: imageData.id,
-						type: 'image',
-						url: imageData.source_url,
-						mime: imageData.mime_type,
-						alt: imageData.alt_text,
-						link: imageData.link,
-					};
-				}
-				return undefined;
+
+			const imageIds = shortCodeTransforms.map( ( image ) => image.id );
+
+			return select( coreStore ).getMediaItems( {
+				include: imageIds.join( ',' ),
+				per_page: imageIds.length,
+				orderby: 'include',
 			} );
 		},
 		[ shortCodeTransforms ]
@@ -46,7 +39,17 @@ export default function useShortCodeTransform( shortCodeTransforms ) {
 		return;
 	}
 
-	if ( every( newImageData, ( img ) => img && img.url ) ) {
-		return newImageData;
+	if ( every( newImageData, ( img ) => img && img.source_url ) ) {
+		return newImageData.map( ( imageData ) => {
+			return {
+				id: imageData.id,
+				type: 'image',
+				url: imageData.source_url,
+				mime: imageData.mime_type,
+				alt: imageData.alt_text,
+				link: imageData.link,
+				caption: imageData?.caption?.raw,
+			};
+		} );
 	}
 }

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/gallery/v1/gallery.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { RichText } from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -101,7 +101,7 @@ export const Gallery = ( props ) => {
 				onChange={ ( value ) => setAttributes( { caption: value } ) }
 				inlineToolbar
 				__unstableOnSplitAtEnd={ () =>
-					insertBlocksAfter( createBlock( 'core/paragraph' ) )
+					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
 				}
 			/>
 		</figure>

package/src/group/block.json

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

package/src/heading/block.json

@@ -43,6 +43,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"__experimentalFontFamily": true,
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,

package/src/heading/edit.js

@@ -42,10 +42,13 @@ function HeadingEdit( {
 	} );
 
 	const { canGenerateAnchors } = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
+		const { getGlobalBlockCount, getSettings } = select( blockEditorStore );
+		const settings = getSettings();
 
 		return {
-			canGenerateAnchors: !! settings.generateAnchors,
+			canGenerateAnchors:
+				!! settings.generateAnchors ||
+				getGlobalBlockCount( 'core/table-of-contents' ) > 0,
 		};
 	}, [] );
 

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>