Styling the outcome of the code block. Check out the appearance of the added code to the page. This is an example of how the code block is styled:
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"slug": "purple",
"color": "#D1D1E4",
"name": "Purple"
},
{
"slug": "yellow",
"color": "#EEEADD",
"name": "Yellow"
}
],
"gradients": [
{
"slug": "purple-to-yellow",
"gradient": "linear-gradient(160deg, var(--wp--preset--color--purple), var(--wp--preset--color--yellow))",
"name": "Purple to Yellow"
}
],
"duotone": [
{
"slug": "purple-and-yellow",
"colors": [ "#D1D1E4", "#EEEADD" ],
"name": "Purple and yellow"
}
]
}
}
}
}
You can easily change the colors from the block settings. Example:
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"slug": "purple",
"color": "#D1D1E4",
"name": "Purple"
},
{
"slug": "yellow",
"color": "#EEEADD",
"name": "Yellow"
}
],
"gradients": [
{
"slug": "purple-to-yellow",
"gradient": "linear-gradient(160deg, var(--wp--preset--color--purple), var(--wp--preset--color--yellow))",
"name": "Purple to Yellow"
}
],
"duotone": [
{
"slug": "purple-and-yellow",
"colors": [ "#D1D1E4", "#EEEADD" ],
"name": "Purple and yellow"
}
]
}
}
}
}