-
Notifications
You must be signed in to change notification settings - Fork 64
6. Available field types
- Text
- Textarea
- URL
- Number
- Color
- Image
- Select
- Multi-Select
- Toggle
- Range
- Checkbox
- Radio
- Post
- Taxonomy
- User
The Text field creates a simple text input option for the block.
- Help Text: Instructions to describe the field.
- Default Value: The default value for this field when adding the block.
- Placeholder Text: The helper text which appears when the input is empty.
- Character Limit: The maximum number of characters allowed to be entered.
The API will return a string.
<h3><?php block_field( 'subtitle' ); ?></h3>The Textarea field creates a multi-line text input option for the block, suitable for paragraphs.
- Help Text: Instructions to describe the field.
- Default Value: The default value for this field when adding the block.
- Placeholder Text: The helper text which appears when the input is empty.
- Character Limit: The maximum number of characters allowed to be entered.
- Number of Rows: The height of the textarea when displayed in the editor.
The API will return a string.
<div class="notification">
<h2>Warning!</h2>
<p><?php block_field( 'notification-message' ); ?></p>
</div>The URL field creates a simple text input that only accepts valid URLs.
- Help Text: Instructions to describe the field.
- Default Value: The default value for this field when adding the block.
- Placeholder Text: The helper text which appears when the input is empty.
The API will return a string.
<a href="<?php block_field( 'link' ); ?>" />The Email field creates a simple text input that only accepts valid email addresses.
- Help Text: Instructions to describe the field.
- Default Value: The default value for this field when adding the block.
- Placeholder Text: The helper text which appears when the input is empty.
The API will return a string.
<a href="mailto:<?php block_field( 'email_address' ); ?>" />The Number field creates a text input that only accepts numbers.
- Help Text: Instructions to describe the field.
- Default Value: The default value for this field when adding the block.
- Placeholder Text: The helper text which appears when the input is empty.
The API will return an integer, and echo a string.
<p>Age: <?php block_field( 'age' ); ?></p>Again…
<?php
for( $i = 1; $i <= block_value( 'loop' ) $i++ ) {
echo ' and again…';
}
?>The Color field creates a color picker.
- Help Text: Instructions to describe the field.
- Default Value: The default value for this field when adding the block.
The API will return a string. It could be either a hex value (#FF00FF) or an rgba value (rgba(255, 0, 255, 0.5)).
<div style="background:<?php block_field( 'background_color' ); ?>"></div>The Image field creates a text field expecting an image URL, and includes buttons to Upload an Image or choose on from the Media Library.
- Help Text: Instructions to describe the field.
- Default Value: The default value for this field when adding the block.
The API will return the Attachment Post ID of the chosen image as an integer, and echo the full-size URL of the chosen image a string.
<img src="<?php block_field( 'feature_image' ); ?>" /><?php
$attachment_id = block_value( 'profile_photo' );
echo wp_get_attachment_image( $attachment_id, 'thumbnail' );
?>The Select field creates a dropdown menu input option for the block.
- Help Text: Instructions to describe the field.
-
Choices: The available items in the dropdown menu.
- Enter each choice on a new line.
- To specify the value and label separately, use this format:
foo : Foo.
- Default Value: The default value for this field when adding the block.
The API will return a string.
<p>Size: <?php block_field( 'tshirt-size' ); ?></p>The Multi-Select field creates a list input option for the block, in which multiple options can be chosen.
- Help Text: Instructions to describe the field.
-
Choices: The available items in the dropdown menu.
- Enter each choice on a new line.
- To specify the value and label separately, use this format:
foo : Foo.
-
Default Value: The default value for this field when adding the block.
- Enter each default value on a new line.
- Use only the value (not the label) of the choice you would like selected.
The API will return an array, and echo a comma separated string.
<h2>Featuring:</h2>
<ul>
<?php foreach ( block_value( 'features' ) as $value ) : ?>
<li><?php echo $value; ?></li>
<?php endforeach; ?>
</ul>The Toggle field creates an on / off toggle switch input option for the block.
- Help Text: Instructions to describe the field.
- Default Value: The default value for this field when adding the block.
The API will return a boolean.
<?php
$class = 'container';
if ( block_value( 'full-width' ) ) {
echo $class .= ' full-width';
}
<div class="<?php echo $class; ?>">
</div>
?>The Range field creates a number slider input option for the block, suitable for integers.
- Help Text: Instructions to describe the field.
- Minimum Value: The minimum value that can be selected within the range.
- Maximum Value: The maximum value that can be selected within the range.
- Step Size: The smallest change possible while moving the slider.
- Default Value: The default value for this field when adding the block.
The API will return an integer, and echo a string.
<div class="columns">
<?php for ( $i = 1; $i <= block_value( 'number-of-columns' ); $i++ ) : ?>
<div class="column">
<p>Column #<?php echo $i; ?></p>
</div>
<?php endfor; ?>
</div>The Checkbox field creates a single checkbox input option for the block.
- Help Text: Instructions to describe the field.
- Default Value: The default value for this field when adding the block.
The API will return a boolean.
<?php
if ( block_value( 'show-avatar' ) ) {
echo get_avatar( $email );
}
?>The Radio field creates a multi-choice input option for the block. Multiple items can not be selected.
- Help Text: Instructions to describe the field.
-
Choices: The available items in the list.
- Enter each choice on a new line.
- To specify the value and label separately, use this format:
foo : Foo.
- Default Value: The default value for this field when adding the block.
The API will return a string.
<p>Location: <?php block_field( 'location' ); ?></p>The Post field allows you to select one of your WordPress posts from a searchable dropdown menu.
- Help Text: Instructions to describe the field.
- Post Type: The post type filter (e.g. Posts, Pages)
The API will return a WP_Post object, and echo the Post's title.
See the WP_Post class on WordPress.org.
<a class="link-to-my-post" href="<?php echo get_permalink( block_value( 'my_post' )->ID ); ?>">
<?php block_field( 'my_post' ); ?>
</a><?php
$post = block_value( 'my_post' );
$attachment = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
$alt_text = get_post_meta( get_post_thumbnail_id( $post->ID ), '_wp_attachment_image_alt', true );
?>
<div class="post-image">
<img
src="<?php echo $attachment[0]; ?>"
width="<?php echo $attachment[1]; ?>"
height="<?php echo $attachment[2]; ?>"
alt="<?php echo $alt_text; ?>"
/>
</div>The Taxonomy field allows you to select one of your WordPress taxonomies from a searchable dropdown menu.
- Help Text: Instructions to describe the field.
- Taxonomy Type: The taxonomy type filter (e.g. Categories, Tags)
The API will return a WP_Taxonomy object, and echo the Taxonomy's name.
See the WP_Taxonomy class on WordPress.org.
<?php
$taxonomy = block_value( 'genre' );
?>
<a class="genre-link" href="<?php echo get_permalink( $taxonomy->ID ); ?>"><?php block_field( 'genre' ); ?></a>The User field allows you to select one of your WordPress users from a searchable dropdown menu.
This field is exclusive to Block Lab Pro.
- Help Text: Instructions to describe the field.
- Placeholder Text: The helper text which appears when the input is empty.
The API will return a WP_User object, and echo the user's nicename (the name they've chosen to display publicly).
See the WP_User class on WordPress.org.
<span>Created by <?php block_field( 'user' ); ?></span><div class="profile-photo">
<?php
$user = block_value( 'user' );
echo get_avatar( $user->ID );
?>
</div>