@wordpress/block-library 8.8.0 → 8.10.0

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

@@ -5,13 +5,13 @@ import {
 	act,
 	addBlock,
 	getBlock,
-	changeTextOfRichText,
-	changeAndSelectTextOfRichText,
+	typeInRichText,
 	fireEvent,
 	getEditorHtml,
 	initializeEditor,
 	render,
 	setupCoreBlocks,
+	waitFor,
 	within,
 } from 'test/helpers';
 import Clipboard from '@react-native-clipboard/clipboard';
@@ -55,10 +55,10 @@ describe( 'Paragraph block', () => {
 		fireEvent.press( paragraphBlock );
 		const paragraphTextInput =
 			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
-		changeAndSelectTextOfRichText(
+		typeInRichText(
 			paragraphTextInput,
 			'A quick brown fox jumps over the lazy dog.',
-			{ selectionStart: 2, selectionEnd: 7 }
+			{ finalSelectionStart: 2, finalSelectionEnd: 7 }
 		);
 		fireEvent.press( screen.getByLabelText( 'Bold' ) );
 
@@ -80,10 +80,10 @@ describe( 'Paragraph block', () => {
 		fireEvent.press( paragraphBlock );
 		const paragraphTextInput =
 			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
-		changeAndSelectTextOfRichText(
+		typeInRichText(
 			paragraphTextInput,
 			'A quick brown fox jumps over the lazy dog.',
-			{ selectionStart: 2, selectionEnd: 7 }
+			{ finalSelectionStart: 2, finalSelectionEnd: 7 }
 		);
 		fireEvent.press( screen.getByLabelText( 'Italic' ) );
 
@@ -105,10 +105,10 @@ describe( 'Paragraph block', () => {
 		fireEvent.press( paragraphBlock );
 		const paragraphTextInput =
 			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
-		changeAndSelectTextOfRichText(
+		typeInRichText(
 			paragraphTextInput,
 			'A quick brown fox jumps over the lazy dog.',
-			{ selectionStart: 2, selectionEnd: 7 }
+			{ finalSelectionStart: 2, finalSelectionEnd: 7 }
 		);
 		fireEvent.press( screen.getByLabelText( 'Strikethrough' ) );
 
@@ -130,7 +130,7 @@ describe( 'Paragraph block', () => {
 		fireEvent.press( paragraphBlock );
 		const paragraphTextInput =
 			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
-		changeTextOfRichText(
+		typeInRichText(
 			paragraphTextInput,
 			'A quick brown fox jumps over the lazy dog.'
 		);
@@ -155,7 +155,7 @@ describe( 'Paragraph block', () => {
 		fireEvent.press( paragraphBlock );
 		const paragraphTextInput =
 			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
-		changeTextOfRichText(
+		typeInRichText(
 			paragraphTextInput,
 			'A quick brown fox jumps over the lazy dog.'
 		);
@@ -180,7 +180,7 @@ describe( 'Paragraph block', () => {
 		fireEvent.press( paragraphBlock );
 		const paragraphTextInput =
 			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
-		changeTextOfRichText(
+		typeInRichText(
 			paragraphTextInput,
 			'A quick brown fox jumps over the lazy dog.'
 		);
@@ -208,9 +208,9 @@ describe( 'Paragraph block', () => {
 		const paragraphTextInput =
 			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
 		const string = 'A quick brown fox jumps over the lazy dog.';
-		changeAndSelectTextOfRichText( paragraphTextInput, string, {
-			selectionStart: string.length / 2,
-			selectionEnd: string.length / 2,
+		typeInRichText( paragraphTextInput, string, {
+			finalSelectionStart: string.length / 2,
+			finalSelectionEnd: string.length / 2,
 		} );
 		fireEvent( paragraphTextInput, 'onKeyDown', {
 			nativeEvent: {},
@@ -279,12 +279,12 @@ describe( 'Paragraph block', () => {
 		fireEvent.press( paragraphBlock );
 		const paragraphTextInput =
 			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
-		changeAndSelectTextOfRichText(
+		typeInRichText(
 			paragraphTextInput,
 			'A quick brown fox jumps over the lazy dog.',
 			{
-				selectionStart: 2,
-				selectionEnd: 7,
+				finalSelectionStart: 2,
+				finalSelectionEnd: 7,
 			}
 		);
 		// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
@@ -325,12 +325,12 @@ describe( 'Paragraph block', () => {
 		fireEvent.press( paragraphBlock );
 		const paragraphTextInput =
 			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
-		changeAndSelectTextOfRichText(
+		typeInRichText(
 			paragraphTextInput,
 			'A quick brown fox jumps over the lazy dog.',
 			{
-				selectionStart: 2,
-				selectionEnd: 7,
+				finalSelectionStart: 2,
+				finalSelectionEnd: 7,
 			}
 		);
 		// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
@@ -362,14 +362,10 @@ describe( 'Paragraph block', () => {
 		fireEvent.press( paragraphBlock );
 		const paragraphTextInput =
 			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
-		changeAndSelectTextOfRichText(
-			paragraphTextInput,
-			'     some text      ',
-			{
-				selectionStart: 5,
-				selectionEnd: 14,
-			}
-		);
+		typeInRichText( paragraphTextInput, '     some text      ', {
+			finalSelectionStart: 5,
+			finalSelectionEnd: 14,
+		} );
 		fireEvent.press( screen.getByLabelText( 'Italic' ) );
 
 		// Assert
@@ -379,4 +375,268 @@ describe( 'Paragraph block', () => {
 		<!-- /wp:paragraph -->"
 	` );
 	} );
+
+	it( 'should set a text color', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Text color settings
+		fireEvent.press( screen.getByLabelText( 'Text, Default' ) );
+
+		// Tap one color
+		fireEvent.press( screen.getByLabelText( 'Pale pink' ) );
+
+		// Dismiss the Block Settings modal.
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph {"textColor":"pale-pink"} -->
+		<p class="has-pale-pink-color has-text-color">A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+		` );
+	} );
+
+	it( 'should set a background color', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Background color settings
+		fireEvent.press( screen.getByLabelText( 'Background, Default' ) );
+
+		// Tap one color
+		fireEvent.press( screen.getByLabelText( 'Luminous vivid orange' ) );
+
+		// Dismiss the Block Settings modal.
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph {"backgroundColor":"luminous-vivid-orange"} -->
+		<p class="has-luminous-vivid-orange-background-color has-background">A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+		` );
+	} );
+
+	it( 'should set a text and background color', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Text color settings
+		fireEvent.press( screen.getByLabelText( 'Text, Default' ) );
+
+		// Tap one color
+		fireEvent.press( screen.getByLabelText( 'White' ) );
+
+		// Go back to the settings menu
+		fireEvent.press( screen.getByLabelText( 'Go back' ) );
+
+		// Open Background color settings
+		fireEvent.press( screen.getByLabelText( 'Background, Default' ) );
+
+		// Tap one color
+		fireEvent.press( screen.getByLabelText( 'Luminous vivid orange' ) );
+
+		// Dismiss the Block Settings modal.
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph {"backgroundColor":"luminous-vivid-orange","textColor":"white"} -->
+		<p class="has-white-color has-luminous-vivid-orange-background-color has-text-color has-background">A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+		` );
+	} );
+
+	it( 'should remove text and background colors', async () => {
+		// Arrange
+		const screen = await initializeEditor( {
+			initialHtml: `<!-- wp:paragraph {"backgroundColor":"luminous-vivid-orange","textColor":"white"} -->
+			<p class="has-white-color has-luminous-vivid-orange-background-color has-text-color has-background">A quick brown fox jumps over the lazy dog.</p>
+			<!-- /wp:paragraph -->`,
+		} );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Text color settings
+		fireEvent.press( screen.getByLabelText( 'Text. Empty' ) );
+
+		// Reset color
+		fireEvent.press( await screen.findByText( 'Reset' ) );
+
+		// Go back to the settings menu
+		fireEvent.press( screen.getByLabelText( 'Go back' ) );
+
+		// Open Background color settings
+		fireEvent.press( screen.getByLabelText( 'Background. Empty' ) );
+
+		// Reset color
+		fireEvent.press( await screen.findByText( 'Reset' ) );
+
+		// Dismiss the Block Settings modal.
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+		` );
+	} );
+
+	it( 'should not have a gradient background color option', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Background color settings
+		fireEvent.press( screen.getByLabelText( 'Background, Default' ) );
+
+		// Assert
+		const colorButton = screen.getByLabelText( 'Luminous vivid orange' );
+		expect( colorButton ).toBeDefined();
+
+		const gradientButton = screen.queryByLabelText( 'Gradient' );
+		expect( gradientButton ).toBeNull();
+	} );
+
+	it( 'should set a theme text color', async () => {
+		// Arrange
+		const screen = await initializeEditor( { withGlobalStyles: true } );
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Text color settings
+		fireEvent.press( screen.getByLabelText( 'Text, Default' ) );
+
+		// Tap one color
+		fireEvent.press( screen.getByLabelText( 'Tertiary' ) );
+
+		// Dismiss the Block Settings modal.
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph {"textColor":"tertiary"} -->
+		<p class="has-tertiary-color has-text-color">A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+		` );
+	} );
+
+	it( 'should show the contrast check warning', async () => {
+		// Arrange
+		const screen = await initializeEditor( {
+			initialHtml: `<!-- wp:paragraph {"backgroundColor":"white","textColor":"white"} -->
+			<p class="has-white-color has-white-background-color has-text-color has-background">A quick brown fox jumps over the lazy dog.</p>
+			<!-- /wp:paragraph -->`,
+		} );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Assert
+		const contrastCheckElement = screen.getByText(
+			/This color combination/
+		);
+		expect( contrastCheckElement ).toBeDefined();
+	} );
 } );

package/src/post-author-name/edit.js

@@ -69,7 +69,7 @@ function PostAuthorNameEdit( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Link to author archive' ) }

package/src/post-date/edit.js

@@ -37,6 +37,7 @@ export default function PostDateEdit( {
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
+			[ `wp-block-post-date__modified-date` ]: displayType === 'modified',
 		} ),
 	} );
 
@@ -175,6 +176,9 @@ export default function PostDateEdit( {
 							} )
 						}
 						checked={ displayType === 'modified' }
+						help={ __(
+							'Only shows if the post has been modified'
+						) }
 					/>
 				</PanelBody>
 			</InspectorControls>

package/src/post-date/index.php

@@ -18,25 +18,34 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$post_ID = $block->context['postId'];
+	$post_ID          = $block->context['postId'];
+	$formatted_date   = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+	$unformatted_date = esc_attr( get_the_date( 'c', $post_ID ) );
+	$classes          = array();
 
-	$classes = array();
 	if ( isset( $attributes['textAlign'] ) ) {
 		$classes[] = 'has-text-align-' . $attributes['textAlign'];
 	}
 	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
 		$classes[] = 'has-link-color';
 	}
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
+	/*
+	 * If the "Display last modified date" setting is enabled,
+	 * only display the modified date if it is later than the publishing date.
+	 */
 	if ( isset( $attributes['displayType'] ) && 'modified' === $attributes['displayType'] ) {
-		$formatted_date   = get_the_modified_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
-		$unformatted_date = esc_attr( get_the_modified_date( 'c', $post_ID ) );
-	} else {
-		$formatted_date   = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
-		$unformatted_date = esc_attr( get_the_date( 'c', $post_ID ) );
+		if ( get_the_modified_date( 'Ymdhi', $post_ID ) > get_the_date( 'Ymdhi', $post_ID ) ) {
+			$formatted_date   = get_the_modified_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+			$unformatted_date = esc_attr( get_the_modified_date( 'c', $post_ID ) );
+			$classes[]        = 'wp-block-post-date__modified-date';
+		} else {
+			return '';
+		}
 	}
 
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
+
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
 		$formatted_date = sprintf( '<a href="%1s">%2s</a>', get_the_permalink( $post_ID ), $formatted_date );
 	}

package/src/post-excerpt/edit.js

@@ -56,7 +56,7 @@ export default function PostExcerptEditor( {
 				return true;
 			}
 			return !! select( coreStore ).getPostType( postType )?.supports
-				.excerpt;
+				?.excerpt;
 		},
 		[ postType ]
 	);

package/src/post-featured-image/edit.js

@@ -110,7 +110,8 @@ export default function PostFeaturedImageEdit( {
 				) }
 				withIllustration={ true }
 				style={ {
-					...blockProps.style,
+					height: !! aspectRatio && '100%',
+					width: !! aspectRatio && '100%',
 					...borderProps.style,
 				} }
 			>
@@ -145,9 +146,9 @@ export default function PostFeaturedImageEdit( {
 						label={
 							postType?.labels.singular_name
 								? sprintf(
-										// translators: %s: Name of the post type e.g: "post".
+										// translators: %s: Name of the post type e.g: "Page".
 										__( 'Link to %s' ),
-										postType.labels.singular_name.toLowerCase()
+										postType.labels.singular_name
 								  )
 								: __( 'Link to post' )
 						}
@@ -210,7 +211,7 @@ export default function PostFeaturedImageEdit( {
 	const label = __( 'Add a featured image' );
 	const imageStyles = {
 		...borderProps.style,
-		height: ( !! aspectRatio && '100%' ) || height,
+		height: aspectRatio ? '100%' : height,
 		width: !! aspectRatio && '100%',
 		objectFit: !! ( height || aspectRatio ) && scale,
 	};

package/src/post-featured-image/overlay.js

@@ -45,6 +45,10 @@ const Overlay = ( {
 		...borderProps.style,
 	};
 
+	if ( ! colorGradientSettings.hasColorsOrGradients ) {
+		return null;
+	}
+
 	return (
 		<>
 			{ !! dimRatio && (

package/src/post-terms/index.php

@@ -64,8 +64,8 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
 function register_block_core_post_terms() {
 	$taxonomies = get_taxonomies(
 		array(
-			'public'       => true,
-			'show_in_rest' => true,
+			'publicly_queryable' => true,
+			'show_in_rest'       => true,
 		),
 		'objects'
 	);

package/src/post-title/edit.js

@@ -15,6 +15,7 @@ import {
 } from '@wordpress/block-editor';
 import { ToggleControl, TextControl, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { useEntityProp } from '@wordpress/core-data';
 
 /**
@@ -27,6 +28,7 @@ export default function PostTitleEdit( {
 	attributes: { level, textAlign, isLink, rel, linkTarget },
 	setAttributes,
 	context: { postType, postId, queryId },
+	insertBlocksAfter,
 } ) {
 	const TagName = 0 === level ? 'p' : 'h' + level;
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
@@ -38,6 +40,9 @@ export default function PostTitleEdit( {
 		postId
 	);
 	const [ link ] = useEntityProp( 'postType', postType, 'link', postId );
+	const onSplitAtEnd = () => {
+		insertBlocksAfter( createBlock( getDefaultBlockName() ) );
+	};
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
@@ -57,6 +62,7 @@ export default function PostTitleEdit( {
 					value={ rawTitle }
 					onChange={ setTitle }
 					__experimentalVersion={ 2 }
+					__unstableOnSplitAtEnd={ onSplitAtEnd }
 					{ ...blockProps }
 				/>
 			) : (
@@ -82,6 +88,7 @@ export default function PostTitleEdit( {
 						value={ rawTitle }
 						onChange={ setTitle }
 						__experimentalVersion={ 2 }
+						__unstableOnSplitAtEnd={ onSplitAtEnd }
 					/>
 				</TagName>
 			) : (
@@ -116,7 +123,7 @@ export default function PostTitleEdit( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Make title a link' ) }

package/src/preformatted/edit.native.js

@@ -28,12 +28,10 @@ export default function PreformattedEdit( props ) {
 		...( style?.fontSize && { fontSize: style.fontSize } ),
 		...( style?.color && { color: style.color } ),
 	};
-	const hasBaseColors =
-		style?.baseColors && Object.entries( style.baseColors ).length !== 0;
 	const containerStyles = [
 		wpBlockPreformatted,
 		style?.backgroundColor && { backgroundColor: style.backgroundColor },
-		hasBaseColors &&
+		style?.baseColors?.color &&
 			! style?.backgroundColor &&
 			styles[ 'wp-block-preformatted__no-background' ],
 	];

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

@@ -3,7 +3,7 @@
  */
 import {
 	addBlock,
-	changeAndSelectTextOfRichText,
+	typeInRichText,
 	fireEvent,
 	getEditorHtml,
 	initializeEditor,
@@ -64,24 +64,21 @@ describe( 'Preformatted', () => {
 
 		// Act
 		await addBlock( screen, 'Preformatted' );
-		const verseTextInput = await screen.findByPlaceholderText(
+		const preformattedTextInput = await screen.findByPlaceholderText(
 			'Write preformatted text…'
 		);
-		const string = 'A great statement.';
-		changeAndSelectTextOfRichText( verseTextInput, string, {
-			selectionStart: string.length,
-			selectionEnd: string.length,
-		} );
-		fireEvent( verseTextInput, 'onKeyDown', {
+		typeInRichText( preformattedTextInput, 'A great statement.' );
+		fireEvent( preformattedTextInput, 'onKeyDown', {
 			nativeEvent: {},
 			preventDefault() {},
 			keyCode: ENTER,
 		} );
+		typeInRichText( preformattedTextInput, 'Again' );
 
 		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
 		"<!-- wp:preformatted -->
-		<pre class="wp-block-preformatted">A great statement.<br></pre>
+		<pre class="wp-block-preformatted">A great statement.<br>Again</pre>
 		<!-- /wp:preformatted -->"
 	` );
 	} );