[RNMobile] Do not use hard coded fontFamily in Image block (#13677)

* Use RichText component in Title block for mobile. This is required to properly intercpet Enter.key on all platforms/keyboards. We decided to move to RichText since all of the work for Enter.key intercept was laready done there per Para and Heading blocks. * Fix lint * Set font family, weight, and size via RN props for Title, Heading, and Para blocks. * Fix lint * Adds font* props to PlainText for mobile * Make `serif` default family for RichText on mobile * Set the correct font family for Image caption on mobile * Set the correct font family for Nextpage block on mobile * Set the correct font family for Code block on mobile * set the correct font family for Image caption on mobile * Remove extra fontFamily props. * Remaps some font names so that they work in iOS. (#13628) * Remaps some font names so that they work in iOS. * Improved the logic for picking the default font in some components. * Modifies the logic that sets the default font for the code component. * Changes the font family in a css file. * Adds an import to have a default font for native. * Standardizes the default font for the code component. * Simplifies the default font for the code block. * Simplifies the default font for the code block. * Configures the default font for plain-text from a css file. * Fixes the styling for the rich text components and restores a line that was removed by mistake. * Fixes a linting problem. * Fixes some linting issues. * Fixes a linting issue. * Make sure PlainText takes in consideration the fontFamily passed via props before falling back to default styles * Do not use hard coded `fontFamily` value, instead use CSS style. * Add missing new line at end of style
WordPress · Mar 6, 2019 · 716d31a · 716d31a
1 parent 259b153
commit 716d31a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -291,7 +291,7 @@ export default class ImageEdit extends React.Component {
 						<View style={ { padding: 12, flex: 1 } }>
 							<TextInput
 								style={ { textAlign: 'center' } }
-								fontFamily={ 'serif' }
+								fontFamily={ this.props.fontFamily || ( styles[ 'caption-text' ].fontFamily ) }
 								underlineColorAndroid="transparent"
 								value={ caption }
 								placeholder={ __( 'Write caption…' ) }

diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss
@@ -1,3 +1,7 @@
+// @format
+
+@import "variables.scss";
+
 .imageContainer {
 	flex: 1;
 	justify-content: center;
@@ -16,6 +20,10 @@
 	align-items: center;
 }
 
+.caption-text {
+	font-family: $default-regular-font;
+}
+
 .resetSettingsButton {
 	color: $alert-red;
 }