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.
;
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
.