Extract Gallery component for semi-cross-platform Gallery block

[mkevins]

Description

This PR extracts a Gallery component for the semi-cross-platform Gallery block. This will allow for web and mobile to share a common edit.js file, which will in turn use the respective web and mobile implementations of the Gallery component.

PR Hierarchy

This PR is part of the PR hierarchy described here. This PR can be used to test the aggregate changeset and integration of components within the related PRs.

Note:
This PR will need occasional rebasing in order to test the integration with the mobile components in downstream PRs.

Changes

• Gallery component is extracted to a separate file (the block should render the same for web)
• It uses the Platform module to provide different instructions for adding images on mobile
• It adds an isMobile prop via the withViewportMatch HOC
• It adds a mobile-specific icon prop to RangeControl

The icon prop will be hidden for web after the cross-platform PR for RangeControl is merged (without that merged, icon will be passed through as an attribute to the underlying <input> element). So this PR depends on the RangeControl PR being merged first.

BlockIcon:

I've extracted the block icon into a shared-icon file (with web and mobile variants) so that we can apply dark-mode styles on mobile. Also, although the icons use the same underlying svg, they are wrapped differently. Web styles / behaviors should be preserved in this PR.

Separator type:

To make separator indentation consistent for controls in the bottomsheet on mobile, it is currently necessary to add separatorType="fullWidth" to the controls: https://github.com/WordPress/gutenberg/pull/18265/files#diff-34f83402fe8954f15f8d404d01c9e4c9R302. This can "leak" into the web elements as an attribute as described here: #18155 (comment). I didn't notice any changes in behavior (exposed to the user), but I saw the attribute appearing in the elements. Any guidance on whether this is a blocker for web side is appreciated.

This PR should not result in any change in behavior for the web version of Gallery block.

To test

Web:

Checkout this PR and test locally (npm run env update, npm run dev) and ensure no behavior has changed on web for the Gallery block.

Also, all associated automated tests should pass.

Mobile:

Related PRs can be tested via this PR.

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.

[jorgefilipecosta]

Things worked well in my tests, and I did not found any regression!
I guess we should try to improve and reduce the needs for platform checks/platform-specific props, but for now, I think this solution is a good step to increase reusability between mobile and web.
Nice work @mkevins 👍

[pinarol]

@mkevins This is looking good overall, I just entered 2 comments. I want to make a last test tomorrow. Could you update PR branches so that we can have the latest Slider changes as well? After that hopefully we'll be good to go.

[pinarol]

LGTM! Great work! 🎉

Tested with steps described here.