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().