@wordpress/block-library 7.3.10 → 7.6.0

package/src/cover/edit/resizable-cover.js

@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { ResizableBox } from '@wordpress/components';
+
+const RESIZABLE_BOX_ENABLE_OPTION = {
+	top: false,
+	right: false,
+	bottom: true,
+	left: false,
+	topRight: false,
+	bottomRight: false,
+	bottomLeft: false,
+	topLeft: false,
+};
+
+export default function ResizableCover( {
+	className,
+	onResizeStart,
+	onResize,
+	onResizeStop,
+	...props
+} ) {
+	const [ isResizing, setIsResizing ] = useState( false );
+
+	return (
+		<ResizableBox
+			className={ classnames( className, {
+				'is-resizing': isResizing,
+			} ) }
+			enable={ RESIZABLE_BOX_ENABLE_OPTION }
+			onResizeStart={ ( _event, _direction, elt ) => {
+				onResizeStart( elt.clientHeight );
+				onResize( elt.clientHeight );
+			} }
+			onResize={ ( _event, _direction, elt ) => {
+				onResize( elt.clientHeight );
+				if ( ! isResizing ) {
+					setIsResizing( true );
+				}
+			} }
+			onResizeStop={ ( _event, _direction, elt ) => {
+				onResizeStop( elt.clientHeight );
+				setIsResizing( false );
+			} }
+			{ ...props }
+		/>
+	);
+}

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

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import FastAverageColor from 'fast-average-color';
+import { colord } from 'colord';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+
+function retrieveFastAverageColor() {
+	if ( ! retrieveFastAverageColor.fastAverageColor ) {
+		retrieveFastAverageColor.fastAverageColor = new FastAverageColor();
+	}
+	return retrieveFastAverageColor.fastAverageColor;
+}
+
+/**
+ * useCoverIsDark is a hook that returns a boolean variable specifying if the cover
+ * background is dark or not.
+ *
+ * @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.
+ * @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
+) {
+	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 ) {
+			retrieveFastAverageColor().getColorAsync(
+				elementRef.current,
+				( color ) => {
+					setIsDark( color.isDark );
+				}
+			);
+		}
+	}, [ url, url && dimRatio <= 50 && elementRef.current, setIsDark ] );
+	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/cover/edit.native.js

@@ -9,6 +9,7 @@ import {
 	Platform,
 } from 'react-native';
 import Video from 'react-native-video';
+import classnames from 'classnames/dedupe';
 
 /**
  * WordPress dependencies
@@ -47,7 +48,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useDispatch, withSelect, withDispatch } from '@wordpress/data';
 import {
 	useEffect,
 	useState,
@@ -71,6 +72,7 @@ import {
 	COVER_DEFAULT_HEIGHT,
 } from './shared';
 import Controls from './controls';
+import useCoverIsDark from './use-cover-is-dark';
 
 /**
  * Constants
@@ -113,6 +115,7 @@ const Cover = ( {
 		customGradient,
 		gradient,
 		overlayColor,
+		isDark,
 	} = attributes;
 	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] = useState(
 		false
@@ -180,18 +183,6 @@ const Cover = ( {
 
 	const openMediaOptionsRef = useRef();
 
-	// Used to set a default color for its InnerBlocks
-	// since there's no system to inherit styles yet
-	// the RichText component will check if there are
-	// parent styles for the current block. If there are,
-	// it will use that color instead.
-	useEffect( () => {
-		// While we don't support theme colors.
-		if ( ! attributes.overlayColor || ( ! attributes.overlay && url ) ) {
-			setAttributes( { childrenStyles: styles.defaultColor } );
-		}
-	}, [ setAttributes ] );
-
 	// Initialize uploading flag to false, awaiting sync.
 	const [ isUploadInProgress, setIsUploadInProgress ] = useState( false );
 
@@ -257,6 +248,42 @@ const Cover = ( {
 		openGeneralSidebar();
 	}
 
+	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
+		blockEditorStore
+	);
+	const isCoverDark = useCoverIsDark(
+		isDark,
+		url,
+		dimRatio,
+		overlayColorValue?.color
+	);
+
+	useEffect( () => {
+		// This side-effect should not create an undo level.
+		__unstableMarkNextChangeAsNotPersistent();
+		// Used to set a default color for its InnerBlocks
+		// since there's no system to inherit styles yet
+		// the RichText component will check if there are
+		// parent styles for the current block. If there are,
+		// it will use that color instead.
+		setAttributes( {
+			isDark: isCoverDark,
+			childrenStyles: isCoverDark
+				? styles.defaultColor
+				: styles.defaultColorLightMode,
+		} );
+
+		// Ensure that "is-light" is removed from "className" attribute if cover background is dark.
+		if ( isCoverDark && attributes.className?.includes( 'is-light' ) ) {
+			const className = classnames( attributes.className, {
+				'is-light': false,
+			} );
+			setAttributes( {
+				className: className !== '' ? className : undefined,
+			} );
+		}
+	}, [ isCoverDark ] );
+
 	const backgroundColor = getStylesFromColorScheme(
 		styles.backgroundSolid,
 		styles.backgroundSolidDark
@@ -375,7 +402,6 @@ const Cover = ( {
 		<TouchableWithoutFeedback
 			accessible={ ! isParentSelected }
 			onPress={ onMediaPressed }
-			onLongPress={ openMediaOptionsRef.current }
 			disabled={ ! isParentSelected }
 		>
 			<View style={ [ styles.background, backgroundColor ] }>

package/src/cover/editor.scss

@@ -10,7 +10,7 @@
 		min-height: auto !important;
 		padding: 0 !important;
 
-		// Resizeable placeholder for placeholder.
+		// Resizable placeholder for placeholder.
 		.block-library-cover__resize-container {
 			display: none;
 		}

package/src/cover/focal-point-settings-button.native.js

@@ -41,7 +41,7 @@ function FocalPointSettingsButton( {
 		>
 			{ /*
 			 * Wrapper View element used around Icon as workaround for SVG opacity
-			 * issue: https://git.io/JtuXD
+			 * issue: https://github.com/react-native-svg/react-native-svg/issues/1345
 			 */ }
 			<View style={ disabled && styles.dimmedActionButton }>
 				<Icon icon={ chevronRight } />

package/src/cover/shared.js

@@ -106,3 +106,7 @@ export function getPositionClassName( contentPosition ) {
 
 	return POSITION_CLASSNAMES[ contentPosition ];
 }
+
+export function mediaPosition( { x, y } ) {
+	return `${ Math.round( x * 100 ) }% ${ Math.round( y * 100 ) }%`;
+}

package/src/cover/style.native.scss

@@ -49,6 +49,10 @@
 	color: $white;
 }
 
+.defaultColorLightMode {
+	color: $black;
+}
+
 .background {
 	width: 100%;
 	height: 100%;

package/src/cover/style.scss

@@ -96,10 +96,6 @@
 		}
 	}
 
-	.block-library-cover__padding-visualizer {
-		z-index: z-index(".block-library-cover__padding-visualizer");
-	}
-
 	// Apply max-width to floated items that have no intrinsic width
 	&.alignleft,
 	&.alignright {

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

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`color settings clears the selected overlay color and mantains the inner blocks 1`] = `
-"<!-- wp:cover -->
-<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+"<!-- wp:cover {\\"isDark\\":false} -->
+<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
 <p class=\\"has-text-align-center\\"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
@@ -17,16 +17,16 @@ exports[`color settings sets a color for the overlay background when the placeho
 `;
 
 exports[`color settings sets a gradient overlay background when a solid background was already selected 1`] = `
-"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\"} -->
-<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\",\\"isDark\\":false} -->
+<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
 <p class=\\"has-text-align-center\\"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`color settings toggles between solid colors and gradients 1`] = `
-"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\"} -->
-<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\",\\"isDark\\":false} -->
+<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
 <p class=\\"has-text-align-center\\"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"

package/src/cover/test/block-controls.js

@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import { render, screen, fireEvent } from '@testing-library/react';
+
+// Need to mock the BlockControls wrapper as this requires a slot to run
+// so can't be easily unit tested.
+jest.mock( '@wordpress/block-editor', () => ( {
+	...jest.requireActual( '@wordpress/block-editor' ),
+	BlockControls: ( { children } ) => <div>{ children }</div>,
+} ) );
+
+/**
+ * Internal dependencies
+ */
+import CoverBlockControls from '../edit/block-controls';
+
+const setAttributes = jest.fn();
+const onSelectMedia = jest.fn();
+
+const currentSettings = { hasInnerBlocks: true, url: undefined };
+const defaultAttributes = {
+	contentPosition: undefined,
+	id: 1,
+	useFeaturedImage: false,
+	dimRatio: 50,
+	minHeight: 300,
+	minHeightUnit: 'px',
+};
+const defaultProps = {
+	attributes: defaultAttributes,
+	currentSettings,
+	setAttributes,
+	onSelectMedia,
+};
+
+beforeEach( () => {
+	setAttributes.mockClear();
+	onSelectMedia.mockClear();
+} );
+
+describe( 'Cover block controls', () => {
+	describe( 'Full height toggle', () => {
+		test( 'displays toggle full height button toggled off if minHeight not 100vh', () => {
+			render( <CoverBlockControls { ...defaultProps } /> );
+			expect(
+				screen.getByRole( 'button', {
+					pressed: false,
+					name: 'Toggle full height',
+				} )
+			).toBeInTheDocument();
+		} );
+		test( 'sets minHeight attributes to 100vh when clicked', () => {
+			render( <CoverBlockControls { ...defaultProps } /> );
+			fireEvent.click( screen.getByLabelText( 'Toggle full height' ) );
+			expect( setAttributes ).toHaveBeenCalledWith( {
+				minHeight: 100,
+				minHeightUnit: 'vh',
+			} );
+		} );
+	} );
+} );

package/src/cover/test/transforms.js

@@ -0,0 +1,301 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createBlock,
+	getBlockTypes,
+	registerBlockType,
+	switchToBlockType,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { metadata as coverMetadata, settings as coverSettings } from '../index';
+import {
+	metadata as groupMetadata,
+	settings as groupSettings,
+} from '../../group';
+
+describe( 'transforms', () => {
+	beforeAll( () => {
+		registerBlockType( coverMetadata, coverSettings );
+		registerBlockType( groupMetadata, groupSettings );
+	} );
+
+	afterAll( () => {
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	describe( 'transform from Group to Cover', () => {
+		it( 'should return child Cover block when Group block contains only a single Cover block', () => {
+			const block = createBlock(
+				'core/group',
+				{ gradient: 'my-gradient' },
+				[ createBlock( 'core/cover', { dimRatio: 10 } ) ]
+			);
+
+			const transformedBlocks = switchToBlockType( block, 'core/cover' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { dimRatio: 10 },
+				innerBlocks: [],
+				name: 'core/cover',
+			} );
+		} );
+
+		it( 'should wrap Group in a Cover block and move named gradient up to the parent Cover block', () => {
+			const block = createBlock( 'core/group', {
+				gradient: 'my-gradient',
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/cover' );
+			const innerGroupBlock = transformedBlocks[ 0 ].innerBlocks[ 0 ];
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { gradient: 'my-gradient' },
+				name: 'core/cover',
+			} );
+
+			expect( innerGroupBlock.name ).toBe( 'core/group' );
+			expect( innerGroupBlock.attributes ).not.toHaveProperty(
+				'gradient'
+			);
+		} );
+
+		it( 'should wrap Group in a Cover block and move custom gradient up to the parent Cover block', () => {
+			const gradient =
+				'linear-gradient(90deg,rgb(188,138,51) 0%,rgb(65,88,208) 100%)';
+			const block = createBlock( 'core/group', {
+				style: {
+					color: {
+						gradient,
+					},
+				},
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/cover' );
+			const innerGroupBlock = transformedBlocks[ 0 ].innerBlocks[ 0 ];
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { customGradient: gradient },
+				name: 'core/cover',
+			} );
+
+			expect( innerGroupBlock.name ).toBe( 'core/group' );
+			expect( innerGroupBlock.attributes ).not.toHaveProperty( 'style' );
+		} );
+
+		it( 'should wrap Group in a Cover block and move named background color up to the parent Cover block', () => {
+			const block = createBlock( 'core/group', {
+				backgroundColor: 'my-background-color',
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/cover' );
+			const innerGroupBlock = transformedBlocks[ 0 ].innerBlocks[ 0 ];
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { overlayColor: 'my-background-color' },
+				name: 'core/cover',
+			} );
+
+			expect( innerGroupBlock.name ).toBe( 'core/group' );
+			expect( innerGroupBlock.attributes ).not.toHaveProperty(
+				'backgroundColor'
+			);
+		} );
+
+		it( 'should wrap Group in a Cover block and move custom background color up to the parent Cover block', () => {
+			const background = '#ff0000';
+			const block = createBlock( 'core/group', {
+				style: {
+					color: {
+						background,
+					},
+				},
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/cover' );
+			const innerGroupBlock = transformedBlocks[ 0 ].innerBlocks[ 0 ];
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { customOverlayColor: background },
+				name: 'core/cover',
+			} );
+
+			expect( innerGroupBlock.name ).toBe( 'core/group' );
+			expect( innerGroupBlock.attributes ).not.toHaveProperty( 'style' );
+		} );
+	} );
+
+	describe( 'transform from Cover to Group', () => {
+		it( 'should transfer named gradient color to Group block', () => {
+			const block = createBlock( 'core/cover', {
+				gradient: 'my-gradient',
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { gradient: 'my-gradient' },
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should transfer custom gradient color to style object in Group block', () => {
+			const gradient =
+				'linear-gradient(90deg,rgb(188,138,51) 0%,rgb(65,88,208) 100%)';
+			const block = createBlock( 'core/cover', {
+				customGradient: gradient,
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { style: { color: { gradient } } },
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should transfer named background color to backgroundColor attribute in Group block', () => {
+			const block = createBlock( 'core/cover', {
+				overlayColor: 'my-background-color',
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { backgroundColor: 'my-background-color' },
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should transfer custom background color to style object in Group block', () => {
+			const block = createBlock( 'core/cover', {
+				customOverlayColor: '#ff0000',
+			} );
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { style: { color: { background: '#ff0000' } } },
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should merge Cover block named gradient color into child Group block', () => {
+			const block = createBlock(
+				'core/cover',
+				{
+					gradient: 'my-gradient',
+				},
+				[ createBlock( 'core/group', { fontSize: 'medium' } ) ]
+			);
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: { fontSize: 'medium', gradient: 'my-gradient' },
+				innerBlocks: [],
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should merge Cover block custom gradient color to style object in child Group block', () => {
+			const gradient =
+				'linear-gradient(90deg,rgb(188,138,51) 0%,rgb(65,88,208) 100%)';
+			const block = createBlock(
+				'core/cover',
+				{
+					customGradient: gradient,
+				},
+				[ createBlock( 'core/group', { fontSize: 'medium' } ) ]
+			);
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: {
+					fontSize: 'medium',
+					style: { color: { gradient } },
+				},
+				innerBlocks: [],
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should merge Cover block named background color to backgroundColor attribute in child Group block', () => {
+			const block = createBlock(
+				'core/cover',
+				{
+					overlayColor: 'my-background-color',
+				},
+				[ createBlock( 'core/group', { fontSize: 'medium' } ) ]
+			);
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: {
+					backgroundColor: 'my-background-color',
+					fontSize: 'medium',
+				},
+				innerBlocks: [],
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should merge Cover block custom background color into child Group block', () => {
+			const block = createBlock(
+				'core/cover',
+				{
+					customOverlayColor: '#ff0000',
+				},
+				[ createBlock( 'core/group', { fontSize: 'medium' } ) ]
+			);
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: {
+					fontSize: 'medium',
+					style: { color: { background: '#ff0000' } },
+				},
+				innerBlocks: [],
+				name: 'core/group',
+			} );
+		} );
+
+		it( 'should skip merging Cover block gradient into child Group block if Group block has background color', () => {
+			const block = createBlock(
+				'core/cover',
+				{
+					gradient: 'my-gradient',
+				},
+				[
+					createBlock( 'core/group', {
+						fontSize: 'medium',
+						style: { color: { background: '#ff0000' } },
+					} ),
+				]
+			);
+
+			const transformedBlocks = switchToBlockType( block, 'core/group' );
+
+			expect( transformedBlocks[ 0 ] ).toMatchObject( {
+				attributes: {
+					fontSize: 'medium',
+					style: { color: { background: '#ff0000' } },
+				},
+				innerBlocks: [],
+				name: 'core/group',
+			} );
+			expect( transformedBlocks[ 0 ].attributes ).not.toHaveProperty(
+				'gradient'
+			);
+		} );
+	} );
+} );