-
Notifications
You must be signed in to change notification settings - Fork 57
Cross platform InspectorControls component #1300
Description
We already have InspectorControls for mobile and web but it works differently.
Mobile is currently using InspectorControls as a slot to add buttons to the block toolbar, but web is using that slot to fill the block settings in the sidebar. What is more, mobile is showing/hiding the settings modal due to a flag in the state, so the whole thing acts a bit different than web. We should update InspectorControls mobile implementation to make it close to web as much as possible.
Here's a good description of this component for web: https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/inspector-controls
And for mobile settings appear at the BottomSheet component:
We'll need to also add x-platform versions of these subcomponents used under InspectorControls
such as PanelBody, ToggleControl, SelectControl, RangeControl to be able to implement x-platform gallery block.
Good news is we have these ones covered:
ToggleControl > SwitchCell
SelectControl > PickerCell
But we are missing RangeControl so we'll also need to add support for that.
PanelBody : This one is a bit vague, we might not need to support it for mobile currently but only render a container View instead. We should decide on the way.
Let's do this in 2 iterations:
-
Refactoring the already existing usages on image, video blocks:
gutenberg-mobile/gutenberg/packages/block-library/src/image/edit.native.js
gutenberg-mobile/gutenberg/packages/block-library/src/video/edit.native.js -
Giving support for the usage in Gallery block
To test
You can use example app for testing this.
yarn install
yarn start
yarn ios
yarn android
Make sure the current behaviour doesn't change, which is:
Add image/video blocks
Tap Settings button on the block's inner toolbar
Verify that block settings bottom sheet is displayed
