What problem does this address?

We have an issue in WooCommerce blocks where because blocks are rendered dynamically on the frontend (markup is converted to React components), where we use global styles we need to convert any styling rules stored as attributes into valid inline CSS. For that we need to use the hooks exported from @wordpress/block-editor e.g.

• useBorderProps
• useColorProps
• useSpacingProps

This however is problematic because block-editor is a huge dependency not suitable for the frontend of a site.

To avoid this dependency we're forced to copy some utilities from the @wordpress/block-editor package into our own codebase. This is being worked on here.

What is your proposed solution?

It would be fantastic if the utilities that useBorderProps, useColorProps etc consume were exposed in a separate package. In the PR I'm working on, the utilities we've borrowed include:

• getInlineStyles
• getColorClassName
• getBorderClassName
• getGradientClassName
• getColorClassesAndStyles
• getBorderClassesAndStyles
• getSpacingClassesAndStyles

These utilities seem generic enough to be split out from @wordpress/block-editor into a new or existing package.