Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move transform styles function to blockEditor package. #15572

Conversation

@jorgefilipecosta
Copy link
Member

commented May 10, 2019

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

This comment has been minimized.

Copy link
Contributor

commented May 10, 2019

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

This comment has been minimized.

Copy link
Member Author

commented May 11, 2019

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
Copy link
Contributor

left a comment

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 jorgefilipecosta force-pushed the update/extract-transform-styles-function-to-independ-package branch from 8f149b5 to 0e1fa93 May 13, 2019

@jorgefilipecosta jorgefilipecosta requested a review from ellatrix as a code owner May 13, 2019

@jorgefilipecosta jorgefilipecosta changed the title Extract transform styles function to independent package. Move transform styles function to blockEditor package. May 13, 2019

@jorgefilipecosta

This comment has been minimized.

Copy link
Member Author

commented May 13, 2019

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.

/**
* Internal dependencies
*/
export { default as transformStyles } from './transform-styles';

This comment has been minimized.

Copy link
@youknowriad

youknowriad May 13, 2019

Contributor

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

This comment has been minimized.

Copy link
@jasmussen

jasmussen May 13, 2019

Contributor

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

This comment has been minimized.

Copy link
@jorgefilipecosta

jorgefilipecosta May 13, 2019

Author Member

I agree with the idea of experimental for a release.

This comment has been minimized.

Copy link
@aduth

aduth May 28, 2019

Member

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?

This comment has been minimized.

Copy link
@jorgefilipecosta

jorgefilipecosta Jun 11, 2019

Author Member

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 jorgefilipecosta force-pushed the update/extract-transform-styles-function-to-independ-package branch from 0e1fa93 to d14d70f May 28, 2019

@jorgefilipecosta

This comment has been minimized.

Copy link
Member Author

commented May 28, 2019

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

@jorgefilipecosta jorgefilipecosta merged commit bb24bbe into master May 28, 2019

1 check passed

Travis CI - Pull Request Build Passed
Details

@jorgefilipecosta jorgefilipecosta deleted the update/extract-transform-styles-function-to-independ-package branch May 28, 2019

@youknowriad youknowriad added this to the Gutenberg 5.9 milestone Jun 7, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.