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] File Block II #26360

Merged
merged 13 commits into from
Nov 17, 2020
Merged

[RNMobile] File Block II #26360

merged 13 commits into from
Nov 17, 2020

Conversation

etoledom
Copy link
Contributor

@etoledom etoledom commented Oct 21, 2020

Description

This PR implements most of the options for File Block:

  • Download button dimming while upload is in progress.
  • "Open in new tab" option.
  • "Show download button" option.
  • "Copy file URL" option.
  • Alignment rendering.
  • "Edit file" button (choose a different file).
  • Improved design (Font size/color)

For the copy file URL feature, I decided to close the bottom-sheet and show a notice, instead of keeping the bottom-sheet and changing the button text. @iamthomasbishop - let me know if you still prefer the later, it would be a simple change.

How has this been tested?

  • Download button dimming while upload is in progress.
    • Upload a file
    • Check that the button is dimmed out while the file is uploading.
    • Keep in mind that on the Demo app, the upload is fake (iOS).
  • "Open in new tab" option.
    • Open the block settings (cog button)
    • Switch on the "Open in new tab" option.
    • Switch to the HTML mode
    • Search for the target="_blank" rel="noreferrer noopener" attributes in the <a> tag.
  • "Show download button" option.
    • Open the block settings (cog button).
    • Switch off the "Show download button` option.
    • Check that the button has disappear.
    • Switch to the HTML mode.
    • Check there's only one <a> tag.
  • "Copy file URL" option.
    • Open the block settings (cog button).
    • Press on the Copy file URL option.
    • Check that the bottom-sheet hides out
    • Check that the notice Copied is displayed.
    • Paste the clipboard content somewhere else (another block or app).
    • Check that the full file URL is pasted (will be a local file URL for the Demo app).
  • Alignment rendering.
    • Press on the Alignment toolbar button.
    • Choose the different options.
    • Check that the UI represents the alignment accordingly.
    • Note: Alight left, Wide width and no option selected won't have visual differences.
  • "Edit file" button (choose a different file).
    • Press the Edit file button (the one with the arrows).
    • Check that you are presented with the Media Sources option.
    • Check that you are able to choose and update the block with a new file.

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

@etoledom etoledom requested a review from marecar3 October 21, 2020 14:07
@etoledom etoledom self-assigned this Oct 21, 2020
@etoledom etoledom 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 Oct 21, 2020
@github-actions
Copy link

github-actions bot commented Oct 21, 2020

Size Change: 0 B

Total Size: 1.19 MB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.77 kB 0 B
build/api-fetch/index.js 3.42 kB 0 B
build/autop/index.js 2.84 kB 0 B
build/blob/index.js 664 B 0 B
build/block-directory/index.js 8.71 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/index.js 133 kB 0 B
build/block-editor/style-rtl.css 11.3 kB 0 B
build/block-editor/style.css 11.3 kB 0 B
build/block-library/editor-rtl.css 8.91 kB 0 B
build/block-library/editor.css 8.92 kB 0 B
build/block-library/index.js 147 kB 0 B
build/block-library/style-rtl.css 8.1 kB 0 B
build/block-library/style.css 8.1 kB 0 B
build/block-library/theme-rtl.css 792 B 0 B
build/block-library/theme.css 793 B 0 B
build/block-serialization-default-parser/index.js 1.87 kB 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/blocks/index.js 48 kB 0 B
build/components/index.js 171 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/compose/index.js 9.9 kB 0 B
build/core-data/index.js 14.8 kB 0 B
build/data-controls/index.js 821 B 0 B
build/data/index.js 8.74 kB 0 B
build/date/index.js 11.2 kB 0 B
build/deprecated/index.js 768 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.92 kB 0 B
build/edit-navigation/index.js 11.1 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.51 kB 0 B
build/edit-post/style.css 6.49 kB 0 B
build/edit-site/index.js 23.3 kB 0 B
build/edit-site/style-rtl.css 3.98 kB 0 B
build/edit-site/style.css 3.98 kB 0 B
build/edit-widgets/index.js 26.3 kB 0 B
build/edit-widgets/style-rtl.css 3.16 kB 0 B
build/edit-widgets/style.css 3.16 kB 0 B
build/editor/editor-styles-rtl.css 476 B 0 B
build/editor/editor-styles.css 478 B 0 B
build/editor/index.js 42.5 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.85 kB 0 B
build/element/index.js 4.62 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 6.86 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.16 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 698 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.1 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.32 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/reusable-blocks/index.js 3.05 kB 0 B
build/rich-text/index.js 13.3 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.05 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@iamthomasbishop
Copy link

For the copy file URL feature, I decided to close the bottom-sheet and show a notice, instead of keeping the bottom-sheet and changing the button text

@etoledom I think I'd prefer the inline feedback messaging, mainly because it's direct and much more obvious (the compact notice is way on the top of the screen and pretty subtle). I figured this could be a tricky thing when I was designing it, but it would be a nice subtle touch, and hopefully one that we can re-use elsewhere 😄

@jd-alexander jd-alexander self-requested a review November 10, 2020 00:48
Copy link
Contributor

@jd-alexander jd-alexander left a comment

Choose a reason for hiding this comment

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

Thanks for these changes @etoledom I reviewed the code and all the test scenarios described and they all worked as expected. I will do another pass once you have addressed the design feedback. 👍

@etoledom etoledom force-pushed the rnmobile/file-block branch from 8bf08a3 to bfceb2c Compare November 12, 2020 19:18
Base automatically changed from rnmobile/file-block to master November 12, 2020 22:03
@etoledom etoledom force-pushed the rnmobile/file-block-II branch 2 times, most recently from a20c9ad to 1b72a5c Compare November 13, 2020 12:44
@etoledom
Copy link
Contributor Author

etoledom commented Nov 13, 2020

I have rebased and updated this branch after the merge of the first iteration PRs

Copy URL behaviour has been changed as @iamthomasbishop requested:

Copy url

Also, some minor style improvements:

  • Media Placeholder icon color.
  • Copy url action button color.

This is the real action button color, since it looks too bad in the gif:
Screenshot 2020-11-13 at 13 56 19

@iamthomasbishop
Copy link

Looks awesome, @etoledom. Thanks for taking care of that!

Copy link
Contributor

@jd-alexander jd-alexander left a comment

Choose a reason for hiding this comment

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

These changes are looking good @etoledom I reviewed the code and tested all the flows and they worked as expected. I left a few minor comments which you can address as you see fit. LGTM 🚢

Copy link
Contributor

@jd-alexander jd-alexander left a comment

Choose a reason for hiding this comment

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

Thanks for these changes @etoledom The code looks good.

@etoledom etoledom force-pushed the rnmobile/file-block-II branch from e777c4b to cbd7358 Compare November 17, 2020 07:40
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