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

daniloercoli · 2019-02-05T17:01:27Z

This PR does fix an issue with the Image block on mobile where the fontFamily used was hard coded in the block, instead of reading it via CSS.

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.

…rnmobile/372-use-RichText-on-Title-block * 'master' of https://github.com/WordPress/gutenberg: (36 commits) Fixes plural messages POT generation. (#13577) Typo fix (#13595) REST API: Remove oEmbed proxy HTML filtering (#13575) Removed unnecessary className attribute. Fixes #11664 (#11831) Add changelog for RSS block (#13588) Components: Set type=button for TabPanel button elements. (#11944) Update util.js (#13582) Docs: Add accessbility specific page (#13169) Rnmobile/media methods refactor (#13554) chore(release): publish chore(release): publish Plugin: Deprecate gutenberg_get_script_polyfill (#13536) Block API: Parse entity only when valid character reference (#13512) RichText: List: fix indentation (#13563) Plugin: Deprecate window._wpLoadGutenbergEditor (#13547) Plugin: Avoid setting generic "Edit Post" title on load (#13552) Plugin: Populate demo content by default content filters (#13553) RichText: List: Fix getParentIndex (#13562) RichText: List: Fix outdent with children (#13559) Scripts: Remove npm run build from test-e2e default run (#13420) ...

…d Para blocks.

…rnmobile/372-use-RichText-on-Title-block * 'master' of https://github.com/WordPress/gutenberg: Try alternate list item jump fix. (#12941) Mobile bottom sheet component (#13612) Remove unintentional right-margin on last odd-item. (#12199) Introduce left and right float alignment options to latest posts block (#8814) Fix Google Docs table paste (#13543) Increase bottom padding on gallery image caption (#13623) Fix the editor save keyboard shortcut not working in code editor view (#13159) Plugin: Deprecate gutenberg_add_admin_body_class (#13572) Rnmobile/upload media failed state (#13615) Make clickOnMoreMenuItem not dependent on aria labels (#13166) Add: className prop support to server side render. (#13568) Fix: Categories Block: hierarchical Dropdown (#13567) Docs: Add clarification about git workflow (#13534) Plugin: Remove `user_can_richedit` filtering (#13608) eslint-plugin: Add rule `no-unused-vars-before-return` (#12828) Image settings button (#13597) Fixed wording for the color picker saturation (#13479) # Conflicts: # packages/block-library/src/image/edit.native.js

* 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.

…props before falling back to default styles

…rnmobile/372-use-RichText-on-Title-block * 'master' of https://github.com/WordPress/gutenberg: (22 commits) Make the modal title styling consistent (#13669) Disable navigation block for text mode. (#12185) Fix: Linting problem in modal example code (#13671) Add myself as a code owner to the annotations (#13672) Add more reviewers to CODEOWNERS.md file (#13667) Plugin: Remove jQuery heartbeat-to-hooks proxying (#13576) Workflow: Add repository CODEOWNERS file (#13604) Add a mobile minimum size for form fields (#13639) Update edit-save documentation (#13578) Alt image setting (#13631) Fix: Allow years lower than 1970 in DateTime component. (#13602) Using addQueryArgs to generate Manage All Reusable Blocks link (#13653) Bump plugin version to 5.0.0-rc.1 (#13652) Update lodash to 4.17.10 (#13651) Refreshed PR (#9469) Set default values of the width and height input fields according to the actual image dimensions (#7687) 12647 fix css color picker (#12747) Remove "we" from messages (#13644) Fix: Font size picker max width on mobile (#13264) Fix/issue 12501 menu item aria label ...

…rnmobile/372-fix-image-caption-font-family * 'master' of https://github.com/WordPress/gutenberg: Mention how 'core/notices' data store is accessed (#13593)

…rnmobile/372-fix-image-caption-font-family * 'master' of https://github.com/WordPress/gutenberg: [RNMobile] Use RichText component on Title block (#13548) # Conflicts: # packages/block-library/src/image/edit.native.js

…rnmobile/372-fix-image-caption-font-family * 'master' of https://github.com/WordPress/gutenberg: Update CODEOWNERS Project: Avoid additional native-file code owner notification (#13675) Mobile: Link image setting (#13654) # Conflicts: # packages/block-library/src/image/styles.native.scss

hypest · 2019-02-06T10:01:22Z

packages/block-library/src/image/styles.native.scss

@@ -16,6 +20,10 @@
 	align-items: center;
 }

+.caption-text {


Nit: for simplicity in accessing it, and to match the rest of the class definitions in the same file, what do you think about renaming it to .captionText?

Yes, captionText was my 1st choice yesterday, but got an error in JS lint if I rename it:

[0] gutenberg-mobile/gutenberg/packages/block-library/src/image/edit.native.js [0] 294:57 error ["captionText"] is better written in dot notation dot-notation

Aha, apparently the rules weren't in place in the past and the other class definitions had passed. Oh well, caption-text it is then :)

I think that message is not about the dash, but it's telling you to replace styles['captionText'] with styles.captionText

hypest

This looks good to me!

I only left one comment that is not blocking; feel free to merge as is or do the renaming. Either way it's fine by me 👍

* 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

daniloercoli and others added 17 commits January 28, 2019 18:23

Use RichText component in Title block for mobile.

00ec3ca

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

45f8bde

Set font family, weight, and size via RN props for Title, Heading, an…

f332203

…d Para blocks.

Fix lint

63586f1

Adds font* props to PlainText for mobile

06d9f84

Make serif default family for RichText on mobile

5a43ea9

Set the correct font family for Image caption on mobile

3f8f97c

Set the correct font family for Nextpage block on mobile

bd629d8

Set the correct font family for Code block on mobile

624b473

set the correct font family for Image caption on mobile

63346cf

Remove extra fontFamily props.

c029cb4

Make sure PlainText takes in consideration the fontFamily passed via …

2a126ab

…props before falling back to default styles

Do not use hard coded fontFamily value, instead use CSS style.

544f096

daniloercoli added the Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) label Feb 5, 2019

daniloercoli requested a review from diegoreymendez February 5, 2019 17:01

daniloercoli requested review from ajitbohra, etoledom, gziolo, hypest, jorgefilipecosta, koke, marecar3, mzorz, pinarol, SergioEstevao and Soean as code owners February 5, 2019 17:01

daniloercoli requested review from Tug and youknowriad as code owners February 5, 2019 17:01

daniloercoli changed the title ~~Do not use hard coded fontFamily value, instead use CSS style.~~ [RNMobile] Do not use hard coded fontFamily in Image block Feb 5, 2019

Merge branch 'master' of https://github.com/WordPress/gutenberg into …

d9dba31

…rnmobile/372-fix-image-caption-font-family * 'master' of https://github.com/WordPress/gutenberg: Mention how 'core/notices' data store is accessed (#13593)

daniloercoli requested review from aduth and chrisvanpatten as code owners February 5, 2019 17:06

daniloercoli changed the base branch from rnmobile/372-use-RichText-on-Title-block to master February 5, 2019 17:13

daniloercoli mentioned this pull request Feb 5, 2019

Fix Image caption font family error on iOS wordpress-mobile/gutenberg-mobile#542

Merged

daniloercoli added 2 commits February 5, 2019 18:36

Add missing new line at end of style

db0c608

hypest reviewed Feb 6, 2019

View reviewed changes

hypest approved these changes Feb 6, 2019

View reviewed changes

daniloercoli merged commit 669d0c5 into master Feb 6, 2019

daniloercoli deleted the rnmobile/372-fix-image-caption-font-family branch February 6, 2019 10:15

youknowriad added this to the 5.1 (Gutenberg) milestone Feb 15, 2019

This was referenced Feb 18, 2019

Bump plugin version to 5.1.0-rc.1 #13908

Merged

Bump plugin version to 5.1.0 #13960

Merged

This was referenced Jul 16, 2024

[Snyk] Upgrade @wordpress/postcss-plugins-preset from 1.6.0 to 5.1.0 WontonSam/woocommerce-admin#124

Open

[Snyk] Upgrade @wordpress/base-styles from 3.6.0 to 5.1.0 WontonSam/woocommerce-admin#127

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

daniloercoli commented Feb 5, 2019 •

edited

Loading

hypest Feb 6, 2019

daniloercoli Feb 6, 2019 •

edited

Loading

hypest Feb 6, 2019

koke Feb 6, 2019

hypest left a comment

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

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

Conversation

daniloercoli commented Feb 5, 2019 • edited Loading

hypest Feb 6, 2019

Choose a reason for hiding this comment

daniloercoli Feb 6, 2019 • edited Loading

Choose a reason for hiding this comment

hypest Feb 6, 2019

Choose a reason for hiding this comment

koke Feb 6, 2019

Choose a reason for hiding this comment

hypest left a comment

Choose a reason for hiding this comment

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

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

daniloercoli commented Feb 5, 2019 •

edited

Loading

daniloercoli Feb 6, 2019 •

edited

Loading