Code block: should use RichText (native) (#56724)

WordPress · Dec 5, 2023 · 310f789 · 310f789 · github-actions · Dec 5, 2023
1 parent 88da557
commit 310f789
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 15 deletions.
diff --git a/packages/block-library/src/code/edit.native.js b/packages/block-library/src/code/edit.native.js
@@ -6,7 +6,7 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { PlainText } from '@wordpress/block-editor';
+import { RichText } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
@@ -20,14 +20,11 @@ import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
  */
 import styles from './theme.scss';
 
-// Note: styling is applied directly to the (nested) PlainText component. Web-side components
-// apply it to the container 'div' but we don't have a proper proposal for cascading styling yet.
 export function CodeEdit( props ) {
 	const {
 		attributes,
 		setAttributes,
-		onFocus,
-		onBlur,
+		onRemove,
 		style,
 		insertBlocksAfter,
 		mergeBlocks,
@@ -37,30 +34,31 @@ export function CodeEdit( props ) {
 			styles.blockCode,
 			styles.blockCodeDark
 		),
-		...( style?.fontSize && { fontSize: style.fontSize } ),
 	};
 
+	const textStyle = style?.fontSize ? { fontSize: style.fontSize } : {};
+
 	const placeholderStyle = usePreferredColorSchemeStyle(
 		styles.placeholder,
 		styles.placeholderDark
 	);
 
 	return (
-		<View>
-			<PlainText
+		<View style={ codeStyle }>
+			<RichText
+				tagName="pre"
 				value={ attributes.content }
 				identifier="content"
-				style={ codeStyle }
-				multiline={ true }
+				style={ textStyle }
 				underlineColorAndroid="transparent"
 				onChange={ ( content ) => setAttributes( { content } ) }
 				onMerge={ mergeBlocks }
+				onRemove={ onRemove }
 				placeholder={ __( 'Write code…' ) }
 				aria-label={ __( 'Code' ) }
-				isSelected={ props.isSelected }
-				onFocus={ onFocus }
-				onBlur={ onBlur }
 				placeholderTextColor={ placeholderStyle.color }
+				preserveWhiteSpace
+				__unstablePastePlainText
 				__unstableOnSplitAtDoubleLineEnd={ () =>
 					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
 				}

diff --git a/packages/block-library/src/code/test/edit.native.js b/packages/block-library/src/code/test/edit.native.js
@@ -49,15 +49,15 @@ describe( 'Code', () => {
 		const screen = await initializeEditor( {
 			initialHtml,
 		} );
-		const { getByDisplayValue } = screen;
+		const { findByPlaceholderText } = screen;
 
 		// Get block
 		const codeBlock = await getBlock( screen, 'Code' );
 		expect( codeBlock ).toBeVisible();
 		fireEvent.press( codeBlock );
 
 		// Get initial text
-		const codeBlockText = getByDisplayValue( 'Sample text' );
+		const codeBlockText = await findByPlaceholderText( 'Write code…' );
 		expect( codeBlockText ).toBeVisible();
 
 		expect( getEditorHtml() ).toMatchSnapshot();