Hello, I am working on a custom element from your Developer Element API docs. I am able to get the element to work fine, except for trying to get one of the controls only to show up when one of three conditions are met. For instance, I’m using a choose type control (key is type in the code below) for multiple options, and I only want my title control to show up when my choose control equals link, button, or full, while remaining hidden for the other three options. It will conditional display if only one of them is listed, but I cannot figure out how to make it work for multiple options.
cs_register_element( 'apos37-file-manager-file', [
// Define a localized title of your element and how it is labeled in the Element Library
'title' => __( 'File', 'apos37' ),
// Define some values that we want to let users customize for this element
'values' => [
'type' => cs_value( 'link', 'attr', false )
],
// Define the control navigation used to organize controls in the Inspector
'control_nav' => [
'file' => __( 'File Manager', 'apos37' ),
'file:setup' => __( 'Setup', 'apos37' ),
'file:design' => __( 'Design', 'apos37' ),
],
// Define the controls that connect to our values.
'controls' => [
[
'key' => 'id',
'type' => 'number',
'group' => 'file:setup',
'label' => __( 'File ID', 'apos37' ),
],
[
'key' => 'type',
'type' => 'choose',
'group' => 'file:setup',
'label' => __( 'Type', 'apos37' ),
'options' => [
'choices' => [
[ 'value' => 'link', 'label' => __( 'Link', 'apos37' ) ],
[ 'value' => 'button', 'label' => __( 'Button', 'apos37' ) ],
[ 'value' => 'title', 'label' => __( 'Title', 'apos37' ) ],
[ 'value' => 'desc', 'label' => __( 'Desc', 'apos37' ) ],
[ 'value' => 'count', 'label' => __( 'Count', 'apos37' ) ],
[ 'value' => 'full', 'label' => __( 'Full', 'apos37' ) ],
]
]
],
[
'key' => 'title',
'type' => 'text',
'group' => 'file:setup',
'label' => __( 'Title', 'apos37' ),
'condition' => [ 'type' => 'link' ], // Works for a single condition
// 'condition' => [ 'type' => 'link, button, full' ], // Does not show up on any
// 'condition' => [ 'type' => [ 'link', 'button', 'full' ] ], // Does not show up on any
// 'condition' => [
// 'type' => 'link',
// 'type' => 'button',
// 'type' => 'full'
// ], // Works only on the last one
// 'condition' => [
// [ 'type' => 'link' ],
// [ 'type' => 'button' ],
// [ 'type' => 'full' ],
// ], // Does not show up on any
// 'conditions' => [ 'type' => 'link, button, full' ], // Error: This element does not have any Inspector controls.
// 'conditions' => [ 'type' => [ 'link', 'button', 'full' ] ], // Error: This element does not have any Inspector controls.
// 'conditions' => [
// 'type' => 'link',
// 'type' => 'button',
// 'type' => 'full'
// ], // Error: This element does not have any Inspector controls.
// 'conditions' => [
// [ 'type' => 'link' ],
// [ 'type' => 'button' ],
// [ 'type' => 'full' ],
// ], // Does not show up on any
],
[
'key' => 'desc',
'type' => 'text',
'group' => 'file:setup',
'label' => __( 'Description', 'apos37' ),
'condition' => [ 'type' => 'full' ],
],
[
'key' => 'formats',
'type' => 'text',
'group' => 'file:setup',
'label' => __( 'Formats', 'apos37' ),
'condition' => [ 'type' => 'link' ],
],
],
// TODO: This is also not showing up
[
'key' => 'content_margin',
'type' => 'margin',
'label' => __( 'Content Margin', 'your-text-domain' ),
'group' => 'file:design',
],
// Connect a function used to render this element
'render' => 'render_file_shortcode',
] );
function render_file_shortcode( $data ) {
extract( $data );
$incl_title = $title ? ' title="' . $title . '"' : '';
$incl_desc = $desc ? ' desc="' . $desc . '"' : '';
$incl_formats = $formats ? ' formats="' . $formats . '"' : '';
return do_shortcode( '[eri_file id="' . $id . '" type="' . $type . '"' . $incl_title . $incl_desc . $incl_formats . ']' );
} // End render_file_shortcode()