Rnmobile/368 improve code block (#18785)

* Improve code block style. * Refactor style of PlainText to use style prop. * Add a check for empty style prop. * Update styles according to design
WordPress · Dec 2, 2019 · 69950b1 · 69950b1
1 parent 2fd13b6
commit 69950b1
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/packages/block-editor/src/components/plain-text/index.native.js b/packages/block-editor/src/components/plain-text/index.native.js
@@ -41,16 +41,13 @@ export default class PlainText extends Component {
 			<TextInput
 				{ ...this.props }
 				ref={ ( x ) => this._input = x }
-				className={ [ styles[ 'block-editor-plain-text' ], this.props.className ] }
 				onChange={ ( event ) => {
 					this.props.onChange( event.nativeEvent.text );
 				} }
 				onFocus={ this.props.onFocus } // always assign onFocus as a props
 				onBlur={ this.props.onBlur } // always assign onBlur as a props
-				fontFamily={ this.props.fontFamily || ( styles[ 'block-editor-plain-text' ].fontFamily ) }
-				fontSize={ this.props.fontSize }
-				fontWeight={ this.props.fontWeight }
-				fontStyle={ this.props.fontStyle }
+				fontFamily={ ( this.props.style && this.props.style.fontFamily ) || ( styles[ 'block-editor-plain-text' ].fontFamily ) }
+				style={ this.props.style || styles[ 'block-editor-plain-text' ] }
 			/>
 		);
 	}

diff --git a/packages/block-library/src/code/edit.native.js b/packages/block-library/src/code/edit.native.js
@@ -22,15 +22,15 @@ 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, style, onFocus, onBlur, getStylesFromColorScheme } = props;
+	const { attributes, setAttributes, onFocus, onBlur, getStylesFromColorScheme } = props;
 	const codeStyle = getStylesFromColorScheme( styles.blockCode, styles.blockCodeDark );
 	const placeholderStyle = getStylesFromColorScheme( styles.placeholder, styles.placeholderDark );
 
 	return (
 		<View>
 			<PlainText
 				value={ attributes.content }
-				style={ [ style, codeStyle ] }
+				style={ codeStyle }
 				multiline={ true }
 				underlineColorAndroid="transparent"
 				onChange={ ( content ) => setAttributes( { content } ) }
@@ -39,7 +39,6 @@ export function CodeEdit( props ) {
 				isSelected={ props.isSelected }
 				onFocus={ onFocus }
 				onBlur={ onBlur }
-				fontFamily={ ( styles.blockCode.fontFamily ) }
 				placeholderTextColor={ placeholderStyle.color }
 			/>
 		</View>

diff --git a/packages/block-library/src/code/theme.native.scss b/packages/block-library/src/code/theme.native.scss
@@ -2,10 +2,15 @@
 
 .blockCode {
 	font-family: $default-monospace-font;
+	font-size: 14;
+	padding: 12px 16px;
+	border-radius: 4px;
+	background-color: $gray-light;
 }
 
 .blockCodeDark {
 	color: $white;
+	background-color: $gray-100;
 }
 
 .placeholder {