@rtcamp/gb-components

Gutenberg Block Components

A collection of handy custom built components for Gutenberg block development.

Important ⚠️☠️

This package is in early development stages. Please do not use it in production.

Components

Name	About
Accordion	Simple Accordion components.
gif	Allows to embed gif
Map	Allows to embed GoogleMap

and many more...

Installing

npm install @rtcamp/gb-components

How to use?

Import the component you want to use as follows:

/**
 * External dependencies
 */
import { Accordion } from "gutenberg-block-components";

Define required attributes:

	/**
	 * Block attributes.
	 *
	 * @type {Object}
	 */
	attributes: {
		accordion: {
			type: 'array',
			default: [],
		},
		accordionTitleTag: {
			type: 'string',
			default: 'h3',
		},
	},

Each component may have different attribute requirements.

Use the desired component in edit method as follows:

	/**
	 * Creates editor block.
	 *
	 * @param {Object} props Edit props.
	 *
	 * @return {*}
	 */
	edit( props ) {
		return <Accordion { ...props } />;
	},

Here we are passing the block props to the component.

The save method:

	/**
	 * Save
	 *
	 * @param {Object} props Save props.
	 *
	 * @return {*}
	 */
	save( props ) {
		return <Accordion.Content { ...props } />;
	},

Importing related styles from component.

For example for the accordion block,

@import "node_modules/@rtcamp/gb-components/styles/accordion/editor";

Finally register the block using registerBlockType().