Need a block editor control for a custom select list

[bobbingwide]

Many of the shortcodes for which I'm creating block editor front ends have attributes which can either be chosen from a pre-defined list or can have custom values. e.g. Field	Values
post_type	can be any one of the post types that exist in the system, or a set or comma separated post types
orderby	date / ID / title / parent	/ rand	/ menu_order or a combination
format	a sequence of characters representing fields and the order in which they're displayed
fields	a list of fields to display, one per column of a table

Requirements

• A control that can display the standard options but also allows the custom value to be entered.
• When the field contains the Custom value the select list should indicate this somehow
• Preferably use existing Gutenberg code.

Advanced requirements

• Multiple selection of predefined options with a user defined order
• Ability to display icons and other non-text data in the "selection" part of the list

Proposals seen elsewhere

Blocks

Nivo - I prototyped this with the theme field being a text input that was shared with a select list called t2. See #10 ? Shortcode block - With the shortcode text field and drop down list

Meetup Cheltenham

This subject was very recently discussed in #meetup-cheltenham UK WordPress Slack. A suggestion was

• to fake it with a faux dropdown and a normal text input
• Use JS in some way to populate the text input with whatever you select from the faux input,
• but also have it manually editable
• Dave Beesley created a CodePen https://codepen.io/davebeesley/pen/NWxvqpg
• hide the select unless the input is focused, then only let the user select from the dropdown

Windows print - Pages field

In Windows, when printing, the Pages field allows customised values.

[bobbingwide]

Ability to display icons and other non-text data in the "selection" part of the list

Gutenberg provides a CustomSelectControl which allows users to select an item from a single-option menu just like SelectControl, with the addition of being able to provide custom styles for each item in the menu. This means it does not use a native , so should only be used if the custom styling is necessary.

• © Githubissues.
• Githubissues is a development platform for aggregating issues.