块编辑器：将咏叹调标签添加到SelectControl内的选项

我正在构建一个具有FontAweasome图标的积木。我目前允许用户使用WP选择哪个图标<SelectControl>.

对于个人<option>s、有一种内置的方法可以添加标签。例如：

<SelectControl
    value={ icon }
    options={[
        { label: \'\', value: \'fa-address-book\' }
    ]}
/>

与CSS结合使用，效果很好-下拉菜单显示图标本身，便于视觉良好的用户选择。但是，我想通过添加aria-label 对于每个<option>.

我试过了

<SelectControl
    value={ icon }
    options={[
        { label: \'\', value: \'fa-address-book\', \'aria-label\': \'Address book\' }
    ]}
/>

但是aria-label 不会实际渲染。还有其他方法添加它吗？

我要查找的HTML输出：

<select id="inspector-select-control-0" class="components-select-control__input">
    <option value="fa-address-book" aria-label="Address book"></option>
</select>

我也可以在标签本身中使用仅屏幕阅读器类，但是当我尝试这样做时

<SelectControl
    value={ icon }
    options={[
        { label: \'<span class="show-for-sr">Address book</span>\', value: \'fa-address-book\' }
    ]}
/>

<；和>；标签按字面意思显示在标签中，而不是创建实际的单独HTML<span>.

<option key={ `${ option.label }-${ option.value }-${ index }` } value={ option.value } disabled={ option.disabled } aria-label={ option.ariaLabel || \'\' } > { option.label } </option>

import SelectControl from \'./select-control-custom\'; // make sure the path is correct import { withState } from \'@wordpress/compose\'; const MySelectControl = withState( { size: \'50%\', } )( ( { size, setState } ) => ( <SelectControl label="Size" value={ size } options={ [ { label: \'Big\', value: \'100%\', ariaLabel: \'Aria label for Big\' }, { label: \'Medium\', value: \'50%\', ariaLabel: \'Aria label for Medium\' }, { label: \'Small\', value: \'25%\', ariaLabel: \'Aria label for Small\' }, ] } /> ) );

WP_DROPDOWN_CATEGORIES-如何在Widget中保存？

我想用wp_dropdown_categories 在自定义小部件中。所有内容都显示得很好，但由于某些原因，无法正确保存。这是form() 和update() 小部件的功能-我做错什么了吗？public function form( $instance ) { /* Set up some default widget settings. */ $defaults = array( \'title\' => \'Classes by Category\' );&#x

相关推荐

WP_DROPDOWN_CATEGORIES-如何在Widget中保存？