npm

Need private packages and team management tools?Check out npm Orgs. »

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.

install

npm i wp-block-components

Downloadsweekly downloads

38

version

0.2.0

license

GPL-3.0-or-later

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability