[RNMobile] Page Template Picker UI Improvements #19307

geriux · 2019-12-23T15:23:44Z

Gutenberg-mobile PR -> wordpress-mobile/gutenberg-mobile#1720

Description

This PR updates the current styles for the Page Template picker. It also includes some code changes to support more items in the list and accessibility.

To test

Open WP iOS / WP Android
Go to Site Pages
Add a new page
- For iOS Tap on the Add button in the header (top right)
Expect the page template picker to be shown with the styles from the screenshots
Tap on either predefined layout
Expect the content of the page to change and the picker to disappear

iOS	Android

Screenshots

iOS

Default	Dark mode

iPad Default	iPad Dark mode

Android

Types of changes

UI Styling
Accessibility

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.
I've updated all React Native files affected by any refactorings/renamings in this PR.

…bility text

geriux · 2019-12-23T15:28:20Z

packages/block-editor/src/components/page-template-picker/button.native.js

+	const butonTextStyles = getStylesFromColorScheme( styles.buttonText, styles.buttonTextDark );
+	const accessibilityLabel = sprintf(
+		/* translators: accessibility text. Inform about list of predefined layout options. %1$s: Layout name, e.g About. */
+		__( 'Predefined layout picker. %1$s' ),


After reading this https://make.wordpress.org/design/2019/11/14/blocks-patterns-and-layouts/ I used Layout instead of Page template.

Nice, I wonder if we should start renaming things more broadly (file and component names)

This seems like too much text before the actual button label. I'm not sure I would specify an accessibilityLabel here. Instead, we can add an accessibilityHint="Double tap to select layout".

Ideally we should find a way to convey that this is a list of possible layouts rather than individual buttons, but I don't see any support for accessibility containers in React Native yet. Since we only have a couple buttons now, it's not a big deal, but something to keep in mind for the future.

Good idea! I'll use accessibilityHint instead. I hope they add support for that, it'd be super great.

Updated 4c1c326

koke · 2019-12-26T10:40:01Z

@iamthomasbishop are we going with Twemoji for the icons or should we use the native emoji on each platform?

If we are, we should probably add twemoji as a proper dependency and try to get the SVG from there, or at least ensure we do proper attribution.

koke · 2019-12-26T11:19:09Z

packages/edit-post/src/components/layout/index.native.js

@@ -129,10 +129,10 @@ class Layout extends Component {
 						parentHeight={ this.state.rootViewHeight }
 						style={ toolbarKeyboardAvoidingViewStyle }
 					>
+						{ showPageTemplatePicker && <__experimentalPageTemplatePicker /> }


In #19106 I was also moving the picker to the bottom, although I guess it makes more sense to do it as part of this PR.

koke

This is looking pretty nice 👌 From my side, it's good to go after the accessibility changes. I can't request a review from @iamthomasbishop directly, but I'd wait for him to check that the changes look right

geriux · 2019-12-31T08:02:00Z

This is looking pretty nice 👌 From my side, it's good to go after the accessibility changes. I can't request a review from @iamthomasbishop directly, but I'd wait for him to check that the changes look right

Thanks!! Yup, I'll wait to check with @iamthomasbishop about your comment above about the icons and that the changes look ok. 👍

iamthomasbishop · 2020-01-02T21:46:11Z

Hey @geriux – looking good! I just have a few notes:

I was going to say the chip/button background seemed a bit too dark, then I realized I accidentally bumped the background colors to a stronger shade of gray 🤦‍♂ I've updated the components in the design docs. (black @ 4% in light mode, white @ 8% in dark mode)
Ideally, we can just use the native emoji if possible // cc @koke
What happens to the chips/buttons if I hide the keyboard? Do they stay fixed in the middle of the screen, or move down with the keyboard/toolbar?

…ed icons

geriux · 2020-01-03T09:13:37Z

Hey @geriux – looking good! I just have a few notes:

Thanks for reviewing it @iamthomasbishop!

I was going to say the chip/button background seemed a bit too dark, then I realized I accidentally bumped the background colors to a stronger shade of gray 🤦‍♂ I've updated the components in the design docs. (black @ 4% in light mode, white @ 8% in dark mode)

Haha :D no problem, I've just updated the code and the screenshots above, let me know if they look ok now.

Ideally, we can just use the native emoji if possible // cc @koke

Changed for the native emoji

What happens to the chips/buttons if I hide the keyboard? Do they stay fixed in the middle of the screen, or move down with the keyboard/toolbar?

Right now they move down, let me know if this is ok or if they should stay fixed:

iamthomasbishop · 2020-01-03T13:42:08Z

@geriux awesome! Colors, emoji, and positioning are all looking great!

RNMobile - Page template picker: styles and icons, scroll and accessi…

0121009

…bility text

geriux mentioned this pull request Dec 23, 2019

Page Templates Picker UI Improvements wordpress-mobile/gutenberg-mobile#1720

Merged

2 tasks

geriux 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 Dec 23, 2019

geriux commented Dec 23, 2019

View reviewed changes

geriux requested a review from koke December 23, 2019 15:28

geriux added the [Status] In Progress Tracking issues with work in progress label Dec 23, 2019

Update Page templates picker for web

2953782

geriux removed the [Status] In Progress Tracking issues with work in progress label Dec 23, 2019

geriux marked this pull request as ready for review December 23, 2019 16:42

geriux requested review from ellatrix, talldan and youknowriad as code owners December 23, 2019 16:42

koke reviewed Dec 26, 2019

View reviewed changes

koke approved these changes Dec 26, 2019

View reviewed changes

koke mentioned this pull request Dec 27, 2019

Page template previews #19106

Merged

6 tasks

RNMobile - Layout template picker: accessibility hint added

4c1c326

RNMobile - Layout template picker: style improvements, removed unneed…

0b57b72

…ed icons

Page layout picker: remove Icon dependency

2b97f19

geriux merged commit 73994a8 into master Jan 7, 2020

geriux deleted the rnmobile/page-template-picker-styles branch January 7, 2020 13:58

ellatrix added this to the Gutenberg 7.3 milestone Jan 20, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[RNMobile] Page Template Picker UI Improvements #19307

[RNMobile] Page Template Picker UI Improvements #19307

geriux commented Dec 23, 2019 •

edited

Loading

geriux Dec 23, 2019

koke Dec 26, 2019

koke Dec 26, 2019

geriux Dec 31, 2019

geriux Dec 31, 2019

koke commented Dec 26, 2019

koke Dec 26, 2019

koke left a comment

geriux commented Dec 31, 2019

iamthomasbishop commented Jan 2, 2020

geriux commented Jan 3, 2020 •

edited

Loading

iamthomasbishop commented Jan 3, 2020

[RNMobile] Page Template Picker UI Improvements #19307

[RNMobile] Page Template Picker UI Improvements #19307

Conversation

geriux commented Dec 23, 2019 • edited Loading

Description

To test

Screenshots

iOS

Android

Types of changes

Checklist:

geriux Dec 23, 2019

Choose a reason for hiding this comment

koke Dec 26, 2019

Choose a reason for hiding this comment

koke Dec 26, 2019

Choose a reason for hiding this comment

geriux Dec 31, 2019

Choose a reason for hiding this comment

geriux Dec 31, 2019

Choose a reason for hiding this comment

koke commented Dec 26, 2019

koke Dec 26, 2019

Choose a reason for hiding this comment

koke left a comment

Choose a reason for hiding this comment

geriux commented Dec 31, 2019

iamthomasbishop commented Jan 2, 2020

geriux commented Jan 3, 2020 • edited Loading

iamthomasbishop commented Jan 3, 2020

geriux commented Dec 23, 2019 •

edited

Loading

geriux commented Jan 3, 2020 •

edited

Loading