useSettings

The useSettings hook provides an interface for consuming and modifying block editor settings.

Getting started

Import the hook.

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

Call the hook in the top-level of your component.

const [settings, setSettings] = useSettings()

The hook returns an array with the settings object and a function to modify the settings object.

Basic example

import {useSettings} from '@tinypixelco/wp-react-hooks'
import {useEffect} from '@wordpress/element'
const component = () => {
  const [settings, setSettings] = useSettings()
  return (
    <div>
      {settings && JSON.stringify(settings)}
    </div>
  )
}

Use cases

Modify the post title placeholder

useEffect(() => {
  setSettings({
    titlePlaceholder: `Let's get started`,
  })
}, [])

Dynamically add a new font size.

const dynamicFontSize = {
  name: 'Dynamic',
  shortName: 'd',
  size: 69,
  slug: 'dynamic',
}
useEffect(() => {
  setSettings({
    fontSizes: [
      ...settings.fontSizes,
      dynamicFontSize,
    ],
  })
}, [])

Disable custom style settings

useEffect(() => {
  setSettings({
    disableCustomColors: true,
    disableCustomFontSizes: true,
    disableCustomGradients: true,
  })
}, [])

Details

This hook utilizes store/useBlockEditorStore.

Relevant WordPress documentation:

The `settings` object

It's a big object. There is a bit of editorializing going on with the ordering here (most useful seeming stuff at the top).

const settings = {
  alignWide: true,
  allowedBlockTypes: true,
  titlePlaceholder: "Add title",
  bodyPlaceholder: "Start writing or type / to choose a block",
  colors: [
    { name: null, slug: "primary", color: "#0073a8" },
    // ...
  ],
  gradients: [
    {
      name: "Vivid cyan blue to vivid purple",
      gradient: "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
      slug: "vivid-cyan-blue-to-vivid-purple"
    },
    // ...
  ],
  fontSizes: [
    { name: "Small", shortName: "S", size: 19.5, slug: "small" },
    // ...
  ],
  imageSizes: [
    { slug: "thumbnail", name: "Thumbnail" },
    // ...
  ],
  imageDimensions: {
    thumbnail: { width: 150, height: 150, crop: true },
    // ...
  },
  styles: [
    {
      css: ":root{--wp-admin-theme-color:#007cba; ..."
    },
    // ...
  ],
  allowedMimeTypes: null,
  disableCustomColors: false,
  disableCustomFontSizes: false,
  disableCustomGradients: false,
  focusMode: false,
  hasFixedToolbar: false,
  isRTL: false,
  maxWidth: 580,
  maxUploadFileSize: 0,
  availableLegacyWidgets: {
    WP_Widget_Pages: {
      name: "Pages",
      description: "A list of your site’s Pages.",
      isReferenceWidget: false,
      isHidden: true
    },
    // ...
  },
  hasPermissionsToManageWidgets: true,
  '__experimentalBlockPatterns': [
    {
      title: "Two Columns of Text",
      categories: ["columns", text"],
      content: "<!-- wp:columns -->\n<div class=\"wp-block-columns\"> ...",
      name: "core/text-two-columns"
    },
    // ..
  ],
  '__experimentalBlockPatternCategories': [
    { name: "text", label: "Text" },
    // ...
  ],
  '__experimentalCanUserUseUnfilteredHTML': true,
  '__experimentalEnableLegacyWidgetBlock': false,
  '__experimentalBlockDirectory': false,
  '__experimentalEnableFullSiteEditing': false,
  '__experimentalEnableFullSiteEditingDemo': false,
  '__mobileEnablePageTemplates': false,
  '__experimentalDisableCustomUnits': false,
  '__experimentalDisableCustomLineHeight': false,
  '__experimentalEnableCustomSpacing': false,
  '__experimentalEnableLinkColor': false,
  '__experimentalFeatures': { typography: { dropCap: false } },
  '__experimentalPreferredStyleVariations': { value: {} },
  '__experimentalReusableBlocks': []
}