From 792af0bd32a56bf1fe7f9db3cd9484cec8777d03 Mon Sep 17 00:00:00 2001 From: Danilo Ercoli Date: Tue, 12 Mar 2019 19:48:59 +0100 Subject: [PATCH 1/5] Remove the temporary fix for heading issue on Android, and let's pass the `tagName` value down to the Native wrapper --- .../block-library/src/heading/edit.native.js | 4 ---- .../src/components/rich-text/index.native.js | 17 +++-------------- 2 files changed, 3 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/heading/edit.native.js b/packages/block-library/src/heading/edit.native.js index 2c16443fccbda..15cf962879ed8 100644 --- a/packages/block-library/src/heading/edit.native.js +++ b/packages/block-library/src/heading/edit.native.js @@ -23,7 +23,6 @@ class HeadingEdit extends Component { super( props ); this.splitBlock = this.splitBlock.bind( this ); - this.isAndroid = Platform.OS === 'android'; } /** @@ -102,9 +101,6 @@ class HeadingEdit extends Component { 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 } /> ); diff --git a/packages/editor/src/components/rich-text/index.native.js b/packages/editor/src/components/rich-text/index.native.js index 92c6e9135b7ea..eef5986329f42 100644 --- a/packages/editor/src/components/rich-text/index.native.js +++ b/packages/editor/src/components/rich-text/index.native.js @@ -496,7 +496,6 @@ export class RichText extends Component { style, formattingControls, isSelected, - sendEmptyTag, } = this.props; const record = this.getRecord(); @@ -504,22 +503,11 @@ export class RichText extends Component { const value = this.valueToFormat( record ); let html = `<${ tagName }>${ value }`; // 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 (

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; @@ -547,6 +535,7 @@ export class RichText extends Component { text={ { text: html, eventCount: this.lastEventCount } } placeholder={ this.props.placeholder } placeholderTextColor={ this.props.placeholderTextColor || styles[ 'editor-rich-text' ].textDecorationColor } + tagName={ tagName } onChange={ this.onChange } onFocus={ this.props.onFocus } onBlur={ this.props.onBlur } From 9e8470076e1648bc07fd66f1d5c6f0e493b18855 Mon Sep 17 00:00:00 2001 From: Danilo Ercoli Date: Tue, 12 Mar 2019 20:16:48 +0100 Subject: [PATCH 2/5] Do not pass the `tagName` prop to AztecView --- packages/editor/src/components/rich-text/index.native.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/editor/src/components/rich-text/index.native.js b/packages/editor/src/components/rich-text/index.native.js index eef5986329f42..cec254f698d8e 100644 --- a/packages/editor/src/components/rich-text/index.native.js +++ b/packages/editor/src/components/rich-text/index.native.js @@ -535,7 +535,6 @@ export class RichText extends Component { text={ { text: html, eventCount: this.lastEventCount } } placeholder={ this.props.placeholder } placeholderTextColor={ this.props.placeholderTextColor || styles[ 'editor-rich-text' ].textDecorationColor } - tagName={ tagName } onChange={ this.onChange } onFocus={ this.props.onFocus } onBlur={ this.props.onBlur } From a8bf0e7061d19924161610be4474786fffadc940 Mon Sep 17 00:00:00 2001 From: Danilo Ercoli Date: Thu, 14 Mar 2019 09:40:07 +0100 Subject: [PATCH 3/5] 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. --- packages/block-library/src/heading/edit.native.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/heading/edit.native.js b/packages/block-library/src/heading/edit.native.js index 15cf962879ed8..9852e2faca42b 100644 --- a/packages/block-library/src/heading/edit.native.js +++ b/packages/block-library/src/heading/edit.native.js @@ -16,6 +16,8 @@ import { Component } from '@wordpress/element'; import { RichText, BlockControls } from '@wordpress/editor'; import { createBlock } from '@wordpress/blocks'; +import styles from './editor.scss'; + const name = 'core/heading'; class HeadingEdit extends Component { @@ -93,7 +95,10 @@ 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 } From c196b6845b498ae5cfbedca34d2ea4aea28ffafd Mon Sep 17 00:00:00 2001 From: Danilo Ercoli Date: Thu, 14 Mar 2019 09:44:28 +0100 Subject: [PATCH 4/5] Add missing file from the prev commit --- packages/block-library/src/heading/editor.native.scss | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/block-library/src/heading/editor.native.scss diff --git a/packages/block-library/src/heading/editor.native.scss b/packages/block-library/src/heading/editor.native.scss new file mode 100644 index 0000000000000..cd2eb2bc6b7a5 --- /dev/null +++ b/packages/block-library/src/heading/editor.native.scss @@ -0,0 +1,5 @@ +@import "variables.scss"; + +.wp-block-heading { + min-height: $min-height-heading; +} From 793609596ab09d4a0117f950c77cc887cacda68a Mon Sep 17 00:00:00 2001 From: Danilo Ercoli Date: Thu, 14 Mar 2019 16:29:21 +0100 Subject: [PATCH 5/5] Remove import of variaboe.scss since it's not required an explict import anymore after latest changes to GB. --- packages/block-library/src/heading/editor.native.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/heading/editor.native.scss b/packages/block-library/src/heading/editor.native.scss index cd2eb2bc6b7a5..eb3f5a7e691eb 100644 --- a/packages/block-library/src/heading/editor.native.scss +++ b/packages/block-library/src/heading/editor.native.scss @@ -1,4 +1,3 @@ -@import "variables.scss"; .wp-block-heading { min-height: $min-height-heading;