@wordpress/block-library 7.6.0 → 7.9.0

package/src/gallery/test/index.native.js

@@ -3,17 +3,22 @@
  */
 import {
 	act,
+	changeTextOfRichText,
+	fireEvent,
+	getBlock,
 	getEditorHtml,
 	initializeEditor,
-	fireEvent,
+	openBlockSettings,
+	setupCoreBlocks,
+	setupMediaPicker,
+	setupMediaUpload,
+	triggerBlockListLayout,
 	within,
 } from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
-import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
-import { registerCoreBlocks } from '@wordpress/block-library';
 import { Platform } from '@wordpress/element';
 import {
 	getOtherMediaOptions,
@@ -28,12 +33,7 @@ import {
 	addGalleryBlock,
 	initializeWithGalleryBlock,
 	getGalleryItem,
-	setupMediaUpload,
 	generateGalleryBlock,
-	setCaption,
-	setupMediaPicker,
-	triggerGalleryLayout,
-	openBlockSettings,
 } from './helpers';
 
 const media = [
@@ -57,23 +57,13 @@ const media = [
 	},
 ];
 
-beforeAll( () => {
-	// Register all core blocks
-	registerCoreBlocks();
-} );
-
-afterAll( () => {
-	// Clean up registered blocks
-	getBlockTypes().forEach( ( block ) => {
-		unregisterBlockType( block.name );
-	} );
-} );
+setupCoreBlocks();
 
 describe( 'Gallery block', () => {
 	it( 'inserts block', async () => {
-		const { getByA11yLabel } = await addGalleryBlock();
+		const screen = await addGalleryBlock();
 
-		expect( getByA11yLabel( /Gallery Block\. Row 1/ ) ).toBeVisible();
+		expect( getBlock( screen, 'Gallery' ) ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
@@ -110,13 +100,10 @@ describe( 'Gallery block', () => {
 	// is addressed.
 	it.skip( 'displays media options picker when selecting the block', async () => {
 		// Initialize with an empty gallery
-		const {
-			getByA11yLabel,
-			getByText,
-			getByTestId,
-		} = await initializeEditor( {
-			initialHtml: generateGalleryBlock( 0 ),
-		} );
+		const { getByA11yLabel, getByText, getByTestId } =
+			await initializeEditor( {
+				initialHtml: generateGalleryBlock( 0 ),
+			} );
 
 		// Tap on Gallery block
 		fireEvent.press( getByText( 'ADD MEDIA' ) );
@@ -186,7 +173,7 @@ describe( 'Gallery block', () => {
 		const captionField = within(
 			getByA11yLabel( /Gallery caption. Empty/ )
 		).getByPlaceholderText( 'Add caption' );
-		setCaption(
+		changeTextOfRichText(
 			captionField,
 			'<strong>Bold</strong> <em>italic</em> <s>strikethrough</s> gallery caption'
 		);
@@ -208,10 +195,9 @@ describe( 'Gallery block', () => {
 		fireEvent.press( galleryItem );
 
 		// Set gallery item caption
-		const captionField = within( galleryItem ).getByPlaceholderText(
-			'Add caption'
-		);
-		setCaption(
+		const captionField =
+			within( galleryItem ).getByPlaceholderText( 'Add caption' );
+		changeTextOfRichText(
 			captionField,
 			'<strong>Bold</strong> <em>italic</em> <s>strikethrough</s> image caption'
 		);
@@ -223,10 +209,8 @@ describe( 'Gallery block', () => {
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc005
 	it( 'successfully uploads items', async () => {
 		const { notifyUploadingState, notifySucceedState } = setupMediaUpload();
-		const {
-			expectMediaPickerCall,
-			mediaPickerCallback,
-		} = setupMediaPicker();
+		const { expectMediaPickerCall, mediaPickerCallback } =
+			setupMediaPicker();
 
 		// Initialize with an empty gallery
 		const { galleryBlock, getByText } = await initializeWithGalleryBlock();
@@ -240,7 +224,7 @@ describe( 'Gallery block', () => {
 		await mediaPickerCallback( media[ 0 ], media[ 1 ] );
 
 		// Check that gallery items are visible
-		await triggerGalleryLayout( galleryBlock );
+		await triggerBlockListLayout( galleryBlock );
 		const galleryItem1 = getGalleryItem( galleryBlock, 1 );
 		const galleryItem2 = getGalleryItem( galleryBlock, 2 );
 		expect( galleryItem1 ).toBeVisible();
@@ -263,10 +247,8 @@ describe( 'Gallery block', () => {
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc006
 	it( 'handles failed uploads', async () => {
 		const { notifyUploadingState, notifyFailedState } = setupMediaUpload();
-		const {
-			expectMediaPickerCall,
-			mediaPickerCallback,
-		} = setupMediaPicker();
+		const { expectMediaPickerCall, mediaPickerCallback } =
+			setupMediaPicker();
 
 		// Initialize with an empty gallery
 		const { galleryBlock, getByText } = await initializeWithGalleryBlock();
@@ -280,7 +262,7 @@ describe( 'Gallery block', () => {
 		await mediaPickerCallback( media[ 0 ], media[ 1 ] );
 
 		// Check that gallery items are visible
-		await triggerGalleryLayout( galleryBlock );
+		await triggerBlockListLayout( galleryBlock );
 		const galleryItem1 = getGalleryItem( galleryBlock, 1 );
 		const galleryItem2 = getGalleryItem( galleryBlock, 2 );
 		expect( galleryItem1 ).toBeVisible();
@@ -319,10 +301,8 @@ describe( 'Gallery block', () => {
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc007
 	it( 'takes a photo', async () => {
 		const { notifyUploadingState, notifySucceedState } = setupMediaUpload();
-		const {
-			expectMediaPickerCall,
-			mediaPickerCallback,
-		} = setupMediaPicker();
+		const { expectMediaPickerCall, mediaPickerCallback } =
+			setupMediaPicker();
 
 		// Initialize with an empty gallery
 		const { galleryBlock, getByText } = await initializeWithGalleryBlock();
@@ -336,7 +316,7 @@ describe( 'Gallery block', () => {
 		await mediaPickerCallback( media[ 0 ] );
 
 		// Check gallery item is visible
-		await triggerGalleryLayout( galleryBlock );
+		await triggerBlockListLayout( galleryBlock );
 		const galleryItem = getGalleryItem( galleryBlock, 1 );
 		expect( galleryItem ).toBeVisible();
 
@@ -360,10 +340,8 @@ describe( 'Gallery block', () => {
 			}.jpeg`,
 		} ) );
 		const { notifyUploadingState, notifySucceedState } = setupMediaUpload();
-		const {
-			expectMediaPickerCall,
-			mediaPickerCallback,
-		} = setupMediaPicker();
+		const { expectMediaPickerCall, mediaPickerCallback } =
+			setupMediaPicker();
 
 		let otherMediaOptionsCallback;
 		getOtherMediaOptions.mockImplementation( ( filter, callback ) => {
@@ -394,7 +372,7 @@ describe( 'Gallery block', () => {
 		);
 
 		// Check that gallery items are visible
-		await triggerGalleryLayout( galleryBlock );
+		await triggerBlockListLayout( galleryBlock );
 		const galleryItem1 = getGalleryItem( galleryBlock, 1 );
 		const galleryItem2 = getGalleryItem( galleryBlock, 2 );
 		expect( galleryItem1 ).toBeVisible();
@@ -417,10 +395,8 @@ describe( 'Gallery block', () => {
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc009
 	it( 'cancels uploads', async () => {
 		const { notifyUploadingState, notifyResetState } = setupMediaUpload();
-		const {
-			expectMediaPickerCall,
-			mediaPickerCallback,
-		} = setupMediaPicker();
+		const { expectMediaPickerCall, mediaPickerCallback } =
+			setupMediaPicker();
 
 		// Initialize with an empty gallery
 		const { galleryBlock, getByText } = await initializeWithGalleryBlock();
@@ -434,7 +410,7 @@ describe( 'Gallery block', () => {
 		await mediaPickerCallback( media[ 0 ], media[ 1 ] );
 
 		// Check that gallery items are visible
-		await triggerGalleryLayout( galleryBlock );
+		await triggerBlockListLayout( galleryBlock );
 		const galleryItem1 = getGalleryItem( galleryBlock, 1 );
 		const galleryItem2 = getGalleryItem( galleryBlock, 2 );
 		expect( galleryItem1 ).toBeVisible();
@@ -506,10 +482,8 @@ describe( 'Gallery block', () => {
 			localUrl: `file:///IMG_${ index + 1 }.JPG`,
 		} ) );
 		const { notifyUploadingState, notifySucceedState } = setupMediaUpload();
-		const {
-			expectMediaPickerCall,
-			mediaPickerCallback,
-		} = setupMediaPicker();
+		const { expectMediaPickerCall, mediaPickerCallback } =
+			setupMediaPicker();
 
 		let otherMediaOptionsCallback;
 		getOtherMediaOptions.mockImplementation( ( filter, callback ) => {
@@ -535,7 +509,7 @@ describe( 'Gallery block', () => {
 		await mediaPickerCallback( otherAppsMedia[ 0 ], otherAppsMedia[ 1 ] );
 
 		// Check that gallery items are visible
-		await triggerGalleryLayout( galleryBlock );
+		await triggerBlockListLayout( galleryBlock );
 		const galleryItem1 = getGalleryItem( galleryBlock, 1 );
 		const galleryItem2 = getGalleryItem( galleryBlock, 2 );
 		expect( galleryItem1 ).toBeVisible();

package/src/gallery/transforms.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, every, toString } from 'lodash';
+import { filter, every } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -160,7 +160,7 @@ const transforms = {
 				return createBlock( 'core/gallery', {
 					images: validImages.map(
 						( { id, url, alt, caption } ) => ( {
-							id: toString( id ),
+							id: id.toString(),
 							url,
 							alt,
 							caption,
@@ -182,7 +182,7 @@ const transforms = {
 					shortcode: ( { named: { ids } } ) => {
 						if ( ! isGalleryV2Enabled() ) {
 							return parseShortcodeIds( ids ).map( ( id ) => ( {
-								id: toString( id ),
+								id: id.toString(),
 							} ) );
 						}
 					},

package/src/gallery/v1/edit.js

@@ -11,7 +11,6 @@ import {
 	map,
 	reduce,
 	some,
-	toString,
 } from 'lodash';
 
 /**
@@ -90,27 +89,22 @@ function GalleryEdit( props ) {
 	} = attributes;
 	const [ selectedImage, setSelectedImage ] = useState();
 	const [ attachmentCaptions, setAttachmentCaptions ] = useState();
-	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
-	const {
-		imageSizes,
-		mediaUpload,
-		getMedia,
-		wasBlockJustInserted,
-	} = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
-
-		return {
-			imageSizes: settings.imageSizes,
-			mediaUpload: settings.mediaUpload,
-			getMedia: select( coreStore ).getMedia,
-			wasBlockJustInserted: select(
-				blockEditorStore
-			).wasBlockJustInserted( clientId, 'inserter_menu' ),
-		};
-	} );
+	const { imageSizes, mediaUpload, getMedia, wasBlockJustInserted } =
+		useSelect( ( select ) => {
+			const settings = select( blockEditorStore ).getSettings();
+
+			return {
+				imageSizes: settings.imageSizes,
+				mediaUpload: settings.mediaUpload,
+				getMedia: select( coreStore ).getMedia,
+				wasBlockJustInserted: select(
+					blockEditorStore
+				).wasBlockJustInserted( clientId, 'inserter_menu' ),
+			};
+		} );
 
 	const resizedImages = useMemo( () => {
 		if ( isSelected ) {
@@ -231,7 +225,7 @@ function GalleryEdit( props ) {
 		// The image id in both the images and attachmentCaptions arrays is a
 		// string, so ensure comparison works correctly by converting the
 		// newImage.id to a string.
-		const newImageId = toString( newImage.id );
+		const newImageId = newImage.id.toString();
 		const currentImage = find( images, { id: newImageId } );
 		const currentImageCaption = currentImage
 			? currentImage.caption
@@ -258,7 +252,7 @@ function GalleryEdit( props ) {
 			newImages.map( ( newImage ) => ( {
 				// Store the attachmentCaption id as a string for consistency
 				// with the type of the id in the images attribute.
-				id: toString( newImage.id ),
+				id: newImage.id.toString(),
 				caption: newImage.caption,
 			} ) )
 		);
@@ -269,7 +263,7 @@ function GalleryEdit( props ) {
 				// The id value is stored in a data attribute, so when the
 				// block is parsed it's converted to a string. Converting
 				// to a string here ensures it's type is consistent.
-				id: toString( newImage.id ),
+				id: newImage.id.toString(),
 			} ) ),
 			columns: attributes.columns
 				? Math.min( newImages.length, attributes.columns )

package/src/gallery/v1/gallery-image.js

@@ -16,6 +16,7 @@ import {
 	RichText,
 	MediaPlaceholder,
 	store as blockEditorStore,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { isBlobURL } from '@wordpress/blob';
 import { compose } from '@wordpress/compose';
@@ -47,9 +48,8 @@ class GalleryImage extends Component {
 		this.onRemoveImage = this.onRemoveImage.bind( this );
 		this.bindContainer = this.bindContainer.bind( this );
 		this.onEdit = this.onEdit.bind( this );
-		this.onSelectImageFromLibrary = this.onSelectImageFromLibrary.bind(
-			this
-		);
+		this.onSelectImageFromLibrary =
+			this.onSelectImageFromLibrary.bind( this );
 		this.onSelectCustomURL = this.onSelectCustomURL.bind( this );
 		this.state = {
 			isEditing: false,
@@ -84,11 +84,8 @@ class GalleryImage extends Component {
 	}
 
 	componentDidUpdate() {
-		const {
-			image,
-			url,
-			__unstableMarkNextChangeAsNotPersistent,
-		} = this.props;
+		const { image, url, __unstableMarkNextChangeAsNotPersistent } =
+			this.props;
 		if ( image && ! url ) {
 			__unstableMarkNextChangeAsNotPersistent();
 			this.props.setAttributes( {
@@ -249,6 +246,9 @@ class GalleryImage extends Component {
 				{ ! isEditing && ( isSelected || caption ) && (
 					<RichText
 						tagName="figcaption"
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
 						aria-label={ __( 'Image caption text' ) }
 						placeholder={ isSelected ? __( 'Add caption' ) : null }
 						value={ caption }
@@ -273,9 +273,8 @@ export default compose( [
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
-		const { __unstableMarkNextChangeAsNotPersistent } = dispatch(
-			blockEditorStore
-		);
+		const { __unstableMarkNextChangeAsNotPersistent } =
+			dispatch( blockEditorStore );
 		return {
 			__unstableMarkNextChangeAsNotPersistent,
 		};

package/src/gallery/v1/gallery-image.native.js

@@ -50,12 +50,10 @@ class GalleryImage extends Component {
 		this.onSelectMedia = this.onSelectMedia.bind( this );
 
 		this.updateMediaProgress = this.updateMediaProgress.bind( this );
-		this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind(
-			this
-		);
-		this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind(
-			this
-		);
+		this.finishMediaUploadWithSuccess =
+			this.finishMediaUploadWithSuccess.bind( this );
+		this.finishMediaUploadWithFailure =
+			this.finishMediaUploadWithFailure.bind( this );
 		this.renderContent = this.renderContent.bind( this );
 
 		this.state = {
@@ -79,11 +77,8 @@ class GalleryImage extends Component {
 
 	onMediaPressed() {
 		const { id, url, isSelected } = this.props;
-		const {
-			captionSelected,
-			isUploadInProgress,
-			didUploadFail,
-		} = this.state;
+		const { captionSelected, isUploadInProgress, didUploadFail } =
+			this.state;
 
 		this.onSelectImage();
 
@@ -303,12 +298,8 @@ class GalleryImage extends Component {
 	}
 
 	render() {
-		const {
-			id,
-			onRemove,
-			getStylesFromColorScheme,
-			isSelected,
-		} = this.props;
+		const { id, onRemove, getStylesFromColorScheme, isSelected } =
+			this.props;
 
 		const containerStyle = getStylesFromColorScheme(
 			style.galleryImageContainer,

package/src/gallery/v1/gallery.js

@@ -6,7 +6,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
+import {
+	RichText,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
@@ -94,7 +97,10 @@ export const Gallery = ( props ) => {
 			<RichTextVisibilityHelper
 				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
 				tagName="figcaption"
-				className="blocks-gallery-caption"
+				className={ classnames(
+					'blocks-gallery-caption',
+					__experimentalGetElementClassName( 'caption' )
+				) }
 				aria-label={ __( 'Gallery caption text' ) }
 				placeholder={ __( 'Write gallery caption…' ) }
 				value={ caption }

package/src/gallery/v1/save.js

@@ -1,7 +1,16 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -60,7 +69,12 @@ export default function saveV1( { attributes } ) {
 								{ ! RichText.isEmpty( image.caption ) && (
 									<RichText.Content
 										tagName="figcaption"
-										className="blocks-gallery-item__caption"
+										className={ classnames(
+											'blocks-gallery-item',
+											__experimentalGetElementClassName(
+												'caption'
+											)
+										) }
 										value={ image.caption }
 									/>
 								) }
@@ -72,7 +86,10 @@ export default function saveV1( { attributes } ) {
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
 					tagName="figcaption"
-					className="blocks-gallery-caption"
+					className={ classnames(
+						'blocks-gallery-caption',
+						__experimentalGetElementClassName( 'caption' )
+					) }
 					value={ caption }
 				/>
 			) }

package/src/group/block.json

@@ -21,6 +21,7 @@
 		"__experimentalSettings": true,
 		"align": [ "wide", "full" ],
 		"anchor": true,
+		"ariaLabel": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/heading/autogenerate-anchors.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { deburr, trim } from 'lodash';
+import removeAccents from 'remove-accents';
 
 /**
  * Object map tracking anchors.
@@ -32,11 +32,14 @@ const getTextWithoutMarkup = ( text ) => {
  */
 const getSlug = ( content ) => {
 	// Get the slug.
-	return trim(
-		deburr( getTextWithoutMarkup( content ) )
+	return (
+		removeAccents( getTextWithoutMarkup( content ) )
+			// Convert anything that's not a letter or number to a hyphen.
 			.replace( /[^\p{L}\p{N}]+/gu, '-' )
-			.toLowerCase(),
-		'-'
+			// Convert to lowercase
+			.toLowerCase()
+			// Remove any remaining leading or trailing hyphens.
+			.replace( /(^-+)|(-+$)/g, '' )
 	);
 };
 

package/src/heading/deprecated.js

@@ -112,13 +112,8 @@ const deprecated = [
 		migrate: ( attributes ) =>
 			migrateCustomColors( migrateTextAlign( attributes ) ),
 		save( { attributes } ) {
-			const {
-				align,
-				content,
-				customTextColor,
-				level,
-				textColor,
-			} = attributes;
+			const { align, content, customTextColor, level, textColor } =
+				attributes;
 			const tagName = 'h' + level;
 
 			const textClass = getColorClassName( 'color', textColor );
@@ -154,13 +149,8 @@ const deprecated = [
 		migrate: ( attributes ) =>
 			migrateCustomColors( migrateTextAlign( attributes ) ),
 		save( { attributes } ) {
-			const {
-				align,
-				content,
-				customTextColor,
-				level,
-				textColor,
-			} = attributes;
+			const { align, content, customTextColor, level, textColor } =
+				attributes;
 			const tagName = 'h' + level;
 
 			const textClass = getColorClassName( 'color', textColor );
@@ -197,13 +187,8 @@ const deprecated = [
 		migrate: ( attributes ) =>
 			migrateCustomColors( migrateTextAlign( attributes ) ),
 		save( { attributes } ) {
-			const {
-				align,
-				level,
-				content,
-				textColor,
-				customTextColor,
-			} = attributes;
+			const { align, level, content, textColor, customTextColor } =
+				attributes;
 			const tagName = 'h' + level;
 
 			const textClass = getColorClassName( 'color', textColor );

package/src/heading/edit.js

@@ -52,9 +52,8 @@ function HeadingEdit( {
 		};
 	}, [] );
 
-	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
 	// Initially set anchor for headings that have content but no anchor set.
 	// This is used when transforming a block to heading, or for legacy anchors.

package/src/html/edit.js

@@ -6,42 +6,19 @@ import { useContext, useState } from '@wordpress/element';
 import {
 	BlockControls,
 	PlainText,
-	transformStyles,
 	useBlockProps,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import {
-	ToolbarButton,
-	Disabled,
-	SandBox,
-	ToolbarGroup,
-} from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { ToolbarButton, Disabled, ToolbarGroup } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Preview from './preview';
 
 export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 	const [ isPreview, setIsPreview ] = useState();
 	const isDisabled = useContext( Disabled.Context );
 
-	const styles = useSelect( ( select ) => {
-		// Default styles used to unset some of the styles
-		// that might be inherited from the editor style.
-		const defaultStyles = `
-			html,body,:root {
-				margin: 0 !important;
-				padding: 0 !important;
-				overflow: visible !important;
-				min-height: auto !important;
-			}
-		`;
-
-		return [
-			defaultStyles,
-			...transformStyles(
-				select( blockEditorStore ).getSettings().styles
-			),
-		];
-	}, [] );
-
 	function switchToPreview() {
 		setIsPreview( true );
 	}
@@ -71,17 +48,10 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 				</ToolbarGroup>
 			</BlockControls>
 			{ isPreview || isDisabled ? (
-				<>
-					<SandBox html={ attributes.content } styles={ styles } />
-					{ /*
-							An overlay is added when the block is not selected in order to register click events.
-							Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it
-							difficult to reselect the block.
-						*/ }
-					{ ! isSelected && (
-						<div className="block-library-html__preview-overlay"></div>
-					) }
-				</>
+				<Preview
+					content={ attributes.content }
+					isSelected={ isSelected }
+				/>
 			) : (
 				<PlainText
 					value={ attributes.content }