@rtcamp/gb-components

0.1.1 • Public • Published

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

Package Sidebar

Install

npm i @rtcamp/gb-components

Weekly Downloads

13

Version

0.1.1

License

GPL-2.0-or-later

Unpacked Size

607 kB

Total Files

194

Last publish

Collaborators

  • gagan0123
  • rtbot
  • sayed.taqui
  • m.radhe
  • rahul286
  • imranhsayed
  • mrrobot47