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

Fix CSS property serialization #7676

Merged
merged 1 commit into from Jul 4, 2018

Conversation

Projects
None yet
5 participants
@noisysocks
Member

noisysocks commented Jul 3, 2018

Description

Fixes #7326.

Prevents wp.element.renderToString() from converting CSS properties that begin with a - to kebab-case. This fixes a bug where Gutenberg breaks styles defined in a block's save() function such as --myBackgroundColor: palegoldenrod when saving a post.

How has this been tested?

Unit tests are included. I also confirmed that #7326 can no longer be reproduced.

Fix CSS property serialization
Prevents wp.element.renderToString() from converting CSS properties that
begin with a '-' to kebab-case. This fixes a bug where Gutenberg breaks
inline CSS such as `--myBackgroundColor: palegoldenrod` and
`-webkit-overflow-scrolling: touch`.
@gziolo

gziolo approved these changes Jul 3, 2018

LGTM 👍

@aduth

aduth approved these changes Jul 3, 2018

Nice. Is there anything we can point to in React that details these exceptions? I'm curious if there are others as well.

@noisysocks noisysocks merged commit 6ef8a65 into master Jul 4, 2018

2 checks passed

codecov/project 46.81% (+0.02%) compared to 9356304
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@noisysocks noisysocks deleted the fix/css-custom-properties branch Jul 4, 2018

@noisysocks

This comment has been minimized.

Member

noisysocks commented Jul 4, 2018

It looks like React only has a special case for CSS custom variables, so we're good there.

https://github.com/facebook/react/blob/88d7ed8bfbccd860c3e309da39d356d0a3127aa7/packages/react-dom/src/shared/CSSPropertyOperations.js#L74-L75

(How do you make GitHub display the linked code? I can never figure it out.)

However, judging from the tests, it looks like supporting vendor-prefixed properties isn't as straightforward as I assumed. My understanding, now, is that we'll need to change our serializer to:

  1. Ignore properties such as -webkit-overflow-scroll. This matches the React behaviour of style={ { '-webkit-overflow-scroll': 'auto' } } having no effect.
  2. Translate properties such as WebkitOverflowScroll to -webkit-overflow-scroll. This matches the React behaviour of style={ { WebkitOverflowScroll: 'auto' } } having the desired effect.
@ZebulanStanphill

This comment has been minimized.

Contributor

ZebulanStanphill commented Jul 7, 2018

Should this be added to the 3.2 milestone?

@ntwb ntwb added this to the 3.2 milestone Jul 8, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment