From 94f525ed400dbaae9eea4b4dc58e653d692526bd Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Mon, 4 Oct 2021 09:40:20 +0200 Subject: [PATCH 1/5] Mobile - Font size support for the blocks: Button, Code, Preformatted and Heading sublevels --- .../block-library/src/button/edit.native.js | 1 + .../block-library/src/code/edit.native.js | 23 +++++++--------- .../block-library/src/preformatted/edit.js | 3 ++- .../src/preformatted/edit.native.js | 26 ++++++++++++++----- .../src/preformatted/styles.native.scss | 5 ++++ .../rich-text/src/component/index.native.js | 18 ++++++++++--- 6 files changed, 52 insertions(+), 24 deletions(-) diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index ec9741fe5add4..3fa7afdee1fec 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -510,6 +510,7 @@ class ButtonEdit extends Component { ? 0 : richTextStyle.richText.paddingRight, color: textColor, + fontSize: style?.fontSize, } } textAlign={ align } placeholderTextColor={ diff --git a/packages/block-library/src/code/edit.native.js b/packages/block-library/src/code/edit.native.js index b89cd3b775b03..e62af70cf6d0c 100644 --- a/packages/block-library/src/code/edit.native.js +++ b/packages/block-library/src/code/edit.native.js @@ -8,7 +8,7 @@ import { View } from 'react-native'; */ import { PlainText } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; -import { withPreferredColorScheme } from '@wordpress/compose'; +import { usePreferredColorSchemeStyle } from '@wordpress/compose'; /** * Internal dependencies @@ -22,18 +22,13 @@ 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, - getStylesFromColorScheme, - } = props; - const codeStyle = getStylesFromColorScheme( - styles.blockCode, - styles.blockCodeDark - ); - const placeholderStyle = getStylesFromColorScheme( + const { attributes, setAttributes, onFocus, onBlur, style } = props; + const codeStyle = [ + usePreferredColorSchemeStyle( styles.blockCode, styles.blockCodeDark ), + style?.fontSize && { fontSize: parseFloat( style.fontSize ) }, + ]; + + const placeholderStyle = usePreferredColorSchemeStyle( styles.placeholder, styles.placeholderDark ); @@ -57,4 +52,4 @@ export function CodeEdit( props ) { ); } -export default withPreferredColorScheme( CodeEdit ); +export default CodeEdit; diff --git a/packages/block-library/src/preformatted/edit.js b/packages/block-library/src/preformatted/edit.js index a1284ff1b77d9..7117d0617905f 100644 --- a/packages/block-library/src/preformatted/edit.js +++ b/packages/block-library/src/preformatted/edit.js @@ -9,9 +9,10 @@ export default function PreformattedEdit( { mergeBlocks, setAttributes, onRemove, + style, } ) { const { content } = attributes; - const blockProps = useBlockProps(); + const blockProps = useBlockProps( { style } ); return ( + ); } -export default withPreferredColorScheme( PreformattedEdit ); +export default PreformattedEdit; diff --git a/packages/block-library/src/preformatted/styles.native.scss b/packages/block-library/src/preformatted/styles.native.scss index c3d4cf129f2ba..e3c3578cf0f47 100644 --- a/packages/block-library/src/preformatted/styles.native.scss +++ b/packages/block-library/src/preformatted/styles.native.scss @@ -23,3 +23,8 @@ .wpRichTextDark { @extend %wpBlockPreformattedDarkColor; } + +.wp-block-preformatted__no-background { + background: transparent; + padding: 0; +} diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index ebb7fd21d29f1..df1a6604d6f00 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -854,7 +854,9 @@ export class RichText extends Component { } getFontSize() { - const { baseGlobalStyles } = this.props; + const { baseGlobalStyles, tagName } = this.props; + const tagNameFontSize = + baseGlobalStyles?.elements?.[ tagName ]?.typography?.fontSize; let fontSize = DEFAULT_FONT_SIZE; @@ -862,11 +864,15 @@ export class RichText extends Component { fontSize = baseGlobalStyles?.typography?.fontSize; } + if ( tagNameFontSize ) { + fontSize = tagNameFontSize; + } + if ( this.props.style?.fontSize ) { fontSize = this.props.style.fontSize; } - if ( this.props.fontSize ) { + if ( this.props.fontSize && ! tagNameFontSize ) { fontSize = this.props.fontSize; } const { height, width } = this.state.dimensions; @@ -879,7 +885,9 @@ export class RichText extends Component { } getLineHeight() { - const { baseGlobalStyles } = this.props; + const { baseGlobalStyles, tagName } = this.props; + const tagNameLineHeight = + baseGlobalStyles?.elements?.[ tagName ]?.typography?.lineHeight; let lineHeight; // eslint-disable-next-line no-undef @@ -891,6 +899,10 @@ export class RichText extends Component { lineHeight = parseFloat( baseGlobalStyles?.typography?.lineHeight ); } + if ( tagNameLineHeight ) { + lineHeight = parseFloat( tagNameLineHeight ); + } + if ( this.props.style?.lineHeight ) { lineHeight = parseFloat( this.props.style.lineHeight ); } From c40e8788fde29f82f47c92c6c7052e35fdd284c0 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Mon, 4 Oct 2021 10:11:04 +0200 Subject: [PATCH 2/5] Mobile - Preformatted - Update snapshot --- .../test/__snapshots__/edit.native.js.snap | 22 +++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/preformatted/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/preformatted/test/__snapshots__/edit.native.js.snap index 9d729e151661d..46c529c81a791 100644 --- a/packages/block-library/src/preformatted/test/__snapshots__/edit.native.js.snap +++ b/packages/block-library/src/preformatted/test/__snapshots__/edit.native.js.snap @@ -1,16 +1,33 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`core/more/edit/native should match snapshot when content is empty 1`] = ` - + `; exports[`core/more/edit/native should match snapshot when content is not empty 1`] = ` - + `; From d37dc0f1a9c622e9b3afc53c27ecbc6473d790cb Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Mon, 11 Oct 2021 11:46:12 +0200 Subject: [PATCH 3/5] Mobile - Fix button and code font size, add support for different font size units in the PlainText component --- .../src/components/plain-text/index.native.js | 30 ++++++++++++++++--- .../block-library/src/button/edit.native.js | 1 + .../block-library/src/code/edit.native.js | 11 ++++--- .../rich-text/src/component/index.native.js | 6 ++++ 4 files changed, 40 insertions(+), 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 index 33058f8a346f4..86195379744be 100644 --- a/packages/block-editor/src/components/plain-text/index.native.js +++ b/packages/block-editor/src/components/plain-text/index.native.js @@ -1,12 +1,13 @@ /** * External dependencies */ -import { TextInput, Platform } from 'react-native'; +import { TextInput, Platform, Dimensions } from 'react-native'; /** * WordPress dependencies */ import { Component } from '@wordpress/element'; +import { getPxFromCssUnit } from '@wordpress/block-editor'; /** * Internal dependencies @@ -61,7 +62,30 @@ export default class PlainText extends Component { this._input.blur(); } + getFontSize() { + const { style } = this.props; + + if ( ! style?.fontSize ) { + return; + } + + const { width, height } = Dimensions.get( 'window' ); + const cssUnitOptions = { height, width }; + + return { + fontSize: parseFloat( + getPxFromCssUnit( style.fontSize, cssUnitOptions ) + ), + }; + } + render() { + const { style } = this.props; + const textStyles = [ + style || styles[ 'block-editor-plain-text' ], + this.getFontSize(), + ]; + return ( ); diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 85b3ee313cb82..3f4f301bd1b8d 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -514,6 +514,7 @@ function ButtonEdit( props ) { onReplace={ onReplace } onRemove={ onRemove } onMerge={ mergeBlocks } + fontSize={ style?.fontSize } /> diff --git a/packages/block-library/src/code/edit.native.js b/packages/block-library/src/code/edit.native.js index e62af70cf6d0c..58188d0b2119f 100644 --- a/packages/block-library/src/code/edit.native.js +++ b/packages/block-library/src/code/edit.native.js @@ -23,10 +23,13 @@ import styles from './theme.scss'; // 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, style } = props; - const codeStyle = [ - usePreferredColorSchemeStyle( styles.blockCode, styles.blockCodeDark ), - style?.fontSize && { fontSize: parseFloat( style.fontSize ) }, - ]; + const codeStyle = { + ...usePreferredColorSchemeStyle( + styles.blockCode, + styles.blockCodeDark + ), + ...( style?.fontSize && { fontSize: style.fontSize } ), + }; const placeholderStyle = usePreferredColorSchemeStyle( styles.placeholder, diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index df1a6604d6f00..4778a43ee2453 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -757,6 +757,12 @@ export class RichText extends Component { this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side } + // For font size changes from a prop value a force refresh + // is needed without the selection update + if ( nextProps?.fontSize !== this.props?.fontSize ) { + this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side + } + if ( nextProps?.style?.fontSize !== this.props?.style?.fontSize || nextProps?.style?.lineHeight !== this.props?.style?.lineHeight From c5348a41f5040ce9ea4bfe1e13278e73e2fb2ea8 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Mon, 11 Oct 2021 12:21:48 +0200 Subject: [PATCH 4/5] Mobile - Update snapshots for File and Search block --- .../test/__snapshots__/edit.native.js.snap | 9 ++++--- .../test/__snapshots__/edit.native.js.snap | 25 +++++++++++++++---- 2 files changed, 26 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap index 440d991192d16..e029bd6e7105f 100644 --- a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap +++ b/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap @@ -112,9 +112,12 @@ exports[`File block renders file error state without crashing 1`] = ` rejectResponderTermination={true} scrollEnabled={false} style={ - Object { - "fontFamily": "serif", - } + Array [ + Object { + "fontFamily": "serif", + }, + undefined, + ] } underlineColorAndroid="transparent" value="Error" diff --git a/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap index 6030decd6fcf5..928445432525f 100644 --- a/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap +++ b/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap @@ -94,7 +94,10 @@ exports[`Search Block renders block with button inside option 1`] = ` scrollEnabled={false} style={ Array [ - false, + Array [ + false, + undefined, + ], undefined, ] } @@ -269,7 +272,10 @@ exports[`Search Block renders block with icon button option matches snapshot 1`] scrollEnabled={false} style={ Array [ - undefined, + Array [ + undefined, + undefined, + ], undefined, ] } @@ -326,7 +332,10 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = ` scrollEnabled={false} style={ Array [ - undefined, + Array [ + undefined, + undefined, + ], undefined, ] } @@ -501,7 +510,10 @@ exports[`Search Block renders with default configuration matches snapshot 1`] = scrollEnabled={false} style={ Array [ - undefined, + Array [ + undefined, + undefined, + ], undefined, ] } @@ -667,7 +679,10 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = ` scrollEnabled={false} style={ Array [ - undefined, + Array [ + undefined, + undefined, + ], undefined, ] } From d6fecd9bf8260631ec59dad029ba0f52efb2d835 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Thu, 14 Oct 2021 09:57:09 +0200 Subject: [PATCH 5/5] Mobile - Update changelog --- packages/react-native-editor/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 8dd70fa62f14c..c5f96c70d0f22 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -15,6 +15,7 @@ For each user feature we should also add a importance categorization label to i - [*] [Unsupported Block Editor] Fix text selection bug for Android [#34668] - [*] [Embed block] Fix URL not editable after dismissing the edit URL bottom sheet with empty value [#35460] - [**] Pullquote block - Added support for text and background color customization [#34451] +- [**] Preformatted block - Added support for text and background color customization [#35314] ## 1.63.1 - [*] Fixed missing modal backdrop for Android help section [#35557]