Visual Editor

const isValidList =
    blocks.length === 1 &&
    blocks[0] &&
    blocks[0].name === 'visual-portfolio/saved-editor';

if (!isValidList) {
    resetBlocks([]);
    insertBlocks(createBlock('visual-portfolio/saved-editor'));
}

// Getting layout meta
$saved_meta = get_post_meta( $post_id );

// Each setting is stored as: vp_{control_name}
// Example: vp_layout, vp_items_gap, vp_tiles_type

if ( ! isset( self::$cached_saved_layout_meta[ $post_id ] ) ) {
    $saved_meta  = get_post_meta( $post_id );
    $result_meta = array();

    // Unserialize array data
    if ( is_array( $saved_meta ) ) {
        foreach ( $saved_meta as $key => $val ) {
            if ( isset( $val[0] ) ) {
                $result_meta[ $key ] = maybe_unserialize( $val[0] );
            }
        }
    }

    self::$cached_saved_layout_meta[ $post_id ] = $result_meta;
}

'category'          => '',      // Category for organization
'type'              => 'text',  // Control type
'label'             => false,   // Display label
'description'       => false,   // Help text
'name'              => '',      // Unique identifier
'value'             => '',      // Default value
'placeholder'       => '',      // Input placeholder
'readonly'          => false,   // Read-only state
'reload_iframe'     => true,    // Reload preview on change
'setup_wizard'      => false,   // Show in setup wizard
'wpml'              => false,   // WPML translation support

'condition' => array(
    array(
        'control'  => 'layout',
        'operator' => '==',
        'value'    => 'grid'
    ),
    array(
        'control'  => 'items_gap',
        'operator' => '>=',
        'value'    => 10
    )
)

'style' => array(
    array(
        'element'  => '.vp-portfolio__item',
        'property' => 'padding',
        'mask'     => '$px'
    ),
    array(
        'element'  => '.vp-portfolio__item-overlay',
        'property' => 'background-color'
    )
)

self::register_categories( array(
    'content-source' => array(
        'title' => esc_html__( 'Content Source', 'visual-portfolio' ),
    ),
    'layouts' => array(
        'title' => esc_html__( 'Layouts', 'visual-portfolio' ),
    ),
    'items-style' => array(
        'title' => esc_html__( 'Items Style', 'visual-portfolio' ),
    ),
    'filter' => array(
        'title' => esc_html__( 'Filter', 'visual-portfolio' ),
    ),
    'pagination' => array(
        'title' => esc_html__( 'Pagination', 'visual-portfolio' ),
    ),
) );

add_action( 'vpf_registered_control', function( $name, $args ) {
    // Your custom logic
}, 10, 2 );

// Register a custom control
Visual_Portfolio_Controls::register( array(
    'category' => 'custom',
    'type'     => 'text',
    'name'     => 'custom_field',
    'label'    => __( 'Custom Field', 'textdomain' ),
    'default'  => 'default value',
) );

// Fields that use string booleans:
// '__show_date'       - 'false' => 'Hide', 'true' => 'Default', 'human' => 'Human Format'
// '__show_read_more'  - 'false' => 'Hide', 'true' => 'Always Display', 'more_tag' => 'More tag'
// '__show_categories' - Boolean select pattern
// '__show_excerpt'    - Boolean select
// '__show_arrows'     - Boolean select

'value_callback' => function( $attributes, $control ) {
    // Return dynamic options based on current settings
    return array(
        'option1' => 'Label 1',
        'option2' => 'Label 2',
    );
}

'reload_iframe' => true  // Default behavior

Visual_Portfolio_Controls::register( array(
    'type'  => 'gallery',
    'name'  => 'images',
    'label' => __( 'Images', 'visual-portfolio' ),
    'focal_point' => true,  // Enable focal point selection
    'image_controls' => array(
        'title' => array(
            'type'  => 'text',
            'label' => __( 'Title', 'visual-portfolio' ),
        ),
        'description' => array(
            'type'  => 'textarea',
            'label' => __( 'Description', 'visual-portfolio' ),
        ),
    ),
) );

[
  {
    id: 123,
    imgUrl: 'https://example.com/image.jpg',
    imgThumbnailUrl: 'https://example.com/image-thumb.jpg',
    title: 'Image Title',
    description: 'Image Description',
    categories: ['category-1', 'category-2']
  }
]

'type'              => 'code_editor',
'mode'              => 'css',
'max_lines'         => 20,
'min_lines'         => 5,
'allow_modal'       => true,
'classes_tree'      => true,  // Show available CSS classes
'encode'            => true,  // Encode output for security

'sanitize_callback' => function( $value, $control ) {
    return absint( $value );
}