Remove feature flag for mobile page templates #20718

koke · 2020-03-09T11:10:31Z

We are ready to launch Starter Page Templates on mobile (#18055). Since we ended up with a mobile-only implementation for now, I'm removing the feature flag

Fixes wordpress-mobile/gutenberg-mobile#1962

gutenberg-mobile PR: wordpress-mobile/gutenberg-mobile#1987
gutenberg PR: #20718
WPiOS PR: wordpress-mobile/WordPress-iOS#13595
WPAndroid PR: wordpress-mobile/WordPress-Android#11409

cc @iamthomasbishop

github-actions · 2020-03-09T11:14:15Z

Size Change: -14 B (0%)

Total Size: 856 kB

Filename	Size	Change
`build/editor/index.js`	43.8 kB	-14 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.01 kB	0 B
`build/annotations/index.js`	3.43 kB	0 B
`build/api-fetch/index.js`	3.39 kB	0 B
`build/autop/index.js`	2.58 kB	0 B
`build/blob/index.js`	620 B	0 B
`build/block-directory/index.js`	6.02 kB	0 B
`build/block-directory/style-rtl.css`	760 B	0 B
`build/block-directory/style.css`	760 B	0 B
`build/block-editor/index.js`	100 kB	0 B
`build/block-editor/style-rtl.css`	10.7 kB	0 B
`build/block-editor/style.css`	10.7 kB	0 B
`build/block-library/editor-rtl.css`	7.23 kB	0 B
`build/block-library/editor.css`	7.24 kB	0 B
`build/block-library/index.js`	111 kB	0 B
`build/block-library/style-rtl.css`	7.38 kB	0 B
`build/block-library/style.css`	7.39 kB	0 B
`build/block-library/theme-rtl.css`	669 B	0 B
`build/block-library/theme.css`	671 B	0 B
`build/block-serialization-default-parser/index.js`	1.65 kB	0 B
`build/block-serialization-spec-parser/index.js`	3.1 kB	0 B
`build/blocks/index.js`	57.7 kB	0 B
`build/components/index.js`	191 kB	0 B
`build/components/style-rtl.css`	15.5 kB	0 B
`build/components/style.css`	15.5 kB	0 B
`build/compose/index.js`	5.76 kB	0 B
`build/core-data/index.js`	10.6 kB	0 B
`build/data-controls/index.js`	1.04 kB	0 B
`build/data/index.js`	8.21 kB	0 B
`build/date/index.js`	5.37 kB	0 B
`build/deprecated/index.js`	772 B	0 B
`build/dom-ready/index.js`	568 B	0 B
`build/dom/index.js`	3.06 kB	0 B
`build/edit-post/index.js`	91.3 kB	0 B
`build/edit-post/style-rtl.css`	8.64 kB	0 B
`build/edit-post/style.css`	8.64 kB	0 B
`build/edit-site/index.js`	4.64 kB	0 B
`build/edit-site/style-rtl.css`	2.48 kB	0 B
`build/edit-site/style.css`	2.48 kB	0 B
`build/edit-widgets/index.js`	4.45 kB	0 B
`build/edit-widgets/style-rtl.css`	2.58 kB	0 B
`build/edit-widgets/style.css`	2.58 kB	0 B
`build/editor/editor-styles-rtl.css`	381 B	0 B
`build/editor/editor-styles.css`	382 B	0 B
`build/editor/style-rtl.css`	3.97 kB	0 B
`build/editor/style.css`	3.96 kB	0 B
`build/element/index.js`	4.45 kB	0 B
`build/escape-html/index.js`	733 B	0 B
`build/format-library/index.js`	7.09 kB	0 B
`build/format-library/style-rtl.css`	502 B	0 B
`build/format-library/style.css`	502 B	0 B
`build/hooks/index.js`	1.92 kB	0 B
`build/html-entities/index.js`	621 B	0 B
`build/i18n/index.js`	3.49 kB	0 B
`build/is-shallow-equal/index.js`	710 B	0 B
`build/keyboard-shortcuts/index.js`	2.3 kB	0 B
`build/keycodes/index.js`	1.68 kB	0 B
`build/list-reusable-blocks/index.js`	2.99 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	226 B	0 B
`build/list-reusable-blocks/style.css`	226 B	0 B
`build/media-utils/index.js`	4.85 kB	0 B
`build/notices/index.js`	1.57 kB	0 B
`build/nux/index.js`	3.01 kB	0 B
`build/nux/style-rtl.css`	616 B	0 B
`build/nux/style.css`	613 B	0 B
`build/plugins/index.js`	2.54 kB	0 B
`build/primitives/index.js`	1.49 kB	0 B
`build/priority-queue/index.js`	779 B	0 B
`build/redux-routine/index.js`	2.84 kB	0 B
`build/rich-text/index.js`	14.3 kB	0 B
`build/server-side-render/index.js`	2.55 kB	0 B
`build/shortcode/index.js`	1.7 kB	0 B
`build/token-list/index.js`	1.27 kB	0 B
`build/url/index.js`	4.01 kB	0 B
`build/viewport/index.js`	1.61 kB	0 B
`build/warning/index.js`	1.14 kB	0 B
`build/wordcount/index.js`	1.18 kB	0 B

_{compressed-size-action}

koke · 2020-03-09T11:55:09Z

✅ The envelope emoji is not looking right on Android:

![Screenshot_20200309-125151](https://user-images.githubusercontent.com/8739/76210818-2eef1380-6205-11ea-82f0-36be0eae6def.png)

Fixed in 3272b04

koke · 2020-03-09T12:34:06Z

On Android (Moto G5 Plus), if I focus on the paragraph, the border overlaps the template picker:

pinarol · 2020-03-09T18:32:03Z

On Android (Moto G5 Plus), if I focus on the paragraph, the border overlaps the template picker:

I thought this was already discussed when we dropped the first design which had the buttons under the paragraph block. Because this is pretty much an expected result of sticking the buttons to the keyboard. When the viewport is small things will overlap, same in the landscape mode:

BTW I think in reality it is more clear that the picker buttons are moving with the keyboard, so the overlapping didn't feel that buggy to me, also, I was able to close the keyboard to avoid overlapping

However, could we use a similar approach to "BlockInsertionPoint" to show the picker buttons? So we'd completely avoid overlapping? @koke

pinarol

LGTM! Tested with WPiOS, WPAndroid.

Apply/cancel template WPiOS
Apply/cancel template WPAndroid
Dark mode WPiOS
Checked template contents&emojis on WPiOS
Checked template contents&emojis on WPAndroid

Let's also get a 👍 from @iamthomasbishop

koke · 2020-03-09T18:41:13Z

When the viewport is small things will overlap

That makes sense, I think what I found surprising was the border above the buttons. I would expect the border to have scrolled behind the picker, or even the block to have a white background that partially covered the picker. This way it looks like something is wrong in the Z axis

pinarol · 2020-03-09T18:48:34Z

Or, it can be a result of transparency. On iOS I observe that the border is below the buttons:

On Android I am not able to get to a similar state because the screen is too small in Landscape mode, and too big in Portrait.

iamthomasbishop · 2020-03-09T22:21:49Z

@koke along with the landscape feedback @pinarol mentioned above, here is some feedback from my initial spin through the test build:

UI

Can we add ~12px of padding at the top of the page content? I believe we are applying additional padding on top of the post/page title in the editor, so this would align with that (example: https://cloudup.com/cbMvzmdHb6a)
The App Bar seems a bit too tall compared to the native one (~9 or 10px too tall). Can we shorten it up slightly to align more with the native one? I believe 56px tall should work across platforms (example: https://cloudup.com/c-hVuBGgeVv)
[iOS] Dark Mode: border-bottom on the navigation bar is a bit too strong. We can probably dim it down a bit?
[iOS] Dark Mode: I wonder if we should apply a dark gray bg on the Navigation Bar to match the native one. Thoughts @kokejb?
Can we display a Snackbar/Notice briefly after the template is applied? Something like this: https://cloudup.com/cDYvDtvc38y
Can we apply a 300ms fadeOut to the inline picker buttons when they disappear?
When title already exists, applying the template shouldn’t override the existing title

Blocks

Lack of alignment controls on Button block feels weird (example: https://cloudup.com/cIR3RJqFDNm)
Can we remove the dashed borders from Spacer blocks on the Template Preview? They feel unnecessary during preview
Should images on image blocks be full-width? (Example: https://cloudup.com/c3c0uNa5Ncx)
On Services layout: This is my fault because I prepped the contents, but the Spacer below Focus section should be 24px, not 32 (example: https://cloudup.com/c7pv9iOZjR4)

pinarol · 2020-03-10T11:29:43Z

Lack of alignment controls on Button block feels weird (example: https://cloudup.com/cIR3RJqFDNm)

I am a bit confused about this one because we had decided this way: wordpress-mobile/gutenberg-mobile#1790 (comment) This doesn’t necessarily mean we should change that plan, right? @iamthomasbishop

koke · 2020-03-10T17:32:28Z

here is some feedback from my initial spin through the test build

Thanks for the detailed feedback @iamthomasbishop. Could you specify which ones would you consider blockers? There are some of those that seem like quick fixes, but others would be more challenging and probably handled better as a second iteration on it. Particularly:

Can we display a Snackbar/Notice briefly after the template is applied?

It seems doable, but I don't recall having a similar thing anywhere in gutenberg-mobile, so we'd have to build the component, or bridge the existing native one.

Can we apply a 300ms fadeOut to the inline picker buttons when they disappear?

I haven't done any animations so far. My understanding is that this would be relatively easy, but we might be in for a surprise 😅

Lack of alignment controls on Button block feels weird

I imagine we'd just have to update the templates to use buttons when #20191 is merged

Can we remove the dashed borders from Spacer blocks on the Template Preview?

Removing them on preview only might complicate things. Could we remove them in all cases?

Should images on image blocks be full-width?

I'm seeing them full width on my iPhone. Do you get that behaviour consistently? 🤔

iamthomasbishop · 2020-03-11T19:30:20Z

Could you specify which ones would you consider blockers?

@koke Honestly, I wouldn't consider any of them "complete" blockers. And while I obviously would prefer to solve as many as possible prior to shipping, here are the few that I would like to be solved prior to shipping if were to ship today (in order of priority):

Lack of alignment controls on Button block feels weird (example: https://cloudup.com/cIR3RJqFDNm)
Should images on image blocks be full-width? (Example: https://cloudup.com/c3c0uNa5Ncx)
On Services layout: This is my fault because I prepped the contents, but the Spacer below Focus section should be 24px, not 32 (example: https://cloudup.com/c7pv9iOZjR4)
When title already exists, applying the template shouldn’t override the existing title

Your Questions

It seems doable, but I don't recall having a similar thing anywhere in gutenberg-mobile, so we'd have to build the component, or bridge the existing native one.

Ok, fair enough. I was hoping we'd be able to bridge to the existing component, but if not let's not worry about it.

I haven't done any animations so far. My understanding is that this would be relatively easy, but we might be in for a surprise 😅

Sounds good. Honestly, it's not anything critical, but it may be a nice little improvement if it doesn't require a bunch of work 😄

I imagine we'd just have to update the templates to use buttons when #20191 is merged

That's right, should have mentioned that in my previous comment (cc @pinarol, as you were asking here).

Removing them on preview only might complicate things. Could we remove them in all cases?

I think we could remove the dashed borders for the static state of the Spacer block altogether, but I don't feel super strongly about it. I was thinking the dashed border would be useful to provide a clear tap target and an indication as to what is taking up that space, rather than just have whitespace, but now it kinda feels unnecessary and repetitive in most cases. With that said, it's not specific to this feature, so maybe we can consider it separately.

I'm seeing them full width on my iPhone. Do you get that behaviour consistently? 🤔

I should have been a little more specific — I'm seeing this only on the Team template, and testing primarily on an iPhone 11 Pro. This is what I'm seeing (in the template preview and in the editor once applied). FWIW, on iPad (full-screen and split-view) the images span the full viewport width. 🤷‍♂

Other questions

Do we expect the Cover block to be merged in time for us shipping this? If so, we might also want to consider utilizing it in the templates (if we feel compelled to do so)

pinarol · 2020-03-12T11:04:46Z

Do we expect the Cover block to be merged in time for us shipping this? If so, we might also want to consider utilizing it in the templates (if we feel compelled to do so)

@iamthomasbishop We added gradient and video background support as well! 🎉 But we'll need a final design review from you for removing the DEV flag, so I am not certain about when it can be publicly available yet.

koke · 2020-03-12T13:18:48Z

I'm seeing this only on the Team template, and testing primarily on an iPhone 11 Pro. This is what I'm seeing (in the template preview and in the editor once applied).

That's what I understood, but I'm seeing something different. I tried with the iPhone 11 Pro simulator in case it was device specific, but I'm still seeing them full width. https://cloudup.com/c0j0S2N5xvs

I'm not sure what's going on but maybe there was some glitch calculating the image sizes and now it's cached? Can you try uninstalling the build and installing again and see if it's still happens.

I'm not sure what else to try, since I can't make it happen 😞

iamthomasbishop · 2020-03-12T17:29:22Z

That's what I understood, but I'm seeing something different. I tried with the iPhone 11 Pro simulator in case it was device specific, but I'm still seeing them full width. https://cloudup.com/c0j0S2N5xvs

Very interesting 🤔 I've been bouncing between various alpha builds, so I don't think re-installing will solve anything — but I'll give it a try!

koke · 2020-03-13T09:44:27Z

I'm going to go ahead with this PR and move all the items to separate issues.

On Services layout: This is my fault because I prepped the contents, but the Spacer below Focus section should be 24px, not 32

Fixed here in ab3ea1a

Can we add ~12px of padding at the top of the page content? I believe we are applying additional padding on top of the post/page title in the editor, so this would align with that (example: https://cloudup.com/cbMvzmdHb6a)

The App Bar seems a bit too tall compared to the native one (~9 or 10px too tall). Can we shorten it up slightly to align more with the native one? I believe 56px tall should work across platforms (example: https://cloudup.com/c-hVuBGgeVv)

[iOS] Dark Mode: border-bottom on the navigation bar is a bit too strong. We can probably dim it down a bit?

[iOS] Dark Mode: I wonder if we should apply a dark gray bg on the Navigation Bar to match the native one. Thoughts @kokejb?

Can we apply a 300ms fadeOut to the inline picker buttons when they disappear?

wordpress-mobile/gutenberg-mobile#2012

When title already exists, applying the template shouldn’t override the existing title

Moved to wordpress-mobile/gutenberg-mobile#2013

Can we display a Snackbar/Notice briefly after the template is applied? Something like this: https://cloudup.com/cDYvDtvc38y

I understand we're not doing this for now?

Lack of alignment controls on Button block feels weird (example: https://cloudup.com/cIR3RJqFDNm)

It should resolve once buttons block ships, although it'll require updating the templates

Can we remove the dashed borders from Spacer blocks on the Template Preview? They feel unnecessary during preview

@iamthomasbishop I'm not sure if we made a decision here

Should images on image blocks be full-width? (Example: https://cloudup.com/c3c0uNa5Ncx)

Still investigating, I can't reproduce the issue

iamthomasbishop · 2020-03-16T19:38:01Z

I understand we're not doing this for now?

(re: snackbar) That's correct.

I'm not sure if we made a decision here

(re: removing dashed borders from static Spacer blocks)

I think we can handle that separately, as an iteration on the Spacer block itself.

koke added 2 commits March 4, 2020 11:55

Enable page templates on production builds

67ffc51

Remove mobileEnablePageTemplates from docs

d08b51d

koke 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 Mar 9, 2020

koke requested review from ellatrix and youknowriad as code owners March 9, 2020 11:10

This was referenced Mar 9, 2020

Enable page templates wordpress-mobile/gutenberg-mobile#1987

Merged

Enable page templates wordpress-mobile/WordPress-iOS#13595

Closed

Enable page templates wordpress-mobile/WordPress-Android#11409

Closed

koke requested a review from pinarol March 9, 2020 11:25

Fix contact emoji

3272b04

pinarol approved these changes Mar 9, 2020

View reviewed changes

koke added 2 commits March 13, 2020 10:19

Update spacer height on services template

ab3ea1a

Remove old documentation for the feature flag

3d84fbd

koke mentioned this pull request Mar 13, 2020

[SPT] Design feedback issues wordpress-mobile/gutenberg-mobile#2012

Closed

5 tasks

koke added 2 commits March 13, 2020 10:48

Remove unused variable

cfbaa06

Merge branch 'master' into mobile-enable-page-templates

27de0f3

koke merged commit f8421c4 into master Mar 13, 2020

koke deleted the mobile-enable-page-templates branch March 13, 2020 10:32

github-actions bot added this to the Gutenberg 7.8 milestone Mar 13, 2020

geriux mentioned this pull request Mar 17, 2020

[RNMobile] - Starter Page Templates - Picker and Preview design updates #20959

Merged

6 tasks

geriux mentioned this pull request Apr 1, 2020

Page Templates: difficult to access content area in landscape mode on smaller devices wordpress-mobile/gutenberg-mobile#2088

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove feature flag for mobile page templates #20718

Remove feature flag for mobile page templates #20718

koke commented Mar 9, 2020 •

edited

Loading

github-actions bot commented Mar 9, 2020 •

edited

Loading

koke commented Mar 9, 2020 •

edited

Loading

koke commented Mar 9, 2020

pinarol commented Mar 9, 2020 •

edited

Loading

pinarol left a comment

koke commented Mar 9, 2020

pinarol commented Mar 9, 2020 •

edited

Loading

iamthomasbishop commented Mar 9, 2020

pinarol commented Mar 10, 2020

koke commented Mar 10, 2020

iamthomasbishop commented Mar 11, 2020

pinarol commented Mar 12, 2020

koke commented Mar 12, 2020

iamthomasbishop commented Mar 12, 2020

koke commented Mar 13, 2020

iamthomasbishop commented Mar 16, 2020

Remove feature flag for mobile page templates #20718

Remove feature flag for mobile page templates #20718

Conversation

koke commented Mar 9, 2020 • edited Loading

github-actions bot commented Mar 9, 2020 • edited Loading

koke commented Mar 9, 2020 • edited Loading

koke commented Mar 9, 2020

pinarol commented Mar 9, 2020 • edited Loading

pinarol left a comment

Choose a reason for hiding this comment

koke commented Mar 9, 2020

pinarol commented Mar 9, 2020 • edited Loading

iamthomasbishop commented Mar 9, 2020

UI

Blocks

pinarol commented Mar 10, 2020

koke commented Mar 10, 2020

iamthomasbishop commented Mar 11, 2020

Your Questions

Other questions

pinarol commented Mar 12, 2020

koke commented Mar 12, 2020

iamthomasbishop commented Mar 12, 2020

koke commented Mar 13, 2020

iamthomasbishop commented Mar 16, 2020

koke commented Mar 9, 2020 •

edited

Loading

github-actions bot commented Mar 9, 2020 •

edited

Loading

koke commented Mar 9, 2020 •

edited

Loading

pinarol commented Mar 9, 2020 •

edited

Loading

pinarol commented Mar 9, 2020 •

edited

Loading