A small tool to generate PHP or theme.json and CSS/SASS declarations of color palettes and font sizes for the WordPress editor (Gutenberg).
Fill the form below : for each color or font size, choose a Name, a Value, and click on « Generate ». How to use this code ?
/* nothing yet... */OR
/* nothing yet... *//* nothing yet... *//* nothing yet... *//* Generate Colors classes */
@each $name, $color in $colors {
.has-#{$name}-color {
color: $color;
}
.has-#{$name}-background-color {
background-color: $color;
}
.has-#{$name}-border-color {
border-color: $color;
}
}
/* Generate Fonts classes */
@each $size-name, $size in $font-sizes {
.has-#{$size-name}-font-size {
font-size: $size;
}
}After generating the code for your colors and/or font sizes, you will need to copy the different codes and paste them in the appropriate places :
theme.json file. Learn more about theme json config. Please note that theme.json override PHP add theme support.functions.php file of your theme. Learn more about theme supports in the developer documentation. It will be overrided by theme.json filestyle.css file of your theme.