wp-block-components

0.2.0 • Public • Published

WordPress Block Components for React

NPM npm NPM GitHub issues

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.

Package Sidebar

Install

npm i wp-block-components

Weekly Downloads

0

Version

0.2.0

License

GPL-3.0-or-later

Unpacked Size

73.8 kB

Total Files

33

Last publish

Collaborators

  • danielmilner