@wordpress/block-library 8.5.0 → 8.7.0

package/src/buttons/edit.native.js

@@ -103,7 +103,7 @@ export default function ButtonsEdit( {
 
 			const insertedBlock = createBlock( 'core/button' );
 
-			insertBlock( insertedBlock, index, clientId );
+			insertBlock( insertedBlock, index, clientId, false );
 			selectBlock( insertedBlock.clientId );
 		}, 200 ),
 		[]

package/src/buttons/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Buttons block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Solid Button</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"gradient":"luminous-vivid-amber-to-luminous-vivid-orange"} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background has-background wp-element-button">Gradient Button</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Buttons block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Solid Button</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"gradient":"luminous-vivid-amber-to-luminous-vivid-orange"} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background has-background wp-element-button">Gradient Button</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:group -->"
+`;

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

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Buttons';
+const initialHtml = `
+<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Solid Button</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"gradient":"luminous-vivid-amber-to-luminous-vivid-orange"} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background has-background wp-element-button">Gradient Button</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/categories/editor.scss

@@ -5,3 +5,8 @@
 		margin-top: 6px;
 	}
 }
+
+/* Center alignment for classic themes. */
+[data-align="center"] .wp-block-categories {
+	text-align: center;
+}

package/src/categories/style.scss

@@ -10,4 +10,8 @@
 		/*rtl:ignore*/
 		margin-left: 2em;
 	}
+	/* Only apply the text align on dropdowns, not lists. */
+	&.wp-block-categories-dropdown.aligncenter {
+		text-align: center;
+	}
 }

package/src/columns/block.json

@@ -13,6 +13,10 @@
 		"isStackedOnMobile": {
 			"type": "boolean",
 			"default": true
+		},
+		"templateLock": {
+			"type": [ "string", "boolean" ],
+			"enum": [ "all", "insert", "contentOnly", false ]
 		}
 	},
 	"supports": {

package/src/columns/edit.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -59,12 +58,15 @@ function ColumnsEditContainer( {
 	updateColumns,
 	clientId,
 } ) {
-	const { isStackedOnMobile, verticalAlignment } = attributes;
+	const { isStackedOnMobile, verticalAlignment, templateLock } = attributes;
 
-	const { count } = useSelect(
+	const { count, canInsertColumnBlock } = useSelect(
 		( select ) => {
 			return {
 				count: select( blockEditorStore ).getBlockCount( clientId ),
+				canInsertColumnBlock: select(
+					blockEditorStore
+				).canInsertBlockType( 'core/column', clientId ),
 			};
 		},
 		[ clientId ]
@@ -82,6 +84,7 @@ function ColumnsEditContainer( {
 		allowedBlocks: ALLOWED_BLOCKS,
 		orientation: 'horizontal',
 		renderAppender: false,
+		templateLock,
 	} );
 
 	return (
@@ -94,20 +97,29 @@ function ColumnsEditContainer( {
 			</BlockControls>
 			<InspectorControls>
 				<PanelBody>
-					<RangeControl
-						__nextHasNoMarginBottom
-						label={ __( 'Columns' ) }
-						value={ count }
-						onChange={ ( value ) => updateColumns( count, value ) }
-						min={ 1 }
-						max={ Math.max( 6, count ) }
-					/>
-					{ count > 6 && (
-						<Notice status="warning" isDismissible={ false }>
-							{ __(
-								'This column count exceeds the recommended amount and may cause visual breakage.'
+					{ canInsertColumnBlock && (
+						<>
+							<RangeControl
+								__nextHasNoMarginBottom
+								label={ __( 'Columns' ) }
+								value={ count }
+								onChange={ ( value ) =>
+									updateColumns( count, value )
+								}
+								min={ 1 }
+								max={ Math.max( 6, count ) }
+							/>
+							{ count > 6 && (
+								<Notice
+									status="warning"
+									isDismissible={ false }
+								>
+									{ __(
+										'This column count exceeds the recommended amount and may cause visual breakage.'
+									) }
+								</Notice>
 							) }
-						</Notice>
+						</>
 					) }
 					<ToggleControl
 						__nextHasNoMarginBottom
@@ -248,8 +260,8 @@ function Placeholder( { clientId, name, setAttributes } ) {
 	return (
 		<div { ...blockProps }>
 			<__experimentalBlockVariationPicker
-				icon={ get( blockType, [ 'icon', 'src' ] ) }
-				label={ get( blockType, [ 'title' ] ) }
+				icon={ blockType?.icon?.src }
+				label={ blockType?.title }
 				variations={ variations }
 				onSelect={ ( nextVariation = defaultVariation ) => {
 					if ( nextVariation.attributes ) {

package/src/columns/edit.native.js

@@ -198,7 +198,7 @@ function ColumnsEditContainer( {
 			return (
 				<UnitControl
 					label={ label }
-					settingLabel="Width"
+					settingLabel={ __( 'Width' ) }
 					key={ `${ column.clientId }-${
 						getWidths( innerWidths ).length
 					}` }

package/src/columns/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Columns block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:columns {"className":"gutenberg-landing\\u002d\\u002ddevelopers-columns has-2-columns"} -->
+<div class="wp-block-columns gutenberg-landing--developers-columns has-2-columns"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Built with modern technology.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/language/">Learn more</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Designed for compatibility.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths for shortcodes, meta-boxes, and Custom Post Types.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/reference/faq/">Learn more</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Columns block transforms unwraps content 1`] = `
+"<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Built with modern technology.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/language/">Learn more</a></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Designed for compatibility.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths for shortcodes, meta-boxes, and Custom Post Types.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/reference/faq/">Learn more</a></p>
+<!-- /wp:paragraph -->"
+`;

package/src/columns/test/transforms.native.js

@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlock,
+	openBlockActionsMenu,
+	fireEvent,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Columns';
+const initialHtml = `
+<!-- wp:columns {"className":"gutenberg-landing\u002d\u002ddevelopers-columns has-2-columns"} -->
+<div class="wp-block-columns gutenberg-landing--developers-columns has-2-columns"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Built with modern technology.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/language/">Learn more</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Designed for compatibility.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths for shortcodes, meta-boxes, and Custom Post Types.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/reference/faq/">Learn more</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->`;
+
+const transformsWithInnerBlocks = [ 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'unwraps content', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const { getByText } = screen;
+		fireEvent.press( getBlock( screen, block ) );
+
+		await openBlockActionsMenu( screen );
+		fireEvent.press( getByText( 'Transform block…' ) );
+		fireEvent.press( getByText( 'Unwrap' ) );
+
+		// The first block created is the content of the Paragraph block.
+		const paragraph = getBlock( screen, 'Paragraph', 0 );
+		expect( paragraph ).toBeVisible();
+		// The second block created is the content of the citation element.
+		const citation = getBlock( screen, 'Paragraph', 1 );
+		expect( citation ).toBeVisible();
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block,
+			{ canUnwrap: true }
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/comment-template/index.php

@@ -58,11 +58,10 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 				$block_content .= sprintf( '<ol>%1$s</ol>', $inner_content );
 				--$comment_depth;
 			} else {
-				$inner_content  = block_core_comment_template_render_comments(
+				$block_content .= block_core_comment_template_render_comments(
 					$children,
 					$block
 				);
-				$block_content .= sprintf( $inner_content );
 			}
 		}
 

package/src/comments/edit/placeholder.js

@@ -5,6 +5,7 @@ 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 { createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -45,7 +46,7 @@ export default function PostCommentsPlaceholder( { postType, postId } ) {
 						<footer className="comment-meta">
 							<div className="comment-author vcard">
 								<img
-									alt="Commenter Avatar"
+									alt={ __( 'Commenter Avatar' ) }
 									src={ avatarURL }
 									className="avatar avatar-32 photo"
 									height="32"
@@ -85,8 +86,17 @@ export default function PostCommentsPlaceholder( { postType, postId } ) {
 									'To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.'
 								) }
 								<br />
-								{ __( 'Commenter avatars come from' ) }{ ' ' }
-								<a href="https://gravatar.com/">Gravatar</a>.
+								{ createInterpolateElement(
+									__(
+										'Commenter avatars come from <a>Gravatar</a>.'
+									),
+									{
+										a: (
+											// eslint-disable-next-line jsx-a11y/anchor-has-content
+											<a href="https://gravatar.com/" />
+										),
+									}
+								) }
 							</p>
 						</div>
 
@@ -94,7 +104,9 @@ export default function PostCommentsPlaceholder( { postType, postId } ) {
 							<a
 								className="comment-reply-link"
 								href="#top"
-								aria-label="Reply to A WordPress Commenter"
+								aria-label={ __(
+									'Reply to A WordPress Commenter'
+								) }
 							>
 								{ __( 'Reply' ) }
 							</a>

package/src/comments/index.php

@@ -212,6 +212,7 @@ function register_legacy_post_comments_block() {
 	 * like `_wp_multiple_block_styles`, which is required in this case because
 	 * the block has multiple styles.
 	 */
+	/** This filter is documented in wp-includes/blocks.php */
 	$metadata = apply_filters( 'block_type_metadata', $metadata );
 
 	register_block_type( 'core/post-comments', $metadata );

package/src/cover/block.json

@@ -88,14 +88,17 @@
 		"spacing": {
 			"padding": true,
 			"margin": [ "top", "bottom" ],
+			"blockGap": true,
 			"__experimentalDefaultControls": {
-				"padding": true
+				"padding": true,
+				"blockGap": true
 			}
 		},
 		"color": {
 			"__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background",
-			"text": false,
-			"background": false
+			"text": true,
+			"background": false,
+			"__experimentalSkipSerialization": [ "gradients" ]
 		},
 		"typography": {
 			"fontSize": true,
@@ -109,6 +112,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"__experimentalLayout": {
+			"allowJustification": false
 		}
 	},
 	"editorStyle": "wp-block-cover-editor",

package/src/cover/edit/inspector-controls.js

@@ -206,9 +206,7 @@ export default function CoverInspectorControls( {
 							isImgElement && (
 								<TextareaControl
 									__nextHasNoMarginBottom
-									label={ __(
-										'Alt text (alternative text)'
-									) }
+									label={ __( 'Alternative text' ) }
 									value={ alt }
 									onChange={ ( newAlt ) =>
 										setAttributes( { alt: newAlt } )
@@ -217,11 +215,12 @@ export default function CoverInspectorControls( {
 										<>
 											<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
 												{ __(
-													'Describe the purpose of the image'
+													'Describe the purpose of the image.'
 												) }
 											</ExternalLink>
+											<br />
 											{ __(
-												'Leave empty if the image is purely decorative.'
+												'Leave empty if decorative.'
 											) }
 										</>
 									}

package/src/cover/index.js

@@ -13,6 +13,7 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import variations from './variations';
 
 const { name } = metadata;
 
@@ -48,6 +49,7 @@ export const settings = {
 	save,
 	edit,
 	deprecated,
+	variations,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/cover/style.scss

@@ -106,17 +106,11 @@
 	.wp-block-cover__inner-container {
 		width: 100%;
 		z-index: z-index(".wp-block-cover__inner-container");
-		color: $white;
+		color: inherit;
 		// Reset the fixed LTR direction at the root of the block in RTL languages.
 		/*rtl:raw: direction: rtl; */
 	}
 
-	&.is-light {
-		.wp-block-cover__inner-container {
-			color: $black;
-		}
-	}
-
 	p,
 	h1,
 	h2,
@@ -285,3 +279,18 @@ section.wp-block-cover-image > h2,
 	padding: 0.44em;
 	text-align: center;
 }
+
+// If Cover block's text color has not been set adjust default color
+// based on if overlay is light or not. The following styles leverage
+// `:where` to allow for generic global styles that have a low specificity to
+// still take precedence.
+
+:where(.wp-block-cover:not(.has-text-color)),
+:where(.wp-block-cover-image:not(.has-text-color)) {
+	color: $white;
+}
+
+:where(.wp-block-cover.is-light:not(.has-text-color)),
+:where(.wp-block-cover-image.is-light:not(.has-text-color)) {
+	color: $black;
+}

package/src/cover/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cover block transformations with Image to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":890,"dimRatio":20,"overlayColor":"luminous-vivid-orange","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219} -->
+<div class="wp-block-cover" style="min-height:219px"><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-890" alt="" src="https://cldup.com/cXyG__fTLN.jpg" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Cover block transformations with Image to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":890,"dimRatio":20,"overlayColor":"luminous-vivid-orange","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219} -->
+<div class="wp-block-cover" style="min-height:219px"><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-890" alt="" src="https://cldup.com/cXyG__fTLN.jpg" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Cover block transformations with Image to Image block 1`] = `
+"<!-- wp:image {"id":890,"style":{"color":{}}} -->
+<figure class="wp-block-image"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-890"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Cover block transformations with Image to Media & Text block 1`] = `
+"<!-- wp:media-text {"mediaId":890,"mediaType":"image","backgroundColor":"luminous-vivid-orange"} -->
+<div class="wp-block-media-text is-stacked-on-mobile has-luminous-vivid-orange-background-color has-background"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-890 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->"
+`;
+
+exports[`Cover block transformations with Video to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","id":891,"dimRatio":20,"overlayColor":"luminous-vivid-orange","backgroundType":"video","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219,"isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:219px"><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Cover block transformations with Video to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","id":891,"dimRatio":20,"overlayColor":"luminous-vivid-orange","backgroundType":"video","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219,"isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:219px"><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Cover block transformations with Video to Media & Text block 1`] = `
+"<!-- wp:media-text {"mediaId":891,"mediaType":"video","backgroundColor":"luminous-vivid-orange"} -->
+<div class="wp-block-media-text is-stacked-on-mobile has-luminous-vivid-orange-background-color has-background"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->"
+`;
+
+exports[`Cover block transformations with Video to Video block 1`] = `
+"<!-- wp:video {"id":891} -->
+<figure class="wp-block-video"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure>
+<!-- /wp:video -->"
+`;