The Color field creates a color picker that can be used in your block template.
Settings
- Help Text: Instructions to describe the data needed in the field.
- Default Value: The default value for this field when adding the block. You can use either a hex value (
#FF00FF) or an rgba value (rgba(255, 0, 255, 0.5)).
PHP API Controls
- name
- label
- control
- type
- order
- location
- width
- help
- default
Template Usage
To use the Color field in your template, use the field name you provided.
<div style="background:<?php block_field( 'block-background-color' ); ?>"></div>
The API will return a string. It will be either a hex value (#FF00FF) or an RGBA value (rgba(255, 0, 255, 0.5)).
Example template file /blocks/block-block-lab-example.php
<?php
// Block Lab Example Color Field
?>
<div style="background:<?php block_field( 'block-background-color' ); ?>">
<p style="color:white;text-align:center;">I chose this background color using Block Lab.</p>
</div>
To use the block with the Color field on your site, locate it in the blocks menu.
It will then display within your post/page.
You can enter a hex code or an RGBA value into the field or you can click on the color circle to open up the color picker. You can switch between hex and RGBA options by clicking the caret next to the field.
And on the front-end of your site.
