block-editor-additional-components
v2.0.1
Published
This package contains components which will speed up the development of custom Gutenberg Blocks.
Downloads
10
Maintainers
Readme
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:
- Import Imagecontrols into your file like this:
import { ImageControls } from 'block-editor-additional-components'
- The component accepts these props: imgId, handleSelectImage, handleClearImage, title, instructions
- 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.
- 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:
- Import LinkInput into your file like this:
import { LinkInput } from 'block-editor-additional-components'
- The component accepts these props: url content setAttributes attrNameUrl attrNameContent
- Wrap the LinkInput component around the jsx that you would like to use to render the link
- 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>