` will get a `style` attribute with inline styles, and the
inline styles that form the contents of that attribute will be the two CSS Custom
Properties with the values received from the block attributes:
These inlined CSS custom properties can then be referenced from the block’s stylesheet_(
note that this is SCSS which needs a compile step)_:
```language-css
.wp-block-create-block-css-demo {
.
.
& header {
background-color: var(--header-bg-color);
}
& header h2 {
color: var(--header-heading-color);
}
}
```
## Adding controls
Now we need to give the user some controls so that they can change the values stored
in the attributes. The controls you provide depends on the kind of properties you
want the user to be able to change, but as colors are being used in this example
a `
` component is what you need here.
First import `PanelColorSettings` and `InspectorControls` from `@wordpress/block-
editor`, and then add the `` component within the `` component in the JSX returned by the `Edit()` component:
```javascript
```
Then whenever the block is re-rendered it will pick up the colors that the user
has defined in the attributes using these controls, and those values will be assigned
to the CSS custom properties which are inlined onto the block’s wrapping element.
Remembering to destructure `setAttributes` and to create the `onChange` functions,
your `Edit()` component should look like this:
```javascript
import { __ } from '@wordpress/i18n';
import {
useBlockProps,
InspectorControls,
PanelColorSettings,
} from '@wordpress/block-editor';
import './editor.scss';
export default function Edit( { attributes, setAttributes } ) {
// destructure the attributes
const {
headerBackgroundColor,
headerHeadingColor
} = attributes;
// define the styles object
const styles = {
"--header-bg-color": headerBackgroundColor,
"--header-heading-color": headerHeadingColor,
};
// define the onChange functions
const onChangeHeaderBackgroundColor = ( val ) => {
setAttributes( { headerBackgroundColor: val } );
};
const onChangeHeaderHeadingColor = ( val ) => {
setAttributes( { headerHeadingColor: val } );
};
return (
<>
What is the highest mountain in the world?
Mount Everest, in the Himalayas, stands at 8849 meters which makes it the highest mountain in the world.
Which is the highest free-standing mountain?
Kilimanjaro, a dormant volcano in Tanzania, is the world's highest free-standing mountain at 5895 meters.
What is the farthest point from the centre of the Earth?
The peak of Mount Chimborazo in Equador is the furthest point from Earth's centre. The summit is 2072 meters farther from Earth's centre than Mount Everest's summit.
);
}
```
## The `save()` function
If you’re creating a static block then do exactly the same in your `save()` function–
apart, of course, from the `` controls and `onChange` functions.
Your `save()` function should look like this _(note that some of the markup has
been removed for brevity)_:
```javascript
import { useBlockProps } from "@wordpress/block-editor";
export default function save( { attributes } ) {
// destructure the attributes
const {
headerBackgroundColor,
headerHeadingColor
} = attributes;
// define the styles object
const styles = {
"--header-bg-color": headerBackgroundColor,
"--header-heading-color": headerHeadingColor,
};
return (
<>
// section content - elements go here
);
}
```
## Dynamic blocks
If you’re creating a dynamic block then things are kind of the same, but also kind
of different. Let’s dig in and see how to achieve the same thing, namely add a `
style` attribute with our CSS custom properties as its value to the wrapper element,
but in a dynamic block.
For a dynamic block the `Edit()` component that gets rendered in the editor is exactly
the same as outlined above. But a dynamic block does not have a `save()` function
as it is server-side rendered. Instead it either has a `render()` function or, more
recently, a render file defined in a `render` property in `block.json`:
```javascript
{
.
.
render: "file:./render.php",
.
.
}
```
Doing it in this more modern way means you don’t need to pass the attributes to
a function. The render file auto-magically receives the attributes in an associative
array as `$attributes`.
Recall that earlier we passed our styles to the `useBlockProps` hook in an object,
which `useBlockProps` spread onto the wrapper element. A similar principle applies
In the PHP for a dynamic block, but rather than an object we instead pass a **string**
to `get_block_wrapper_attributes` which needs to be `echo`-ed onto the wrapper element.
We can construct our string like this:
```php
$styles = "--header-bg-color: " . $attributes[ "headerBackgroundColor" ] . ";";
$styles .= "--header-heading-color: " . $attributes[ "headerHeadingColor" ];
```
And then use it as the value for a `style` property in an associative array that
gets passed to `get_block_wrapper_attributes`:
```php
$styles ) ); ?>>
.
.
```
So the principle is the same, and the process is analogous, but there are crucial
differences that you should be aware of when creating a dynamic block.
Your `render.php` file should look like this:
```php
$styles ) ); ?>>
What is the highest mountain in the world?
Mount Everest, in the Himalayas, stands at 8849 meters which makes it the highest mountain in the world.
Which is the highest free-standing mountain?
Kilimanjaro, a dormant volcano in Tanzania, is the world's highest free-standing mountain at 5895 meters.
What is the farthest point from the centre of the Earth?
The peak of Mount Chimborazo in Equador is the furthest point from Earth's centre. The summit is 2072 meters farther from Earth's centre than Mount Everest's summit.