我正在尝试学习如何为块编辑器创建块。我似乎找不到要添加的表单元素列表。例如，我需要一个切换开关、下拉列表等。

我发现THIS toggle, 但我不知道如何使用它，也找不到任何例子。

这是我的代码，到目前为止，我已经能够添加明文、RichText和MediaUpload。有这些东西的清单吗？更多示例？

const { RichText, MediaUpload, PlainText } = wp.editor;
const { registerBlockType } = wp.blocks;
const { Button } = wp.components;

import \'./style.scss\';
import \'./editor.scss\';

registerBlockType(\'card-block/main\', {
    title: \'Slider\',
    icon: \'images-alt2\',
    category: \'common\',
    attributes: {
        title: {
            source: \'text\',
            selector: \'.slider__title\'
        },
        body: {
            type: \'array\',
            source: \'children\',
            selector: \'.slider__body\'
        },
        imageAlt: {
            attribute: \'alt\',
            selector: \'.slider__image\'
        },
        imageUrl: {
            attribute: \'src\',
            selector: \'.slider__image\'
        }
    },

    edit({ attributes, className, setAttributes }) {
        const getImageButton = (openEvent) => {
            if (attributes.imageUrl) {
                return (
                    <img
                        src={attributes.imageUrl}
                        onClick={openEvent}
                        className="image"
                    />
                );
            }
            else {
                return (
                    <div className="button-container">
                        <Button
                            onClick={openEvent}
                            className="button button-large"
                        >
                            Pick an Image
                        </Button>
                    </div>
                );
            }
        };

        return(
            <div className="container">
                <MediaUpload
                    onSelect={media => { setAttributes({ imageAlt: media.alt, imageUrl: media.url }); }}
                    type="image"
                    value={attributes.imageID}
                    render={({ open }) => getImageButton(open)}
                />
                <PlainText
                    onChange={content => setAttributes({ title: content })}
                    value={attributes.title}
                    placeholder="Your card title"
                    className="heading"
                />
                <RichText
                    onChange={content => setAttributes({ body: content })}
                    value={attributes.body}
                    multiline="p"
                    placeholder="Your card text"
                />
            </div>
        );
    },

    save({ attributes }) {
        const cardImage = (src, alt) => {
            if (!src) return null;

            if (alt) {
                return (
                    <img
                        className="slider__image"
                        src={src}
                        alt={alt}
                    />
                );
            }

            return (
                <img
                    className="slider__image"
                    src={src}
                    alt=""
                    aria-hidden="true"
                />
            );
        };

        return (
            <div className="card">
                {cardImage(attributes.imageUrl, attributes.imageAlt)}
                <div className="slider__content">
                    <h3 className="slider__title">{attributes.title}</h3>
                    <div className="slider__body">
                        {attributes.body}
                    </div>
                </div>
            </div>
        );
    }
});

任何帮助都将不胜感激！我正在学习ES6&；JSX也是如此，所以这是一种痛苦！

import { Button, Dropdown } from \'@wordpress/components\';

const MyDropdown = () => (
    <Dropdown
        className="my-container-class-name"
        contentClassName="my-popover-content-classname"
        position="bottom right"
        renderToggle={ ( { isOpen, onToggle } ) => (
            <Button isPrimary onClick={ onToggle } aria-expanded={ isOpen }>
                Toggle Popover!
            </Button>
        ) }
        renderContent={ () => (
            <div>
                This is the content of the popover.
            </div>
        ) }
    />
);

import { ToggleControl } from \'@wordpress/components\';
import { withState } from \'@wordpress/compose\';

const MyToggleControl = withState( {
    hasFixedBackground: false,
} )( ( { hasFixedBackground, setState } ) => ( 
    <ToggleControl
        label="Fixed Background"
        help={ hasFixedBackground ? \'Has fixed background.\' : \'No fixed background.\' } 
        checked={ hasFixedBackground }
        onChange={ () => setState( ( state ) => ( { hasFixedBackground: ! state.hasFixedBackground } ) ) }
    />
) );