@wordpress/block-library 7.16.0 → 7.17.0

package/src/code/test/edit.native.js

@@ -1,51 +1,65 @@
 /**
  * External dependencies
  */
-import renderer from 'react-test-renderer';
-import { TextInput } from 'react-native';
+import {
+	fireEvent,
+	getEditorHtml,
+	initializeEditor,
+	addBlock,
+	getBlock,
+} from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
-import { BlockEdit } from '@wordpress/block-editor';
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { metadata, settings, name } from '../index';
-
-const Code = ( { clientId, ...props } ) => (
-	<BlockEdit name={ name } clientId={ clientId || 0 } { ...props } />
-);
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
 
 describe( 'Code', () => {
 	beforeAll( () => {
-		registerBlockType( name, {
-			...metadata,
-			...settings,
-		} );
+		// Register all core blocks
+		registerCoreBlocks();
 	} );
 
 	afterAll( () => {
-		unregisterBlockType( name );
+		// Clean up registered blocks
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
 	} );
 
-	it( 'renders without crashing', () => {
-		const component = renderer.create(
-			<Code attributes={ { content: '' } } />
-		);
-		const rendered = component.toJSON();
-		expect( rendered ).toBeTruthy();
+	it( 'renders without crashing', async () => {
+		const screen = await initializeEditor();
+
+		// Add block
+		await addBlock( screen, 'Code' );
+
+		// Get block
+		const codeBlock = await getBlock( screen, 'Code' );
+		expect( codeBlock ).toBeVisible();
+
+		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
-	it( 'renders given text without crashing', () => {
-		const component = renderer.create(
-			<Code attributes={ { content: 'sample text' } } />
-		);
-		const testInstance = component.root;
-		const textInput = testInstance.findByType( TextInput );
-		expect( textInput ).toBeTruthy();
-		expect( textInput.props.value ).toBe( 'sample text' );
+	it( 'renders given text without crashing', async () => {
+		const initialHtml = `<!-- wp:code -->
+		<pre class="wp-block-code"><code>Sample text</code></pre>
+		<!-- /wp:code -->`;
+
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+		const { getByDisplayValue } = screen;
+
+		// Get block
+		const codeBlock = await getBlock( screen, 'Code' );
+		expect( codeBlock ).toBeVisible();
+		fireEvent.press( codeBlock );
+
+		// Get initial text
+		const codeBlockText = getByDisplayValue( 'Sample text' );
+		expect( codeBlockText ).toBeVisible();
+
+		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 } );

package/src/comment-template/edit.js

@@ -37,6 +37,7 @@ const TEMPLATE = [
  *
  * @param {Object}  settings                       Discussion Settings.
  * @param {number}  [settings.perPage]             - Comments per page setting or block attribute.
+ * @param {boolean} [settings.pageComments]        - Enable break comments into pages setting.
  * @param {boolean} [settings.threadComments]      - Enable threaded (nested) comments setting.
  * @param {number}  [settings.threadCommentsDepth] - Level deep of threaded comments.
  *
@@ -45,42 +46,53 @@ const TEMPLATE = [
  */
 const getCommentsPlaceholder = ( {
 	perPage,
+	pageComments,
 	threadComments,
 	threadCommentsDepth,
 } ) => {
-	// In case that `threadCommentsDepth` is falsy, we default to a somewhat
-	// arbitrary value of 3.
-	// In case that the value is set but larger than 3 we truncate it to 3.
-	const commentsDepth = Math.min( threadCommentsDepth || 3, 3 );
+	// Limit commentsDepth to 3
+	const commentsDepth = ! threadComments
+		? 1
+		: Math.min( threadCommentsDepth, 3 );
 
-	// We set a limit in order not to overload the editor of empty comments.
-	const defaultCommentsToShow =
-		perPage <= commentsDepth ? perPage : commentsDepth;
-	if ( ! threadComments || defaultCommentsToShow === 1 ) {
-		// If displaying threaded comments is disabled, we only show one comment
-		// A commentId is negative in order to avoid conflicts with the actual comments.
-		return [ { commentId: -1, children: [] } ];
-	} else if ( defaultCommentsToShow === 2 ) {
-		return [
-			{
-				commentId: -1,
-				children: [ { commentId: -2, children: [] } ],
-			},
-		];
-	}
+	const buildChildrenComment = ( commentsLevel ) => {
+		// Render children comments until commentsDepth is reached
+		if ( commentsLevel < commentsDepth ) {
+			const nextLevel = commentsLevel + 1;
 
-	// In case that the value is set but larger than 3 we truncate it to 3.
-	return [
-		{
-			commentId: -1,
-			children: [
+			return [
 				{
-					commentId: -2,
-					children: [ { commentId: -3, children: [] } ],
+					commentId: -( commentsLevel + 3 ),
+					children: buildChildrenComment( nextLevel ),
 				},
-			],
-		},
+			];
+		}
+		return [];
+	};
+
+	// Add the first comment and its children
+	const placeholderComments = [
+		{ commentId: -1, children: buildChildrenComment( 1 ) },
 	];
+
+	// Add a second comment unless the break comments setting is active and set to less than 2, and there is one nested comment max
+	if ( ( ! pageComments || perPage >= 2 ) && commentsDepth < 3 ) {
+		placeholderComments.push( {
+			commentId: -2,
+			children: [],
+		} );
+	}
+
+	// Add a third comment unless the break comments setting is active and set to less than 3, and there aren't nested comments
+	if ( ( ! pageComments || perPage >= 3 ) && commentsDepth < 2 ) {
+		placeholderComments.push( {
+			commentId: -3,
+			children: [],
+		} );
+	}
+
+	// In case that the value is set but larger than 3 we truncate it to 3.
+	return placeholderComments;
 };
 
 /**
@@ -114,12 +126,11 @@ function CommentTemplateInnerBlocks( {
 				: null }
 
 			{ /* To avoid flicker when switching active block contexts, a preview
-			is ALWAYS rendered and the preview for the active block is hidden.
-			This ensures that when switching the active block, the component is not
-			mounted again but rather it only toggles the `isHidden` prop.
-
-			The same strategy is used for preventing the flicker in the Post Template
-			block. */ }
+			 is ALWAYS rendered and the preview for the active block is hidden.
+			 This ensures that when switching the active block, the component is not
+			 mounted again but rather it only toggles the `isHidden` prop.
+			 The same strategy is used for preventing the flicker in the Post Template
+			 block. */ }
 			<MemoizedCommentTemplatePreview
 				blocks={ blocks }
 				commentId={ comment.commentId }
@@ -239,6 +250,7 @@ export default function CommentTemplateEdit( {
 		threadCommentsDepth,
 		threadComments,
 		commentsPerPage,
+		pageComments,
 	} = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings().__experimentalDiscussionSettings;
@@ -282,6 +294,7 @@ export default function CommentTemplateEdit( {
 	if ( ! postId ) {
 		commentTree = getCommentsPlaceholder( {
 			perPage: commentsPerPage,
+			pageComments,
 			threadComments,
 			threadCommentsDepth,
 		} );

package/src/comments/block.json

@@ -18,7 +18,6 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
-		"html": false,
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -28,6 +27,11 @@
 				"link": true
 			}
 		},
+		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/comments/edit/placeholder.js

@@ -5,7 +5,6 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useEntityProp } from '@wordpress/core-data';
-import { useDisabled } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -22,13 +21,8 @@ export default function PostCommentsPlaceholder( { postType, postId } ) {
 				.__experimentalDiscussionSettings
 	);
 
-	const disabledRef = useDisabled();
-
 	return (
-		<div
-			className="wp-block-comments__legacy-placeholder"
-			ref={ disabledRef }
-		>
+		<div className="wp-block-comments__legacy-placeholder" inert="true">
 			<h3>
 				{
 					/* translators: %s: Post title. */

package/src/comments/style.scss

@@ -1,5 +1,7 @@
 /* Styles for backwards compatibility with the legacy `post-comments` block */
 .wp-block-post-comments {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 
 	/* utility classes */
 	.alignleft {

package/src/comments-title/edit.js

@@ -11,11 +11,13 @@ import {
 	BlockControls,
 	useBlockProps,
 	InspectorControls,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useEntityProp } from '@wordpress/core-data';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -39,9 +41,30 @@ export default function Edit( {
 		} ),
 	} );
 
+	const {
+		threadCommentsDepth,
+		threadComments,
+		commentsPerPage,
+		pageComments,
+	} = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return getSettings().__experimentalDiscussionSettings;
+	} );
+
 	useEffect( () => {
 		if ( isSiteEditor ) {
-			setCommentsCount( 3 );
+			// Match the number of comments that will be shown in the comment-template/edit.js placeholder
+
+			const nestedCommentsNumber = threadComments
+				? Math.min( threadCommentsDepth, 3 ) - 1
+				: 0;
+			const topLevelCommentsNumber = pageComments ? commentsPerPage : 3;
+
+			const commentsNumber =
+				parseInt( nestedCommentsNumber ) +
+				parseInt( topLevelCommentsNumber );
+
+			setCommentsCount( Math.min( commentsNumber, 3 ) );
 			return;
 		}
 		const currentPostId = postId;

package/src/cover/edit/index.js

@@ -131,13 +131,7 @@ function CoverEdit( {
 		createErrorNotice( message, { type: 'snackbar' } );
 	};
 
-	const mediaElement = useRef();
-	const isCoverDark = useCoverIsDark(
-		url,
-		dimRatio,
-		overlayColor.color,
-		mediaElement
-	);
+	const isCoverDark = useCoverIsDark( url, dimRatio, overlayColor.color );
 
 	useEffect( () => {
 		// This side-effect should not create an undo level.
@@ -201,6 +195,7 @@ function CoverEdit( {
 		}
 	);
 
+	const mediaElement = useRef();
 	const currentSettings = {
 		isVideoBackground,
 		isImageBackground,

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

@@ -8,6 +8,7 @@ import { colord } from 'colord';
  * WordPress dependencies
  */
 import { useEffect, useState } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
 
 function retrieveFastAverageColor() {
 	if ( ! retrieveFastAverageColor.fastAverageColor ) {
@@ -25,34 +26,33 @@ function retrieveFastAverageColor() {
  *                               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
-) {
+export default function useCoverIsDark( url, dimRatio = 50, overlayColor ) {
 	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 ) {
+		if ( url && dimRatio <= 50 ) {
+			const imgCrossOrigin = applyFilters(
+				'media.crossOrigin',
+				undefined,
+				url
+			);
 			retrieveFastAverageColor()
-				.getColorAsync( elementRef.current, {
+				.getColorAsync( url, {
 					// Previously the default color was white, but that changed
 					// in v6.0.0 so it has to be manually set now.
 					defaultColor: [ 255, 255, 255, 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,
 				} )
 				.then( ( color ) => setIsDark( color.isDark ) );
 		}
-	}, [ url, url && dimRatio <= 50 && elementRef.current, setIsDark ] );
+	}, [ url, url && dimRatio <= 50, setIsDark ] );
 	useEffect( () => {
 		// If opacity is greater than 50 the dominant color is the overlay color,
 		// so use that color for the dark mode computation.

package/src/cover/editor.scss

@@ -107,3 +107,10 @@
 .color-block-support-panel__inner-wrapper > :not(.block-editor-tools-panel-color-gradient-settings__item) {
 	margin-top: $grid-unit-30;
 }
+
+
+// The frontend style.scss includes a min-height as an IE11 fix.
+// This fix causes extra spacing for the focus style in the editor, so we omit it here.
+.wp-block-cover::after {
+	min-height: auto;
+}

package/src/embed/variations.js

@@ -309,7 +309,7 @@ const variations = [
 		icon: embedTumblrIcon,
 		keywords: [ __( 'social' ) ],
 		description: __( 'Embed a Tumblr post.' ),
-		patterns: [ /^https?:\/\/(www\.)?tumblr\.com\/.+/i ],
+		patterns: [ /^https?:\/\/(.+)\.tumblr\.com\/.+/i ],
 		attributes: { providerNameSlug: 'tumblr', responsive: true },
 	},
 	{

package/src/gallery/transforms.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, every } from 'lodash';
+import { filter } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -133,10 +133,14 @@ const transforms = {
 				// Init the align and size from the first item which may be either the placeholder or an image.
 				let { align, sizeSlug } = attributes[ 0 ];
 				// Loop through all the images and check if they have the same align and size.
-				align = every( attributes, [ 'align', align ] )
+				align = attributes.every(
+					( attribute ) => attribute.align === align
+				)
 					? align
 					: undefined;
-				sizeSlug = every( attributes, [ 'sizeSlug', sizeSlug ] )
+				sizeSlug = attributes.every(
+					( attribute ) => attribute.sizeSlug === sizeSlug
+				)
 					? sizeSlug
 					: undefined;
 
@@ -268,8 +272,7 @@ const transforms = {
 			isMatch( files ) {
 				return (
 					files.length !== 1 &&
-					every(
-						files,
+					files.every(
 						( file ) => file.type.indexOf( 'image/' ) === 0
 					)
 				);

package/src/gallery/v1/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { every, filter, find, get, isEmpty, map, reduce, some } from 'lodash';
+import { filter, find, get, isEmpty, map, reduce, some } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -333,7 +333,7 @@ function GalleryEdit( props ) {
 			Platform.OS === 'web' &&
 			images &&
 			images.length > 0 &&
-			every( images, ( { url } ) => isBlobURL( url ) )
+			images.every( ( { url } ) => isBlobURL( url ) )
 		) {
 			const filesList = map( images, ( { url } ) => getBlobByURL( url ) );
 			images.forEach( ( { url } ) => revokeBlobURL( url ) );

package/src/group/editor.scss

@@ -42,6 +42,7 @@
 		flex: 1 0 $grid-unit-60;
 		pointer-events: none;
 		min-height: $grid-unit-60 - $border-width - $border-width;
+		border: $border-width dashed currentColor;
 		@include placeholder-style();
 	}
 

package/src/image/editor.scss

@@ -66,7 +66,10 @@ figure.wp-block-image:not(.wp-block) {
 
 // This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image.
 .wp-block-image .components-resizable-box__container {
-	display: inline-block;
+	// Using "display: table" because:
+	// - it visually hides empty white space in between elements
+	// - it allows the element to be as wide as its contents (instead of 100% width, as it would be with `display: block`)
+	display: table;
 	img {
 		display: block;
 		width: inherit;

package/src/image/image.js

@@ -40,7 +40,12 @@ import {
 	getDefaultBlockName,
 	switchToBlockType,
 } from '@wordpress/blocks';
-import { crop, overlayText, upload } from '@wordpress/icons';
+import {
+	crop,
+	overlayText,
+	upload,
+	caption as captionIcon,
+} from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -89,7 +94,8 @@ export default function Image( {
 	} = attributes;
 	const imageRef = useRef();
 	const captionRef = useRef();
-	const prevUrl = usePrevious( url );
+	const prevCaption = usePrevious( caption );
+	const [ showCaption, setShowCaption ] = useState( !! caption );
 	const { allowResize = true } = context;
 	const { getBlock } = useSelect( blockEditorStore );
 
@@ -180,15 +186,20 @@ export default function Image( {
 			.catch( () => {} );
 	}, [ id, url, isSelected, externalBlob ] );
 
-	// Focus the caption after inserting an image from the placeholder. This is
-	// done to preserve the behaviour of focussing the first tabbable element
-	// when a block is mounted. Previously, the image block would remount when
-	// the placeholder is removed. Maybe this behaviour could be removed.
+	// We need to show the caption when changes come from
+	// history navigation(undo/redo).
+	useEffect( () => {
+		if ( caption && ! prevCaption ) {
+			setShowCaption( true );
+		}
+	}, [ caption, prevCaption ] );
+
+	// Focus the caption when we click to add one.
 	useEffect( () => {
-		if ( url && ! prevUrl && isSelected ) {
-			captionRef.current.focus();
+		if ( showCaption && ! caption ) {
+			captionRef.current?.focus();
 		}
-	}, [ url, prevUrl ] );
+	}, [ caption, showCaption ] );
 
 	// Get naturalWidth and naturalHeight from image ref, and fall back to loaded natural
 	// width and height. This resolves an issue in Safari where the loaded natural
@@ -297,8 +308,11 @@ export default function Image( {
 	useEffect( () => {
 		if ( ! isSelected ) {
 			setIsEditingImage( false );
+			if ( ! caption ) {
+				setShowCaption( false );
+			}
 		}
-	}, [ isSelected ] );
+	}, [ isSelected, caption ] );
 
 	const canEditImage = id && naturalWidth && naturalHeight && imageEditing;
 	const allowCrop = ! multiImageSelection && canEditImage && ! isEditingImage;
@@ -319,6 +333,19 @@ export default function Image( {
 						onChange={ updateAlignment }
 					/>
 				) }
+				{ ! isContentLocked && (
+					<ToolbarButton
+						onClick={ () => {
+							setShowCaption( ! showCaption );
+							if ( showCaption && caption ) {
+								setAttributes( { caption: undefined } );
+							}
+						} }
+						icon={ captionIcon }
+						isPressed={ showCaption }
+						label={ __( 'Caption' ) }
+					/>
+				) }
 				{ ! multiImageSelection && ! isEditingImage && (
 					<ImageURLInputUI
 						url={ href || '' }
@@ -591,25 +618,28 @@ export default function Image( {
 				which causes duplicated image upload. */ }
 			{ ! temporaryURL && controls }
 			{ img }
-			{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
-				<RichText
-					className={ __experimentalGetElementClassName( 'caption' ) }
-					ref={ captionRef }
-					tagName="figcaption"
-					aria-label={ __( 'Image caption text' ) }
-					placeholder={ __( 'Add caption' ) }
-					value={ caption }
-					onChange={ ( value ) =>
-						setAttributes( { caption: value } )
-					}
-					inlineToolbar
-					__unstableOnSplitAtEnd={ () =>
-						insertBlocksAfter(
-							createBlock( getDefaultBlockName() )
-						)
-					}
-				/>
-			) }
+			{ showCaption &&
+				( ! RichText.isEmpty( caption ) || isSelected ) && (
+					<RichText
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
+						ref={ captionRef }
+						tagName="figcaption"
+						aria-label={ __( 'Image caption text' ) }
+						placeholder={ __( 'Add caption' ) }
+						value={ caption }
+						onChange={ ( value ) =>
+							setAttributes( { caption: value } )
+						}
+						inlineToolbar
+						__unstableOnSplitAtEnd={ () =>
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
+						}
+					/>
+				) }
 		</ImageEditingProvider>
 	);
 }

package/src/image/transforms.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { every } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -157,8 +152,7 @@ const transforms = {
 						}
 					);
 				}
-				return every(
-					files,
+				return files.every(
 					( file ) => file.type.indexOf( 'image/' ) === 0
 				);
 			},