3

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!

4

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.

  • Do you have an example of how I would use the toggleControl or MenuItemsChoice in the above code? It's really hard to find examples – Jon Jan 29 at 4:54
  • Here you go. It's the JS-file for a résumé-item I developed that includes a ToggleControl-component. Related SE-question can be found here, I based my code on this example. – Bram Jan 29 at 7:54
3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.