Gutenberg-mobile: Styled System exploration for Cross Platform components

[pinarol]

Let's explore styled-system to see how it can be useful for designing cross platform primitives.

For this exploration we can use a CSS-in-JS library such as Styled Components. Although it is optional and if there's a better one feel free to use that one.

What should be done?

• Introduce a Box component to replace div/View.
• Layout and styling of the Box component should be possible via props. We shouldn't pass className to it, instead all the CSS will be hidden inside Box.
• Replace div usages in gutenberg/packages/block-library/src/gallery/gallery-image.js with Box keeping the same look.
• Lastly remove unused CSS lines.

Here's a branch with some already done work, let's checkout a new branch from this branch and keep working based on this: https://github.com/WordPress/gutenberg/compare/rnmobile/master...experimental/styled-system-poc the branch still uses old way of getting up the development environment so npm run dev will still work for now. If at some point we need to update it from master we should refer to the updated guidelines.

[pinarol]

note: isCompact is supposed to set to true when Gallery has >= 7 columns (according to existing CSS)

[pinarol]

Let's also try to see if we can make use of styled-system's theme specification to replace theme(primary) usages inside gutenberg/packages/block-library/src/gallery/inline-menu.scss.

Note: The real values for theme attributes reside in gutenberg/bin/packages/post-css-config.js currently.

[dratwas]

Hey @pinarol I did this task here - https://github.com/WordPress/gutenberg/pull/17614/files
I left it as a draft but it is ready to review

[pinarol]

Looking super cool thank you 🎉The only thing left seems like the handling of the z-index, currently I see that they are all kept in one place: gutenberg/assets/stylesheets/_z-index.scss, and the value 20 is actually coming from line: ".block-library-gallery-item__inline-menu": 20, normally that file provides z-index( $key ) function to get that value. We can propose a Javascript equivalent for that 🤔But no need for a big file, just a small alternative to the existing one, since we are just trying to demonstrate an idea here.

[dratwas]

Z-index is also supported by theming. In this commit, I use z-index from theme: https://github.com/WordPress/gutenberg/pull/17614/commits/52791f6544b72a1fcd87d2d12908d38357ada6c6

[pinarol]

Super cool thank you! Could you open a PR then?

[pinarol]

Thanks for the PR! 🎉 At this point, I have a question about the ThemeProvider. Would that work on mobile too?

Another thing is, I think we need to demonstrate a mobile usage as well, could you be able to replace some Views for this purpose? video block can be a good case:
gutenberg/packages/block-library/src/video/edit.native.js
It'd be good if we can open a separate PR for mobile side.

[dratwas]

@pinarol ThemeProvider works for mobile since it uses React Context API :)

Will create PR for the video block today :)

[pinarol]

@pinarol ThemeProvider works for mobile since it uses React Context API :)

@dratwas thank you for making that more clear!

Will create PR for the video block today :)

🙇

[pinarol]

I am closing this for now since the prototypes are completed