@tinypixelco/wp-react-hooks
Overview
Block
Post
Editor
useColorsuseFontSizesBasicsList font sizesaddFontSizesetFontSizesuseSettings
Data

useFontSizes

The useFontSizes hook provides an interface for consuming and modifying the block editor preset font sizes.

Basics

Import 

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

Use 

const {fontSizes, setFontSizes, addColor} = useFontSizes()

The fontSizes array is made up of objects that are shaped like this 

{
  name: 'Small',
  shortName: 's',
  size: 8,
  slug: 'small',
}

List font sizes

List all the font sizes registered with WordPress.

import {useFontSizes} from '@tinypixelco/wp-react-hooks'
const component = () => {
  const [fontSizes] = useFontSizes()
  return (
    <div>
      {fontSizes && JSON.stringify(fontSizes)}
    </div>
  )
}

addFontSize

Add a font size to the existing presets.

{addFontSize} = useFontSizes()
addFontSize({
  name: 'Dynamic',
  shortName: 'd',
  size: 69,
  slug: 'dynamic',
})

setFontSizes

Replace the preset sizes with a new set.

{setFontSizes} = useFontSizes()
setFontSizes([
  {
    name: 'Dynamic',
    shortName: 'd',
    size: 69,
    slug: 'dynamic',
  },
])
### addFontSize
```jsx
{fontSizes, setFontSizes} = useFontSizes()
const newFontSize = {
  name: 'Dynamic',
  shortName: 'd',
  size: 69,
  slug: 'dynamic',
}
useEffect(() => {
  setSettings({
    fontSizes: [
      ...fontSizes,
      newFontSize,
    ],
  })
}, [])
export const _frontmatter = {}