WordPress Block Components for React
React components for displaying Gutenberg blocks from WordPress.
Currently supported blocks:
Installation and usage
First, install wp-block-components from npm.
yarn add wp-block-components
Next, import the component into your app.
The component has only one prop.
block- A block object returned from WPGraphQL.
Block prop example
__typename: 'WordPress_CoreHeadingBlock'attributes:align: nullanchor: nullclassName: nullcontent: 'This is a heading'level: 2
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