Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RNMobile - Cover Block: First iteration #19722

Merged
merged 26 commits into from
Feb 26, 2020
Merged

RNMobile - Cover Block: First iteration #19722

merged 26 commits into from
Feb 26, 2020

Conversation

geriux
Copy link
Member

@geriux geriux commented Jan 17, 2020

Guntenberg Mobile PR -> wordpress-mobile/gutenberg-mobile#1781

Description

iOS Android

This is the first iteration of the Cover block including:

  • Select image from WP media library
  • Use focalPoint if set on web(no settings yet, just rendering the image accordingly)
  • Use overlay color if set on web (no settings yet, just rendering the color accordingly)
  • Add "minimum height in pixels" setting similar to Spacer height
  • Add "background opacity" setting again similar to Spacer height using slider

For the focal point implementation, I created a new component ImageWithFocalPoint which allows passing the coordinates and setting the image in the right position depending on its container size.

The default text color was an issue for InnerBlocks because we don't have a system to inherit styles from parents. Our current default color is a darker one, the default text color on Web for any block within a Cover block is white. So I did this approach but I'm not sure if its the best one, any suggestions would be appreciated. The idea is to set a default text color for the parent block in this case Cover then the RichText component will check if there are styles set by its block parent. If not it will use the color from the style prop or as last option the default color.

I added a new prop __experimentalOnlyMediaLibrary for MediaPlaceholder and MediaUpload to show only the Media Library option while we develop the rest implementation of the Cover block.

Updated the Paragraph and Heading blocks to use __experimentalUseColors and to add some missing props.

Screenshots

Different Cover Blocks Add Cover Block Placeholder
Select Media Cover Block Settings

How has this been tested?

User case 1

  • Open the app with metro running
  • Add a Cover block
  • Tap on Add Image
  • Expect: To see only the option WordPress Media library
  • Select an image.
  • Expect: Image to be visible in the block
  • Add a text
  • Tap on the settings icon of the block
  • Expect: Two options to be shown: Minimum Height in pixels and Background Opacity
  • Play with those settings and check they work correctly.

User case 2

  • Go to the Web version of the editor and create a post with a Cover block
  • Select an image for the block
  • Decrease the height of the block and use the Focal point picker in the right sidebar, select any point.
  • Change the text color of your block
  • Save the post
  • Open the app with metro running
  • Open the newly created post
  • Expect: The Cover block to be visible, with the image, focal point, and text color selected.

User case 3

  • Go to the Web version of the editor and create a post with a Cover block
  • Select a custom solid background color for the block (not gradients)
  • Add a Heading block within the Cover block
  • Save the post
  • Open the app with metro running
  • Open the newly created post
  • Expect: The Cover block to be visible, with the Heading block inside the block.

User case 4

  • Go to the Web version of the editor and create a post with a Cover block
  • Select an image for the background
  • Type a text
  • Clear the media in the Media Settings box
  • Save the post
  • Open the app with metro running
  • Open the newly created post
  • Expect: The place holder of the Cover block to be visible (since we removed the background image), respecting the styles (margins, paddings, etc)

Types of changes

New feature (non-breaking change which adds functionality)

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

@geriux geriux added the [Status] In Progress Tracking issues with work in progress label Jan 17, 2020
@geriux geriux changed the title (WIP) RNMobile - Cover Block: First iteration RNMobile - Cover Block: First iteration Jan 17, 2020
@geriux 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 Jan 17, 2020
@geriux geriux removed the [Status] In Progress Tracking issues with work in progress label Jan 24, 2020
@geriux geriux marked this pull request as ready for review January 24, 2020 12:50
@geriux geriux requested a review from koke January 28, 2020 11:32
/**
* External dependencies
*/
import React from 'react';
Copy link
Contributor

Choose a reason for hiding this comment

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

We don't import React directly. I think everything you might need from React should be available in @wordpress/element instead

Copy link
Member Author

Choose a reason for hiding this comment

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

Thanks! Updated it to use @wordpress/element instead =)

@chipsnyder
Copy link
Contributor

Hey @geriux, testing on Android worked well for me.

I did notice one thing that was inconsistent between web and mobile, but I'm not sure of the desired behavior or scope.

In mobile, I can set Minimum Height in pixels to be less than the height of the child elements. On the web, it will resize to prevent this setting. Is this in scope for this PR, or is that more for later tweaks?

Mobile (Android) Web
AndroidCoverBlock Resize_web

@geriux
Copy link
Member Author

geriux commented Jan 29, 2020

Hey @geriux, testing on Android worked well for me.

I did notice one thing that was inconsistent between web and mobile, but I'm not sure of the desired behavior or scope.

In mobile, I can set Minimum Height in pixels to be less than the height of the child elements. On the web, it will resize to prevent this setting. Is this in scope for this PR, or is that more for later tweaks?

Thanks for testing @chipsnyder! I'll have a look at that issue, we should prevent that as the web does.

@geriux
Copy link
Member Author

geriux commented Jan 29, 2020

In mobile, I can set Minimum Height in pixels to be less than the height of the child elements. On the web, it will resize to prevent this setting. Is this in scope for this PR, or is that more for later tweaks?

@chipsnyder Updated the code and now it should be working as the Web. Let me know, thanks!

Copy link
Contributor

@chipsnyder chipsnyder left a comment

Choose a reason for hiding this comment

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

Looks good @geriux!

@@ -156,7 +156,7 @@ function ResizableCover( {
);
}

function onCoverSelectMedia( setAttributes ) {
export function onCoverSelectMedia( setAttributes ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

I think this is OK, but I'm wondering if it'd be better to extract this logic to a shared utils file instead, and have a attributesFromMedia function there.

Copy link
Member Author

Choose a reason for hiding this comment

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

I think it is better to extract it, especially since the web file is kinda big already. a4dfbdd thanks for the name suggestion!

const INNER_BLOCKS_TEMPLATE = [
[ 'core/paragraph', {
align: 'center',
fontSize: 'large',
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm a bit concerned about this, since we still can't render or change font sizes from the app. This might lead to the user publishing something quite different from what they're seeing on mobile. This is specially worse if they add more than one paragraph, since the first one will be large by default and the second won't, but they would look the same inside the app.

Copy link
Member Author

Choose a reason for hiding this comment

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

Oh I didn't think about that 😱 good catch! For now, I'm removing setting the attribute as default until we support font sizes 5305373

}

if ( url ) {
return dimRatio !== 0 ? dimRatio / 100 : 0;
Copy link
Contributor

Choose a reason for hiding this comment

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

Interesting, how is this different than just doing return dimRatio / 100?

Copy link
Member Author

Choose a reason for hiding this comment

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

I seriously can't recall why I did this 😆 but yeah no need for that, updated it here e06c903 (sorry this commit has more changes due to prettier formatting)

return dimRatio !== 0 ? dimRatio / 100 : 0;
}

return url ? 0.5 : 1;
Copy link
Contributor

Choose a reason for hiding this comment

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

There's an if ( url ) with a return above this, so this would always return 1?

Copy link
Member Author

Choose a reason for hiding this comment

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

Yup no need for this, updated it e06c903#diff-b17d53802519ed746057fb2ee4a915edR111


const ImageWithFocalPoint = ( {
containerSize,
contentHeight,
Copy link
Contributor

Choose a reason for hiding this comment

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

If I remember correctly from previous experiments, you can make the image fill the container with absolute positioning without knowing the exact container dimensions in code. We would still have to listen to layout events and get the exact dimensions to calculate offset, but it might be better to keep that logic inside this component than passing dimensions from the outside.

Copy link
Member Author

Choose a reason for hiding this comment

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

Definitely better to have the logic within the component, simpler to just pass the url and focalPoint and let the component handle the rest 🙌 e71ee48

@koke
Copy link
Contributor

koke commented Jan 31, 2020

I'm running into this when trying to open the cover settings:

Simulator Screen Shot - iPhone 11 - 2020-01-31 at 12 56 47

Not sure if it's specific to these changes, since I'm also seeing it for the spacer block settings.

Gerardo Pacheco added 2 commits February 14, 2020 11:36
…/cover-block

# Conflicts:
#	packages/block-editor/src/components/media-upload/index.native.js
#	packages/components/src/index.native.js
@geriux
Copy link
Member Author

geriux commented Feb 14, 2020

Thanks for making me a test build! I had a chance to give it a proper run through it all, and have some feedback. Bear with me 😄 I broke the items down into what I would consider parts of this iteration (now), next iteration (next), and unrelated.

Thank you for the feedback!

This looks like is a bug that we have in develop, I'll look if there's an opened issue if not I'll open one, thanks for spotting that!

  • I noticed you can’t replace background image. We could allow 1) long-press on the background to show edit/replace options and 2) a replace button in the block toolbar

I added both options =)

  • If a cover created on the web doesn’t have a background (of any type), InnerBlocks aren't shown (for example, if a cover has a paragraph block within it, but no bg) and it’s shown as a placeholder state: https://cloudup.com/c_3fU1yA9Tb)

Good catch! This case was when selecting a color from the theme. Now It will show a black color until we have support for that unless you have another color in mind =)

This was related to the previous point, it is fixed now.

Unrelated

  • [Floating toolbar] Tapping on the parent block’s icon in the floating toolbar should select the parent

I'll investigate this since I tried it in the Media & Text block and it isn't working either.

  • Border, text colors can easily get lost depending on background/image. This will be addressed as part of a wider upcoming color system project

Sounds good!

@iamthomasbishop
Copy link

This looks like is a bug that we have in develop, I'll look if there's an opened issue if not I'll open one, thanks for spotting that!

Awesome! Thank you.

I added both options =)

👍

Good catch! This case was when selecting a color from the theme. Now It will show a black color until we have support for that unless you have another color in mind =)

Ahh, that’s right, I hadn’t thought about the theme-color thing affecting this. Perhaps for now we should use the same dark gray color as the placeholder BG.

I'll investigate this since I tried it in the Media & Text block and it isn't working either.

I should have been clearer in my messaging — this is something that we don’t need to worry about as it’s a separate issue. I think it’s a refinement that is either being addressed or will be in the near future 😀

Thank you, @geriux! This is really coming along nicely!

@geriux
Copy link
Member Author

geriux commented Feb 17, 2020

I also noticed the wrong placeholder icon color on dark mode:

Thanks for spotting this! Fixed by a61cbb6#diff-b17d53802519ed746057fb2ee4a915edR118

@chipsnyder
Copy link
Contributor

I did some more testing with the latest changes and had a couple of observations and questions.

User Case 3
Retesting user case three I'm not seeing the solid color overlay any more

Android Web
overlay-android overlay-web

Cover with BG Color
If a cover created on the web only has a background color and no image it appears with the placeholder background. Not sure if that's a future iteration or not though

Android Web
Screen Shot 2020-02-17 at 8 51 26 AM

Some placeholder backgrounds overflow the container
Not sure where we landed on this, so just asking here. The Blocks with content seem to have internal padding where the placeholder doesn't. The similar coloring just made me think they should be the same size. Although I'm not sure what the desired state is for this.

@geriux
Copy link
Member Author

geriux commented Feb 17, 2020

Thanks for testing this again @chipsnyder !

Cover with BG Color
If a cover created on the web only has a background color and no image it appears with the placeholder background. Not sure if that's a future iteration or not though

Did you have the latest changes? I thought I fixed this and I can't reproduce it =(. Could you check if you had the latest commits? If you have, can you tell me the steps to reproduce?

Some placeholder backgrounds overflow the container
Not sure where we landed on this, so just asking here. The Blocks with content seem to have internal padding where the placeholder doesn't. The similar coloring just made me think they should be the same size. Although I'm not sure what the desired state is for this.

This should be fixed too (same as above)

Regarding the colors, I'll check again. I thought there were some default colors that we did support but it looks like that isn't working anymore. I'll let you know =)

For theme colors though, since we don't support those we will show the placeholder background until we add that feature.

@chipsnyder
Copy link
Contributor

Hey @geriux, I was able to reproduce these, but I put my block config below and the steps. For the first one, I might just be using an unsupported color option.

When starting my metro server, I tried starting it with yarn start and yarn start:reset and got the same results.

Device: Pixel 3a API 29 (Physical Device)
Gutenberg 225e2bba9d8d809cd68d9b5c4882bd94e015ae7c
Gutenberg-Mobile db728c5e2a99a87a96fed44784831cd910c9700b
WordPress-Android 0519fcd9ace063660fd258c99b415c8986c2683b

Cover with BG Color
Block Config:

<!-- wp:cover {"overlayColor":"secondary"} -->
<div class="wp-block-cover has-secondary-background-color has-background-dim"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Blank</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

This block is using a color from the theme. I used the same color for user case 3, so it may be the same problem. Are we supporting theme colors yet?

The theme for my test site is Maywood.

Some placeholder backgrounds overflow the container

Block Config:

<!-- wp:cover -->
<div class="wp-block-cover has-background-dim"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Dogs</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

In Web:
1.) Add a Cover block
2.) Select an Image
3.) Type something in the Paragraph box
4.) Select Clear Media
5.) Save the draft (Or publish I've been using a draft page)

In Android:
1.) Load the page
See Cover block is overflowing.

@geriux
Copy link
Member Author

geriux commented Feb 18, 2020

Thanks for double checking @chipsnyder ! You had the latest changes and with your latest feedback, I was able to reproduce the issues =)

This block is using a color from the theme. I used the same color for user case 3, so it may be the same problem. Are we supporting theme colors yet?

Oh ok yeah not yet, only custom colors for this iteration (I'll update the test case)

Regarding the placeholder overflowing the margins, should be fixed with the latest commit 7a9341c 🙌

@geriux geriux requested review from koke and chipsnyder February 18, 2020 14:46
@chipsnyder
Copy link
Contributor

chipsnyder commented Feb 20, 2020

  • ✅User case 1
  • ✅User case 2
  • ✅User case 3
  • ✅Replace the background via long press
  • ✅Replace the background via the replace button
  • ✅Blocks display as expected when partially set up:
    • ✅No Image has text and a background-color
    • ✅No Image has text and no background-color
    • ✅Empty block added

I had one question on the link text in the paragraph block:

  1. Add a new Cover block
  2. Add an image
  3. Select to add a link to the paragraph block
  4. URL is filled with: redacted

If I preview the page and use that default link this is what that looks like

<!-- wp:cover {"url":"https://testeisbardev.files.wordpress.com/2020/02/img_20200218_1205361029976694387568552.jpg","id":120} -->
<div class="wp-block-cover has-background-dim" style="background-image:url(https://testeisbardev.files.wordpress.com/2020/02/img_20200218_1205361029976694387568552.jpg)"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
<p class="has-text-align-center">Nessie<a rel="noreferrer noopener" href="http://redacted" target="_blank">Hey</a></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

Editing thanks @geriux for letting me know about my mistake

@geriux
Copy link
Member Author

geriux commented Feb 20, 2020

I had one question on the link text in the paragraph block:

  1. Add a new Cover block
  2. Add an image
  3. Select to add a link to the paragraph block
  4. URL is filled with: redacted

If I preview the page and use that default link this is what that looks like

Thanks for testing! Glad to see those items are working correctly now =)

Regarding the links, there's an open issue related to it. Looks like it is not detecting links very well when it checks the clipboard.

Copy link
Contributor

@koke koke left a comment

Choose a reason for hiding this comment

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

I left a comment around some code style, but it's not that important. Overall this looks great ✨

Gerardo Pacheco added 2 commits February 24, 2020 13:07
…/cover-block

# Conflicts:
#	packages/block-editor/src/components/media-upload/index.native.js
#	packages/block-library/src/index.native.js
@geriux
Copy link
Member Author

geriux commented Feb 24, 2020

Thank you all for the feedback! 🚀

@github-actions
Copy link

github-actions bot commented Feb 24, 2020

Size Change: +368 B (0%)

Total Size: 864 kB

Filename Size Change
build/block-directory/index.js 6.02 kB -1 B
build/block-library/index.js 114 kB +369 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/style-rtl.css 760 B 0 B
build/block-directory/style.css 760 B 0 B
build/block-editor/index.js 104 kB 0 B
build/block-editor/style-rtl.css 9.78 kB 0 B
build/block-editor/style.css 9.77 kB 0 B
build/block-library/editor-rtl.css 7.67 kB 0 B
build/block-library/editor.css 7.67 kB 0 B
build/block-library/style-rtl.css 7.49 kB 0 B
build/block-library/style.css 7.49 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.6 kB 0 B
build/components/index.js 190 kB 0 B
build/components/style-rtl.css 16.1 kB 0 B
build/components/style.css 16 kB 0 B
build/compose/index.js 5.76 kB 0 B
build/core-data/index.js 10.5 kB 0 B
build/data-controls/index.js 1.04 kB 0 B
build/data/index.js 8.22 kB 0 B
build/date/index.js 5.36 kB 0 B
build/deprecated/index.js 771 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.06 kB 0 B
build/edit-post/index.js 90.7 kB 0 B
build/edit-post/style-rtl.css 8.7 kB 0 B
build/edit-post/style.css 8.69 kB 0 B
build/edit-site/index.js 4.58 kB 0 B
build/edit-site/style-rtl.css 2.77 kB 0 B
build/edit-site/style.css 2.76 kB 0 B
build/edit-widgets/index.js 4.36 kB 0 B
build/edit-widgets/style-rtl.css 2.8 kB 0 B
build/edit-widgets/style.css 2.79 kB 0 B
build/editor/editor-styles-rtl.css 327 B 0 B
build/editor/editor-styles.css 328 B 0 B
build/editor/index.js 45.1 kB 0 B
build/editor/style-rtl.css 4.13 kB 0 B
build/editor/style.css 4.11 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.6 kB 0 B
build/format-library/style-rtl.css 500 B 0 B
build/format-library/style.css 501 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.45 kB 0 B
build/is-shallow-equal/index.js 711 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 215 B 0 B
build/list-reusable-blocks/style.css 216 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.02 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 878 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.54 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 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

@@ -12,6 +12,10 @@ import Paragraph from '../edit';
* WordPress dependencies
*/
jest.mock( '@wordpress/blocks' );
jest.mock( '../../../../data/src/components/use-select', () => () => ( {
Copy link
Member Author

Choose a reason for hiding this comment

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

After some tests trying to mock this, using requireActual, etc. I wasn't able to make it work due to some exports issues.

We can't use @wordpress/data as the path due to the symlinks we have in Gutenberg Mobile

There were some tests in another mock here #19705 (comment) without any luck.

I'll keep an eye after this is merged to see how we can improve this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants