在Gutenberg块中创建RangeControl

时间:2019-02-05 作者:C Modi

我正在尝试在古腾堡区块创建rangecontrol,但未能成功,请您分享一些示例代码,我如何才能做到这一点。以下是我目前正在进行的工作

const { __ } = wp.i18n; // Import __() from wp.i18n
import { SelectControl } from \'@wordpress/components\';
import { withState } from \'@wordpress/compose\';
const {
    registerBlockType,
    AlignmentToolbar,
    BlockControls,
    InspectorControls
} = wp.blocks;
const { withSelect } = wp.data;
const blockStyle = {
    backgroundColor: \'#900\',
    color: \'#fff\',
    padding: \'20px\',
};
const MySelectControl = withState( {
    size: \'50%\',
} )( ( { size, setState } ) => (
    <SelectControl
        label="Size"
        value={ size }
        options={ [
            { label: \'Big\', value: \'100%\' },
            { label: \'Medium\', value: \'50%\' },
            { label: \'Small\', value: \'25%\' },
        ] }
        onChange={ ( size ) => { setState( { size } ) } }
    />
) );
registerBlockType( \'mansi-caterers/slider\', {
    title: \'Slider\',
    icon: \'megaphone\',
    category: \'mansi-caterers\',

    edit: withSelect( ( select ) => {
        return {
            posts: select( \'core\' ).getEntityRecords( \'postType\', \'slider\' )
        };
    } )( ( { posts, className } ) => {

        if ( ! posts ) {
            return "Loading...";
        }

        if ( posts && posts.length === 0 ) {
            return "No posts";
        }
        let post = posts[ 0 ];

        // return <a style={blockStyle} className={ className } href={ post.link }>
        //  { post.title.rendered }
        // </a>;
        return <div style={blockStyle} class={className}>Slider Set</div>;
    } ),

    save() {
        // Rendering in PHP
        return null;
    },
} );

1 个回复
SO网友:Alvaro

您正在创建MySelectControl 组件,但未在编辑功能/组件内使用。在那里包含它,它应该出现。

如果希望它显示在设置侧栏中,而不是编辑器中,只需将组件包装在inspector-controls component (来自软件包@wordpress/editor):

<InspectorControls>
    <MySelectControl />
</InspectorControls>

相关推荐