enhanced on the front end by tom-select. The native * markup is the no-JS fallback; a class-based placeholder (built from tom-select's * own .ts-wrapper/.ts-control classes) is shown while the library mounts so there * is no flash of the unstyled native control. See assets/build/blocks/dropdown. * * @since 1.1.1 */ class Dropdown_Markup extends Base { /** * Whether multiple options can be selected. * * @var bool * @since 1.1.1 */ protected $multi_select = false; /** * Whether the dropdown is searchable. * * @var bool * @since 1.1.1 */ protected $searchable = true; /** * Minimum number of selections (multi-select only; 0 = no minimum). * * @var int * @since 1.1.1 */ protected $min_selection = 0; /** * Maximum number of selections (multi-select only; 0 = no maximum). * * @var int * @since 1.1.1 */ protected $max_selection = 0; /** * Indices of options preselected by default. * * @var array * @since 1.1.1 */ protected $preselected = []; /** * Initialize the properties based on block attributes. * * @param array $attributes Block attributes. * @since 1.1.1 */ public function __construct( $attributes ) { $this->slug = 'dropdown'; $this->multi_select = ! empty( $attributes['multiSelect'] ); $this->searchable = ! isset( $attributes['searchable'] ) || ! empty( $attributes['searchable'] ); $this->min_selection = isset( $attributes['minSelection'] ) ? absint( Helper::get_string_value( $attributes['minSelection'] ) ) : 0; $this->max_selection = isset( $attributes['maxSelection'] ) ? absint( Helper::get_string_value( $attributes['maxSelection'] ) ) : 0; $this->preselected = isset( $attributes['preselectedOptions'] ) && is_array( $attributes['preselectedOptions'] ) ? array_map( 'absint', $attributes['preselectedOptions'] ) : []; $this->set_properties( $attributes ); $this->set_unique_slug(); $this->set_markup_properties(); } /** * Render dropdown markup. * * @since 1.1.1 * @return string */ public function markup() { $classes = $this->get_field_classes( [ 'sd-dropdown-wrap-block' ] ); $aria_desc = $this->get_aria_describedby(); $placeholder = '' !== $this->placeholder ? $this->placeholder : __( 'Select an option', 'suredonation' ); $data_slug = $this->block_slug ? $this->block_slug : $this->unique_slug; // Resolve the preselected option labels (single-select keeps only the first). $selected_labels = []; foreach ( $this->preselected as $index ) { if ( isset( $this->options[ $index ]['label'] ) ) { $selected_labels[] = Helper::get_string_value( $this->options[ $index ]['label'] ); } } if ( ! $this->multi_select && count( $selected_labels ) > 1 ) { $selected_labels = [ $selected_labels[0] ]; } ob_start(); ?>
label_markup ); ?> help_markup ); ?>
placeholder_markup( $placeholder, $selected_labels ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Internal markup, values escaped within. ?> multi_select ) { ?>
error_msg_markup ); ?>
* remains the fallback). See sass/blocks/default/components/dropdown.scss. * * @param string $placeholder Placeholder text. * @param array $selected_labels Preselected option labels. * @return string * @since 1.1.1 */ protected function placeholder_markup( $placeholder, $selected_labels ) { $wrapper_classes = 'sd-dropdown-placeholder ts-wrapper ' . ( $this->multi_select ? 'multi plugin-remove_button' : 'single' ); ob_start(); ?>