Description

Adds label to ColorPicker color field in Pods Block API. Attempted to do same for MediaUpload, but file field does not render at all when I try with the example code below.

Related GitHub issue(s)

7305

Testing instructions

Run npm run build-dev or similar. Add the block below. Color Picker should have a label. File field does not render at all when I attempt it -- nothing has been changed there yet. Descriptions may need to be added as well.

<?php
/**
 * Plugin Name: My Custom Pods Block
 * Plugin URI: https://docs.pods.io/code/blocks-api/
 * Description: Custom block built using the Pods Block PHP API. No Javascript needed!
 * Author Name: Scott Kingsley Clark
 * Author URI: https://skc.dev/
 */

/**
 * Want a quick overview and live demo? Check out the screencast here: https://docs.pods.io/code/blocks-api/
 */

/**
 * Example 1: Registering a custom block type.
 */
add_action( 'pods_blocks_api_init', 'register_my_custom_block_type', 20 );

/**
 * Register your custom block type. Rename this function to fit your own project naming and needs.
 */
function register_my_custom_block_type() {
    /**
     * This is your block configuration. Customize it to fit your needs.
     */
    $block = [
        // This is unique the name of your project so it won't conflict with other blocks installed (A-Z, a-z and dashes only).
        'namespace'       => 'paul',
        // The unique name of your block (A-Z, a-z and dashes only).
        'name'            => 'foobar',
        // The block title of your block.
        'title'           => __( 'Foo Bar' ),
        // The text description of your block.
        'description'     => __( 'The description of my custom block.' ),
        // Set your category (collection): common, formatting, layout, widgets, embed, or a custom one you register (A-Z, a-z and dashes only).
        'category'        => 'embed',
        // Dashicon name, see https://developer.wordpress.org/resource/dashicons/ for an official list, exclude the "dashicons-" prefix.
        'icon'            => 'admin-comments',
        // Limit to three keywords or phrases.
        'keywords'        => [
            'Project name',
            'keyword',
        ],

        /**
         * Important: The below options will be different depending on what render type you want to use.
         */

        // How you want to render the block output: php or js.
        'render_type'     => 'php',
        // If `render_type` is "php", set your callback below.
        'render_callback' => 'my_custom_block_render',
    ];

    /**
     * This is a list of fields to show in your block options (shown in the "Inspector Controls" area when selecting the block.
     */

    // If you have no fields to set, just use an empty array or don't pass `$fields` into `pods_register_block_type`.
    $fields = [];

    // If you have fields to show, set them and customize the list here. They use the same exact field config form at as normal Pod fields.
    $fields = [
        [
            'name'  => 'my_text_field',
            'label' => __( 'My Text Field' ),
            'type'  => 'text',
        ],
        [
            'name'        => 'my_file_field',
            'label'       => __( 'My File Field' ),
            'description' => __( 'This is a description for the field.' ),
            'type'        => 'file',
            'file_format_type' => 'single',
        ],
        [
            'name'        => 'my_color_field',
            'label'       => __( 'My Color Field' ),
            'description' => __( 'This is a description for the field.' ),
            'type'        => 'color',
            'default'     => '#ff0000'
        ],
    ];

    pods_register_block_type( $block, $fields );
}

/**
 * Render the block HTML if you want to do it with PHP. Rename this function to fit your own project naming and needs.
 *
 * @param array $attributes List of field attributes.
 *
 * @return string The content to render.
 */
function my_custom_block_render( array $attributes ) {
    return '
        <p>This is an example of the value for My Text Field: <strong>' . esc_html( $attributes['my_text_field'] ) . '</strong></p>
        <p>This is another example of the value for My Number Field: <strong>' . esc_html( $attributes['my_color_field'] ) . '</strong></p>
        <p>This is another example of the value for My File Field: <strong>' . esc_html( $attributes['my_file_field'] ) . '</strong></p>
    ';
}

...

Screenshots / screencast

penguin

Changelog text for these changes

Enhancement: Add label to Pods Block API color field. @pdclark Enhancement: Add label to Pods Block API file field. @sc0ttkclark

PR checklist

[x ] I have tested my own code to confirm it works as I intended.
[ x] My code follows the WordPress Coding Standards.
[ x] My code follows the WordPress Inline Documentation Standards.

pods-framework / pods

Wrap ColorPicker in BaseControl for label. #7306