古登堡范围控制来自元值的默认值

时间:2019-08-28 作者:Jason RWD

我正试图在管理仪表板的功能图像组件下面添加一个范围控件,我需要从帖子中访问该值,所以我将其保存在post meta中。这一切都很好,但我不知道如何为范围控制设置非零默认值。这是我的代码,首先是组件:

class RangeControlCustom extends React.Component {
    render() {
        const { meta, updateBackgroundPosition } = this.props;

        return (
            el(
                window.wp.components.RangeControl,
                {
                    label: \'Set image position\',
                    help: "Choose where the image is to be aligned within it\'s container. Lower numbers set the top of the image lower, higher numbers set the top of the image higher.",
                    value: ( meta.banner_image_position !== \'\' && meta.banner_image_position !== null ) ? meta.banner_image_position : 50,
                    min: 0,
                    max: 100,
                    onChange:
                        ( value ) => {
                            this.setState( { value: value } );
                            updateBackgroundPosition( value, meta );
                        }
                }
            )
        );
    }
}
现在,包含在功能图像控件下的合成控件:

const composedRangeControl = wp.compose.compose( [
    withState( ( value ) => value ),        
    withSelect( ( select ) => {         
        const currentMeta = select( \'core/editor\' ).getCurrentPostAttribute( \'meta\' );
        const editedMeta = select( \'core/editor\' ).getEditedPostAttribute( \'meta\' );
        return {                
            meta: { ...currentMeta, ...editedMeta },            
        };      
    } ),        
    withDispatch( ( dispatch ) => ( {           
        updateBackgroundPosition( value, meta ) {               
            meta = {                    
                ...meta,                    
                banner_image_position: value,               
            };              
            dispatch( \'core/editor\' ).editPost( { meta } );
        },
    } ) ),
] )( RangeControlCustom );
现在,如果我将组件的值更改为:

value: meta.banner_image_position ? meta.banner_image_position : 50
。。。默认值是正确的,但如果滑块移到零,它将跳到50。我从逻辑的角度理解为什么会这样,但这给我留下了同样的问题。。。如何将默认值设置为零以外的值?

1 个回复
最合适的回答,由SO网友:Alvaro 整理而成

这里的问题在PHP方面。首先,我们需要弄清楚元键之前是否保存过,并将此信息发送给编辑器。一旦进入编辑器,如果元键是新的,我们可以指定一个默认值。

检查的方法是使用get_post_custom_keys. 我们需要检查特定的post id和特定的元密钥。要将此信息发送到JavaScript,我们可以使用rest route, 假设发送一个带有post id和返回布尔值的元键的rest请求;或localize 当前post的输出,然后对照数组进行检查。

最后,在组件中,我们只需要检查它是否存在。如果是,我们将应用默认值value: banner_image_position_has_been_saved ? meta.banner_image_position : 50.

如果有什么不清楚的地方,请告诉我。

相关推荐