Add underline to format toolbar on the RN version. #17483

SergioEstevao · 2019-09-19T13:44:29Z

Description

This PR adds the underline command to the default format options on the RN version.

How has this been tested?

Use this PR on mobile GB to test this functionality: wordpress-mobile/gutenberg-mobile#1370

Screenshots

Types of changes

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.

ellatrix · 2019-09-19T19:04:30Z

This branch seems to include a lot more than just the underline right? I highly discourage adding an underline button. It doesn't add any semantic meaning, it's just styling. In addition, underlines are usually used for links, so it might confuse readers of the web page. We removed the underline button from WordPress a long time ago, and we've never added it it Gutenberg either.

SergioEstevao · 2019-09-19T20:54:52Z

@ellatrix it looks I targeted the wrong branch. On mobile we are using an older version of master. I've now updated the PR to correct branch.

Regarding the underline I still see it on WP.com atomic sites. It's not on the top level of the toolbar but you can find it in the drop down options.

SergioEstevao · 2019-09-19T20:55:45Z

For reference here is the issue I was solving on GB-mobile

* [RNMobile] Fix crash when adding separator * Build: remove global install of latest npm since we want to use the paired node/npm version (#17134) * Build: remove global install of latest npm since we want to use the paired node/npm version * Also update travis to remove --latest-npm flag * [RNMobile] Try dark mode (iOS) (#17067) * Adding dark mode component implemented on list and list block * Adding DarkMode handling to RichText, ToolBar and SafeArea * Mobile: Using DarkMode as HOC * iOS DarkMode: Modified colors on block list and block container * iOS DarkMode: Improved Header Toolbar colors * iOS DarkMode: Removing background from buttons * iOS DarkMode warning and unsupported * iOS DarkMode: MediaPlaceholder * iOS DarkMode: BottomSheets * iOS DarkMode: Inserter * iOS DarkMode: DefaultBlockAppender * iOS DarkMode: PostTite * Update hardcoded colors with variables * iOS DarkMode: Fix bottom-sheet cell value color * iOS DarkMode: More - PageBreak - Add Block Here * iOS DarkMode: Better text color * iOS Darkmode: Code block * iOS DarkMode: HTML View * iOS DarkMode: Improve colors on SafeArea * Fix toolbar not avoiding keyboard regression * Fix native unit tests * Fix gutenberg-mobile unit tests * Adding RNDarkMode mocks * RNMobile: Fix crash when viewing HTML on iOS * [RNMobile] Remove toolbar from html view * [RNMobile] Fix MaxListenersExceededWarning caused by dark-mode event emitter (#17186) * Fix MaxListenersExceededWarning caused by dark-mode event emitter * Checking for setMaxListeners trying to avoid CI error * Adding remove listener to DarkMode HOC * DarkMode: Binding this.onModeChanged to `this` * DarkMode: Adding conditional needed to pass UI Tests on CI * Fix focus title on new posts regression (#17180) * BottomSheet: Setting DashIcon color directly when theme is default (light) (#17193) * Add a preliminary version of the AutosaveMonitor for mobile that calls the "bridge" and asks the native side to save the content * Add autosave mock function for tests * Fix merge conflicts * Fix lint * Re-add autosave on mobile that was removed erroneously during import-merge from rnmobile/master * Remove native variant of AutosaveMonitor and introduces changes at editor store level * Default to false for `isEditedPostAutosaveable` on mobile. There was a typo in the returing value on the previous commit. * Make sure to consider edits to the Title when checking if auto-save is needed * Fix lint

…e is selected. This does map the format library value `core/underline` ---> `undeline` and pass it to native.

iamthomasbishop · 2019-09-25T15:11:17Z

@ellatrix I feel like I remember seeing a lengthy conversation around underline and whether it should be added at all on the web side. It does appear that it is in the toolbar, tucked in a dropdown menu.

I was under the impression that it wasn't there until recently, so I imagine the aforementioned discussion led us to add it there. With that said, I think we should add it for parity (even though I agree with most of your rationale behind not having it on the toolbar).

@SergioEstevao Can we add it to the end of the tool list?

ellatrix · 2019-09-25T15:14:47Z

Neither Gutenberg nor WP has an underline button. Only a keyboard shortcut.

…

On Wed, 25 Sep 2019 at 18:11, Thomas Bishop ***@***.***> wrote: @ellatrix <https://github.com/ellatrix> I feel like I remember seeing a lengthy conversation around underline and whether it should be added at all on the web side. It does appear that it is in the toolbar, tucked in a dropdown menu. I was under the impression that it wasn't there until recently, so I imagine the aforementioned discussion led us to add it there. With that said, I think we should add it for parity (even though I agree with most of your rationale behind *not* having it on the toolbar). @SergioEstevao <https://github.com/SergioEstevao> Can we add it to the *end* of the tool list? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#17483?email_source=notifications&email_token=ABD6B22HTB4HY7SDCX4542LQLN5SJA5CNFSM4IYLK4H2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD7SIJWA#issuecomment-535069912>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABD6B25TLS7O5DAMF5KKQUDQLN5SJANCNFSM4IYLK4HQ> .

iamthomasbishop · 2019-09-25T15:32:41Z

Ahh, ok, then this must just a WordPress.com thing. If we only supported self-hosted sites I would say remove it altogether, but since we support both self-hosted and atomic (and AFAIK, we can't toggle visibility based on type of site) I would defer to Aztec in this case (display <u> button).

etoledom · 2019-09-25T15:59:20Z

I see the underline option on https://frontenberg.tomjn.com
Is this related to WP.com somehow? 🤔
Or maybe is an older version?

gziolo · 2019-09-26T13:57:54Z

I think @ellatrix is the best person to review this PR given that it might enable the button in the web interface as well.

SergioEstevao · 2019-09-26T14:45:29Z

@gziolo I think the underline is only added to .native side. Check this line: https://github.com/WordPress/gutenberg/pull/17483/files#diff-aa7b78d30bc35a328807700f2850e216R10

I'm only changing this on the .native file not in the web file.

gziolo · 2019-09-26T14:50:02Z

@gziolo I think the underline is only added to .native side. Check this line: https://github.com/WordPress/gutenberg/pull/17483/files#diff-aa7b78d30bc35a328807700f2850e216R10

I'm only changing this on the .native file not in the web file.

See:
https://github.com/WordPress/gutenberg/pull/17483/files#diff-fd7c69d78753f357f1d7f7a6caf19319R37-R45

underline was exposed as a keyboard shortcut for web, now it will probably have a button, too.

SergioEstevao · 2019-09-26T14:53:51Z

@gziolo if that is the case should I create a .native version of the underline file?

ellatrix

I don't know if it's needed somehow for the mobile version, but we shouldn't add an underline button to the web version. I see this is currently the case as the format type is shared.

ellatrix · 2019-09-26T15:06:17Z

Are you adding it based on this comment? wordpress-mobile/gutenberg-mobile#562 (comment)

Gutenberg on the web still seems to have it nowadays so, re-opening this ticket.

Gutenberg web doesn't have it...

gziolo · 2019-09-26T15:28:09Z

packages/format-library/src/underline/index.js

@@ -33,6 +34,15 @@ export const underline = {
 					character="u"
 					onUse={ onToggle }
 				/>
+				<RichTextToolbarButton


We might want to explore whether we could use some sort of platform guard which would conditionally include this component only for mobile apps. Similar to what they do in react-native-web:
https://github.com/necolas/react-native-web/blob/0e81c6ef2758d4ca9b2099b1d04a4f8c417f0f43/packages/react-native-web/src/exports/Platform/index.js

RN docs: https://facebook.github.io/react-native/docs/platform-specific-code#platform-module

I think @koke shared this idea some time ago. It would be a great opportunity to test it in action. I know that you use the native version directly from react-native library. We could expose it from @wordpress/element.

cc @youknowriad, @hypest and @Tug

SergioEstevao · 2019-09-26T15:29:30Z

@ellatrix we still see it on WP.com and while I know this repo is WP.org specific the mobile app needs to support both WP.com and WP.org sites.

Even on WP.org if we have the possibility of adding underlines by shortcuts in the app we will need a way to enable/remove it too, because there is no shortcuts support there.

If the current state of the PR changes the web interface too, I can change it to only activate on the mobile app.

koke · 2019-09-26T15:48:37Z

It must be a plugin or .com... Gutenberg and WP core also don’t have the justify button displayed there.

It seems Jetpack is doing it: https://github.com/Automattic/jetpack/blob/master/modules/wpcom-block-editor/class-jetpack-wpcom-block-editor.php#L295

koke · 2019-09-26T15:56:47Z

I think this is something we need to figure out eventually in the mobile apps. There will be some things specific to WordPress.com/Jetpack that we want to tweak, but can't have in the core repo.

I think in this case we should be able to do the same thing that Jetpack/Calypso do for this and register a custom format type. It's just a matter of figuring out where to put that code.

https://github.com/Automattic/wp-calypso/blob/6a048b10d8d776a011e57fe52bc755239be42cd9/apps/wpcom-block-editor/src/common/rich-text.js#L77

As long as we still have the gutenberg-mobile repo, we can keep those "plugins" there, but we'll need a better solution when we move to a monorepo.

koke · 2019-09-26T15:59:04Z

I keep hitting reply too fast 😅

...the mobile app needs to support both WP.com and WP.org sites.

That is right, but it also works the other way around. If that is the reasoning for adding underline on mobile, we should also ensure that we're not showing the button on self hosted sites without Jetpack, or they will have the same problem when they try to edit their mobile posts on the web.

SergioEstevao · 2019-09-27T09:13:44Z

@gziolo I followed your suggestion and implemented the Platform component to allows us to detect if we are on web or native. Can you give it a look now?

@ellatrix with this in place will the PR now be ok?

koke · 2019-09-27T09:36:01Z

@SergioEstevao I can't comment in packages/element/src/platform.native.js directly because it's empty, but shouldn't it expose RN's Platform?

/**
 * External dependencies
 */
import { Platform } from 'react-native';

export default Platform;

SergioEstevao · 2019-09-27T09:38:51Z

@koke I updated the PR, it looks my git tool "forgot" to see that change :)

karmatosed · 2019-09-27T14:04:43Z

Hey there, coming to this a little cold but would love some context, excuse the questions as I do. I do feel that just putting something in for a mobile experience isn't going to be something preferred. If this is styling to be included in the actual web then we'll want to add in a design feedback label and get everyone commenting. What do you think @iamthomasbishop? For me, in this case it would be something to leave out. Now, I would love to know more specifically:

How is this useful to every use of Gutenberg?
How would this be useful or could it be on web?
What was thinking about it being included? I might be missing some context of why needed so love to have a clear perspective.

SergioEstevao · 2019-09-27T14:43:19Z

@karmatosed to be clear we don't want to add it to the web interface, the last code changes make sure it's only in the mobile.

The initial idea of adding this to mobile was to have feature parity with Aztec, our current editor in mobile.

iamthomasbishop · 2019-09-27T14:56:29Z

@karmatosed Happy to give some more context, and hope to answer your questions 😄

To be clear, I don't think the intention was ever to add this to web – only native mobile. With that said, there's been a lot of discussion around this topic and there are a lot of layers to it, so it's a bit hard to explain succinctly. At the core of the challenge (no pun intended) is the fact that the editor(s) in the WordPress mobile apps are at the intersection of core, WordPress.com, and our current default editor Aztec (which includes an underline option). One of our initial goals with Mobile Gutenberg has been Aztec parity (Aztec includes underline, because it was based on the "classic" editors), so that was the idea behind this addition.

We had intended to only include this for native mobile (to achieve Aztec parity), but in the end I think we (and @SergioEstevao @maxme @koke @hypest can maybe confirm/deny because I also missed some of the conversation) decided to not include a toolbar button for the time being, for a couple reasons: usage data is pretty low, and the semantic rationale which we understand to be valid.

Like core, there are alternative ways to achieve this (on core/web that's a keyboard shortcut on core/web, and a selection menu shortcut on native), so that's also being taken into account.

maxme · 2019-09-27T15:33:33Z

Thanks everyone for your comment there. Some of my thoughts:

Like @iamthomasbishop commented, we're trying to achieve Aztec parity in the mobile version of Gutenberg, so when users switch from Aztec to Gutenberg, they won't be disappointed because one of their preferred feature is missing. Aztec has this underline button.
We checked underline usage in Aztec, and it's pretty low.
I agree with @ellatrix, we should not encourage people to use underline.

Conclusion for this PR: we're going to close it and we won't have the underline feature in mobile gutenberg for now. There is also a non-technical solution to avoid disappointing our users: explain them why we made such changes, via an in-app help, FAQ or support.

In the future, we want to create a way to package the mobile version integrating non community-features on top of the community project (this repo). We're not sure how we'll do this. It would let us add this specific Jetpack or WPCom features without making changes to this repo. Underline could be a the first of these features.

SergioEstevao · 2019-09-27T16:20:48Z

@maxme I was thinking to just remove the button from the toolbar but keep the rest of the code on this PR, the new Platform component can be helpful for other PRs.

maxme · 2019-09-30T07:16:16Z

@SergioEstevao if it's not too complicated, can you cherry pick commits related to the Platform component, open a new PR and close this one?

gziolo · 2019-09-30T11:02:58Z

packages/element/src/platform.js

@@ -0,0 +1,9 @@
+const Platform = {


gziolo · 2019-09-30T11:04:52Z

@SergioEstevao if it's not too complicated, can you cherry pick commits related to the Platform component, open a new PR and close this one?

Yes, please. It would help to minimize the number of full file overrides which will make maintenance a bit easier.

Add underline button to mobile version.

1ed9583

SergioEstevao added the Mobile Web Viewport sizes for mobile and tablet devices label Sep 19, 2019

SergioEstevao added this to the Gutenberg 6.6 milestone Sep 19, 2019

SergioEstevao requested review from gziolo and hypest September 19, 2019 13:44

SergioEstevao requested review from ajitbohra, chrisvanpatten, daniloercoli, ellatrix, etoledom, jorgefilipecosta, Soean, talldan and youknowriad as code owners September 19, 2019 13:44

SergioEstevao self-assigned this Sep 19, 2019

SergioEstevao changed the base branch from master to rnmobile/master-fork-before-richtext-selection-state-change September 19, 2019 20:53

SergioEstevao changed the base branch from rnmobile/master-fork-before-richtext-selection-state-change to rnmobile/master September 19, 2019 20:53

SergioEstevao mentioned this pull request Sep 19, 2019

Issue/562 add underline wordpress-mobile/gutenberg-mobile#1370

Merged

1 task

SergioEstevao changed the base branch from rnmobile/master to master September 20, 2019 10:20

SergioEstevao changed the base branch from master to rnmobile/master September 20, 2019 10:20

SergioEstevao and others added 2 commits September 20, 2019 11:21

Merge branch 'rnmobile/master' into rnmobile/add_mobile_underline

37c392c

Make sure to pass the correct format to the native side when underlin…

6fc910a

…e is selected. This does map the format library value `core/underline` ---> `undeline` and pass it to native.

ellatrix requested changes Sep 26, 2019

View reviewed changes

gziolo reviewed Sep 26, 2019

View reviewed changes

SergioEstevao added 2 commits September 27, 2019 10:07

Add platform switch for underline button.

ff67e12

Add documentation.

70acedf

Add documentation.

703e2cf

Add platform code.

e48384c

SergioEstevao closed this Sep 30, 2019

SergioEstevao deleted the rnmobile/add_mobile_underline branch September 30, 2019 10:02

gziolo reviewed Sep 30, 2019

View reviewed changes

packages/element/src/platform.js

@@ -0,0 +1,9 @@

const Platform = {

Copy link

Member

gziolo Sep 30, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice 💯

hypest mentioned this pull request Oct 4, 2019

Add underline option for text-based blocks wordpress-mobile/gutenberg-mobile#562

Closed

gziolo removed the Mobile Web Viewport sizes for mobile and tablet devices label Oct 10, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add underline to format toolbar on the RN version. #17483

Add underline to format toolbar on the RN version. #17483

SergioEstevao commented Sep 19, 2019 •

edited

Loading

ellatrix commented Sep 19, 2019

SergioEstevao commented Sep 19, 2019

SergioEstevao commented Sep 19, 2019

iamthomasbishop commented Sep 25, 2019

ellatrix commented Sep 25, 2019 via email

iamthomasbishop commented Sep 25, 2019

etoledom commented Sep 25, 2019

gziolo commented Sep 26, 2019

SergioEstevao commented Sep 26, 2019

gziolo commented Sep 26, 2019

SergioEstevao commented Sep 26, 2019

ellatrix left a comment

ellatrix commented Sep 26, 2019

gziolo Sep 26, 2019 •

edited

Loading

SergioEstevao commented Sep 26, 2019

koke commented Sep 26, 2019

koke commented Sep 26, 2019

koke commented Sep 26, 2019

SergioEstevao commented Sep 27, 2019

koke commented Sep 27, 2019

SergioEstevao commented Sep 27, 2019 •

edited

Loading

karmatosed commented Sep 27, 2019

SergioEstevao commented Sep 27, 2019

iamthomasbishop commented Sep 27, 2019 •

edited

Loading

maxme commented Sep 27, 2019

SergioEstevao commented Sep 27, 2019

maxme commented Sep 30, 2019

gziolo Sep 30, 2019

gziolo commented Sep 30, 2019

Add underline to format toolbar on the RN version. #17483

Add underline to format toolbar on the RN version. #17483

Conversation

SergioEstevao commented Sep 19, 2019 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

ellatrix commented Sep 19, 2019

SergioEstevao commented Sep 19, 2019

SergioEstevao commented Sep 19, 2019

iamthomasbishop commented Sep 25, 2019

ellatrix commented Sep 25, 2019 via email

iamthomasbishop commented Sep 25, 2019

etoledom commented Sep 25, 2019

gziolo commented Sep 26, 2019

SergioEstevao commented Sep 26, 2019

gziolo commented Sep 26, 2019

SergioEstevao commented Sep 26, 2019

ellatrix left a comment

Choose a reason for hiding this comment

ellatrix commented Sep 26, 2019

gziolo Sep 26, 2019 • edited Loading

Choose a reason for hiding this comment

SergioEstevao commented Sep 26, 2019

koke commented Sep 26, 2019

koke commented Sep 26, 2019

koke commented Sep 26, 2019

SergioEstevao commented Sep 27, 2019

koke commented Sep 27, 2019

SergioEstevao commented Sep 27, 2019 • edited Loading

karmatosed commented Sep 27, 2019

SergioEstevao commented Sep 27, 2019

iamthomasbishop commented Sep 27, 2019 • edited Loading

maxme commented Sep 27, 2019

SergioEstevao commented Sep 27, 2019

maxme commented Sep 30, 2019

gziolo Sep 30, 2019

Choose a reason for hiding this comment

gziolo commented Sep 30, 2019

SergioEstevao commented Sep 19, 2019 •

edited

Loading

gziolo Sep 26, 2019 •

edited

Loading

SergioEstevao commented Sep 27, 2019 •

edited

Loading

iamthomasbishop commented Sep 27, 2019 •

edited

Loading