WordPress Block Components for React

React components for displaying Gutenberg blocks from WordPress.

These components were built to be used in combination with WPGraphQL and wp-graphql-gutenberg, but can be used in any React project.

Currently supported blocks:

• Code
• Heading
• Image
• List
• Paragraph

Installation and usage

First, install wp-block-components from npm.

yarn add wp-block-components

Next, import the component into your app.

import { CoreBlock } from 'wp-block-components';

Props

The component has only one prop.

• block - A block object returned from WPGraphQL.

Block prop example

{
	__typename: 'WordPress_CoreHeadingBlock',
	attributes: {
		align: null,
		anchor: null,
		className: null,
		content: 'This is a heading',
		level: 2,
	}
}

Styles

These components use the Gutenberg Theme Support classes, just like WordPress. Each block also has its own class in order to easily target your styles. For example, the CoreHeadingBlock component has a class of core-block-heading.