Move transform styles function to blockEditor package.

[jorgefilipecosta]

Description

This PR extracts a util function transformStyles available in WordPress/editor to an independent package.

This function does not depend on the editor module and this change enables us to remove the WordPress/editor dependency from the HTML block.

Removing the editor dependencies from blocks is a goal because in the widget screen editor will not be available.

How has this been tested?

I did some general smoke tests around the editor.
I verified the HTML block still works as before.
I executed wp.blockEditor.transformStyles( [ { css: 'h1, b { color: red; }' } ], '.wp' );in the browser console and I verified the output was: [".wp h1,↵.wp b {↵color: red;↵}"].
I executed wp.editor.transformStyles( [ { css: 'h1, b { color: red; }' } ], '.wp' ); to verify we are backcompatible.

[youknowriad]

Is this something that make sense in the block editor module (provider or something else)? (I don't have the answer but I think it's something we need to at least think about).

[jorgefilipecosta]

Is this something that make sense in the block editor module (provider or something else)? (I don't have the answer but I think it's something we need to at least think about).

I agree we need to discuss this change. This function needs lots of logic ast, traversing etc that is not directly related to the editor.
I imagine this util to transform CSS is generic enough that people may even want to use it outside of Gutenberg/WordPress that's on a reason for extracting it.
Besides this, I think an HTML block in the widget screen where the editor is not present may also need this functionality.

[youknowriad]

Thinking a bit more here. While everything else is generic the transformStyles function exported in packages/transform-styles/src/index.js is something opinionated and specific to the editor, I wonder if it should be exposed as is.

Maybe a first step for this PR is just to move these into the block editor module and expose the transformStyles function there?

[jorgefilipecosta]

Maybe a first step for this PR is just to move these into the block editor module and expose the transformStyles function there?

Hi @youknowriad the function was moved to the block editor module as suggested.

[youknowriad]

This is looking good, my last question is whether we should publish this as is or make it experimental? I'm on the fence here as it seems to be a pretty stable API. Thoughts?

Also do we consider a change in the way we generate those styles as a breaking change? Say we automatically add a "width" to all blocks or something? (if it's the case I think it should be experimental or unstable)

cc @aduth @jorgefilipecosta @jasmussen

[jasmussen]

It seems like if you're on the fence, maybe keep it unstable for a release, then revisit?

[jorgefilipecosta]

I agree with the idea of experimental for a release.

[aduth]

I agree with the idea of experimental for a release.

Will you plan to follow-up on this, or should we create an issue to track it?

[jorgefilipecosta]

Hi @aduth, there is no need to create an issue, I will create a PR very soon, given that the experimental status should be removed in the next release.

[jorgefilipecosta]

The PR was updated and block editor transformStyles was marked as experimental. Provided there is no other feedback, the PR should be ready.