Skip to content

Conversation

@geriux
Copy link
Member

@geriux geriux commented Jun 12, 2020

Gutenberg Mobile PR -> wordpress-mobile/gutenberg-mobile#2378
Notice view integration PR -> #23113
WordPress iOS PR-> wordpress-mobile/WordPress-iOS#14392
WordPress Android PR-> wordpress-mobile/WordPress-Android#12187

Description

This PR adds the functionality to copy, cut, paste, and duplicate blocks. This would be very useful to be able to move blocks from inner blocks or to group blocks like Group or Columns.

It also includes a Notice view to show some small, self-dismissing messages at the top of the page. Plus, it integrates it with Copy, Cut events and react-native-blur to be used on iOS only.

Colors: Same colors with Tooltip.
Timeout: 3secs before self dismissing
Height: 30px

How has this been tested?

Steps to test

Copy / Paste block

  • Open the main app with metro running
  • Create a new post
  • Add a block and customize it e.g. add text/image
  • Tap on the three dots button (bottom right of the block)
  • Tap on Copy
  • Add a new paragraph
  • Tap on the three dots button (bottom right of the block)
  • Tap on Paste
  • Expect to see your copied block pasted

After copying/cutting a block:

WPiOS:

  • Notice is showing
  • Self dismissing within 3 seconds
  • Dismissing immediately when tapped
  • Width adjusts for landscape/portrait
  • Sequential notices are stacked

WPAndroid:

  • Notice is showing
  • Self dismissing within 3 seconds
  • Dismissing immediately when tapped
  • Width adjusts for landscape/portrait
  • Sequential notices are stacked

Cut block

  • Open the main app with metro running
  • Create a new post
  • Add a block and customize it e.g. add text/image
  • Tap on the three dots button (bottom right of the block)
  • Tap on Cut
  • Expect to see the block disappear
  • Add a Group block
  • Tap on the + button to bring up the inserter
  • Expect to see Copied block in the first item of the menu
  • Tap on Copied block
  • Expect to see your copied block pasted into the Group block

Duplicate block

  • Open the main app with metro running
  • Create a new post
  • Add a block and customize it e.g. add text/image
  • Tap on the three dots button (bottom right of the block)
  • Tap on Duplicate
  • Expect to see your block duplicated

Screenshots

👇👇👇
Click here to watch the video.
👆👆👆

UX Interaction
Copy Cut / Paste
Duplicate Copy from inserter
Light Mode

IMG_4319

Dark Mode

IMG_4316

Types of changes

New feature

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 Jun 12, 2020
@github-actions
Copy link

github-actions bot commented Jun 12, 2020

Size Change: 0 B

Total Size: 1.13 MB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 3.4 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.39 kB 0 B
build/block-directory/style-rtl.css 941 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/index.js 109 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.58 kB 0 B
build/block-library/editor.css 7.58 kB 0 B
build/block-library/index.js 129 kB 0 B
build/block-library/style-rtl.css 8.04 kB 0 B
build/block-library/style.css 8.05 kB 0 B
build/block-library/theme-rtl.css 730 B 0 B
build/block-library/theme.css 732 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 198 kB 0 B
build/components/style-rtl.css 15.9 kB 0 B
build/components/style.css 15.9 kB 0 B
build/compose/index.js 9.65 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.44 kB 0 B
build/date/index.js 5.47 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.19 kB 0 B
build/edit-navigation/index.js 9.87 kB 0 B
build/edit-navigation/style-rtl.css 1.02 kB 0 B
build/edit-navigation/style.css 1.02 kB 0 B
build/edit-post/index.js 303 kB 0 B
build/edit-post/style-rtl.css 5.51 kB 0 B
build/edit-post/style.css 5.5 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.32 kB 0 B
build/edit-widgets/style-rtl.css 2.42 kB 0 B
build/edit-widgets/style.css 2.42 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 44.8 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.86 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.72 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 711 B 0 B
build/keyboard-shortcuts/index.js 2.51 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 450 B 0 B
build/list-reusable-blocks/style.css 451 B 0 B
build/media-utils/index.js 5.29 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.5 kB 0 B
build/priority-queue/index.js 788 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 14 kB 0 B
build/server-side-render/index.js 2.68 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.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@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 Jun 12, 2020
@pinarol pinarol mentioned this pull request Jun 12, 2020
16 tasks
@pinarol
Copy link
Contributor

pinarol commented Jun 12, 2020

I tested following cases both on WPAndroid and WPiOS, working awesome!

  • Copy/Paste simple block via Action menu
  • Copy/Paste nested block via Action menu
  • Copy/Paste Gallery when an upload is in progress
  • Duplicate simple block
  • Duplicate nested block
  • Paste via Inserter
  • Paste appears passive in the Action menu if we are outside of the permitted area for the copied block(e.g. Button, Column can only be pasted into Buttons, Columns)
  • Inserter menu doesn't show the copied block if we are outside of the permitted area for the copied block
  • Paste appears passive in the Action menu when the post is just opened

Tested the notice view with the steps here: #23113

Copy link
Contributor

@pinarol pinarol left a comment

Choose a reason for hiding this comment

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

Working well and looking good 👍 Great job 👍

Let's prepare installable builds so @iamthomasbishop can test as well!

@geriux geriux removed the [Status] In Progress Tracking issues with work in progress label Jun 12, 2020
@geriux geriux marked this pull request as ready for review June 12, 2020 16:09
* Add notices

* Remove duplicate function

* Fix errors

* Update NoticeList

* Fix default val

* Bind on notice hidden

* Add timer and fix formatting

* Prevent NoticeList from appearing inside nested blocks

* Update animation

* RNMobile - Notice - Fix animation

* Add onDimensionsChange listener

* RNMobile - FloatingToolbar - Disable pointer Events if its not visible

* Make zIndex values get effective

* Update packages/components/src/notice/index.native.js

Co-authored-by: Gerardo Pacheco <[email protected]>

* Update packages/components/src/notice/list.native.js

Co-authored-by: Gerardo Pacheco <[email protected]>

* Simplify reducer

Co-authored-by: Gerardo Pacheco <[email protected]>
@geriux geriux changed the title [RNMobile] - Copy, Cut, Paste, Duplicate blocks [Mobile] - Copy, Cut, Paste, Duplicate blocks Jun 25, 2020
@geriux geriux merged commit dface0b into master Jun 30, 2020
@geriux geriux deleted the rnmobile/copy-duplicate-blocks branch June 30, 2020 06:34
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.

3 participants