https://github.com/danielmilner/wp-block-components

React components for displaying WordPress blocks
https://github.com/danielmilner/wp-block-components

gatsbyjs graphql reactjs wpgraphql

Last synced: 3 days ago
JSON representation

React components for displaying WordPress blocks

• Host: GitHub
• URL: https://github.com/danielmilner/wp-block-components
• Owner: danielmilner
• License: gpl-3.0
• Created: 2019-08-10T23:19:57.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T07:54:33.000Z (about 2 years ago)
• Last Synced: 2025-02-03T01:48:47.108Z (17 days ago)
• Topics: gatsbyjs, graphql, reactjs, wpgraphql
• Language: JavaScript
• Homepage:
• Size: 2.9 MB
• Stars: 6
• Watchers: 3
• Forks: 2
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# WordPress Block Components for React

[![NPM](https://img.shields.io/npm/v/wp-block-components)](https://npmjs.com/package/wp-block-components) ![npm](https://img.shields.io/npm/dt/wp-block-components) ![NPM](https://img.shields.io/npm/l/wp-block-components) [![GitHub issues](https://img.shields.io/github/issues-raw/danielmilner/wp-block-components)](https://github.com/danielmilner/wp-block-components/issues)

React components for displaying Gutenberg blocks from WordPress.

These components were built to be used in combination with [WPGraphQL](https://wpgraphql.com/) and [wp-graphql-gutenberg](https://github.com/pristas-peter/wp-graphql-gutenberg), but can be used in any React project.

View Storybook examples here: [https://wp-block-components.netlify.com](https://wp-block-components.netlify.com)

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.

```js

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

```

## Props

The component has only one prop.

* `block` - A block object returned from WPGraphQL.

### Block prop example

```js

{

	__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](https://developer.wordpress.org/block-editor/developers/themes/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`.