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] hide replaceable block when adding block #16931

Merged
merged 1 commit into from
Aug 20, 2019

Conversation

mchowning
Copy link
Contributor

@mchowning mchowning commented Aug 6, 2019

related gutenberg-mobile PR

Description

This addresses gutenberg-mobile/issue#1177 by hiding a block that would be replaced when the add block bottom sheet is presented.

hide_block_and mp4

Test Scenarios

1. Empty paragraph block

  1. Select an empty paragraph block
  2. Tap the ➕ to add a new block
  3. Observe that the previously selected empty paragraph block is hidden and the Add Block Here (ABH) indicator is in its place
  4. Select any block to add
  5. Observe that the selected block has taken the place of the ABH indicator and the previously-selected empty paragraph block is still not visible

2. Anything other than an empty paragraph block

  1. Select any block other than an empty paragraph block
  2. Tap the ➕ to add a new block
  3. Observe that the selected block is still visible and the ABH indicator is below it
  4. Select any block to add
  5. Observe that the selected block has taken the place of the ABH indicator and the previously-selected block is still visible.

3. Block before an empty paragraph block

  1. Select any block that is immediately before an empty paragraph block (selected block should not itself be an empty paragraph block)
  2. Tap the ➕ to add a new block
  3. Observe that both the selected block and the empty paragraph block following it are still visible.
  4. Observe that the Add Block Here (ABH) indicator is between the selected block and the empty paragraph block
  5. Select any block to add
  6. Observe that the selected block has taken the place of the ABH indicator and both the previously-selected block and the previously-present empty paragraph block are still visible.

4. Add block from Post Title

  1. Select the post title of a non-empty post (it's important that this not be a new empty post because of an outstanding issue with inserting blocks from the post title on new posts)
  2. Tap the ➕ to add a new block
  3. Observe that the ABH indicator is shown at the top of the post, below the post title
  4. Select any block to add
  5. Observe that the selected block has taken the place of the ABH indicator and is now the top block in the post

Types of changes

This is a non-breaking change that 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.

@mchowning mchowning 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 Aug 6, 2019
@mchowning mchowning self-assigned this Aug 6, 2019
@mchowning mchowning requested review from Tug and marecar3 August 6, 2019 19:06
@@ -35,7 +35,6 @@
}

.containerStyleAddHere {
flex: 1;
Copy link
Contributor Author

@mchowning mchowning Aug 6, 2019

Choose a reason for hiding this comment

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

Removing the flex here avoided an issue where the "Add Block Here" text in the add block indicator would not display (or would appear and then disappear) when the related block content was not displayed. This fix seems to work very well, but I'm not 100% clear on what was causing the issue, so there may be better ways to address this issue.

Copy link
Contributor

@marecar3 marecar3 left a comment

Choose a reason for hiding this comment

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

LGTM! 👍
Nice work here!

@mchowning mchowning force-pushed the rnmobile/hide_block_if_being_replaced branch from 5380dbd to c09f982 Compare August 20, 2019 14:13
@mchowning mchowning merged commit 2f9d0e2 into master Aug 20, 2019
@mchowning mchowning deleted the rnmobile/hide_block_if_being_replaced branch August 20, 2019 14:48
donmhico pushed a commit to donmhico/gutenberg that referenced this pull request Aug 27, 2019
daniloercoli added a commit that referenced this pull request Sep 4, 2019
 into rnmobile/add-autosave-to-mobile

* 'rnmobile/master' of https://github.com/WordPress/gutenberg: (52 commits)
  [RNMobile] DarkMode improvements (#17309)
  Remove redundant bg color within button appender (#17325)
  Support group block on mobile (#17251)
  [RNMobile] Insure tapping at end of post inserts at end
  Recover border colors (#17269)
  [RNMobile] Fix dismiss keyboard button for the post title (#17260)
  Unify media placeholder and upload props within media-text (#17268)
  MediaUpload and MediaPlaceholder unify props (#17145)
  Add native support for the MediaText block (#16305)
  Activate Travis CI on rnmobile/master branch (#17229)
  [RNMobile] Native mobile release v1.11.0 (#17181)
  Apply box-sizing border-box properly to the notices components (#17066)
  Writing Flow: allow undo of patterns with BACKSPACE and ESC (#14776)
  Project automation: Rewrite actions using JavaScript (#17080)
  Build: remove global install of latest npm since we want to use the paired node/npm version (#17134)
  Writing Flow/Quote: allow splitting (#17121)
  Use `400` as a valid `font-weight`
  Add: Disabled block count in the block manager (#17103)
  Update video player style on mobile - Add a new gridicon play icon, from: https://github.com/Automattic/gridicons/blob/87c9fce08b4a9f184b9fb4963228757fdd4f4e74/svg-min/gridicons-play.svg - Replace the Dashicon play by this one - Update icon size and icon color - Update the overlay color
  [RNMobile] Hide replaceable block when adding block (#16931)
  ...

# Conflicts:
#	packages/block-editor/src/components/block-list/index.native.js
#	packages/block-editor/src/components/inserter/index.native.js
#	packages/block-editor/src/components/inserter/menu.native.js
#	packages/block-editor/src/components/media-placeholder/index.native.js
#	packages/block-editor/src/components/warning/index.native.js
#	packages/block-library/src/code/edit.native.js
#	packages/block-library/src/image/edit.native.js
#	packages/block-library/src/missing/edit.native.js
#	packages/block-library/src/more/edit.native.js
#	packages/block-library/src/nextpage/edit.native.js
#	packages/block-library/src/video/edit.native.js
#	packages/components/src/mobile/bottom-sheet/cell.native.js
#	packages/components/src/mobile/bottom-sheet/index.native.js
#	packages/components/src/mobile/dark-mode/index.native.js
#	packages/components/src/mobile/html-text-input/index.native.js
#	packages/components/src/toolbar/toolbar-container.native.js
#	packages/edit-post/src/components/header/header-toolbar/index.native.js
#	packages/edit-post/src/components/layout/index.native.js
#	packages/edit-post/src/components/visual-editor/index.native.js
#	packages/rich-text/src/component/index.native.js
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.

2 participants