@tinypixelco/wp-react-hooks

Overview

Block

useBlocks Import Usage Examples useSelection

Post

Editor

Data

useBlocks

The useBlocks hook returns the current active blocks.

Import

import {useBlocks} from '@tinypixelco/wp-react-hooks'

Usage

const {blocks, count} = useBlocks()

Examples

Use `blocks` to list blocks used in post

import {useBlocks} from '@tinypixelco/wp-react-hooks'
const component = () => {
  const {blocks} = useBlocks()
  return (
    <ul>
      {blocks.map((block, id) => <li key={id}>{block.name}</li>)}
    </ul>
  )
}

Display count of blocks used in post

import {useBlocks} from '@tinypixelco/wp-react-hooks'
const component = () => {
  const {count} = useBlocks()
  return (
    <div>
      Blocks used: {count || null}
    </div>
  )
}