[RNmobile] Bring Placeholder text back working on Heading blocks (#14404

)

* Remove the temporary fix for heading issue on Android, and let's pass the `tagName` value down to the Native wrapper

* Do not pass the `tagName` prop to AztecView

* The heading block now uses a minHeight defined in variables.scss, in the outer mobile project. This is a fix for an ugly rendering issue we're seeing with the placeholder when starting wrinting text.

* Add missing file from the prev commit

* Remove import of variaboe.scss since it's not required an explict import anymore after latest changes to GB.

packages/block-editor/src/components/rich-text/index.native.js

@@ -501,30 +501,18 @@ export class RichText extends Component {
 			style,
 			formattingControls,
 			isSelected,
-			sendEmptyTag,
 		} = this.props;
 
 		const record = this.getRecord();
 		// Save back to HTML from React tree
 		const value = this.valueToFormat( record );
 		let html = `<${ tagName }>${ value }</${ tagName }>`;
 		// We need to check if the value is undefined or empty, and then assign it properly otherwise the placeholder is not visible
-
 		if ( value === undefined || value === '' ) {
-			// PR for placeholder fix https://github.com/WordPress/gutenberg/pull/13699/
-			// has introduced heading issue on Android https://github.com/wordpress-mobile/gutenberg-mobile/issues/627
-			// ( If a new heading block is created on Android device
-			// it will be without default formatting ( <h2> currently ) ) .
-			// Fix for heading issue is to skip reset of html variable if tag is heading and platform is Android.
-			// This fix will intentionally introduce original issue with placeholder (on Android)
-			// which has lower priority then heading issue .
-			// New issue is raised : https://github.com/wordpress-mobile/gutenberg-mobile/issues/707
-			if ( ! sendEmptyTag ) {
-				html = '';
-			}
-
+			html = '';
 			this.lastEventCount = undefined; // force a refresh on the native side
 		}
+
 		let minHeight = styles[ 'editor-rich-text' ].minHeight;
 		if ( style && style.minHeight ) {
 			minHeight = style.minHeight;

packages/block-library/src/heading/edit.native.js

@@ -16,14 +16,15 @@ import { Component } from '@wordpress/element';
 import { RichText, BlockControls } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 
+import styles from './editor.scss';
+
 const name = 'core/heading';
 
 class HeadingEdit extends Component {
 	constructor( props ) {
 		super( props );
 
 		this.splitBlock = this.splitBlock.bind( this );
-		this.isAndroid = Platform.OS === 'android';
 	}
 
 	/**
@@ -94,17 +95,17 @@ class HeadingEdit extends Component {
 					tagName={ tagName }
 					value={ content }
 					isSelected={ this.props.isSelected }
-					style={ style }
+					style={ {
+						...style,
+						minHeight: styles['wp-block-heading'].minHeight,
+					} }
 					onFocus={ this.props.onFocus } // always assign onFocus as a props
 					onBlur={ this.props.onBlur } // always assign onBlur as a props
 					onCaretVerticalPositionChange={ this.props.onCaretVerticalPositionChange }
 					onChange={ ( value ) => setAttributes( { content: value } ) }
 					onMerge={ mergeBlocks }
 					onSplit={ this.splitBlock }
 					placeholder={ placeholder || __( 'Write heading…' ) }
-					// Fix for heading issue on Android https://github.com/wordpress-mobile/gutenberg-mobile/issues/627
-					// Intentionally introduces missing pleceholder issue on Android https://github.com/wordpress-mobile/gutenberg-mobile/issues/707
-					sendEmptyTag={ this.isAndroid }
 				/>
 			</View>
 		);

packages/block-library/src/heading/editor.native.scss

@@ -0,0 +1,4 @@
+
+.wp-block-heading {
+    min-height: $min-height-heading;
+}