Gutenberg 动态 SelectControl 值对象
Gutenberg dynamic SelectControl values object
我想将选项对象动态传递给 Gutenberg SelectControl:
el( SelectControl, {
label: __( 'Animation' ),
value: props.attributes.animation,
onChange: ( value ) => { props.setAttributes( { animation: value } ); },
options: [
{ value: 'date', label: __( 'One column' ) },
{ value: 'title', label: __( 'Two columns' ) },
],
}
),
我有一个 PHP 函数可以 returns 一个可用动画的对象?
function animation( ) {
$animations = array(
'' => 'none',
'fade' => 'fade',
'fade-up' => 'fade-up',
'fade-down' => 'fade-down',
'zoom-out-up' => 'zoom-out-up',
'zoom-out-down' => 'zoom-out-down',
'zoom-out-left' => 'zoom-out-left',
'zoom-out-right' => 'zoom-out-right'
);
return apply_filters( '_animations', $animations );
}
我已经使用 wp_localize_script 来获取数组作为 JS 中的对象:
$variables['animations'] = _functions::_animation();
wp_localize_script( $this->plugin_name, 'meetongo', $variables );
您可以像这样访问该对象:
console.log( meetongo.animations );
我想将选项对象动态传递给 Gutenberg SelectControl:
el( SelectControl, {
label: __( 'Animation' ),
value: props.attributes.animation,
onChange: ( value ) => { props.setAttributes( { animation: value } ); },
options: [
{ value: 'date', label: __( 'One column' ) },
{ value: 'title', label: __( 'Two columns' ) },
],
}
),
我有一个 PHP 函数可以 returns 一个可用动画的对象?
function animation( ) {
$animations = array(
'' => 'none',
'fade' => 'fade',
'fade-up' => 'fade-up',
'fade-down' => 'fade-down',
'zoom-out-up' => 'zoom-out-up',
'zoom-out-down' => 'zoom-out-down',
'zoom-out-left' => 'zoom-out-left',
'zoom-out-right' => 'zoom-out-right'
);
return apply_filters( '_animations', $animations );
}
我已经使用 wp_localize_script 来获取数组作为 JS 中的对象:
$variables['animations'] = _functions::_animation();
wp_localize_script( $this->plugin_name, 'meetongo', $variables );
您可以像这样访问该对象:
console.log( meetongo.animations );