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] Long-press on inserter to show options for "add above" and "add below" #18791

Merged
merged 36 commits into from
Jan 29, 2020
Merged

[RNMobile] Long-press on inserter to show options for "add above" and "add below" #18791

merged 36 commits into from
Jan 29, 2020

Conversation

ceyhun
Copy link
Member

@ceyhun ceyhun commented Nov 27, 2019

Description

Fixes: wordpress-mobile/gutenberg-mobile#1433

How has this been tested?

I've tested it using iPhone X Simulator with iOS 13.2 and Pixel 3 Android emulator with API 28.

Elements

  1. Inserter button (+) behavior
    (The current behavior on normal press should not change)
  2. "ADD BLOCK HERE" indicator behavior
  3. Bottom/ActionSheet behavior

Steps

  1. Long press on the inserter button (+)
  2. Bottom sheet should be presented
  3. Options should should be different depending on the test case
  4. Select an option
  5. "ADD BLOCK HERE" indicator should be shown in the correct place depending on the option you picked
  6. Menu to pick a block should be shown
  7. Select a block
  8. Block should be inserted in the correct place

Cases

  1. When no block is selected
  2. When title is selected
    • Bottom sheet options should be:
      Add to beginning
      Add to end
  3. When unmodified default block (Paragraph) is selected
    • Unmodified default block (Paragraph) should be kept as it is and insertion should happen according to the option that's picked.
  4. When a block other than Paragraph is selected
  5. When a block in a Media & Text block is selected
  6. When a block in a Group is selected
    Note: Appending a block in an empty group currently doesn’t work. There’s a PR to fix that: [RNMobile] fix group appender behaviour #18564. A group block with some inner blocks can be added locally to initial-html for testing.
    • Bottom sheet options should be:
      Add Block Before
      Add Block After

Screenshots

Nothing selected

iOS Android
no-selection-ios no-selection-android

Unmodified Paragraph selected

iOS Android
unmodified-default-ios unmodified-default-android

Image selected

iOS Android
image-selected-ios image-selected-android

Inside Media & Text

iOS Android
media-text-block-ios media-text-block-android

Inside Group

iOS Android
in-group-block-selected-ios in-group-block-selected-android

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

@ceyhun
Copy link
Member Author

ceyhun commented Dec 1, 2019

Implemented all the required functionality. Now it also shows the Bottom/ActionSheet on long press and you can choose to insert before or after.

@SergioEstevao
Copy link
Contributor

I've tested this on iOS and is working as intended.

The only little thing that I noticed is that when we add the new block to out of the screen the app doesn't scroll to that location. This may have been an already existing bug, but if possible to arrange on this PR will be great.

Code wise is looking solid!

@iamthomasbishop
Copy link

@ceyhun I've got a few bits of feedback as I'm working through a design review.

  • The actions list on the Bottom Sheet on Android should be left-aligned to the 16px keyline
  • You can remove the Cancel button from the Bottom Sheet on Android
  • On the last example (when long-pressing on the Inserter from an empty new block), I noticed something we might want to consider – adding a Replace Current Block option in addition to the before/after options when showing the Action/Bottom Sheet. If we add this, I would add it in the in the middle of the list (Add to Beginning, Replace Current Block, Add to End)

@ceyhun
Copy link
Member Author

ceyhun commented Dec 5, 2019

The only little thing that I noticed is that when we add the new block to out of the screen the app doesn't scroll to that location. This may have been an already existing bug, but if possible to arrange on this PR will be great.

Sure! I'll check what’s the underlying issue and if it makes sense to include it in this PR.

@ceyhun
Copy link
Member Author

ceyhun commented Dec 5, 2019

@iamthomasbishop thanks for the feedback!

  • The actions list on the Bottom Sheet on Android should be left-aligned to the 16px keyline

How about also displaying the icons for Android? It will look like this in the end:

  • You can remove the Cancel button from the Bottom Sheet on Android

👍

  • On the last example (when long-pressing on the Inserter from an empty new block), I noticed something we might want to consider – adding a Replace Current Block option in addition to the before/after options when showing the Action/Bottom Sheet. If we add this, I would add it in the in the middle of the list (Add to Beginning, Replace Current Block, Add to End)

In this case should we show the Replace Current Block option only for when an unmodified/empty paragraph block is selected or also for other types of blocks as well when they are not yet modified?
Also I think this option doesn’t exist on web editor menus and if we decide to show icons on Android what can we use for this option?

@iamthomasbishop
Copy link

iamthomasbishop commented Dec 5, 2019

How about also displaying the icons for Android? It will look like this in the end:

Yes! Absolutely 👍 😄

In this case should we show the Replace Current Block option only for when an unmodified/empty paragraph block is selected or also for other types of blocks as well when they are not yet modified?

Ah, good question. I was mainly thinking empty Paragraph blocks, but other RichText blocks such as Heading should probably behave the same way. For example, if I add a heading block, leave it empty and come back to select it, it'd seem intuitive to me if the same logic applied to a Heading.

Looking at the full list of available blocks, we could probably apply the same to other RichText blocks like Lists, Quote, Code, and Pre blocks, but I think those would be less intuitive than simple blocks like Paragraph and Heading. There are some that wouldn't make sense, like media blocks (Image, Video), More, Page Break, Separator, Spacer, Media & Text, etc.

@ceyhun
Copy link
Member Author

ceyhun commented Dec 8, 2019

@iamthomasbishop Other blocks than Paragraph could be a little tricky as we may need to keep an up-to-date list of “replaceable” blocks and add new blocks there as they become available. How about only making paragraph replaceable for now? It would also be consistent with the behavior of normal-press to the inserter (+) because only empty paragraph blocks are replaced on normal-press right now.

For the Replace Current Block option's icon I tried with this one from the web:
replace-icon

It looks like this on Android. What do you think?
replace-menu

@ceyhun
Copy link
Member Author

ceyhun commented Dec 8, 2019

@SergioEstevao about scrolling to a new block that’s out of the screen:

At first I looked if it was working with blocks that open the keyboard.

Both iOS and Android use KeyboardAwareFlatList component to render the BlockList.
But inside KeyboardAwareFlatList:

For both iOS and Android

  • With blocks that open the keyboard:

    • If the new block is at the top of the current render window in the list it doesn’t work.
    • If the new block is at the bottom of the current render window in the list it works.
  • With blocks that don't open keyboard it doesn’t work at all as you noticed.

So there were 2 cases where it wasn’t working:

  1. New block that does not open keyboard
  2. New block that does open keyboard but is at the top of the current render window

Then I looked into FlatList.scrollToIndex method to solve this. The documentation says:

Cannot scroll to locations outside the render window without specifying the getItemLayout prop.

The getItemLayout needs every item’s height calculated in advance. It might be tricky to calculate every block’s height beforehand. So I didn’t go with the FlatList solution.

Finally I looked into the react-native-keyboard-aware-scroll-view a bit. I realised that it has a scrollIntoView method. It takes a ref as a parameter and scrolls it into the view. So I used this method. Also used the same component for Android to be able to call this method. Now this works for both cases and both platforms.

iOS Android
scroll-to-end-ios scroll-to-end-android

@hypest
Copy link
Contributor

hypest commented Dec 9, 2019

Nice to see react-native-keyboard-aware-scroll-view working for Android @ceyhun , thanks! I wonder though, perhaps there were some issues we encountered in the past that prevented us from using it for Android. @pinarol , do you perhaps recall why we ended up only using the library for iOS and not for Android?

@iamthomasbishop
Copy link

Other blocks than Paragraph could be a little tricky as we may need to keep an up-to-date list of “replaceable” blocks and add new blocks there as they become available

@ceyhun This is a good point regarding scalability. Let's just start w/ paragraph as this is the most common part.

For the Replace Current Block option's icon I tried with this one from the web:

I would avoid using the same icon that is already used for re-usable blocks. Let's use the simple (+) icon.

Also, the scrolling behavior you shared above looks great. I know we've had some technical issues with scrolling behavior but improving that aspect of the editor has been a design-wish of mine so hopefully this helps 😄

@pinarol
Copy link
Contributor

pinarol commented Dec 9, 2019

I wonder though, perhaps there were some issues we encountered in the past that prevented us from using it for Android. @pinarol , do you perhaps recall why we ended up only using the library for iOS and not for Android?

We simply didn't need that for Android because Android was by default able to scroll to the focused text field when the keyboard opens. So, KeyboardAvoidingView was just enough. Also, it was written in the README that Android support of react-native-keyboard-aware-scroll-view wasn't good. From what I have seen this PR uses it with enableOnAndroid={ false } so it will continue using Android's default autoscroll capabilities. The thing that worries me more is dropping KeyboardAvoidingView and not putting something that replicates its functionality. I am a bit confused how it can be possible because then this means KeyboardAvoidingView was not necessary at all 🤔OR we are missing something.

What I can suggest is trying to avoid dropping KeyboardAvoidingView just for being able to call scrollIntoView. We can consider adding scrollIntoView function in our code base and call it by passing scrollView's ref to it. This could minimize possible future regressions. It seems like a pretty standalone function to me that doesn't use a lot from that lib.

@ceyhun
Copy link
Member Author

ceyhun commented Dec 9, 2019

I would avoid using the same icon that is already used for re-usable blocks. Let's use the simple (+) icon.

@iamthomasbishop You mean this one? It's used for the inserter button as well.

@ceyhun
Copy link
Member Author

ceyhun commented Dec 9, 2019

I am a bit confused how it can be possible because then this means KeyboardAvoidingView was not necessary at all 🤔OR we are missing something.

@pinarol on Android a behavior prop is not passed into the KeyboardAvoidingView
https://github.com/WordPress/gutenberg/blob/master/packages/components/src/mobile/keyboard-aware-flat-list/index.android.js#L12

I think it acts as a normal View when a behavior prop is not passed in. But I'm not 100% sure 😄
https://github.com/jtreanor/react-native/blob/master/Libraries/Components/Keyboard/KeyboardAvoidingView.js#L218

What I can suggest is trying to avoid dropping KeyboardAvoidingView just for being able to call scrollIntoView. We can consider adding scrollIntoView function in our code base and call it by passing scrollView's ref to it. This could minimize possible future regressions. It seems like a pretty standalone function to me that doesn't use a lot from that lib.

On Android we can still keep the KeyboardAvoidingView to avoid causing regressions. But in this case the only scrollable element inside KeyboardAwareFlatList remains the FlatList. I can try to extract scrollIntoView function into KeyboardAwareFlatList and pass the FlatList's ref to it. It might still work since FlatList also inherits ScrollView props.

@pinarol
Copy link
Contributor

pinarol commented Dec 9, 2019

I think it acts as a normal View when a behavior prop is not passed in. But I'm not 100% sure 😄
https://github.com/jtreanor/react-native/blob/master/Libraries/Components/Keyboard/KeyboardAvoidingView.js#L218

In that case I wouldn't worry. One thing to make sure though, we are not using react-native's KeyboardAvoidingView directly from this file, we have our own wrapper on top of it, so let's check if we don't use behavior there either.

It might still work since FlatList also inherits ScrollView props.

Makes sense but I am also OK with the current state if we make sure KeyboardAvoidingView acts no different than a normal View in this case.

@iamthomasbishop
Copy link

iamthomasbishop commented Dec 9, 2019

You mean this one?

@ceyhun Yep that one. That's okay, it makes sense to use the same icon as it essentially performs the default inserter action.

@SergioEstevao
Copy link
Contributor

@SergioEstevao about scrolling to a new block that’s out of the screen:

At first I looked if it was working with blocks that open the keyboard.

Both iOS and Android use KeyboardAwareFlatList component to render the BlockList.
But inside KeyboardAwareFlatList:

For both iOS and Android

  • With blocks that open the keyboard:

    • If the new block is at the top of the current render window in the list it doesn’t work.
    • If the new block is at the bottom of the current render window in the list it works.
  • With blocks that don't open keyboard it doesn’t work at all as you noticed.

So there were 2 cases where it wasn’t working:

  1. New block that does not open keyboard
  2. New block that does open keyboard but is at the top of the current render window

Then I looked into FlatList.scrollToIndex method to solve this. The documentation says:

Cannot scroll to locations outside the render window without specifying the getItemLayout prop.

The getItemLayout needs every item’s height calculated in advance. It might be tricky to calculate every block’s height beforehand. So I didn’t go with the FlatList solution.

Finally I looked into the react-native-keyboard-aware-scroll-view a bit. I realised that it has a scrollIntoView method. It takes a ref as a parameter and scrolls it into the view. So I used this method. Also used the same component for Android to be able to call this method. Now this works for both cases and both platforms.

iOS Android
scroll-to-end-ios scroll-to-end-android

@ceyhun tested this on iOS and now it's working perfectly.

Copy link
Contributor

@Tug Tug left a comment

Choose a reason for hiding this comment

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

Nice fix for the autoscroll to block, I tested it and it works well 👍
Would have been best to do it in another PR imo as I feel this PR is quite complex already. At least it looks complex to me because of the changes of state we introduce, I find it a bit hard to follow across the different components. Anyway it's ok to have it here since Sergio asked for it ;)

I'd like us to think of an alternative approach that does not involve modifying the web store. Let's try to keep the insertionPoint reducer "UI only" if possible.

@@ -1172,6 +1172,7 @@ _Parameters_

- _rootClientId_ `?string`: Optional root client ID of block list on which to insert.
- _index_ `?number`: Index at which block should be inserted.
- _canReplaceBlock_ `?boolean`: can the insertion point replace the block at index.
Copy link
Contributor

Choose a reason for hiding this comment

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

So it seems that by adding this new property we stray away from the insertion point being a UI state only (where every property is just used to render the BlockInsertionPoint component) to a more complex one where we store user preference in it. So this store now tells us where and how a new block will be inserted. It's hard to see how the web could use that and I'm wondering if it wouldn't be best to just store this state into the Inserter instead. @ceyhun did you give it a try?

Minor thing: canReplaceBlock doesn't sound like the most appropriate name since it's actually a "directive" for the inserter. Maybe willReplaceBlock or shouldReplaceBlock 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.

It is already derived from Inserter’s local state via getShouldReplaceBlock function. But we need to pass this state to the BlockList so it hides the blocks where the BlockInsertionPoint will replace. Inserter and BlockList don't share a very close parent so instead of lifting the state all the way up to their common parent and drilling down, I chose to store this state it in the store :) It might be used in web for a similar behavior with "Add Block Before/After" for where a block in the list could be hidden when it will be replaced and BlockInsertionPoint is shown in it's place.

But I agree this state is now not about only showing/hiding BlockInsertionPoint but it's even about showing/hiding a block in the list.

But maybe there is another way without changing the web store. Instead of hiding a block we can try to remove the block completely from BlockList when BlockInsertionPoint is shown and the block is going to be replaced. If the block insertion is cancelled (via closing the menu) we can re-insert the block again. It should be easy to re-insert the block again because the replace only happens for unmodified default blocks (empty paragraph) right now. If a new block is picked from the menu instead of cancelling we can just call insert instead of replace to add the new block. This way we might even remove show/hide block logic completely from BlockList.

What do you think?

Copy link
Contributor

Choose a reason for hiding this comment

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

What do you think?

I think it sounds quite hacky, but that's actually a clever way to do it without compromising on the functionalities, I like it 👍

I say it's hacky because this approach won't work if isSelectedBlockReplaceable becomes more complex than just isSelectedUnmodifiedDefaultBlock. Maybe we will then be able to "store" the type of block that was removed in the Inserter state, but then it feels even more hacky 🤔

I think it's fine for now to have more custom code in the native Inserter since our version does more than the web. Adding new attributes to the store that are not presently needed is hardly justifiable at this point in the project.

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 just pushed the mentioned changes (and also reverted scrollview related changes), feel free to check it out again :)

@ceyhun
Copy link
Member Author

ceyhun commented Dec 17, 2019

Would have been best to do it in another PR imo as I feel this PR is quite complex already. At least it looks complex to me because of the changes of state we introduce, I find it a bit hard to follow across the different components. Anyway it's ok to have it here since Sergio asked for it ;)

Group Media&Text
android-scrollview-bug android-scrollview-mediatext-bug

I just found this bug with group blocks on Android now after merging develop into guteberg-mobile and rebasing my changes here onto guteberg-mobile/develop’s gutenberg ref. Sometimes the groups are not being rendered correctly. It seems to be caused by using react-native-keyboard-aware-scroll-view on Android because without that it just works fine.

We might need a more complex solution that doesn’t involve react-native-keyboard-aware-scroll-view for Android. @SergioEstevao For this I think it makes more sense to do it in another PR too.

@pinarol
Copy link
Contributor

pinarol commented Dec 17, 2019

Sometimes the groups are not being rendered correctly. It seems to be caused by using react-native-keyboard-aware-scroll-view on Android because without that it just works fine.

We might need a more complex solution that doesn’t involve react-native-keyboard-aware-scroll-view for Android. @SergioEstevao For this I think it makes more sense to do it in another PR too.

InnerBlock enhancements are merged recently and it was a big change, it could have effected this PR as well. I didn't quite understand the buggy behavior from that screenshot but I'd avoid merging this if it is introducing some problems on Group block. I'd also suggest checking Media-Text because it uses InnerBlocks like Group, and it is already on prod. We want to ship Column and Group very soon so we wouldn't want to introduce blockers for them.

Sometimes the groups are not being rendered correctly

Could you elaborate on this a bit? What kind of problem are you observing?

Also, there was this one suggestion that you made @ceyhun, would it help solving the issue?

On Android we can still keep the KeyboardAvoidingView to avoid causing regressions. But in this case the only scrollable element inside KeyboardAwareFlatList remains the FlatList. I can try to extract scrollIntoView function into KeyboardAwareFlatList and pass the FlatList's ref to it. It might still work since FlatList also inherits ScrollView props.

react-native-keyboard-aware-scroll-view can be buggy on Android, the developers of the original library made it clear in the README that Android support wasn't perfect.

… open"

This reverts commit 9c1c71d25eb573427ca09761bd3154286d19539b.
@SergioEstevao SergioEstevao merged commit 5cb2727 into WordPress:master Jan 29, 2020
@epiqueras epiqueras added this to the Gutenberg 7.4 milestone Feb 3, 2020
hypest added a commit that referenced this pull request Feb 10, 2020
* Use Select: Fix render queue. (#19286)

* Use Select: Fix render queue issues.

* Use Select: Make `isMounted` more informative.

* Framework: Reset lockfile changes to dependencies

Co-authored-by: Andrew Duthie <[email protected]>

* Project Management: Run pull request automation on closed (#19742)

* Try/group block custom text color (#19181)

* Add text color selector to group block to allow setting a text colour that applies to all children of the group to avoid having to set text colour on every individual child

* Block Editor: Handle LinkControl submission via form handler (#19651)

* Block Editor: Handle LinkControl submission via form handler

* E2E Tests: Unskip intermittent buttons test failure

* Added conditions and new translation strings for BlockMover (#19757)

* Added conditions and new translation strings for BlockMover

* Moved translator comments into sprintf function

* Storybook: Add Placeholder component story (#19734)

* Add Placeholder story for storybook

* Update storybook test snapshot

* Project Management: Fix pull request merge automation errors (#19768)

* Framework: Use fixed version of checkout action

Avoid unintended breaking changes. To a lesser extent, helps clarify that this tag refers to the _version of the action_, not the branch being checked out.

* Framework: Configure PR automation checkout to master branch

* Add post requests documentation for apiFetch (#19759)

* Multi-select: don't focus first selected block (#19762)

* Multi-select: don't focus first selected block

* Move CopyHandler outside WritingFlow

* Fix click appender

* Remove useless line

* Update: Readme.txt Link to changelog instead of adding it inline(#19761)

* Fix: Media & Text: "Crop image to fill entire column" reset on image change (#19765)

* Build: Include JSON files in zip archive (#19772)

* Build: Include JSON files

* Zip build script: Include json files in `build/block-library/blocks/`

Co-Authored-By: Jorge Bernal <[email protected]>

Co-authored-by: Jorge Bernal <[email protected]>

* Makes appenders visible only for the current selection (#19598)

* makes appenders visible only for the current selection

* adds smaller footprint to appenders in navigation, only shows them if item has descendants

* align appender to level of the menu item, remove useless CSS

* Core-data: do not publish outdated state to subscribers during updates (#19752)

* Core-data: do not publish outdated state to subscribers during updates

Calling `saveEntityRecord` with an update does the following:

1. Calls `getEntityRecord` to fetch the current persisted state of the entity record
2. Calls `receiveEntityRecords` with the new up-to-date state to render the updates
3. Sends an API fetch with the update patch to persist the update
4. Calls `receiveEntityRecords` again with the new up-to-date *persisted*
state

The issue here, is that point 1 (Calling `getEntityRecord`) not only fetches
the persisted state, but it also internally calls `receiveEntityRecords` itself .
This results in the persisted outdated server state to be rendered
on the UI, causing a flickering effect, that jumps pack when point 2
takes turn.

This commit removes the call to getEntityRecord, and instead, it just
calls receiveEntityRecords with the local up-to-date state of the entity
record. This fixes the flickering issue.

* Core-data: update tests to match saveEntityRecord yeilded actions

Given `saveEntityRecord` no longer selects `getEntityRecord`,
which itself triggers a SELECT action, two SELECTs are no longer
yielded. This commit removes the expectation of these two SELECTs.

* Core-data: Introduce getEntityRecordNoResolver selector

To allow saveEntityRecord access the latest local full version
of an entity without issung an API request. This prevents
propogating outdating states to subscribers when
saveEntityRecord is called.

See: #19752 (comment)

* Address review comments at #19752:

1. Capitalize alll added comment messages
2. Alias getEntityRecord with getEntityRecordNoResolver instead of copying it
3. Use describe.each instaed of looping manually in selectors tests

* Add WordPress primitives package (#19781)

* navigation-link: set page id in the attrs (#18641)

* Project management: Add step that updates CHANGELOG files before npm releases (#19764)

* Navigation Block: Add submenu chevron w/ setting (#19601)

* Initialize setting in the nav block settings panel

* Add submenu icon

* Register "showSubmenuIcon" attributes

* Add submenu icon to front-end of the page

* Update submenu icon setting description

* Don't use <span> for RichText element

* Isolate NavigationLink icons

* Clean up a little

* Use <span> for NavigationLink contents

* Rename `$level_zero` to `$is_level_zero`

* Add missing spaces

* Update submenu icon selector in style.scss

* Add comment about span-wrapping

* Fix phpcs errors

* Remove unused styles

* Fix failing e2e tests

* Update failing snapshots

* Embed: Fix failure placeholder alignment/sizing (#19673)

* Fix error message sizing + alignment in Embed Placeholder

* Fix Table placeholder input vs button alignment

* Adjust spacing between error message and buttons

* Fix card component sub-component example code (#19802)

* Introduce the Icons package (#17055)

* Expose @wordpress/icons to react-native (#19810)

* Block popover: allow scrolling over (#19769)

* Block popover: allow scrolling over

* Clean up

* Fix overlapping inserter popover

* Better comment

* Multi select: keep selection after move (#19784)

* Multi select: keep selection after move

* Add e2e test

* Change e2e test

* Address feedback

* Fix snapshots

* Bump plugin version to 7.3.0

* Navigation: Select parent navigation block on handleCreateFromExistingPages() action (#19817)

* Paragraph block: remove dead CSS (#19821)

* Bundle the icons package instead of using it as an external (#19809)

* Move a dozen of block icons to the icons package (#19808)

* Chore: Improve package-lock.json configuration

* Add mkevins and pinarol as code owners for gallery block (#19829)

* Added shippedProposals (#19065)

* Added shippedProposals

* Setting shippedProposals during init

* Rich text: remove is-selected class (#19822)

* Rich text: prefix is-selected class

* Adjust more cases

* Remove the class

* Move more block SVGs to the icons package (#19834)

* Block: use context to provide selected element (#19782)

* Block: use context to provide selected element

* Include multi selection nodes

* Add comment

* Popover: clean up requestAnimationFrame (#19771)

* Popover: clean up requestAnimationFrame

* Cancel the last request before a new request

* Update: Removed editor store usage from native mobile block ed… (#18794)

* Navigation: Manage navigation link appender visibility based on current selection (#19846)

Show the navigation link appender when the selected item has descendants and is selected, or if it's the parent of the selected block.

* Remove editor dependency from the block library (#16160)

* Add AnglePicker Component; Add useDragging hook (#19637)

This commit adds a component to pick angles and a hook to make dragging things easier to implement.
Some components will be refactored to use the new hook e.g: the custom gradient picker.

* Testing: Use deterministic selectors for incremented IDs (#19844)

* Innerblock Templates Docs Link Typo Issue Fixed (#19813)

* Innerblock Templates Docs Link Typo Issue Fixed

* Innerblock Templates Docs Link Typo Issue Fixed

* Rich text: enable if multi selection is aborted (#19839)

* Block Directory: Refactor the reducer by breaking out the block management actions into their own reducer. (#19330)

* Block Directory: Refactory the reducer by break out the block management actions into their own reducer.

* Moved hasPermission into its own reducer.
* Also remove the 'items' list as it's not being used

* Update the getInstalledBlockTypes selector to point to the new reducer that manages installs.

* Update typo in test.

* Remove the lodash dependency in the selectors. It isn\'t necessary.

* Fix panel header styles (#19842)

* Move more block icons to the icons package (#19838)

* Bump @babel/preset-env to 7.8.3 (Optional Chaining!) (#19831)

* Bump babel to 7.8.3

* Added test for optional chaining

* Bump other babel packages.

* Fix

* Changelog
Update CHANGELOG.md

* Update package-lock.json

Co-authored-by: Grzegorz (Greg) Ziółkowski <[email protected]>

* Style improvements for template previews (#19763)

* First scaffold for template previews (mobile only)

* WIP: managed to make the preview show, saving as a checkpoint

- BlockEditorProvider needs an update so it uses the subRegistry
- We need a better way to only render the picker on the main block list
- We need to make the bottom sheet full height, and adapt the block preview accordingly

* Set a fixed height for the template preview

* Move template picker to the toolbar

* Read only block list

* Lint fixes

* Made scrolling sort of working with read only block list

* A longer template to test scrolling

* Replace BottomSheet with Modal for previews

* Allow closing previews with back button on Android

* Revert changes to BlockList that were required for bottom sheet integration

* Revert changes to BottomSheet

* Add usage example for ModalHeaderBar

* Improve accessibility of template preview

* Improve accessibility of ModalHeaderBar

* Remove unused imports

* Added missing web file

* RNMobile - Page template picker: apply layout from the preview

* RNMobile - Layout preview: apply action

* RNMobile - Page templates - set layout action

* Remove mobile action from docs

* New components for modal header buttons

* Fix alignment of modal header buttons

* Fix metrics for iOS modal header

* Add subtitle to preview header

* Use named color for modal header button

* Updated modal title color and weight

* Make Apply button bolder on iOS

* Make Apply button bolder on iOS

* Fix vertical alignment for close button

* Allow modal rotation on iOS

* Fix modal background on dark mode

* Fixed dark mode for template previews

* Revert changes to editor store after bad merge

* Add material close icon for modal header

* Tweak modal title colors

* Lint fixes

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

* [RNMobile] Release v1.21.0 to master (#19854)

* Adding empty function to RichText children call. (#19818)

This fixes a crash originated on this PR:
#19536
`

* Disable gallery image size options on mobile (#19828)

* Revert "Disable gallery image size options on mobile (#19828)"

This reverts commit 47b74aa.

Co-authored-by: Matthew Kevins <[email protected]>

* Packages: New create-block package for block scaffolding (#19773)

* Packages: New create-block package for block scaffolding

* Promote action handler to async to make implementation simpler

* Pass the prop for selection color. (#19635)

* Do not use the deprecated package editor for InnerBlocks component (#19869)

* Remove dead is-hovered selectors (#19870)

* Move is-navigate-mode class to WritingFlow (#19868)

* [RNmobile] Upgrade to RN 0.61.5 (#19369)

* `focusable` replaced `clickable

See facebook/react-native#25274

* Provide a native colors.native.scss

* Upgrade React Native version in Gutenberg web repo

* Jest doesn't have hasteImplModulePath anymore

* Work around other regressions. Will revert when those fixed

* Bump react-native version to 0.61.5

* Update babel-jest to try fixing babel-plugin-jest-hoist jest.mock issue

* Update jest to try fixing babel-plugin-jest-hoist jest.mock issue

* Pin xmldom to older version to bypass license file ambiguity

With newer versions, the license check script doesn't recognise that the
package is dual licenced and is reporting it as incompatible.

This commit pins the package to an older version. There is no functional
difference between the two versions, see
xmldom/xmldom@v0.1.27...v0.1.30

* Revert "Provide a native colors.native.scss"

This reverts commit b05f1e4.

This shouldn't be needed anymore after
wordpress-mobile/gutenberg-mobile#1683

* Revert "Pin xmldom to older version to bypass license file ambiguity"

This reverts commit 7e3c2b5.

* Cater for lowercase OR in licenses types

Props to @pento for the solution
#19369 (comment)

* Update package-lock.json via npm v6.13.6

* Check for the same "or" format as we're splitting

Otherwise, the 'or' in `GPL-2.0-or-later` causes an infinite recursion.
See error in https://travis-ci.com/WordPress/gutenberg/jobs/278348885.

* Update package-lock.json after running run check-local-changes

* Fix package-lock.json conflicts by keeping Jest to 24.9.0, Babel to
7.8.3

* Update package-lock by running npm install

* Update README.md (#19876)

Fix typo

* Multi selection: fix intermittent e2e failure (#19865)

* Move more block icons to the icons library (#19862)

* Paragraph block: remove min-height (#19835)

* Paragraph block: remove min-height

* Use lineheight to set drop cap min height

* Framework: Fix server-registered fixtures script (#19884)

* Env: Format run output only for terminal display

* Framework: Fix server-registered fixtures script

* Testing: Regenerate server-registered fixtures

* Testing: Regenerate navigation block fixture

* Env: Fix CHANGELOG typo "or"

* Shortcode Design Review (#19852)

* Update style of shortcode based on design review

* Fix title colors

* Update component to components in CONTRIBUTING.md (#19914)

* Apply sentence case formatting to PanelBody titles (#19901)

* Color Settings -> Color settings

* Block PanelBody titles: Settings -> settings

* Clarify when isEligible function is called (#19899)

Added a note that isEligible is only used for valid blocks and is not called for invalid blocks.

* Block Editor: Refactor ObserveTyping as function component (#19881)

* Block Editor: Refactor ObserveTyping as function component

* Block Editor: ObserveTyping: Avoid persisting event

* Remove unnecessary import from playground (#19893)

* Documentation: Organize Contributors Guide (#19853)

* Simplify CONTRIBUTING.md to be just guidelines

We don't need to include too much here because the real information for
contributing is in the handbook. This page is a standard page for Github
repos, so trimming it down to just a few links to sections in the
handbook.

Plus the policies for code of conduct and GPL.

* Add design contribution from CONTRIBUTING.md to design page

* Cleanup and organize Contributors Guide

* Use consistent Contributors Guide title

* Move Principles and catch-all docs to Project Overview section

* Switch background to more relevant repository management

* Apply suggestions from code review

Thanks for the fixes 👍

Co-Authored-By: Chris Van Patten <[email protected]>

* Fix extra newlines

* Standardize on Contributor Guide, matches core handbook

* Update manifest

Co-authored-by: Chris Van Patten <[email protected]>

* [RNMobile] Correct isMobile condition in nested Media&Text (#19778)

* Correct isMobile condition in nested Media&Text

* Do not export BREAKPOINTS

* Blocks: Match blocks in the inserter using keywords from patterns (#19243)

* Blocks: Match blocks in the inserter using keywords from patterns

* Ensure that matched patterns with the search term are marked

* Introduce scopes for block patterns

* Make it possible to apply initial attributes and inner blocks directly from the inserter

* Update block preview in the inserter to use attributes from the variation

* Change the way patterns are handled in the inserter

* Update packages/block-editor/src/components/block-types-list/index.js

Co-Authored-By: Miguel Fonseca <[email protected]>

* Improve the way patterns are added to the inserter

* Rename pattern label to patter title to align with block types

* Inserter: Don't auto-add block if it has variations

Co-authored-by: Miguel Fonseca <[email protected]>

* Block editor: Alt+F10 shouldn't scroll to top (#19896)

* Add e2e test

* Leave fixed position until position can be set

* Multi-selection: fix clearing with side click (#19787)

* Multi-selection: fix clearing with side click

* Add e2e test

* [RNMobile] fix show appender and separator in Group block (#19908)

* fix appender to duplicate separator line

* Add docs for LocalAutosaveMonitor and __experimentalUpdateLocalAutosaveInterval (#19915)

* [RNMobile] Add media edit icon to image block (#19723)

* Creates a MediaEdit component that shows a picker

* Add Gridicon's customize icon

* Show a button in images block that displays a picker

* Fix lint issues

* Fix no-shadow error

* Fix the name of the params

* When "Edit" is selected, request the Media Editor

* Fix lint issues

* Change media editor ID to a constant

* When "Replace" is tapped, show all available media options

* Fix lint issues

* Avoid destructuring

* Block Library: Handle Popover onClose for LinkControl (#19885)

* Block Library: Handle Popover onClose for LinkControl

* E2E Tests: Verify link popover Escape handling

* Disable Autocomplete in shortcode block (#19848)

* Disable Autocomplete in shortcode block

* RichText API: Limit `prefix` transformations to Paragraph (#19727)

… and any consumer of RichText that provides experimental prop
`__unstableAllowPrefixTransformations.`

* Block Editor: LinkControl: Resolve error when undefined value, "view" state (#19856)

* Block Editor: LinkControl: Resolve error when undefined value, "view" state

* Block Editor: LinkControl: Document only url, title, opensInNewTab value properties

* Block Editor: LinkControl: Change documented example to reference known value property

* [RNMobile] Revert change to fix Action Sheet (#19934)

* Revert "Avoid destructuring"

This reverts commit e113310.

* Fix the var name

* Add background color support to Columns block (#17813)

* Add attributes

* Update edit function

* Update save function

* Add .has-background style

* Improve has-background and backgroundColor.class checks

* Try passing the columns block e2e test

* Refactor to use __experimentalUseColors

* Normalize has-background padding with variables

* Remove extra bit

* Fix RTL styling for Media Text block (#18764)

* Add proper !rtl ignore comments to maintain styling on RTL

* Tweak comment

* Add direction: ltr (not ignored) to the content container

* change order of composing style in svg primitive (#19927)

* Add Prettier formatting script (#18048)

* Add Prettier NPM dependency to packages/scripts and top-level

* Scripts: export the fromProjectRoot function from scripts/utils module

* Scripts: Add Prettier formatting script

* ESLint config: use default (linebreak before ternary op) config for operator-linebreak rule

* ESLint: disable formatting rules in the recommended config

Adds `eslint-config-prettier` to the recommended config and creates an alternative
`recommended-with-formatting` config for project that want to keep ESLint formatting
rules and opt-out of Prettier.

* Scripts: the format-js script checks if Prettier is present and has top-level config

Prettier presence in a `wp-scripts`-powered project is optional, and the `format-js` script
checks if it's there and if it's indeed the fork (`wp-prettier`). Will report error otherwise.

Also, require a top-level Prettier config to be present. We can't default to the one inside
`wp-scripts`, because IDE and editor integrations won't find it there and will use the Prettier
defaults.

* Bump the minimum required version of npm to 6.9.0

* Add ESLint config changes notice to changelog

* Update package-lock.json

* Regenerate package-lock.json

Co-authored-by: Grzegorz (Greg) Ziółkowski <[email protected]>

* Components: FontSizePicker: Adjust Select Button sizing (#19479)

* Documentation: fix typo "Th" to "The" (#19833)

* [RNMobile] Long-press on inserter to show options for "add above" and "add below" (#18791)

* Add onLongPress prop to Button

* Show inserter menu on long press

* Make onLongPress a prop of toggle

* Make withSelect of Inserter return destinationRootClientId

* Insert default block before the selected one on long press

* Add add canReplaceBlock key to the insertionPoint state

* Hide a block in list only if it can be replaced

* Move insertion index logic from menu to inserter

* Update selector tests for newly added key in state

* Add insertionIndexAfter and isAnyBlockSelected props with selector

* Update docs for newly added key in state

* Add insertionType to component state and map to insertion index

* Refactor insertion index logic

* Show BottomSheet on long press to choose to insert before or after

* Update UI strings to be title case

* Hide cancel button from Bottom Sheet on Android

* Add icons to Bottom Sheet options on Android

* Add “Replace Current Block” option to menu on long-press

* Scroll to newly added block if it doesn't trigger keyboard to open

* Change “Replace Current Block” menu icon on Android

* Use shorter syntax for setState

* Rename getShouldReplaceBlock method to shouldReplaceBlock

* Revert "Scroll to newly added block if it doesn't trigger keyboard to open"

This reverts commit 9c1c71d25eb573427ca09761bd3154286d19539b.

* Revert “Add canReplaceBlock key to the insertionPoint state"

* Remove Block show/hide logic from BlockList

* Update Inserter local state to store block insertion information

* Make InserterMenu add/remove unmodified default block during replace

* Handle replacing last remaining block

* Fix Inserter test

* Fix code style issue

* Move insertion options into getInsertionOptions function

* Add comment about removing last block case

* Use findByProps instead of toJSON when testing Inserter

* Docs: Add details for format-js to @wordpress/scripts package (#19946)

* Docs: Add details for format-js to @wordpress/scripts package

* Update README.md

* Update packages/eslint-plugin/CHANGELOG.md

Co-Authored-By: Marcus Kazmierczak <[email protected]>

Co-authored-by: Marcus Kazmierczak <[email protected]>

* Fix: Crash when creating a hierarchical post without title (#19936)

* Fix: Color Gradients component was not able to handle only gra… (#19925)

* Add markdownlint script to lint docs markup (#19855)

* Add markdownlint script to lint docs markup

Adds a new script `lint-md-docs` that runs markdownlint to lint markdown
files for proper syntax. A default `.markdownlint.json` config is
included, it will require some testing to tune.

Fixes #12426

* Clarify naming of lint-md scripts js and docs

- Updates lint-md scripts to lint-md-js for linting source included in the document and lint-md-docs for
linting the markup of the document itself.

- Update scripts changelog
- Update readme with commands

* Apply suggestions from code review

Co-Authored-By: Grzegorz (Greg) Ziółkowski <[email protected]>

* Fix URL for markdownlint CLI

* Add -i check, details around ignore on CLI

* Check for additional project config files

* Update script commands to all for lint:*

* Local changes applied to package-lock.json

* Update packages/scripts/README.md

Co-Authored-By: Grzegorz (Greg) Ziółkowski <[email protected]>

* Apply suggestions from code review

Thanks for the review and updates 👍

Co-Authored-By: Grzegorz (Greg) Ziółkowski <[email protected]>

Co-authored-by: Grzegorz (Greg) Ziółkowski <[email protected]>

* Use require.resolve() instead of <rootDir> in @wordpress/jest-preset-default (#19957)

* use require.resolve() instead of <rootDir>

* formatted

* added changelog entry (#19958)

* Move the insert dashicon to the icons package (#19943)

* Replace all occurences of the yes dashicon with the check icon from the icons package (#19926)

* Build: Include block.json files in the build output (#19786)

* Block Editor: LinkControl: Prevent focus loss in edit mode toggle (#19931)

* Block Editor: LinkControl: Prevent focus loss in edit mode toggle

* Block Library: Remove custom focus loss protection

Previously used effect lifecycle to anticipate and respond to focus loss. Now, focus loss is prevented by LinkControl.

See: 722a4d6dec

* Block Editor: Rephrase and move forced input rendering comment

* Block Editor: Ensure isEndingEditWithFocus always assigned as boolean

* Move Alignment, movers and trash icons to the icons package (#19944)

* Navigation Block: Move the link description panel below the SEO panel because this is likely to be used signficantly less than the SEO panel. (#19917)

* Update hover and focus selectors for Move to Trash to ensure they're always red (#19974)

- Updates the selectors in .editor-post-trash to use similar
  specificity as .components-button.is-link for the hover
  and focus states to ensure that they are always red.

* Create block: Code quality improvements for the block scaffolding (#19867)

* Create block: Code quality improvements for the block scaffolding

* Improve the strucutre and handling of templates
Props to @aduth for the proposal: #19773 (comment).

* Ensure that package-lock.json file is refreshed with the changes from master

* Docs: Add a note about version and help options

* Code style: Run Prettier formatting on the package files

* Create block: Align .editorconfig with Gutenberg settings

* Fix: Use the description provided to fill the `description` field in `package.json` file in ESNext template

* Fix: Ensure that values provided for slug and namespace get converted to lower case

* Fix: Simplify the logic for transforming slug to title

* Update packages/create-block/lib/templates.js

Co-Authored-By: Andrew Duthie <[email protected]>

Co-authored-by: Andrew Duthie <[email protected]>

* Code quality: Enable linting for JS files starting with .

* Popover: fix typo in removing event listener (#19978)

* Eslint Plugin: Lint code formatting. (#19963)

* Eslint Plugin: Lint code formatting.

* Gutenberg: Add code formatting pre-commit hook.

* Eslint Plugin: Update docs.

* Gutenberg: Format code.

* Storybook: Update snapshots.

* [RNMobile] Show the media edit icon only if the block is selected (#19961)

* Only shows the media edit icon if the block is selected

Also, matches the style of the native gallery block buttons

* Fix lint

* Fix: Admin menu collapses for 960px width but editor doesn't (#19970)

* Chore: Fix differences in package-lock.json file

* RichText: try using hooks for wrapper component (#19095)

* Components: Apply width-based modifier classes to Placeholder only when width is known (#19825)

* Components: Apply `is-small` modifier class to Placeholder only when width known

* E2E Tests: Wait for placeholder error display in embed tests

* Testing: Update snapshots for Placeholder class assignment

* Eslint: set line width to 80 (#19992)

* Update config

* npm run lint-js:fix

* Move eslint comments

* Update snapshots

* Editor: Remove post title escaping (#19955)

* Add: Global styles css variables generation mechanism (#19883)

* Navigation: Change UX to move focus to navigation link label and close the LinkControl (#19686)

* When adding a link via the LinkControl, selects/highlights nav link label text if it's url-like. Focuses if not. Automatically adds url-like labels as the label.

* Adds @wordpress/dom to package-lock.json

* Removed test for awaiting for Link Control focus after pressing Enter, as the focus should now be on the navigation link text with the Link Control closed

* Lib: Limit `pre_render_block` extension. (#19989)

* Lib: Limit `pre_render_block` extension.

* Update lib/compat.php

Co-Authored-By: Andrew Duthie <[email protected]>

Co-authored-by: Andrew Duthie <[email protected]>

* Fix, update, and sort _rc_ `hasProjectFile` filenames (#19994)

* Update and fix `hasProjectFile` filenames

* Sort `hasProjectFile` filenames

* Update CHANGELOG.md

* Docs: Include CHANGELOG entries from the relocated create-wordpress-block package

* Blocks: Rename patterns to variations in the Block API (#19966)

* Blocks: Rename patterns to variations in the Block API

* Fix: Remove ESLint errors and warnings related to block variations

* [Mobile] Fix gallery upload sync (#19941)

* Invoke mediaUploadSync for gallery in React hook

* Use integer type explicitly for gallery image id

* Set state before attributes on upload success in gallery image

* Use ref hook for concurrency in media placeholder

* Extract dedup function and add comments in media placeholder

* Fix lint

* Use explicit radix with parseInt

Co-Authored-By: Gerardo Pacheco <[email protected]>

* Import useRef from @wordpress/element

* Fix lint

* Fix lint / prettier

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

* [Mobile] Fix blank image size labels on mobile (#19800) (#20045)

* Fix blank image size labels on mobile

* Use name instead of label in default imageSizes

* [RNMobile] Enable Dismiss on PlainText in Android (#20095)

* Add flag for determining if running on Android

* Enable Dismiss button on PlainText. Enable show keyboard in Android on PlainText mount

* Enable Dismiss button on PlainText. Enable show keyboard in Android on PlainText mount

Co-authored-by: Enrique Piqueras <[email protected]>
Co-authored-by: Andrew Duthie <[email protected]>
Co-authored-by: Glen Davies <[email protected]>
Co-authored-by: Christopher Reece <[email protected]>
Co-authored-by: Marcus Kazmierczak <[email protected]>
Co-authored-by: Ella van Durpe <[email protected]>
Co-authored-by: Jorge Costa <[email protected]>
Co-authored-by: Bernie Reiter <[email protected]>
Co-authored-by: Jorge Bernal <[email protected]>
Co-authored-by: andrei draganescu <[email protected]>
Co-authored-by: Omar Alshaker <[email protected]>
Co-authored-by: Riad Benguella <[email protected]>
Co-authored-by: Damián Suárez <[email protected]>
Co-authored-by: Grzegorz (Greg) Ziółkowski <[email protected]>
Co-authored-by: Bart Kalisz <[email protected]>
Co-authored-by: Jon Quach <[email protected]>
Co-authored-by: Edi Amin <[email protected]>
Co-authored-by: Seghir Nadir <[email protected]>
Co-authored-by: Jerry Jones <[email protected]>
Co-authored-by: Matthew Kevins <[email protected]>
Co-authored-by: Abdelmajid HAMDANI <[email protected]>
Co-authored-by: Delowar Hossain <[email protected]>
Co-authored-by: Steven Dufresne <[email protected]>
Co-authored-by: Adam Boro <[email protected]>
Co-authored-by: Kukhyeon Heo <[email protected]>
Co-authored-by: Gerardo Pacheco <[email protected]>
Co-authored-by: etoledom <[email protected]>
Co-authored-by: Sérgio Estêvão <[email protected]>
Co-authored-by: Florian TIAR <[email protected]>
Co-authored-by: Chip <[email protected]>
Co-authored-by: Haz <[email protected]>
Co-authored-by: Rich Tabor <[email protected]>
Co-authored-by: Benjamin Intal <[email protected]>
Co-authored-by: Rostislav Wolný <[email protected]>
Co-authored-by: Chris Van Patten <[email protected]>
Co-authored-by: Luke Walczak <[email protected]>
Co-authored-by: Miguel Fonseca <[email protected]>
Co-authored-by: jbinda <[email protected]>
Co-authored-by: Leandro Alonso <[email protected]>
Co-authored-by: Jarda Snajdr <[email protected]>
Co-authored-by: Martin Posselt <[email protected]>
Co-authored-by: Ceyhun Ozugur <[email protected]>
Co-authored-by: James Newell <[email protected]>
Co-authored-by: Andy Peatling <[email protected]>
Co-authored-by: Andrew Serong <[email protected]>
Co-authored-by: Stephen Edgar <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Proposal: Long-press on inserter to show options for "add above" and "add below"
8 participants