Block Editor Additional Components

This speeds up the development of custom Gutenberg blocks by providing custom components that solve common problems.

ImageControls

This component adds a replacement UI and a Prepublish check to the Media Upload element.

How to use:

1. Import Imagecontrols into your file like this: import { ImageControls } from 'block-editor-additional-components'
2. The component accepts these props: imgId, handleSelectImage, handleClearImage, title, instructions
3. To render the image after it's picked add the image tag that you would like to use as a child of the ImageControls component.
4. To style the image, wrap the ImageControls component in a div.

Code example

<div className='hero-icon'>
    <ImageControls
        imgId={attributes.imgId_icon}
        title="Icon"
        instructions="This is a small Icon to represent this product."
        handleSelectImage={handleSelectIcon}
        handleClearImage={handleClearIcon}
    >
        <img
            className="hero-icon"
            src={attributes.imgUrl_icon}
            alt={attributes.imgAlt_icon}
        />
    </ImageControls>
</div

LinkInput

This component is an input for Link url and text. It displays a warning if either of the fields are unfilled. It accepts the link element as a child.

How to use:

1. Import LinkInput into your file like this: import { LinkInput } from 'block-editor-additional-components'
2. The component accepts these props: url content setAttributes attrNameUrl attrNameContent
3. Wrap the LinkInput component around the jsx that you would like to use to render the link
4. To style the link, wrap the component in a div

Code example

<LinkInput
    url={attributes.urlPrimary}
    content={attributes.ctaPrimary}
    setAttributes={setAttributes}
    changeLink={handleSetPrimaryLink}
    changeCTA={handleSetPrimaryCTA}
>
    <a
        href={attributes.urlPrimary}
        className="hero-navigation-primary-button"
    >
        {attributes.ctaPrimary}
    </a>
</LinkInput>