Gutenberg block editor - list of form components for custom blocks

Question

I'm trying to learn how to create blocks for the block editor. I can't seem to find a list of form elements to add. For example, I need a toggle switch, dropdown, etc.

I found THIS toggle, but I'm not sure how to use it and can't find any examples.

Here is my code, so far I have been able to add PlainText, RichText and MediaUpload. Is there a list of these somewhere? More examples?

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>
        );
    }
});

Any help would be greatly appreciated! I am picking up ES6 & JSX as well so this has been a pain!

Answer 1

There are two main packages that provide components which can be used inside the blocks API or the plugins API (to create your own blocks or plugins).

The components found in the wp.components package can be used to manipulate data. This data could be the attributes from a block or the data from your custom store or one of the default stores. They can actually be used outside of the block editor.

The components found in the wp.editor package are meant to be used inside the editor to manipulate it. They are used internally by the block editor itself or core blocks and can be used in your own blocks as well. These components make use of the block editor data stores so they have to be used inside it. Currently, the block editor can only be loaded inside the post editor but this is something that will probably change soon.

Answer 2

You can use this Gutenberg handbook for component list - Component List and if you don't want to keep track of what to import from where which component you can use this VSC Extension (I build it) It will import all the component so that you don't have to waste time on importing.

Here's dropdown code -

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>
        ) }
    />
);

and ToggleControl code -

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 } ) ) }
    />
) );