Skip to content

Cross platform InspectorControls component #1300

@pinarol

Description

@pinarol

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:

InspectorControls

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:

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

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

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions