Takt WordPress Components

A collection of reusable React components for building custom Gutenberg authoring experiences as part of Takt's WordPress ensemble. These components are designed to streamline editor development and provide advanced UI features for block and panel creation.

Components Overview

Below is a brief description of each component included in this package:

AdvancedRichText

An enhanced RichText component for Gutenberg blocks, supporting custom formatting, tag filtering, and optional line break disabling.

Props:

• value (required): string
• onChange (required): function
• allowedFormats (optional): string[]
• disableLineBreaks (optional): boolean
• ...all RichText Props from @wordpress/block-editor

Appender

A wrapper for the default Gutenberg block appender, allowing for custom styling and positioning when adding new blocks.

Props:

• className (optional): string
• clientId (optional): string
• style (optional): object

Button

A flexible button component with support for different variations (primary, secondary, tertiary), link integration, and advanced controls for editing button properties in the editor.

Props:

• link (optional): { title, url, postId?, postType?, opensInNewTab?, label? }
• className (optional): string
• onChange (optional): function
• placeholder (optional): string
• focusOnMount (optional): string | boolean
• variation (optional): 'primary' | 'secondary' | 'tertiary'
• allowVariationChange (optional): boolean
• before (optional): ReactNode
• after (optional): ReactNode
• validateLink (optional): boolean
• autoUpdateLink (optional): boolean
• mergeRef (optional): boolean
• ...all anchor element attributes except onChange

FilteredServerSideRender

A server-side render component with additional filtering and query options, useful for rendering dynamic block previews with custom query selectors and attributes.

Props:

• block (optional): string
• attributes (optional): object
• urlQueryArgs (optional): object
• httpMethod (optional): 'GET' | 'POST'
• url (optional): string
• EmptyResponsePlaceholder (optional): React.ComponentType | null
• LoadingResponsePlaceholder (optional): React.ComponentType | null
• querySelector (optional): string
• clientId (optional): string
• className (optional): string
• serverSideRenderRef (optional): any
• preventInteraction (optional): boolean

ImageDropUploader

A drag-and-drop image uploader for Gutenberg, supporting image selection, upload, and focal point editing.

Props:

• image (optional): ImageProps | number
• onSelect (optional): function
• allowedTypes (optional): string[]
• className (optional): string
• imageClassName (optional): string
• imageStyle (optional): object
• placeholderClassName (optional): string

ImageOrInlineSvg

Displays an image by ID or attachment, with special handling for inline SVGs (fetches and injects SVG markup for SVG images).

Props:

• imageId (optional): number
• attachment (optional): Attachment
• ...all standard <img> attributes

Link

A link component with advanced controls for editing link properties, including support for post links, new tab toggling, and custom labels.

Props:

• children (optional): ReactNode
• before (optional): ReactNode
• after (optional): ReactNode
• link (optional): { title, url, postId?, postType?, opensInNewTab?, label? }
• className (optional): string
• titleClassName (optional): string
• onChange (optional): function
• tagName (optional): string
• allowedFormats (optional): []
• placeholder (optional): string
• anchor (optional): HTMLElement
• focusOnMount (optional): string | boolean
• validateLink (optional): boolean
• autoUpdateLink (optional): boolean
• openPopupOnClick (optional): boolean
• popupVisible (optional): boolean
• showPopupTitleField (optional): boolean

MediaUploadPanel

A media upload panel with optional focal point picker, designed for selecting and editing images or other media within block controls.

Props:

• media (optional): ImageProps | number
• label (optional): string
• onSelect (optional): function
• allowedTypes (optional): string[]
• enableFocalPoint (optional): boolean

MultiLineRichText

A multi-line RichText input that parses and manages multiple items, useful for lists or repeatable text fields in blocks.

Props:

• value (required): string
• onChange (required): function
• className (optional): string
• itemClassName (optional): string
• wrapperTag (optional): string (JSX tag)
• itemTag (optional): string (JSX tag)
• allowedFormats (optional): string[]
• placeholder (optional): string
• alwaysShowPlaceholder (optional): boolean

PopoverExternalLink

A popover input for external links, phone numbers, or emails, with protocol handling and inline editing UI.

Props:

• children (optional): ReactNode
• value (optional): string
• onChange (optional): function
• label (optional): string
• placeholder (optional): string
• className (optional): string
• type (optional): 'link' | 'phone' | 'email'
• includeProtocol (optional): boolean

PostSelectorSortable

A sortable post selector component for choosing and reordering posts of any type, with support for thumbnails and custom limits.

Props:

• value (required): number[] | number
• onChange (required): function
• postTypes (optional): string[]
• limit (optional): number | string
• title (optional): string
• onDocumentPanel (optional): boolean
• forceReturnAsArray (optional): boolean
• displayThumbnails (optional): boolean

TaxonomySelect

A taxonomy selector with multi-select and sorting, allowing users to pick and order taxonomy terms (categories, tags, etc.) in the editor.

Props:

• title (optional): string
• value (required): number[]
• taxonomy (optional): string
• onChange (optional): function
• selectedFirst (optional): boolean
• displaySearch (optional): boolean
• limitHeight (optional): boolean
• Hierarchical (optional): boolean

For detailed usage and props, see the source code for each component in the src/ directory.