@wordpress/block-library 6.1.0 → 7.0.0

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

@@ -74,7 +74,11 @@ describe( 'Reusable block', () => {
 			return Promise.resolve( response );
 		} );
 
-		const { getByA11yLabel, getByTestId, getByText } = initializeEditor( {
+		const {
+			getByA11yLabel,
+			getByTestId,
+			getByText,
+		} = await initializeEditor( {
 			initialHtml: '',
 			capabilities: { reusableBlock: true },
 		} );
@@ -123,7 +127,7 @@ describe( 'Reusable block', () => {
 		const id = 3;
 		const initialHtml = `<!-- wp:block {"ref":${ id }} /-->`;
 
-		const { getByA11yLabel } = initializeEditor( {
+		const { getByA11yLabel } = await initializeEditor( {
 			initialHtml,
 		} );
 
@@ -158,7 +162,7 @@ describe( 'Reusable block', () => {
 			return Promise.resolve( response );
 		} );
 
-		const { getByA11yLabel } = initializeEditor( {
+		const { getByA11yLabel } = await initializeEditor( {
 			initialHtml,
 		} );
 

package/src/button/block.json

@@ -60,7 +60,11 @@
 		"alignWide": false,
 		"color": {
 			"__experimentalSkipSerialization": true,
-			"gradients": true
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"typography": {
 			"fontSize": true,

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

@@ -35,7 +35,7 @@ describe( 'Buttons block', () => {
 			<div class="wp-block-button"><a class="wp-block-button__link" style="border-radius:5px" >Hello</a></div>
 			<!-- /wp:button --></div>
 			<!-- /wp:buttons -->`;
-			const { getByA11yLabel } = initializeEditor( {
+			const { getByA11yLabel } = await initializeEditor( {
 				initialHtml,
 			} );
 
@@ -90,7 +90,7 @@ describe( 'Buttons block', () => {
 				const initialHtml = `<!-- wp:buttons -->
 				<div class="wp-block-buttons"><!-- wp:button /--></div>
 				<!-- /wp:buttons -->`;
-				const { getByA11yLabel, getByText } = initializeEditor( {
+				const { getByA11yLabel, getByText } = await initializeEditor( {
 					initialHtml,
 				} );
 

package/src/calendar/index.js

@@ -8,6 +8,7 @@ import { calendar as icon } from '@wordpress/icons';
  */
 import metadata from './block.json';
 import edit from './edit';
+import transforms from './transforms';
 
 const { name } = metadata;
 
@@ -17,4 +18,5 @@ export const settings = {
 	icon,
 	example: {},
 	edit,
+	transforms,
 };

package/src/calendar/transforms.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			blocks: [ 'core/archives' ],
+			transform: () => createBlock( 'core/calendar' ),
+		},
+	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/archives' ],
+			transform: () => createBlock( 'core/archives' ),
+		},
+	],
+};
+
+export default transforms;

package/src/code/block.json

@@ -44,7 +44,11 @@
 		"color": {
 			"text": true,
 			"background": true,
-			"gradients": true
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		}
 	},
 	"style": "wp-block-code"

package/src/code/transforms.js

@@ -12,7 +12,7 @@ const transforms = {
 		},
 		{
 			type: 'block',
-			blocks: [ 'core/html' ],
+			blocks: [ 'core/html', 'core/paragraph' ],
 			transform: ( { content } ) => {
 				return createBlock( 'core/code', {
 					content,

package/src/column/block.json

@@ -28,7 +28,11 @@
 		"html": false,
 		"color": {
 			"gradients": true,
-			"link": true
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"spacing": {
 			"padding": true,

package/src/columns/block.json

@@ -21,7 +21,11 @@
 		"html": false,
 		"color": {
 			"gradients": true,
-			"link": true
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"spacing": {
 			"blockGap": true,

package/src/comment-author-avatar/block.json

@@ -28,7 +28,10 @@
 		},
 		"color": {
 			"background": true,
-			"text": false
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true
+			}
 		},
 		"spacing": {
 			"__experimentalSkipSerialization": true,

package/src/comment-author-name/block.json

@@ -29,7 +29,12 @@
 		},
 		"color": {
 			"gradients": true,
-			"link": true
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
 		},
 		"typography": {
 			"fontSize": true,

package/src/comment-content/block.json

@@ -16,7 +16,11 @@
 	"supports": {
 		"color": {
 			"gradients": true,
-			"link": true
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"typography": {
 			"fontSize": true,

package/src/comment-date/block.json

@@ -21,7 +21,12 @@
 		"html": false,
 		"color": {
 			"gradients": true,
-			"link": true
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
 		},
 		"typography": {
 			"fontSize": true,

package/src/comment-date/index.php

@@ -31,7 +31,7 @@ function render_block_core_comment_date( $attributes, $content, $block ) {
 	$link               = get_comment_link( $comment );
 
 	if ( ! empty( $attributes['isLink'] ) ) {
-		$formatted_date = sprintf( '<a href="%1s">%2s</a>', esc_url( $link ), esc_html( $formatted_date ) );
+		$formatted_date = sprintf( '<a href="%1s">%2s</a>', esc_url( $link ), $formatted_date );
 	}
 
 	return sprintf(

package/src/comment-edit-link/block.json

@@ -22,7 +22,11 @@
 		"color": {
 			"link": true,
 			"gradients": true,
-			"text": false
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"link": true
+			}
 		},
 		"typography": {
 			"fontSize": true,

package/src/comment-reply-link/block.json

@@ -17,7 +17,11 @@
 		"color": {
 			"gradients": true,
 			"link": true,
-			"text": false
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"link": true
+			}
 		},
 		"typography": {
 			"fontSize": true,

package/src/comment-template/edit.js

@@ -1,15 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { useState, useMemo } from '@wordpress/element';
+import { useState, useMemo, memo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import {
 	BlockContextProvider,
-	BlockPreview,
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
+	__experimentalUseBlockPreview as useBlockPreview,
 } from '@wordpress/block-editor';
 import { Spinner } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
@@ -35,7 +35,7 @@ const TEMPLATE = [
  * @param {Array}  [props.comment]          - A comment object.
  * @param {Array}  [props.activeComment]    - The block that is currently active.
  * @param {Array}  [props.setActiveComment] - The setter for activeComment.
- * @param {Array}  [props.firstBlock]       - First comment in the array.
+ * @param {Array}  [props.firstComment]     - First comment in the array.
  * @param {Array}  [props.blocks]           - Array of blocks returned from
  *                                          getBlocks() in parent .
  * @return {WPElement}                 		Inner blocks of the Comment Template
@@ -44,7 +44,7 @@ function CommentTemplateInnerBlocks( {
 	comment,
 	activeComment,
 	setActiveComment,
-	firstBlock,
+	firstComment,
 	blocks,
 } ) {
 	const { children, ...innerBlocksProps } = useInnerBlocksProps(
@@ -53,15 +53,22 @@ function CommentTemplateInnerBlocks( {
 	);
 	return (
 		<li { ...innerBlocksProps }>
-			{ comment === ( activeComment || firstBlock ) ? (
-				children
-			) : (
-				<BlockPreview
-					blocks={ blocks }
-					__experimentalLive
-					__experimentalOnClick={ () => setActiveComment( comment ) }
-				/>
-			) }
+			{ comment === ( activeComment || firstComment ) ? children : 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. */ }
+			<MemoizedCommentTemplatePreview
+				blocks={ blocks }
+				comment={ comment }
+				setActiveComment={ setActiveComment }
+				isHidden={ comment === ( activeComment || firstComment ) }
+			/>
+
 			{ comment?.children?.length > 0 ? (
 				<CommentsList
 					comments={ comment.children }
@@ -74,6 +81,44 @@ function CommentTemplateInnerBlocks( {
 	);
 }
 
+const CommentTemplatePreview = ( {
+	blocks,
+	comment,
+	setActiveComment,
+	isHidden,
+} ) => {
+	const blockPreviewProps = useBlockPreview( {
+		blocks,
+	} );
+
+	const handleOnClick = () => {
+		setActiveComment( comment );
+	};
+
+	// We have to hide the preview block if the `comment` props points to
+	// the curently active block!
+
+	// Or, to put it differently, every preview block is visible unless it is the
+	// currently active block - in this case we render its inner blocks.
+	const style = {
+		display: isHidden ? 'none' : undefined,
+	};
+
+	return (
+		<div
+			{ ...blockPreviewProps }
+			tabIndex={ 0 }
+			role="button"
+			style={ style }
+			// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+			onClick={ handleOnClick }
+			onKeyPress={ handleOnClick }
+		/>
+	);
+};
+
+const MemoizedCommentTemplatePreview = memo( CommentTemplatePreview );
+
 /**
  * Component that renders a list of (nested) comments. It is called recursively.
  *
@@ -105,7 +150,7 @@ const CommentsList = ( {
 						activeComment={ activeComment }
 						setActiveComment={ setActiveComment }
 						blocks={ blocks }
-						firstBlock={ comments[ 0 ] }
+						firstComment={ comments[ 0 ] }
 					/>
 				</BlockContextProvider>
 			) ) }

package/src/comments-pagination/block.json

@@ -22,7 +22,12 @@
 		"html": false,
 		"color": {
 			"gradients": true,
-			"link": true
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
 		},
 		"__experimentalLayout": {
 			"allowSwitching": false,

package/src/comments-pagination-next/block.json

@@ -18,7 +18,10 @@
 		"html": false,
 		"color": {
 			"gradients": true,
-			"text": false
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true
+			}
 		},
 		"typography": {
 			"fontSize": true,

package/src/comments-pagination-previous/block.json

@@ -18,7 +18,10 @@
 		"html": false,
 		"color": {
 			"gradients": true,
-			"text": false
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true
+			}
 		},
 		"typography": {
 			"fontSize": true,

package/src/comments-query-loop/block.json

@@ -34,7 +34,12 @@
 		"html": false,
 		"color": {
 			"gradients": true,
-			"link": true
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-comments-editor"

package/src/common.scss

@@ -120,3 +120,12 @@ html :where(.has-border-color) {
 html :where([style*="border-width"]) {
 	border-style: solid;
 }
+
+
+/**
+ * Provide baseline responsiveness for images.
+ */
+html :where(img) {
+	height: auto;
+	max-width: 100%;
+}

package/src/cover/deprecated.js

@@ -14,6 +14,7 @@ import {
 	InnerBlocks,
 	__experimentalGetGradientClass,
 	useBlockProps,
+	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
@@ -26,6 +27,7 @@ import {
 	backgroundImageStyles,
 	getPositionClassName,
 	isContentPositionCenter,
+	dimRatioToClass,
 } from './shared';
 
 /**
@@ -79,6 +81,214 @@ const blockAttributes = {
 	},
 };
 
+// v8: deprecated to remove duplicated gradient classes and swap `wp-block-cover__gradient-background` for `wp-block-cover__background`.
+const v8 = {
+	attributes: {
+		url: {
+			type: 'string',
+		},
+		id: {
+			type: 'number',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+		},
+		hasParallax: {
+			type: 'boolean',
+			default: false,
+		},
+		isRepeated: {
+			type: 'boolean',
+			default: false,
+		},
+		dimRatio: {
+			type: 'number',
+			default: 100,
+		},
+		overlayColor: {
+			type: 'string',
+		},
+		customOverlayColor: {
+			type: 'string',
+		},
+		backgroundType: {
+			type: 'string',
+			default: 'image',
+		},
+		focalPoint: {
+			type: 'object',
+		},
+		minHeight: {
+			type: 'number',
+		},
+		minHeightUnit: {
+			type: 'string',
+		},
+		gradient: {
+			type: 'string',
+		},
+		customGradient: {
+			type: 'string',
+		},
+		contentPosition: {
+			type: 'string',
+		},
+		isDark: {
+			type: 'boolean',
+			default: true,
+		},
+		allowedBlocks: {
+			type: 'array',
+		},
+		templateLock: {
+			type: [ 'string', 'boolean' ],
+			enum: [ 'all', 'insert', false ],
+		},
+	},
+	supports: {
+		anchor: true,
+		align: true,
+		html: false,
+		spacing: {
+			padding: true,
+			__experimentalDefaultControls: {
+				padding: true,
+			},
+		},
+		color: {
+			__experimentalDuotone:
+				'> .wp-block-cover__image-background, > .wp-block-cover__video-background',
+			text: false,
+			background: false,
+		},
+	},
+	save( { attributes } ) {
+		const {
+			backgroundType,
+			gradient,
+			contentPosition,
+			customGradient,
+			customOverlayColor,
+			dimRatio,
+			focalPoint,
+			hasParallax,
+			isDark,
+			isRepeated,
+			overlayColor,
+			url,
+			alt,
+			id,
+			minHeight: minHeightProp,
+			minHeightUnit,
+		} = attributes;
+		const overlayColorClass = getColorClassName(
+			'background-color',
+			overlayColor
+		);
+		const gradientClass = __experimentalGetGradientClass( gradient );
+		const minHeight = minHeightUnit
+			? `${ minHeightProp }${ minHeightUnit }`
+			: minHeightProp;
+
+		const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
+		const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
+
+		const isImgElement = ! ( hasParallax || isRepeated );
+
+		const style = {
+			...( isImageBackground && ! isImgElement
+				? backgroundImageStyles( url )
+				: {} ),
+			minHeight: minHeight || undefined,
+		};
+
+		const bgStyle = {
+			backgroundColor: ! overlayColorClass
+				? customOverlayColor
+				: undefined,
+			background: customGradient ? customGradient : undefined,
+		};
+
+		const objectPosition =
+			// prettier-ignore
+			focalPoint && isImgElement
+				 ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
+				 : undefined;
+
+		const classes = classnames(
+			{
+				'is-light': ! isDark,
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+				'has-custom-content-position': ! isContentPositionCenter(
+					contentPosition
+				),
+			},
+			getPositionClassName( contentPosition )
+		);
+
+		return (
+			<div { ...useBlockProps.save( { className: classes, style } ) }>
+				<span
+					aria-hidden="true"
+					className={ classnames(
+						overlayColorClass,
+						dimRatioToClass( dimRatio ),
+						'wp-block-cover__gradient-background',
+						gradientClass,
+						{
+							'has-background-dim': dimRatio !== undefined,
+							'has-background-gradient':
+								gradient || customGradient,
+							[ gradientClass ]: ! url && gradientClass,
+						}
+					) }
+					style={ bgStyle }
+				/>
+
+				{ isImageBackground && isImgElement && url && (
+					<img
+						className={ classnames(
+							'wp-block-cover__image-background',
+							id ? `wp-image-${ id }` : null
+						) }
+						alt={ alt }
+						src={ url }
+						style={ { objectPosition } }
+						data-object-fit="cover"
+						data-object-position={ objectPosition }
+					/>
+				) }
+				{ isVideoBackground && url && (
+					<video
+						className={ classnames(
+							'wp-block-cover__video-background',
+							'intrinsic-ignore'
+						) }
+						autoPlay
+						muted
+						loop
+						playsInline
+						src={ url }
+						style={ { objectPosition } }
+						data-object-fit="cover"
+						data-object-position={ objectPosition }
+					/>
+				) }
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-cover__inner-container',
+					} ) }
+				/>
+			</div>
+		);
+	},
+};
+
 const v7 = {
 	attributes: {
 		...blockAttributes,
@@ -808,4 +1018,4 @@ const v1 = {
 	},
 };
 
-export default [ v7, v6, v5, v4, v3, v2, v1 ];
+export default [ v8, v7, v6, v5, v4, v3, v2, v1 ];