Namespace: react

@headstartwp/core.react

@headstartwp/core/react

The react export of the @headstartwp/core package.

Usage

import { BlocksRenderer } from "@headstartwp/core/react";

Interfaces

• AudioBlockProps
• BlockAttributes
• BlockProps
• BlockRendererProps
• ButtonBlockProps
• ButtonsBlockProps
• CodeBlockProps
• Colors
• ColumnBlockProps
• ColumnsBlockProps
• CoverBlockProps
• FetchHookOptions
• FileBlockProps
• GroupBlockProps
• GutenbergBlockProps
• HeadingBlockProps
• HookResponse
• HtmlDecodeProps
• IAudioBlock
• IBlock
• IBlockAttributes
• IButtonBlock
• IButtonsBlock
• ICodeBlock
• IColumnBlock
• IColumnsBlock
• ICoverBlock
• IDataWPBlock
• IFileBlock
• IGroupBlock
• IHeadingBlock
• IImageBlock
• IListBlock
• IMediaTextBlock
• IParagraphBlock
• IPreformattedBlock
• IPullQuoteBlock
• IQuoteBlock
• ISeparatorBlock
• ISpacerBlock
• ITableBlock
• IVerseBlock
• IYoutubeLiteBlock
• ImageBlockProps
• ListBlockProps
• MediaTextBlockProps
• ParagraphBlockProps
• PreformattedBlockProps
• PullQuoteBlockProps
• QuoteBlockProps
• SafeHtmlProps
• SeparatorBlockProps
• SettingsCustomAdditionalProperties
• SettingsProperties
• SpacerBlockProps
• StylesElementsPropertiesComplete
• StylesProperties
• TableBlockProps
• Typography
• VerseBlockProps
• WpThemeJSON
• YoutubeLiteBlockProps
• useAppSettingsResponse
• useFetchOptions
• useMenuResponse
• usePostOrPostResponse
• usePostResponse
• usePostsResponse
• useSearchNativeResponse
• useSearchResponse
• useTermsResponse

Blocks

AudioBlock

▸ AudioBlock(props): Element

The AudioBlock components implements block parsing for the Audio block.

This component must be used within a BlocksRenderer component.

<BlocksRenderer html={html}>
    <AudioBlock component={DebugComponent} />
</BlocksRenderer>

Parameters

Name	Type	Description
props	IAudioBlock	Component properties

Returns

Element

Defined in

packages/core/src/react/blocks/AudioBlock.tsx:58

---

ButtonBlock

▸ ButtonBlock(props): Element

The ButtonBlock component implements block parsing for the Button block.

This component must be used within a BlocksRenderer component.

<BlocksRenderer html={html}>
    <ButtonBlock component={DebugComponent} />
</BlocksRenderer>

Parameters

Name	Type	Description
props	IButtonBlock	Component properties

Returns

Element

Defined in

packages/core/src/react/blocks/ButtonBlock.tsx:62

---

ButtonsBlock

▸ ButtonsBlock(props): Element

The ButtonsBlock component implements block parsing for the Buttons block.

This component must be used within a BlocksRenderer component.

<BlocksRenderer html={html}>
    <ButtonsBlock component={DebugComponent} />
</BlocksRenderer>

Parameters

Name	Type	Description
props	IButtonsBlock	Component properties

Returns

Element

Defined in

packages/core/src/react/blocks/ButtonsBlock.tsx:28

---

CodeBlock

▸ CodeBlock(props): Element

The CodeBlock component implements block parsing for the core/code block.

This component must be used within a BlocksRenderer component.

<BlocksRenderer html={html}>
    <CodeBlock component={DebugComponent} />
</BlocksRenderer>

Parameters

Name	Type	Description
props	ICodeBlock	Component properties

Returns

Element

Defined in

packages/core/src/react/blocks/CodeBlock.tsx:32

Data Fetching Hooks

useFetch

▸ useFetch<E, Params, R>(params, fetchStrategy, options?, path?): Object

The use Fetch Hook is the foundation for most hooks in the headless framework. It is a wrapper around useSWR and provides a consistent API for fetching data from the API. It requires a fetch strategy which implements the actual data fetching logic

Type parameters

Name	Type
E	E
Params	extends EndpointParams
R	E

Parameters

Name	Type	Default value	Description
params	{} | Params	undefined	The list of params to pass to the fetch strategy. It overrides the ones in the URL.
fetchStrategy	AbstractFetchStrategy<E, Params, R>	undefined	The fetch strategy.
options	FetchHookOptions<FetchResponse<R>>	{}	The options to pass to the swr hook.
path	string	''	The path of the url to get url params from.

Returns

Object

Name	Type	Description
data	undefined | FetchResponse<R>	The returned data of the fetcher function.
error	any	The error object thrown by the fetcher function.
isLoading	boolean	-
isMainQuery	boolean	-
isValidating	boolean	-
mutate	KeyedMutator<FetchResponse<R>>	-
params	Partial<Params>	-

Defined in

packages/core/src/react/hooks/useFetch.ts:30

---

useFetchAppSettings

▸ useFetchAppSettings<T, P>(params?, options?): useAppSettingsResponse<T>

The useAppSettings hook

See useAppSettings

Type parameters

Name	Type
T	extends AppEntity = AppEntity
P	extends EndpointParams = EndpointParams

Parameters

Name	Type	Description
params	{} | P	The list of params to pass to the fetch strategy. It overrides the ones in the URL.
options	FetchHookOptions<FetchResponse<T>>	The options to pass to the swr hook.

Returns

useAppSettingsResponse<T>

Defined in

packages/core/src/react/hooks/useFetchAppSettings.ts:23

---

useFetchMenu

▸ useFetchMenu(menuLocation, options?): useMenuResponse

The useFetchMenu hooks. Returns a Menu object.

Parameters

Name	Type	Description
menuLocation	string	The slug of the menu location you want to fetch
options	FetchHookOptions<FetchResponse<AppEntity>>	SWR configuration options

Returns

useMenuResponse

Defined in

packages/core/src/react/hooks/useFetchMenu.ts:50

---

useFetchPosts

▸ useFetchPosts<T, P>(params?, options?, path?, fetcher?): usePostsResponse<T>

The useFetchPosts hook. Returns a collection of post entities

See usePosts for usage instructions.

Type parameters

Name	Type
T	extends PostEntity = PostEntity
P	extends PostsArchiveParams = PostsArchiveParams

Parameters

Name	Type	Default value	Description
params	{} | P	{}	The list of params to pass to the fetch strategy. It overrides the ones in the URL.
options	FetchHookOptions<FetchResponse<T[]>>	{}	The options to pass to the swr hook.
path	string	''	The path of the url to get url params from.
fetcher	undefined | PostsArchiveFetchStrategy<T, P>	undefined	The fetch strategy to use. If none is passed, the default one is used

Returns

usePostsResponse<T>

Defined in

packages/core/src/react/hooks/useFetchPosts.ts:81

---

useFetchSearch

▸ useFetchSearch<T, P>(params?, options?, path?): useSearchResponse<T>

The useFetchSearch hook. Returns a collection of post entities

See useSearch for usage instructions.

Type parameters

Name	Type
T	extends PostEntity = PostEntity
P	extends PostsArchiveParams = PostsArchiveParams

Parameters

Name	Type	Default value	Description
params	{} | P	{}	The list of params to pass to the fetch strategy. It overrides the ones in the URL.
options	FetchHookOptions<FetchResponse<T[]>>	{}	The options to pass to the swr hook.
path	string	''	The path of the url to get url params from.

Returns

useSearchResponse<T>

Defined in

packages/core/src/react/hooks/useFetchSearch.ts:34

---

useFetchSearchNative

▸ useFetchSearchNative<T, P>(params?, options?, path?): useSearchNativeResponse<T>

The useFetchSearchNative hook. Returns a collection of search entities retrieved through the WP native search endpoint

See useSearchNative for usage instructions.

Type parameters

Name	Type
T	extends PostSearchEntity | TermSearchEntity = PostSearchEntity | TermSearchEntity
P	extends SearchParams = SearchParams

Parameters

Name	Type	Default value	Description
params	{} | P	{}	The list of params to pass to the fetch strategy. It overrides the ones in the URL.
options	FetchHookOptions<FetchResponse<T[]>>	{}	The options to pass to the swr hook.
path	string	''	The path of the url to get url params from.

Returns

useSearchNativeResponse<T>

Defined in

packages/core/src/react/hooks/useFetchSearchNative.ts:37

---

useFetchTerms

▸ useFetchTerms<T, P>(params, options?, path?): useTermsResponse<T>

The useFetchTerms hook. Returns a collection of term entities

See useTerms for usage instructions.

Type parameters

Name	Type
T	extends TermEntity = TermEntity
P	extends TaxonomyArchiveParams = TaxonomyArchiveParams

Parameters

Name	Type	Default value	Description
params	{} | P	undefined	The list of params to pass to the fetch strategy. It overrides the ones in the URL.
options	FetchHookOptions<FetchResponse<T[]>>	{}	The options to pass to the swr hook.
path	string	''	The path of the url to get url params from.

Returns

useTermsResponse<T>

Defined in

packages/core/src/react/hooks/useFetchTerms.ts:31

Other

Align

Ƭ Align: "none" | "left" | "center" | "right" | "wide" | "full"

Defined in

packages/core/src/react/blocks/types.ts:15

---

Border

Ƭ Border: Object

Type declaration

Name	Type
radius?	string
style?	string
width?	string

Defined in

packages/core/src/react/blocks/types.ts:65

---

DataFetchingProviderProps

Ƭ DataFetchingProviderProps: Object

Type declaration

Name	Type	Description
data	SWRConfiguration["fallback"]	-
swrConfig	SWRConfiguration	Pass any configuration to the SWR library. Globally. These settings can be overridden at the hook level.

Defined in

packages/core/src/react/provider/DataFetchingProvider.tsx:6

---

ItemWrapper

Ƭ ItemWrapper: (props: ItemWrapperProps) => JSX.Element

Type declaration

▸ (props): JSX.Element

Parameters

Name	Type
props	ItemWrapperProps

Returns

JSX.Element

Defined in

packages/core/src/react/components/Menu.tsx:15

---

ItemWrapperProps

Ƭ ItemWrapperProps: PropsWithChildren<{ className: string ; depth: number ; item: MenuItemEntity }>

Defined in

packages/core/src/react/components/Menu.tsx:10

---

LinkWrapper

Ƭ LinkWrapper: (props: LinkWrapperProps) => JSX.Element

Type declaration

▸ (props): JSX.Element

Parameters

Name	Type
props	LinkWrapperProps

Returns

JSX.Element

Defined in

packages/core/src/react/components/Menu.tsx:27

---

LinkWrapperProps

Ƭ LinkWrapperProps: PropsWithChildren<{ depth: number ; href: string }>

Defined in

packages/core/src/react/components/Menu.tsx:23

---

MenuItemsProp

Ƭ MenuItemsProp: Object

Type declaration

Name	Type
depth	number
itemWrapper	ItemWrapper
items	MenuItemEntity[]
linkWrapper	LinkWrapper
menuWrapper	MenuWrapper
topLevelItemsClickable	boolean

Defined in

packages/core/src/react/components/Menu.tsx:29

---

MenuWrapper

Ƭ MenuWrapper: (props: MenuWrapperProps) => JSX.Element

Type declaration

▸ (props): JSX.Element

Parameters

Name	Type
props	MenuWrapperProps

Returns

JSX.Element

Defined in

packages/core/src/react/components/Menu.tsx:21

---

MenuWrapperProps

Ƭ MenuWrapperProps: PropsWithChildren<{ className: string ; depth: number }>

Defined in

packages/core/src/react/components/Menu.tsx:17

---

PageType

Ƭ PageType: Object

Type declaration

Name	Type	Description
isAuthorArchive	boolean	Author Archive
isCategoryArchive	boolean	Category Archive
isPostArchive	boolean	Regular post archive
isPostTypeArchive	boolean	Custom Post Type Archive
isSearch	boolean	Search route
isTagArchive	boolean	Tag Archive
isTaxonomyArchive	boolean	Custom Taxonomy Archive
postType	string	Which post type this archive is for
taxonomy	string	Which taxonomy this archive is for

Defined in

packages/core/src/react/hooks/useFetchPosts.ts:20

---

SettingsColorPalette

Ƭ SettingsColorPalette: Object

Type declaration

Name	Type
default?	SettingsColorPreset[]
theme?	SettingsColorPreset[]
user?	SettingsColorPreset[]

Defined in

packages/core/src/react/provider/types.ts:47

---

SettingsColorPreset

Ƭ SettingsColorPreset: Object

Type declaration

Name	Type	Description
color	string	CSS hex or rgb(a) string.
name	string	Name of the color preset, translatable.
slug	string	Kebab-case unique identifier for the color preset.

Defined in

packages/core/src/react/provider/types.ts:32

---

SettingsContextProps

Ƭ SettingsContextProps: { imageComponent?: React.FC<IImageBlock> ; linkComponent?: ReactNode } & HeadlessConfig

Defined in

packages/core/src/react/provider/types.ts:5

---

SettingsDuotone

Ƭ SettingsDuotone: Object

Type declaration

Name	Type
default?	SettingsDuotonePreset[]
theme?	SettingsDuotonePreset[]
user?	SettingsDuotonePreset[]

Defined in

packages/core/src/react/provider/types.ts:89

---

SettingsDuotonePreset

Ƭ SettingsDuotonePreset: Object

Type declaration

Name	Type	Description
colors	string[]	List of colors from dark to light.
name	string	Name of the duotone preset, translatable.
slug	string	Kebab-case unique identifier for the duotone preset.

Defined in

packages/core/src/react/provider/types.ts:74

---

SettingsGradient

Ƭ SettingsGradient: Object

Type declaration

Name	Type
default?	SettingsGradientPreset[]
theme?	SettingsGradientPreset[]
user?	SettingsGradientPreset[]

Defined in

packages/core/src/react/provider/types.ts:68

---

SettingsGradientPreset

Ƭ SettingsGradientPreset: Object

Type declaration

Name	Type	Description
gradient	string	CSS gradient string.
name	string	Name of the gradient preset, translatable.
slug	string	Kebab-case unique identifier for the gradient preset.

Defined in

packages/core/src/react/provider/types.ts:53

---

SettingsPropertiesComplete

Ƭ SettingsPropertiesComplete: SettingsProperties & { border?: SettingsProperties["border"] ; color?: SettingsProperties["color"] ; custom?: SettingsProperties["custom"] ; layout?: SettingsProperties["layout"] ; spacing?: SettingsProperties["spacing"] ; typography?: SettingsProperties["typography"] }

Defined in

packages/core/src/react/provider/types.ts:10

---

Spacing

Ƭ Spacing: Object

Type declaration

Name	Type
blockGap	string
margin	{ bottom: string ; left: string ; right: string ; top: string }
margin.bottom	string
margin.left	string
margin.right	string
margin.top	string
padding	{ bottom: string ; left: string ; right: string ; top: string }
padding.bottom	string
padding.left	string
padding.right	string
padding.top	string
supportsBlockGap	boolean
supportsMargin	boolean
supportsPadding	boolean

Defined in

packages/core/src/react/blocks/types.ts:40

---

Style

Ƭ Style: Object

Type declaration

Name	Type
border	Border
spacing	Spacing
typography	Typography

Defined in

packages/core/src/react/blocks/types.ts:17

---

StylesPropertiesAndElementsComplete

Ƭ StylesPropertiesAndElementsComplete: StylesProperties & { border?: SettingsProperties["border"] ; color?: SettingsProperties["color"] ; elements?: StylesElementsPropertiesComplete ; spacing?: SettingsProperties["spacing"] ; typography?: SettingsProperties["typography"] }

Defined in

packages/core/src/react/provider/types.ts:24

---

StylesPropertiesComplete

Ƭ StylesPropertiesComplete: StylesProperties & { border?: SettingsProperties["border"] ; color?: SettingsProperties["color"] ; spacing?: SettingsProperties["spacing"] ; typography?: SettingsProperties["typography"] }

Defined in

packages/core/src/react/provider/types.ts:18

---

ThemeJSON

Ƭ ThemeJSON: Pick<WpThemeJSON, "styles" | "settings">

Defined in

packages/core/src/react/provider/types.ts:352

---

SettingsContext

• Const SettingsContext: Context<Partial<SettingsContextProps>>

Defined in

packages/core/src/react/provider/Provider.tsx:5

---

ThemeSettingsContext

• Const ThemeSettingsContext: Context<ThemeJSON>

Defined in

packages/core/src/react/provider/ThemeSettingsProvider.tsx:4

---

defaultElement

• Const defaultElement: Element

Defined in

packages/core/src/react/blocks/hooks/useBlock.ts:8

---

ColumnBlock

▸ ColumnBlock(«destructured»): Element

Parameters

Name	Type
«destructured»	IColumnBlock

Returns

Element

Defined in

packages/core/src/react/blocks/ColumnBlock.tsx:11

---

ColumnsBlock

▸ ColumnsBlock(«destructured»): Element

Parameters

Name	Type
«destructured»	IColumnsBlock

Returns

Element

Defined in

packages/core/src/react/blocks/ColumnsBlocks.tsx:11

---

CoverBlock

▸ CoverBlock(«destructured»): Element

Parameters

Name	Type
«destructured»	ICoverBlock

Returns

Element

Defined in

packages/core/src/react/blocks/CoverBlock.tsx:24

---

DataFetchingProvider

▸ DataFetchingProvider(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
props	PropsWithChildren<DataFetchingProviderProps>
context?	any

Returns

null | ReactElement<any, any>

Defined in

node_modules/@types/react/index.d.ts:542

---

DebugBlock

▸ DebugBlock(«destructured»): Element

Parameters

Name	Type
«destructured»	Object

Returns

Element

Defined in

packages/core/src/react/blocks/DebugBlock.tsx:7

---

FileBlock

▸ FileBlock(«destructured»): Element

Parameters

Name	Type
«destructured»	IFileBlock

Returns

Element

Defined in

packages/core/src/react/blocks/FileBlock.tsx:14

---

GroupBlock

▸ GroupBlock(«destructured»): Element

Parameters

Name	Type
«destructured»	IGroupBlock

Returns

Element

Defined in

packages/core/src/react/blocks/GroupBlock.tsx:17

---

HeadingBlock

▸ HeadingBlock(«destructured»): Element

Parameters

Name	Type
«destructured»	IHeadingBlock

Returns

Element

Defined in

packages/core/src/react/blocks/HeadingBlock.tsx:12

---

ImageBlock

▸ ImageBlock(«destructured»): Element

Parameters

Name	Type
«destructured»	IImageBlock

Returns

Element

Defined in

packages/core/src/react/blocks/ImageBlock.tsx:19

---

ListBlock

▸ ListBlock(«destructured»): Element

Parameters

Name	Type
«destructured»	IListBlock

Returns

Element

Defined in

packages/core/src/react/blocks/ListBlock.tsx:12

---

MediaTextBlock

▸ MediaTextBlock(«destructured»): Element

Parameters

Name	Type
«destructured»	IMediaTextBlock

Returns

Element

Defined in

packages/core/src/react/blocks/MediaTextBlock.tsx:22

---

Menu

▸ Menu(«destructured»): Element

Parameters

Name	Type
«destructured»	MenuProps

Returns

Element

Defined in

packages/core/src/react/components/Menu.tsx:109

---

MenuItems

▸ MenuItems(«destructured»): Element

Parameters

Name	Type
«destructured»	MenuItemsProp

Returns

Element

Defined in

packages/core/src/react/components/Menu.tsx:54

---

ParagraphBlock

▸ ParagraphBlock(«destructured»): Element

Parameters

Name	Type
«destructured»	IParagraphBlock

Returns

Element

Defined in

packages/core/src/react/blocks/ParagraphBlock.tsx:13

---

PreformattedBlock

▸ PreformattedBlock(«destructured»): Element

Parameters

Name	Type
«destructured»	IPreformattedBlock

Returns

Element

Defined in

packages/core/src/react/blocks/PreformatedBlock.tsx:11

---

PullQuoteBlock

▸ PullQuoteBlock(«destructured»): Element

Parameters

Name	Type
«destructured»	IPullQuoteBlock

Returns

Element

Defined in

packages/core/src/react/blocks/PullQuote.tsx:15

---

QuoteBlock

▸ QuoteBlock(«destructured»): Element

Parameters

Name	Type
«destructured»	IQuoteBlock

Returns

Element

Defined in

packages/core/src/react/blocks/QuoteBlock.tsx:10

---

SeparatorBlock

▸ SeparatorBlock(«destructured»): Element

Parameters

Name	Type
«destructured»	ISeparatorBlock

Returns

Element

Defined in

packages/core/src/react/blocks/SeparatorBlock.tsx:10

---

SettingsProvider

▸ SettingsProvider(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
props	PropsWithChildren<ProviderProps>
context?	any

Returns

null | ReactElement<any, any>

Defined in

node_modules/@types/react/index.d.ts:542

---

SpacerBlock

▸ SpacerBlock(«destructured»): Element

Parameters

Name	Type
«destructured»	ISpacerBlock

Returns

Element

Defined in

packages/core/src/react/blocks/SpacerBlock.tsx:12

---

TableBlock

▸ TableBlock(«destructured»): Element

Parameters

Name	Type
«destructured»	ITableBlock

Returns

Element

Defined in

packages/core/src/react/blocks/TableBlock.tsx:12

---

ThemeSettingsProvider

▸ ThemeSettingsProvider(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
props	PropsWithChildren<ProviderProps>
context?	any

Returns

null | ReactElement<any, any>

Defined in

node_modules/@types/react/index.d.ts:542

---

VerseBlock

▸ VerseBlock(«destructured»): Element

Parameters

Name	Type
«destructured»	IVerseBlock

Returns

Element

Defined in

packages/core/src/react/blocks/VerseBlock.tsx:11

---

YoutubeLiteBlock

▸ YoutubeLiteBlock(props): Element

Renders Youtube embeds with lite-youtube-embed

Parameters

Name	Type	Description
props	Omit<IYoutubeLiteBlock, "component">	The Block props

Returns

Element

Defined in

packages/core/src/react/blocks/YoutubeLiteBlock.tsx:42

---

getAlignStyle

▸ getAlignStyle(domNode): "none" | "left" | "center" | "right" | "wide" | "full"

Parameters

Name	Type
domNode	Element

Returns

"none" | "left" | "center" | "right" | "wide" | "full"

Defined in

packages/core/src/react/blocks/utils.ts:5

---

getBlockStyle

▸ getBlockStyle(domNode): string

Returns the block style (is-style-{block-style})

Parameters

Name	Type	Description
domNode	Element	DomNode

Returns

string

string with block style

Defined in

packages/core/src/react/blocks/utils.ts:39

---

getColorStyles

▸ getColorStyles(domNode): Colors

Infer GB color styles from classnames

Parameters

Name	Type	Description
domNode	Element	DomNode

Returns

Colors

ColorBlockProps object

Defined in

packages/core/src/react/blocks/utils.ts:62

---

getInlineStyles

▸ getInlineStyles(domNode): false | Record<string, string>

Converts inline styles to a stylesObject for use in react components

Parameters

Name	Type	Description
domNode	Element	DomNode

Returns

false | Record<string, string>

Defined in

packages/core/src/react/blocks/utils.ts:120

---

getTypographyStyles

▸ getTypographyStyles(domNode): Object

Returns the typography styles of a block

Parameters

Name	Type	Description
domNode	Element	DomNode

Returns

Object

Name	Type
fontSize	string
style	{ fontSize: string = ''; lineHeight: string = '' }
style.fontSize	string
style.lineHeight	string

Defined in

packages/core/src/react/blocks/utils.ts:177

---

getWidthStyles

▸ getWidthStyles(domNode): undefined | string

Returns the width size of a block

Parameters

Name	Type	Description
domNode	Element	DomNode

Returns

undefined | string

Defined in

packages/core/src/react/blocks/utils.ts:149

---

parseSeo

▸ parseSeo(seo, options?): string | Element | Element[]

Parameters

Name	Type
seo	string
options	HTMLReactParserOptions

Returns

string | Element | Element[]

Defined in

packages/core/src/react/utils/parseSeo.ts:4

---

safeArraySpread

▸ safeArraySpread(array): any[]

Parameters

Name	Type
array	any

Returns

any[]

Defined in

packages/core/src/react/blocks/utils.ts:220

---

serializeKey

▸ serializeKey(key): string

Parameters

Name	Type
key	Key

Returns

string

Defined in

node_modules/swr/core/dist/index.d.ts:17

---

useBlock

▸ useBlock<T>(node?): Object

Returns the block name and attributes

Type parameters

Name	Type
T	extends IBlockAttributes

Parameters

Name	Type	Description
node?	Element	DomNode

Returns

Object

Name	Type
attributes	T
className	string
name	string

Defined in

packages/core/src/react/blocks/hooks/useBlock.ts:38

---

useBlockAlign

▸ useBlockAlign(node): Align

Returns the block align style (if available)

Parameters

Name	Type	Description
node	Element	DomNode

Returns

Align

Defined in

packages/core/src/react/blocks/hooks/useBlockAlign.ts:16

---

useBlockAttributes

▸ useBlockAttributes(node?): Object

useBlockAttributes hooks returns the block attributes for a given block based on what it supports

Parameters

Name	Type	Description
node?	Element	The reference to the dom node of the block

Returns

Object

Name	Type
align	Align
blockStyle	string
border	Border
colors	Colors
spacing	Spacing
typography	Typography
width	undefined | string

Defined in

packages/core/src/react/blocks/hooks/useBlockAttributes.ts:19

---

useBlockBorder

▸ useBlockBorder(node): Border

Returns the block style (if available)

Parameters

Name	Type	Description
node	Element	DomNode

Returns

Border

Defined in

packages/core/src/react/blocks/hooks/useBlockBorder.ts:17

---

useBlockColors

▸ useBlockColors(node): Colors

Returns the block style (if available)

Parameters

Name	Type	Description
node	Element	DomNode

Returns

Colors

Defined in

packages/core/src/react/blocks/hooks/useBlockColors.ts:25

---

useBlockSpacing

▸ useBlockSpacing(node): Spacing

Returns the block style (if available)

Parameters

Name	Type	Description
node	Element	DomNode

Returns

Spacing

Defined in

packages/core/src/react/blocks/hooks/useBlockSpacing.ts:21

---

useBlockStyle

▸ useBlockStyle(node): string

Returns the block style (if available)

Parameters

Name	Type	Description
node	Element	DomNode

Returns

string

Defined in

packages/core/src/react/blocks/hooks/useBlockStyle.ts:10

---

useBlockTypography

▸ useBlockTypography(node): Typography

Returns the block style (if available)

Parameters

Name	Type	Description
node	Element	DomNode

Returns

Typography

Defined in

packages/core/src/react/blocks/hooks/useBlockTypography.ts:25

---

useBlockWidth

▸ useBlockWidth(node): undefined | string

Returns the block style (if available)

Parameters

Name	Type	Description
node	Element	DomNode

Returns

undefined | string

Defined in

packages/core/src/react/blocks/hooks/useBlockWidth.ts:16

---

useFetchAuthorArchive

▸ useFetchAuthorArchive<T, P>(params?, options?, path?): usePostsResponse<T>

The useFetchAuthorArchive hook

See useAuthorArchive

Type parameters

Name	Type
T	extends PostEntity = PostEntity
P	extends PostsArchiveParams = PostsArchiveParams

Parameters

Name	Type	Default value	Description
params	{} | PostEntity	{}	The list of params to pass to the fetch strategy. It overrides the ones in the URL.
options	FetchHookOptions<FetchResponse<T[]>>	{}	The options to pass to the swr hook.
path	string	''	The path of the url to get url params from.

Returns

usePostsResponse<T>

Defined in

packages/core/src/react/hooks/useFetchAuthorArchive.ts:22

---

useFetchPost

▸ useFetchPost<T, P>(params?, options?, path?): usePostResponse<T>

Type parameters

Name	Type
T	extends PostEntity = PostEntity
P	extends PostParams = PostParams

Parameters

Name	Type	Default value
params	{} | P	{}
options	FetchHookOptions<FetchResponse<T>>	{}
path	string	''

Returns

usePostResponse<T>

Defined in

packages/core/src/react/hooks/useFetchPost.ts:36

---

useFetchPostOrPosts

▸ useFetchPostOrPosts<T, P>(params?, options?, path?): usePostOrPostResponse<T>

Type parameters

Name	Type
T	extends PostEntity = PostEntity
P	extends PostOrPostsParams = PostOrPostsParams

Parameters

Name	Type	Default value
params	Partial<P>	{}
options	FetchHookOptions<FetchResponse<PostOrPostsFetchStrategyResult<T>>>	{}
path	string	''

Returns

usePostOrPostResponse<T>

Defined in

packages/core/src/react/hooks/useFetchPostOrPosts.ts:32

---

useSWR

▸ useSWR<Data, Error, SWRKey>(key): SWRResponse<Data, Error, any>

A hook to fetch data.

Link

https://swr.vercel.app

Example

import useSWR from 'swr'
function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

Type parameters

Name	Type
Data	any
Error	any
SWRKey	extends Key = StrictKey

Parameters

Name	Type
key	SWRKey

Returns

SWRResponse<Data, Error, any>

Defined in

node_modules/swr/_internal/dist/index.d.ts:200

▸ useSWR<Data, Error, SWRKey>(key, fetcher): SWRResponse<Data, Error, any>

A hook to fetch data.

Link

https://swr.vercel.app

Example

import useSWR from 'swr'
function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

Type parameters

Name	Type
Data	any
Error	any
SWRKey	extends Key = StrictKey

Parameters

Name	Type
key	SWRKey
fetcher	null | Fetcher<Data, SWRKey>

Returns

SWRResponse<Data, Error, any>

Defined in

node_modules/swr/_internal/dist/index.d.ts:201

▸ useSWR<Data, Error, SWRKey, SWROptions>(key, config): SWRResponse<Data, Error, SWROptions>

A hook to fetch data.

Link

https://swr.vercel.app

Example

import useSWR from 'swr'
function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

Type parameters

Name	Type
Data	any
Error	any
SWRKey	extends Key = StrictKey
SWROptions	extends undefined | Partial<PublicConfiguration<Data, Error, Fetcher<Data, SWRKey>>> = undefined | Partial<PublicConfiguration<Data, Error, Fetcher<Data, SWRKey>>>

Parameters

Name	Type
key	SWRKey
config	SWROptions

Returns

SWRResponse<Data, Error, SWROptions>

Defined in

node_modules/swr/_internal/dist/index.d.ts:202

▸ useSWR<Data, Error, SWRKey, SWROptions>(key, fetcher, config): SWRResponse<Data, Error, SWROptions>

A hook to fetch data.

Link

https://swr.vercel.app

Example

import useSWR from 'swr'
function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

Type parameters

Name	Type
Data	any
Error	any
SWRKey	extends Key = StrictKey
SWROptions	extends undefined | Partial<PublicConfiguration<Data, Error, Fetcher<Data, SWRKey>>> = undefined | Partial<PublicConfiguration<Data, Error, Fetcher<Data, SWRKey>>>

Parameters

Name	Type
key	SWRKey
fetcher	null | Fetcher<Data, SWRKey>
config	SWROptions

Returns

SWRResponse<Data, Error, SWROptions>

Defined in

node_modules/swr/_internal/dist/index.d.ts:203

▸ useSWR<Data, Error>(key): SWRResponse<Data, Error, any>

A hook to fetch data.

Link

https://swr.vercel.app

Example

import useSWR from 'swr'
function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

Type parameters

Name	Type
Data	any
Error	any

Parameters

Name	Type
key	Key

Returns

SWRResponse<Data, Error, any>

Defined in

node_modules/swr/_internal/dist/index.d.ts:204

▸ useSWR<Data, Error>(key, fetcher): SWRResponse<Data, Error, any>

A hook to fetch data.

Link

https://swr.vercel.app

Example

import useSWR from 'swr'
function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

Type parameters

Name	Type
Data	any
Error	any

Parameters

Name	Type
key	Key
fetcher	null | BareFetcher<Data>

Returns

SWRResponse<Data, Error, any>

Defined in

node_modules/swr/_internal/dist/index.d.ts:205

▸ useSWR<Data, Error, SWROptions>(key, config): SWRResponse<Data, Error, SWROptions>

A hook to fetch data.

Link

https://swr.vercel.app

Example

import useSWR from 'swr'
function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

Type parameters

Name	Type
Data	any
Error	any
SWROptions	extends undefined | Partial<PublicConfiguration<Data, Error, BareFetcher<Data>>> = undefined | Partial<PublicConfiguration<Data, Error, BareFetcher<Data>>>

Parameters

Name	Type
key	Key
config	SWROptions

Returns

SWRResponse<Data, Error, SWROptions>

Defined in

node_modules/swr/_internal/dist/index.d.ts:206

▸ useSWR<Data, Error, SWROptions>(key, fetcher, config): SWRResponse<Data, Error, SWROptions>

A hook to fetch data.

Link

https://swr.vercel.app

Example

import useSWR from 'swr'
function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

Type parameters

Name	Type
Data	any
Error	any
SWROptions	extends undefined | Partial<PublicConfiguration<Data, Error, BareFetcher<Data>>> = undefined | Partial<PublicConfiguration<Data, Error, BareFetcher<Data>>>

Parameters

Name	Type
key	Key
fetcher	null | BareFetcher<Data>
config	SWROptions

Returns

SWRResponse<Data, Error, SWROptions>

Defined in

node_modules/swr/_internal/dist/index.d.ts:207

---

useSWRConfig

▸ useSWRConfig(): FullConfiguration<any, any, BareFetcher<unknown>>

Returns

FullConfiguration<any, any, BareFetcher<unknown>>

Defined in

node_modules/swr/_internal/dist/index.d.ts:336

---

useSettings

▸ useSettings(): Partial<SettingsContextProps>

Returns

Partial<SettingsContextProps>

Defined in

packages/core/src/react/provider/useSettings.ts:4

---

useThemeSetting

▸ useThemeSetting(path, blockName?, defaultValue?, fallbackToGlobalSetting?): any

Returns a single theme setting normalized

Parameters

Name	Type	Default value	Description
path	string	undefined	The path to the setting
blockName	null | string	''	The block name
defaultValue	any	''	the default value to return
fallbackToGlobalSetting	boolean	true	Whether it should fallback to global setting if blockName is passed but setting does not exist

Returns

any

Defined in

packages/core/src/react/provider/useThemeSetting.ts:22

---

useThemeSettings

▸ useThemeSettings(): undefined | SettingsProperties & { blocks?: { core/archives?: SettingsPropertiesComplete ; core/audio?: SettingsPropertiesComplete ; core/block?: SettingsPropertiesComplete ; core/button?: SettingsPropertiesComplete ; core/buttons?: SettingsPropertiesComplete ; core/calendar?: SettingsPropertiesComplete ; core/categories?: SettingsPropertiesComplete ; core/code?: SettingsPropertiesComplete ; core/column?: SettingsPropertiesComplete ; core/columns?: SettingsPropertiesComplete ; core/comment-author-avatar?: SettingsPropertiesComplete ; core/comment-author-name?: SettingsPropertiesComplete ; core/comment-content?: SettingsPropertiesComplete ; core/comment-date?: SettingsPropertiesComplete ; core/comment-edit-link?: SettingsPropertiesComplete ; core/comment-reply-link?: SettingsPropertiesComplete ; core/comment-template?: SettingsPropertiesComplete ; core/comments-query-loop?: SettingsPropertiesComplete ; core/cover?: SettingsPropertiesComplete ; core/embed?: SettingsPropertiesComplete ; core/file?: SettingsPropertiesComplete ; core/freeform?: SettingsPropertiesComplete ; core/gallery?: SettingsPropertiesComplete ; core/group?: SettingsPropertiesComplete ; core/heading?: SettingsPropertiesComplete ; core/home-link?: SettingsPropertiesComplete ; core/html?: SettingsPropertiesComplete ; core/image?: SettingsPropertiesComplete ; core/latest-comments?: SettingsPropertiesComplete ; core/latest-posts?: SettingsPropertiesComplete ; core/legacy-widget?: SettingsPropertiesComplete ; core/list?: SettingsPropertiesComplete ; core/loginout?: SettingsPropertiesComplete ; core/media-text?: SettingsPropertiesComplete ; core/missing?: SettingsPropertiesComplete ; core/more?: SettingsPropertiesComplete ; core/navigation?: SettingsPropertiesComplete ; core/navigation-link?: SettingsPropertiesComplete ; core/nextpage?: SettingsPropertiesComplete ; core/page-list?: SettingsPropertiesComplete ; core/paragraph?: SettingsPropertiesComplete ; core/post-author?: SettingsPropertiesComplete ; core/post-comments?: SettingsPropertiesComplete ; core/post-comments-count?: SettingsPropertiesComplete ; core/post-comments-form?: SettingsPropertiesComplete ; core/post-comments-link?: SettingsPropertiesComplete ; core/post-content?: SettingsPropertiesComplete ; core/post-date?: SettingsPropertiesComplete ; core/post-excerpt?: SettingsPropertiesComplete ; core/post-featured-image?: SettingsPropertiesComplete ; core/post-navigation-link?: SettingsPropertiesComplete ; core/post-template?: SettingsPropertiesComplete ; core/post-terms?: SettingsPropertiesComplete ; core/post-title?: SettingsPropertiesComplete ; core/preformatted?: SettingsPropertiesComplete ; core/pullquote?: SettingsPropertiesComplete ; core/query?: SettingsPropertiesComplete ; core/query-pagination?: SettingsPropertiesComplete ; core/query-pagination-next?: SettingsPropertiesComplete ; core/query-pagination-numbers?: SettingsPropertiesComplete ; core/query-pagination-previous?: SettingsPropertiesComplete ; core/query-title?: SettingsPropertiesComplete ; core/quote?: SettingsPropertiesComplete ; core/rss?: SettingsPropertiesComplete ; core/search?: SettingsPropertiesComplete ; core/separator?: SettingsPropertiesComplete ; core/shortcode?: SettingsPropertiesComplete ; core/site-logo?: SettingsPropertiesComplete ; core/site-tagline?: SettingsPropertiesComplete ; core/site-title?: SettingsPropertiesComplete ; core/social-link?: SettingsPropertiesComplete ; core/social-links?: SettingsPropertiesComplete ; core/spacer?: SettingsPropertiesComplete ; core/table?: SettingsPropertiesComplete ; core/table-of-contents?: SettingsPropertiesComplete ; core/tag-cloud?: SettingsPropertiesComplete ; core/template-part?: SettingsPropertiesComplete ; core/term-description?: SettingsPropertiesComplete ; core/text-columns?: SettingsPropertiesComplete ; core/verse?: SettingsPropertiesComplete ; core/video?: SettingsPropertiesComplete ; core/widget-area?: SettingsPropertiesComplete ; core/widget-group?: SettingsPropertiesComplete } ; border?: { color?: boolean ; radius?: boolean ; style?: boolean ; width?: boolean } ; color?: { background?: boolean ; custom?: boolean ; customDuotone?: boolean ; customGradient?: boolean ; defaultGradients?: boolean ; defaultPalette?: boolean ; duotone?: SettingsDuotone ; gradients?: SettingsGradient ; link?: boolean ; palette?: SettingsColorPalette ; text?: boolean } ; custom?: { [k: string]: string | number | SettingsCustomAdditionalProperties; } ; layout?: { contentSize?: string ; wideSize?: string } ; spacing?: { blockGap?: null | boolean ; margin?: boolean ; padding?: boolean ; units?: string[] } ; typography?: { customFontSize?: boolean ; dropCap?: boolean ; fontFamilies?: { fontFamily?: string ; name?: string ; slug?: string }[] ; fontSizes?: { name?: string ; size?: string ; slug?: string }[] ; fontStyle?: boolean ; fontWeight?: boolean ; letterSpacing?: boolean ; lineHeight?: boolean ; textDecoration?: boolean ; textTransform?: boolean } }

Returns the raw theme.json settings definitions

Returns

undefined | SettingsProperties & { blocks?: { core/archives?: SettingsPropertiesComplete ; core/audio?: SettingsPropertiesComplete ; core/block?: SettingsPropertiesComplete ; core/button?: SettingsPropertiesComplete ; core/buttons?: SettingsPropertiesComplete ; core/calendar?: SettingsPropertiesComplete ; core/categories?: SettingsPropertiesComplete ; core/code?: SettingsPropertiesComplete ; core/column?: SettingsPropertiesComplete ; core/columns?: SettingsPropertiesComplete ; core/comment-author-avatar?: SettingsPropertiesComplete ; core/comment-author-name?: SettingsPropertiesComplete ; core/comment-content?: SettingsPropertiesComplete ; core/comment-date?: SettingsPropertiesComplete ; core/comment-edit-link?: SettingsPropertiesComplete ; core/comment-reply-link?: SettingsPropertiesComplete ; core/comment-template?: SettingsPropertiesComplete ; core/comments-query-loop?: SettingsPropertiesComplete ; core/cover?: SettingsPropertiesComplete ; core/embed?: SettingsPropertiesComplete ; core/file?: SettingsPropertiesComplete ; core/freeform?: SettingsPropertiesComplete ; core/gallery?: SettingsPropertiesComplete ; core/group?: SettingsPropertiesComplete ; core/heading?: SettingsPropertiesComplete ; core/home-link?: SettingsPropertiesComplete ; core/html?: SettingsPropertiesComplete ; core/image?: SettingsPropertiesComplete ; core/latest-comments?: SettingsPropertiesComplete ; core/latest-posts?: SettingsPropertiesComplete ; core/legacy-widget?: SettingsPropertiesComplete ; core/list?: SettingsPropertiesComplete ; core/loginout?: SettingsPropertiesComplete ; core/media-text?: SettingsPropertiesComplete ; core/missing?: SettingsPropertiesComplete ; core/more?: SettingsPropertiesComplete ; core/navigation?: SettingsPropertiesComplete ; core/navigation-link?: SettingsPropertiesComplete ; core/nextpage?: SettingsPropertiesComplete ; core/page-list?: SettingsPropertiesComplete ; core/paragraph?: SettingsPropertiesComplete ; core/post-author?: SettingsPropertiesComplete ; core/post-comments?: SettingsPropertiesComplete ; core/post-comments-count?: SettingsPropertiesComplete ; core/post-comments-form?: SettingsPropertiesComplete ; core/post-comments-link?: SettingsPropertiesComplete ; core/post-content?: SettingsPropertiesComplete ; core/post-date?: SettingsPropertiesComplete ; core/post-excerpt?: SettingsPropertiesComplete ; core/post-featured-image?: SettingsPropertiesComplete ; core/post-navigation-link?: SettingsPropertiesComplete ; core/post-template?: SettingsPropertiesComplete ; core/post-terms?: SettingsPropertiesComplete ; core/post-title?: SettingsPropertiesComplete ; core/preformatted?: SettingsPropertiesComplete ; core/pullquote?: SettingsPropertiesComplete ; core/query?: SettingsPropertiesComplete ; core/query-pagination?: SettingsPropertiesComplete ; core/query-pagination-next?: SettingsPropertiesComplete ; core/query-pagination-numbers?: SettingsPropertiesComplete ; core/query-pagination-previous?: SettingsPropertiesComplete ; core/query-title?: SettingsPropertiesComplete ; core/quote?: SettingsPropertiesComplete ; core/rss?: SettingsPropertiesComplete ; core/search?: SettingsPropertiesComplete ; core/separator?: SettingsPropertiesComplete ; core/shortcode?: SettingsPropertiesComplete ; core/site-logo?: SettingsPropertiesComplete ; core/site-tagline?: SettingsPropertiesComplete ; core/site-title?: SettingsPropertiesComplete ; core/social-link?: SettingsPropertiesComplete ; core/social-links?: SettingsPropertiesComplete ; core/spacer?: SettingsPropertiesComplete ; core/table?: SettingsPropertiesComplete ; core/table-of-contents?: SettingsPropertiesComplete ; core/tag-cloud?: SettingsPropertiesComplete ; core/template-part?: SettingsPropertiesComplete ; core/term-description?: SettingsPropertiesComplete ; core/text-columns?: SettingsPropertiesComplete ; core/verse?: SettingsPropertiesComplete ; core/video?: SettingsPropertiesComplete ; core/widget-area?: SettingsPropertiesComplete ; core/widget-group?: SettingsPropertiesComplete } ; border?: { color?: boolean ; radius?: boolean ; style?: boolean ; width?: boolean } ; color?: { background?: boolean ; custom?: boolean ; customDuotone?: boolean ; customGradient?: boolean ; defaultGradients?: boolean ; defaultPalette?: boolean ; duotone?: SettingsDuotone ; gradients?: SettingsGradient ; link?: boolean ; palette?: SettingsColorPalette ; text?: boolean } ; custom?: { [k: string]: string | number | SettingsCustomAdditionalProperties; } ; layout?: { contentSize?: string ; wideSize?: string } ; spacing?: { blockGap?: null | boolean ; margin?: boolean ; padding?: boolean ; units?: string[] } ; typography?: { customFontSize?: boolean ; dropCap?: boolean ; fontFamilies?: { fontFamily?: string ; name?: string ; slug?: string }[] ; fontSizes?: { name?: string ; size?: string ; slug?: string }[] ; fontStyle?: boolean ; fontWeight?: boolean ; letterSpacing?: boolean ; lineHeight?: boolean ; textDecoration?: boolean ; textTransform?: boolean } }

Defined in

packages/core/src/react/provider/useThemeSettings.ts:9

---

useThemeStyles

▸ useThemeStyles(): undefined | StylesProperties & { blocks?: { core/archives?: StylesPropertiesAndElementsComplete ; core/audio?: StylesPropertiesAndElementsComplete ; core/block?: StylesPropertiesAndElementsComplete ; core/button?: StylesPropertiesAndElementsComplete ; core/buttons?: StylesPropertiesAndElementsComplete ; core/calendar?: StylesPropertiesAndElementsComplete ; core/categories?: StylesPropertiesAndElementsComplete ; core/code?: StylesPropertiesAndElementsComplete ; core/column?: StylesPropertiesAndElementsComplete ; core/columns?: StylesPropertiesAndElementsComplete ; core/comment-author-avatar?: StylesPropertiesAndElementsComplete ; core/comment-author-name?: StylesPropertiesAndElementsComplete ; core/comment-content?: StylesPropertiesAndElementsComplete ; core/comment-date?: StylesPropertiesAndElementsComplete ; core/comment-edit-link?: StylesPropertiesAndElementsComplete ; core/comment-reply-link?: StylesPropertiesAndElementsComplete ; core/comment-template?: StylesPropertiesAndElementsComplete ; core/comments-query-loop?: StylesPropertiesAndElementsComplete ; core/cover?: StylesPropertiesAndElementsComplete ; core/embed?: StylesPropertiesAndElementsComplete ; core/file?: StylesPropertiesAndElementsComplete ; core/freeform?: StylesPropertiesAndElementsComplete ; core/gallery?: StylesPropertiesAndElementsComplete ; core/group?: StylesPropertiesAndElementsComplete ; core/heading?: StylesPropertiesAndElementsComplete ; core/home-link?: StylesPropertiesAndElementsComplete ; core/html?: StylesPropertiesAndElementsComplete ; core/image?: StylesPropertiesAndElementsComplete ; core/latest-comments?: StylesPropertiesAndElementsComplete ; core/latest-posts?: StylesPropertiesAndElementsComplete ; core/legacy-widget?: StylesPropertiesAndElementsComplete ; core/list?: StylesPropertiesAndElementsComplete ; core/loginout?: StylesPropertiesAndElementsComplete ; core/media-text?: StylesPropertiesAndElementsComplete ; core/missing?: StylesPropertiesAndElementsComplete ; core/more?: StylesPropertiesAndElementsComplete ; core/navigation?: StylesPropertiesAndElementsComplete ; core/navigation-link?: StylesPropertiesAndElementsComplete ; core/nextpage?: StylesPropertiesAndElementsComplete ; core/page-list?: StylesPropertiesAndElementsComplete ; core/paragraph?: StylesPropertiesAndElementsComplete ; core/post-author?: StylesPropertiesAndElementsComplete ; core/post-comments?: StylesPropertiesAndElementsComplete ; core/post-comments-count?: StylesPropertiesAndElementsComplete ; core/post-comments-form?: StylesPropertiesAndElementsComplete ; core/post-comments-link?: StylesPropertiesAndElementsComplete ; core/post-content?: StylesPropertiesAndElementsComplete ; core/post-date?: StylesPropertiesAndElementsComplete ; core/post-excerpt?: StylesPropertiesAndElementsComplete ; core/post-featured-image?: StylesPropertiesAndElementsComplete ; core/post-navigation-link?: StylesPropertiesAndElementsComplete ; core/post-template?: StylesPropertiesAndElementsComplete ; core/post-terms?: StylesPropertiesAndElementsComplete ; core/post-title?: StylesPropertiesAndElementsComplete ; core/preformatted?: StylesPropertiesAndElementsComplete ; core/pullquote?: StylesPropertiesAndElementsComplete ; core/query?: StylesPropertiesAndElementsComplete ; core/query-pagination?: StylesPropertiesAndElementsComplete ; core/query-pagination-next?: StylesPropertiesAndElementsComplete ; core/query-pagination-numbers?: StylesPropertiesAndElementsComplete ; core/query-pagination-previous?: StylesPropertiesAndElementsComplete ; core/query-title?: StylesPropertiesAndElementsComplete ; core/quote?: StylesPropertiesAndElementsComplete ; core/rss?: StylesPropertiesAndElementsComplete ; core/search?: StylesPropertiesAndElementsComplete ; core/separator?: StylesPropertiesAndElementsComplete ; core/shortcode?: StylesPropertiesAndElementsComplete ; core/site-logo?: StylesPropertiesAndElementsComplete ; core/site-tagline?: StylesPropertiesAndElementsComplete ; core/site-title?: StylesPropertiesAndElementsComplete ; core/social-link?: StylesPropertiesAndElementsComplete ; core/social-links?: StylesPropertiesAndElementsComplete ; core/spacer?: StylesPropertiesAndElementsComplete ; core/table?: StylesPropertiesAndElementsComplete ; core/table-of-contents?: StylesPropertiesAndElementsComplete ; core/tag-cloud?: StylesPropertiesAndElementsComplete ; core/template-part?: StylesPropertiesAndElementsComplete ; core/term-description?: StylesPropertiesAndElementsComplete ; core/text-columns?: StylesPropertiesAndElementsComplete ; core/verse?: StylesPropertiesAndElementsComplete ; core/video?: StylesPropertiesAndElementsComplete ; core/widget-area?: StylesPropertiesAndElementsComplete ; core/widget-group?: StylesPropertiesAndElementsComplete } ; border?: unknown ; color?: unknown ; elements?: { h1?: StylesPropertiesComplete ; h2?: StylesPropertiesComplete ; h3?: StylesPropertiesComplete ; h4?: StylesPropertiesComplete ; h5?: StylesPropertiesComplete ; h6?: StylesPropertiesComplete ; link?: StylesPropertiesComplete } ; spacing?: unknown ; typography?: unknown }

Returns the theme.json styles definitions

Returns

undefined | StylesProperties & { blocks?: { core/archives?: StylesPropertiesAndElementsComplete ; core/audio?: StylesPropertiesAndElementsComplete ; core/block?: StylesPropertiesAndElementsComplete ; core/button?: StylesPropertiesAndElementsComplete ; core/buttons?: StylesPropertiesAndElementsComplete ; core/calendar?: StylesPropertiesAndElementsComplete ; core/categories?: StylesPropertiesAndElementsComplete ; core/code?: StylesPropertiesAndElementsComplete ; core/column?: StylesPropertiesAndElementsComplete ; core/columns?: StylesPropertiesAndElementsComplete ; core/comment-author-avatar?: StylesPropertiesAndElementsComplete ; core/comment-author-name?: StylesPropertiesAndElementsComplete ; core/comment-content?: StylesPropertiesAndElementsComplete ; core/comment-date?: StylesPropertiesAndElementsComplete ; core/comment-edit-link?: StylesPropertiesAndElementsComplete ; core/comment-reply-link?: StylesPropertiesAndElementsComplete ; core/comment-template?: StylesPropertiesAndElementsComplete ; core/comments-query-loop?: StylesPropertiesAndElementsComplete ; core/cover?: StylesPropertiesAndElementsComplete ; core/embed?: StylesPropertiesAndElementsComplete ; core/file?: StylesPropertiesAndElementsComplete ; core/freeform?: StylesPropertiesAndElementsComplete ; core/gallery?: StylesPropertiesAndElementsComplete ; core/group?: StylesPropertiesAndElementsComplete ; core/heading?: StylesPropertiesAndElementsComplete ; core/home-link?: StylesPropertiesAndElementsComplete ; core/html?: StylesPropertiesAndElementsComplete ; core/image?: StylesPropertiesAndElementsComplete ; core/latest-comments?: StylesPropertiesAndElementsComplete ; core/latest-posts?: StylesPropertiesAndElementsComplete ; core/legacy-widget?: StylesPropertiesAndElementsComplete ; core/list?: StylesPropertiesAndElementsComplete ; core/loginout?: StylesPropertiesAndElementsComplete ; core/media-text?: StylesPropertiesAndElementsComplete ; core/missing?: StylesPropertiesAndElementsComplete ; core/more?: StylesPropertiesAndElementsComplete ; core/navigation?: StylesPropertiesAndElementsComplete ; core/navigation-link?: StylesPropertiesAndElementsComplete ; core/nextpage?: StylesPropertiesAndElementsComplete ; core/page-list?: StylesPropertiesAndElementsComplete ; core/paragraph?: StylesPropertiesAndElementsComplete ; core/post-author?: StylesPropertiesAndElementsComplete ; core/post-comments?: StylesPropertiesAndElementsComplete ; core/post-comments-count?: StylesPropertiesAndElementsComplete ; core/post-comments-form?: StylesPropertiesAndElementsComplete ; core/post-comments-link?: StylesPropertiesAndElementsComplete ; core/post-content?: StylesPropertiesAndElementsComplete ; core/post-date?: StylesPropertiesAndElementsComplete ; core/post-excerpt?: StylesPropertiesAndElementsComplete ; core/post-featured-image?: StylesPropertiesAndElementsComplete ; core/post-navigation-link?: StylesPropertiesAndElementsComplete ; core/post-template?: StylesPropertiesAndElementsComplete ; core/post-terms?: StylesPropertiesAndElementsComplete ; core/post-title?: StylesPropertiesAndElementsComplete ; core/preformatted?: StylesPropertiesAndElementsComplete ; core/pullquote?: StylesPropertiesAndElementsComplete ; core/query?: StylesPropertiesAndElementsComplete ; core/query-pagination?: StylesPropertiesAndElementsComplete ; core/query-pagination-next?: StylesPropertiesAndElementsComplete ; core/query-pagination-numbers?: StylesPropertiesAndElementsComplete ; core/query-pagination-previous?: StylesPropertiesAndElementsComplete ; core/query-title?: StylesPropertiesAndElementsComplete ; core/quote?: StylesPropertiesAndElementsComplete ; core/rss?: StylesPropertiesAndElementsComplete ; core/search?: StylesPropertiesAndElementsComplete ; core/separator?: StylesPropertiesAndElementsComplete ; core/shortcode?: StylesPropertiesAndElementsComplete ; core/site-logo?: StylesPropertiesAndElementsComplete ; core/site-tagline?: StylesPropertiesAndElementsComplete ; core/site-title?: StylesPropertiesAndElementsComplete ; core/social-link?: StylesPropertiesAndElementsComplete ; core/social-links?: StylesPropertiesAndElementsComplete ; core/spacer?: StylesPropertiesAndElementsComplete ; core/table?: StylesPropertiesAndElementsComplete ; core/table-of-contents?: StylesPropertiesAndElementsComplete ; core/tag-cloud?: StylesPropertiesAndElementsComplete ; core/template-part?: StylesPropertiesAndElementsComplete ; core/term-description?: StylesPropertiesAndElementsComplete ; core/text-columns?: StylesPropertiesAndElementsComplete ; core/verse?: StylesPropertiesAndElementsComplete ; core/video?: StylesPropertiesAndElementsComplete ; core/widget-area?: StylesPropertiesAndElementsComplete ; core/widget-group?: StylesPropertiesAndElementsComplete } ; border?: unknown ; color?: unknown ; elements?: { h1?: StylesPropertiesComplete ; h2?: StylesPropertiesComplete ; h3?: StylesPropertiesComplete ; h4?: StylesPropertiesComplete ; h5?: StylesPropertiesComplete ; h6?: StylesPropertiesComplete ; link?: StylesPropertiesComplete } ; spacing?: unknown ; typography?: unknown }

Defined in

packages/core/src/react/provider/useThemeStyles.ts:9

React Components

BlocksRenderer

▸ BlocksRenderer(props): Element

The BlocksRenderer components provides an easy way to convert HTML markup into corresponding React components.

The BlocksRenderer component takes in arbitrary html markup and receives a list of react components as children that allows replacing dom nodes with React Components.

The html prop is sanitized through wpKsesPost so it's safe for rendering arbitrary html markup.

The children components must implement the BlockProps interface

Usage

Usage with the test function

<BlocksRenderer html={html}>
 <MyLinkBlock test={(node) => isAnchorTag(node, { isInternalLink: true })} />
</BlocksRenderer>

Usage with classList and tagName props

<BlocksRenderer html={html}>
  <MyLinkBlock tagName="a" classList="my-special-anchor" />
</BlocksRenderer>

Parameters

Name	Type	Description
props	BlockRendererProps	Component properties

Returns

Element

Defined in

packages/core/src/react/components/BlocksRenderer.tsx:168

---

HtmlDecoder

▸ HtmlDecoder(props, context?): null | ReactElement<any, any>

The HtmlDecoder simply decodes html entities

Any actual html markup gets stripped before decoding html entities. If you need to render HTML use SafeHtml

Usage

<HtmlDecoder html="Hello world! &#8211; foo bar &#8211;" />

Parameters

Name	Type	Description
props	PropsWithChildren<HtmlDecodeProps>	Component properties
context?	any	-

Returns

null | ReactElement<any, any>

Defined in

node_modules/@types/react/index.d.ts:542

---

SafeHtml

▸ SafeHtml(props, context?): null | ReactElement<any, any>

The SafeHtml component provides an easy way to safely render HTML

The html prop is sanitized through wpKsesPost so it's safe for rendering arbitrary html markup.

Usage

<SafeHtml html="<div><p>hello world</p> div content</div>" />

Parameters

Name	Type	Description
props	PropsWithChildren<SafeHtmlProps>	Component properties
context?	any	-

Returns

null | ReactElement<any, any>

Defined in

node_modules/@types/react/index.d.ts:542