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.

Sign up for GitHub

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

Jump to bottom

[Mobile] - Media & Text: Allow media to be selected and render focal point #22788

Merged
merged 28 commits into from
Jul 8, 2020
Merged

[Mobile] - Media & Text: Allow media to be selected and render focal point #22788

merged 28 commits into from
Jul 8, 2020

Conversation

geriux
Copy link
Member

@geriux geriux commented Jun 1, 2020 •
edited
Loading

Gutenberg Mobile PR -> wordpress-mobile/gutenberg-mobile#2426
WordPress iOS PR -> wordpress-mobile/WordPress-iOS#14231
WordPress Android PR -> wordpress-mobile/WordPress-Android#12072

Description

This PR addresses two issues, allowing the media within the Media & Text block to be selected and rendering the focal point including the option to toggle the Crop image to fill option.

To avoid duplicating code I added a new Image component that will handle:

  • Handling image sizing: It'll get the image size and render accordingly using the aspect ratio prop.
  • Rendering the placeholders in different states, like uploading or when uploading has failed.
  • Rendering the image selected mode, displaying the border around the image.
  • Rendering the Media Edit button to edit/replace the image.
  • Tapping on the image logic: Stopping the upload, retrying the upload, or triggering the full-screen mode.
  • Rendering an image with focal point data.

It contains quite a bit code from the Image block so it can be reused for the Media & Text block. Later on, it could also be used by the Cover block as well.

By creating this new Image component that handles sizing and much more, I removed the image-size component and removed it from the MediaUploadProgress component.

How has this been tested?

Steps to test the Media & Text block

Allow selecting the image

  • Add a Media & Text block
  • Upload an image
  • Tap on the image once it has uploaded
  • Expect the image to be selected and the media options button to show up on the top right

Image fullscreen preview

  • Add a Media & Text block
  • Upload an image
  • Tap on the image once it has uploaded
  • Expect the image to be selected
  • Tap on the image again
  • Expect the fullscreen preview modal to show up
  • Tap on the black bars
  • Expect the modal to close

Media editing

  • Add a Media & Text block
  • Upload an image
  • Tap on the image once it has uploaded
  • Expect the image to be selected and the media options button to show up on the top right
  • Tap on the media options button (top right)
  • Expect the bottom sheet to show up
  • Tap on edit
  • Expect the media editor to show up
  • Crop the image and tap done
  • Expect the new cropped image to be uploaded correctly

Focal point

  • On the web editor create a new post
  • Add a Media & Text block
  • Upload an image with an aspect ratio like this one
  • In the block's setting enable Crop image to fill entire column
  • Set a focal point
  • Save the post
  • Open the post from the app
  • Expect to see the block's image cropped with the correct focal point

Crop image to fill entire column setting

  • Add a Media & Text block
  • Upload an image with an aspect ratio like this one
  • Tap on the settings icon
  • Enable Crop image to fill entire column
  • Expect to see the image cropped
Steps to test the Image block

These tests are to double check all is working as it was for the Image block.

Allow selecting the image

  • Add an Image block
  • Upload an image
  • Expect the image to be selected and the media options button to show up on the top right

Image fullscreen preview

  • Add an Image block
  • Upload an image
  • Expect the image to be selected
  • Tap on the image
  • Expect the fullscreen preview modal to show up
  • Tap on the black bars
  • Expect the modal to close

Media editing

  • Add an Image block.
  • Upload an image
  • Expect the image to be selected and the media options button to show up on the top right
  • Tap on the media options button (top right)
  • Expect the bottom sheet to show up
  • Tap on edit
  • Expect the media editor to show up
  • Crop the image and tap done
  • Expect the new cropped image to be uploaded correctly

Screenshots

UX Interaction
Media & Text Image

Types of changes

New feature and code refactor.

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 [Status] In Progress Tracking issues with work in progress Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) labels Jun 1, 2020
@github-actions
Copy link

github-actions bot commented Jun 1, 2020 •
edited
Loading

Size Change: 0 B

Total Size: 1.14 MB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.39 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.67 kB 0 B
build/block-directory/style-rtl.css 944 B 0 B
build/block-directory/style.css 945 B 0 B
build/block-editor/index.js 115 kB 0 B
build/block-editor/style-rtl.css 10.8 kB 0 B
build/block-editor/style.css 10.8 kB 0 B
build/block-library/editor-rtl.css 7.54 kB 0 B
build/block-library/editor.css 7.54 kB 0 B
build/block-library/index.js 130 kB 0 B
build/block-library/style-rtl.css 7.75 kB 0 B
build/block-library/style.css 7.76 kB 0 B
build/block-library/theme-rtl.css 728 B 0 B
build/block-library/theme.css 729 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.2 kB 0 B
build/components/index.js 199 kB 0 B
build/components/style-rtl.css 15.8 kB 0 B
build/components/style.css 15.8 kB 0 B
build/compose/index.js 9.56 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.46 kB 0 B
build/date/index.js 5.38 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.23 kB 0 B
build/edit-navigation/index.js 10.8 kB 0 B
build/edit-navigation/style-rtl.css 1.08 kB 0 B
build/edit-navigation/style.css 1.08 kB 0 B
build/edit-post/index.js 304 kB 0 B
build/edit-post/style-rtl.css 5.59 kB 0 B
build/edit-post/style.css 5.58 kB 0 B
build/edit-site/index.js 16.6 kB 0 B
build/edit-site/style-rtl.css 3.03 kB 0 B
build/edit-site/style.css 3.03 kB 0 B
build/edit-widgets/index.js 9.35 kB 0 B
build/edit-widgets/style-rtl.css 2.45 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 537 B 0 B
build/editor/editor-styles.css 539 B 0 B
build/editor/index.js 45 kB 0 B
build/editor/style-rtl.css 3.78 kB 0 B
build/editor/style.css 3.78 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.71 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.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 709 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.12 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.4 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.9 kB 0 B
build/server-side-render/index.js 2.71 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.13 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@geriux geriux changed the title [RNMobile] - Allow media within media & text block to be selected [RNMobile] - Media & Text: Allow media to be selected and render focal point Jun 2, 2020
This was referenced Jun 2, 2020
Closed
Closed
Closed
@geriux geriux requested a review from dratwas June 8, 2020 06:19
@geriux geriux marked this pull request as ready for review June 8, 2020 06:19
@geriux
Copy link
Member Author

geriux commented Jun 16, 2020 •
edited
Loading

Hey @dratwas 👋 thank you so much for your review! Really good suggestions =)

I updated the code, can you please give it another review whenever you have time? Thanks!

@dratwas
Copy link
Contributor

dratwas commented Jun 18, 2020

Hey @geriux awesome work!! 🎉 I left some comments, however they are not a blocker to merge this :)

@geriux
Copy link
Member Author

geriux commented Jun 18, 2020

Hey @geriux awesome work!! 🎉 I left some comments, however they are not a blocker to merge this :)

Thank you for reviewing again @dratwas ! Just updated with the latest changes.

@geriux geriux removed the [Status] In Progress Tracking issues with work in progress label Jun 18, 2020
This was referenced Jun 18, 2020
Merged
Merged
Gerardo Pacheco added 3 commits June 23, 2020 17:40
Mobile - Improve image focal point to fix crop image issue in Media Text
db4c557
Mobile - Media & Text remove extra padding
2745a98
Merge branch 'master' into rnmobile/media-text-image-refactor
da0d387 
# Conflicts:
#	packages/block-library/src/image/edit.native.js
#	packages/block-library/src/media-text/media-container.native.js
#	packages/components/src/index.native.js
@geriux geriux changed the title [RNMobile] - Media & Text: Allow media to be selected and render focal point [Mobile] - Media & Text: Allow media to be selected and render focal point Jun 24, 2020
@geriux geriux mentioned this pull request Jun 24, 2020
Closed
2 tasks
This was referenced Jun 30, 2020
Closed
Closed
@geriux geriux merged commit 7c871b3 into master Jul 8, 2020
@geriux geriux deleted the rnmobile/media-text-image-refactor branch July 8, 2020 16:41
@github-actions github-actions bot added this to the Gutenberg 8.6 milestone Jul 8, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dratwas dratwas dratwas approved these changes

Assignees
No one assigned
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
Milestone
Gutenberg 8.6
Development

Successfully merging this pull request may close these issues.
2 participants
@geriux @dratwas