Ensure that OS-level font-size settings are honored in editor

[iamthomasbishop]

While inspecting tablet layout refinements here, I noticed that changes to font-size on the OS level aren't honored in the editor – both on iOS and Android.

Steps to reproduce

1. Type a bunch of text in a Paragraph Block, preferably something in multiple lines.
2. Go to OS-level font-size settings, adjust to very large size.
3. Go back to Block Editor.
4. Notice that font-size is still 16.

[hotchemi]

@iamthomasbishop Right now I'm investigating the issue and let me confirm that this is the issue only for iOS or both iOS/Android🙇I built WP-iOS/Android app with the latest commit hash on develop branch and what I saw is the following.

iOS

• head commit

After changing system level font size I could reproduce the issue.

Android

• head commit

After changing system level font size I could not reproduce the issue.

So right now I'm wondering this is the only issue for iOS..am I missing something?🙇Thank you!

[hypest]

👋 @hotchemi , judging from the gif you shared, I think that the editor there is Aztec, not Gutenberg. Have you perhaps tried Gutenberg too and the font sizing issue doesn't happen?

[hotchemi]

@hypest Thank you for pointing out🙇I tried again on Android and found gutenberg-mobile and wp-android behave slightly differently.

gutenberg-mobile

On example app it seems works.

wp-android

I could repricate the issue.

[etoledom]

Hey @hotchemi - thank you for checking this out!

I have noticed issues on both platforms, including that red screen on android 🤔
Also added this issue to the main Accessibility ticket to keep track of it:

#476

[hotchemi]

@etoledom Thank you for clarification! After investigation turned out situation is a bit involved..😅

including that red screen on android

This is another issue and after dismissing the red screen seems fontSize is changed properly on gutenberg-mobile example app.
But, the issue can be reproducible on wordpress-android and the cause is on native side I guess. #795 will resolve that part hopefully😃

[daniloercoli]

Android side PR: wordpress-mobile/WordPress-Android#9509

[SergioEstevao]

So I tested this on WP-iOS and found the following:

• Some components of the editor adapt automatically when the setting is changed: The block picker, the media blocks placeholders. It looks that all components that are based on the standard RN (Text, Image)components work correctly
• Blocks that are based in Aztec RichText do not adapt automatically
• Paragraph, Heading, List, Code blocks adapt to the size if you exit the editor and open it again, or if you add them after the change of size is done
• Quote, PullQuote, Verse, Pre blocks never adapt
• The toolbars (block, editor) never adapt size.

Here are some screenshots:

[etoledom]

Ouch, that doesn't look good 😬

Blocks that are based in Aztec RichText do not adapt automatically

This is probably because Attributed text? 🤔

Quote, PullQuote, Verse, Pre blocks never adapt

It's interesting that these blocks are also x-platform blocks. Do we have a default static font size for Aztec?

[SiobhyB]

Following WordPress/gutenberg#57339, initial support for Dynamic Type will be introduced in 24.0 on iOS, due to be rolled out to users on January 22nd. I can verify that support for OS-level font-size changes is already there for Android.

I've also created a task list at WordPress/gutenberg#57354 to follow up on enhancements, including enforcing a max/min size, refactoring RichText to automatically update, and reviewing other areas of the editor. I'll close this specific issue as we now have initial support and will track iterations elsewhere. 🙇‍♀️