search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.34k stars 4.13k forks source link

Navigating to nested Cover block bottom sheets logs warnings #30839

Open dcalhoun opened 3 years ago

dcalhoun commented 3 years ago

Description

As discussed in https://github.com/WordPress/gutenberg/pull/30270#issuecomment-819545802, there is currently a warning that is logged whenever navigating to a nested bottom sheet that relies upon a callback. It would appear passing a non-serializable callback to the nested bottom sheet via props is not the best approach when using react-navigation.

Step-by-step reproduction instructions

  1. Launch WPiOS or WPAndroid block editor.
  2. Add a Cover block.
  3. Set an image as the media.
  4. Open the Cover block settings.
  5. Tap "Edit focal point" within the Media section.
  6. Tap "Cancel."
  7. Tap "Color" within the Overlay section.

Expected behaviour

No warnings are logged.

Actual behaviour

The following warnings are logged in the development server. 

 WARN  Non-serializable values were found in the navigation state. Check:

FocalPoint > params.onFocalPointChange (Function)

This can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.
 WARN  Non-serializable values were found in the navigation state. Check:

Color > params.onColorChange (Function)

This can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.

Screenshots or screen recording (optional)

n/a

WordPress information

Device information

dcalhoun commented 3 years ago

Related to #29655.