Gutenberg: De-hardcode SCSS variables in our blocks

Automattic / jetpack

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.

https://jetpack.com/

Other

1.58k stars 797 forks source link

Gutenberg: De-hardcode SCSS variables in our blocks #11844

Open tyxla opened 5 years ago

tyxla commented 5 years ago

In the Markdown block (~and probably in other blocks already~ and many more), we hardcode colors, fonts and other styles that could originally are defined in Gutenberg.

Let's find a good way to manage them - also see some suggestions in https://github.com/Automattic/wp-calypso/pull/27450#discussion_r220529958

Example:

https://github.com/Automattic/wp-calypso/blob/8ad80271e0e97f627d1fafb99c74dc28ef823143/client/gutenberg/extensions/markdown/editor.scss#L1-L8

simison commented 5 years ago

Noting that we don't have these variables in Calypso currently available since we're importing built CSS from Gutenberg:

https://github.com/Automattic/wp-calypso/blob/093793d751a7a99a92b05302ea0326669e07a8f1/assets/stylesheets/sections/gutenberg-editor.scss#L10-L27

and Calypso is moving to CSS variables: https://github.com/Automattic/wp-calypso/issues/28748

blowery commented 5 years ago

Where does Gutenberg define the variables? I see lots of usage across the imported styles, but no definition.

simison commented 5 years ago

Here: https://github.com/WordPress/gutenberg/tree/286317c8e61b1a2922243875fe1f98c868d7859b/assets/stylesheets