@wordpress/block-library 7.16.0 → 7.18.0

package/src/audio/edit.js

@@ -13,6 +13,7 @@ import {
 	SelectControl,
 	Spinner,
 	ToggleControl,
+	ToolbarButton,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -25,12 +26,13 @@ import {
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useState, useCallback } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { audio as icon } from '@wordpress/icons';
+import { audio as icon, caption as captionIcon } from '@wordpress/icons';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { store as noticesStore } from '@wordpress/notices';
+import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -48,6 +50,8 @@ function AudioEdit( {
 	insertBlocksAfter,
 } ) {
 	const { id, autoplay, caption, loop, preload, src } = attributes;
+	const prevCaption = usePrevious( caption );
+	const [ showCaption, setShowCaption ] = useState( !! caption );
 	const isTemporaryAudio = ! id && isBlobURL( src );
 	const mediaUpload = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -69,6 +73,30 @@ function AudioEdit( {
 		}
 	}, [] );
 
+	// 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.
+	const captionRef = useCallback(
+		( node ) => {
+			if ( node && ! caption ) {
+				node.focus();
+			}
+		},
+		[ caption ]
+	);
+
+	useEffect( () => {
+		if ( ! isSelected && ! caption ) {
+			setShowCaption( false );
+		}
+	}, [ isSelected, caption ] );
+
 	function toggleAttribute( attribute ) {
 		return ( newValue ) => {
 			setAttributes( { [ attribute ]: newValue } );
@@ -106,12 +134,20 @@ function AudioEdit( {
 		if ( ! media || ! media.url ) {
 			// In this case there was an error and we should continue in the editing state
 			// previous attributes should be removed because they may be temporary blob urls.
-			setAttributes( { src: undefined, id: undefined } );
+			setAttributes( {
+				src: undefined,
+				id: undefined,
+				caption: undefined,
+			} );
 			return;
 		}
 		// Sets the block's attribute and updates the edit component from the
 		// selected media, then switches off the editing UI.
-		setAttributes( { src: media.url, id: media.id } );
+		setAttributes( {
+			src: media.url,
+			id: media.id,
+			caption: media.caption,
+		} );
 	}
 
 	const classes = classnames( className, {
@@ -140,6 +176,23 @@ function AudioEdit( {
 
 	return (
 		<>
+			<BlockControls group="block">
+				<ToolbarButton
+					onClick={ () => {
+						setShowCaption( ! showCaption );
+						if ( showCaption && caption ) {
+							setAttributes( { caption: undefined } );
+						}
+					} }
+					icon={ captionIcon }
+					isPressed={ showCaption }
+					label={
+						showCaption
+							? __( 'Remove caption' )
+							: __( 'Add caption' )
+					}
+				/>
+			</BlockControls>
 			<BlockControls group="other">
 				<MediaReplaceFlow
 					mediaId={ id }
@@ -195,26 +248,28 @@ function AudioEdit( {
 					<audio controls="controls" src={ src } />
 				</Disabled>
 				{ isTemporaryAudio && <Spinner /> }
-				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
-					<RichText
-						tagName="figcaption"
-						className={ __experimentalGetElementClassName(
-							'caption'
-						) }
-						aria-label={ __( 'Audio caption text' ) }
-						placeholder={ __( 'Add caption' ) }
-						value={ caption }
-						onChange={ ( value ) =>
-							setAttributes( { caption: value } )
-						}
-						inlineToolbar
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter(
-								createBlock( getDefaultBlockName() )
-							)
-						}
-					/>
-				) }
+				{ showCaption &&
+					( ! RichText.isEmpty( caption ) || isSelected ) && (
+						<RichText
+							tagName="figcaption"
+							className={ __experimentalGetElementClassName(
+								'caption'
+							) }
+							ref={ captionRef }
+							aria-label={ __( 'Audio caption text' ) }
+							placeholder={ __( 'Add caption' ) }
+							value={ caption }
+							onChange={ ( value ) =>
+								setAttributes( { caption: value } )
+							}
+							inlineToolbar
+							__unstableOnSplitAtEnd={ () =>
+								insertBlocksAfter(
+									createBlock( getDefaultBlockName() )
+								)
+							}
+						/>
+					) }
 			</figure>
 		</>
 	);

package/src/avatar/index.php

@@ -127,7 +127,7 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 			$label = 'aria-label="' . sprintf( esc_attr__( '(%s website link, opens in a new tab)' ), $comment->comment_author ) . '"';
 		}
 		// translators: %1$s: Comment Author website link. %2$s: Link target. %3$s Aria label. %4$s Avatar image.
-		$avatar_block = sprintf( '<a href="%1$s" target="%2$s" %3$s class="wp-block-avatar__link">%4$s</a>', $comment->comment_author_url, esc_attr( $attributes['linkTarget'] ), $label, $avatar_block );
+		$avatar_block = sprintf( '<a href="%1$s" target="%2$s" %3$s class="wp-block-avatar__link">%4$s</a>', esc_url( $comment->comment_author_url ), esc_attr( $attributes['linkTarget'] ), $label, $avatar_block );
 	}
 	return sprintf( '<div %1s>%2s</div>', $wrapper_attributes, $avatar_block );
 }

package/src/button/edit.js

@@ -221,7 +221,7 @@ function ButtonEdit( props ) {
 			</BlockControls>
 			{ isSelected && ( isEditingURL || isURLSet ) && (
 				<Popover
-					position="bottom center"
+					placement="bottom"
 					onClose={ () => {
 						setIsEditingURL( false );
 						richTextRef.current?.focus();

package/src/button/style.scss

@@ -113,4 +113,6 @@ $blocks-block__margin: 0.5em;
 .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background),
 .wp-block-button .wp-block-button__link.is-style-outline:not(.has-background) {
 	background-color: transparent;
+	// background-image is required to overwrite a gradient background
+	background-image: none;
 }

package/src/buttons/edit.native.js

@@ -139,7 +139,7 @@ export default function ButtonsEdit( {
 						}
 						popoverProps={ {
 							position: 'bottom right',
-							isAlternate: true,
+							variant: 'toolbar',
 						} }
 					/>
 				</BlockControls>

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

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Code renders given text without crashing 1`] = `
+"<!-- wp:code -->
+<pre class=\\"wp-block-code\\"><code>Sample text</code></pre>
+<!-- /wp:code -->"
+`;
+
+exports[`Code renders without crashing 1`] = `
+"<!-- wp:code -->
+<pre class=\\"wp-block-code\\"><code></code></pre>
+<!-- /wp:code -->"
+`;

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/block.json

@@ -9,9 +9,13 @@
 	"textdomain": "default",
 	"usesContext": [ "postId" ],
 	"supports": {
-		"reusable": false,
-		"html": false,
 		"align": true,
+		"html": false,
+		"reusable": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

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/comment-template/style.scss

@@ -1,4 +1,6 @@
 .wp-block-comment-template {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 	margin-bottom: 0;
 	max-width: 100%;
 	list-style: none;

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/inspector-controls.js

@@ -3,7 +3,6 @@
  */
 import { Fragment, useMemo } from '@wordpress/element';
 import {
-	BaseControl,
 	Button,
 	ExternalLink,
 	FocalPointPicker,
@@ -73,18 +72,17 @@ function CoverHeightInput( {
 	const min = isPx ? COVER_MIN_HEIGHT : 0;
 
 	return (
-		<BaseControl label={ __( 'Minimum height of cover' ) } id={ inputId }>
-			<UnitControl
-				id={ inputId }
-				isResetValueOnUnitChange
-				min={ min }
-				onChange={ handleOnChange }
-				onUnitChange={ onUnitChange }
-				style={ { maxWidth: 80 } }
-				units={ units }
-				value={ computedValue }
-			/>
-		</BaseControl>
+		<UnitControl
+			label={ __( 'Minimum height of cover' ) }
+			id={ inputId }
+			isResetValueOnUnitChange
+			min={ min }
+			onChange={ handleOnChange }
+			onUnitChange={ onUnitChange }
+			__unstableInputWidth={ '80px' }
+			units={ units }
+			value={ computedValue }
+		/>
 	);
 }
 export default function CoverInspectorControls( {

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.