A wrapper component around the "Button" component provided by the core.

This component has been created to represent adding items into a list with consideration for ease of styling and following D.R.Y principle.

<AddButton onClick={ handleOnClickAdd } />

A wrapper component around the "AlignmentControl" component provided by the core.

This component renders a toolbar of alignment icon buttons. This is useful for block-level modifications to be made available when a block is selected.

<AlignmentToolbarControl
    doRender
    onChange={ ( value ) => setAttributes( { textAlign: value } ) }
	   value={ textAlign }
/>

This component renders a custom color selector, which makes it easy to create, adjust, and experiment with theme colors.

<ColorPicker
    context="background"
    label={ __( 'Background' ) }
    onChange={ ( value ) => setAttributes( { color: value } ) }
    value={ "#FFFFFF" }
/>

// => Object { color: "#ff5252", name: "Primary", slug: "primary", className: "has-background has-primary-background-color" }

React component for wrapping children based on a condition.

<ConditionalWrap
    condition={ !! tooltip }
    wrap={ ( children ) => (
         <Tooltip position="bottom" title={ tooltip }>
              { children }
         </Tooltip>
    ) }
>
    <button>{ children }</button>
</ConditionalWrap>

Disabled is a component which disables descendant tabbable elements and prevents pointer interaction.

<Disabled tagName="li">
    <a href="https://www.example.com">{ children }</a>
</Disabled>

A wrapper component around the "RichText" component provided by the core.

RichText is a component that allows developers to render a contenteditable input, providing users with the option to format block content to make it bold, italics, linked, or use other formatting.

<EditableText
    className={ `${ className }__title` }
    doRender={ elements?.title }
    onChange={ ( value ) => setAttributes( { title: value } ) }
    placeholder={ __( 'Title…' ) }
    tagName="h3"
    value={ title }
/>

Toolbar button component used to demonstrate "Edit" action.

<EditToolbarControl doRender={ ! isPlaceholder } onClick={ togglePlaceholder } />

A wrapper around the WordPress "Notice" component to allow displaying error messages when appropriate.

<ErrorMessage>
    __( 'Entered address is not a valid email address!' )
</ErrorMessage>

Email text-input component that lets users input a number of email addresses and provides a layer of validation against any possible invalid data entered.

<EmailControl onChange={ ( value ) => onChange( { to: value } ) } />

This component provides a set of UI buttons that allows users to open and interact with the WordPress media library. This placeholder component could make it possible to provide an integration with the core blocks that handle media files.

<GalleryUpload
    isSelected={ isSelected }
    onChange={ ( value ) => { setAttributes( { images: value } ); } }
    sizeSlug="large"
    value={ images }
/>

// => Array [ { alt: '', caption: '', id: "21", url: 'http://dev.local/wp-content/uploads/2022/09/image.jpg' } ]

The "HtmlAttrs" component allows creating a set of HTML attributes to be added to the wrapper tag of another block instance.

<HtmlAttrs onChange={ ( value ) => setAttributes( { attrs: value } ) } value={ attrs } />

A drop-in component replaces the SVG element by adding the required accessibility attributes for SVG elements across browsers.

<Icon d="M4 9h16v2H4V9zm0 4h10v2H4v-2z" />

Component used as equivalent of Fragment with unescaped HTML, in cases where it is desirable to render dangerous HTML without needing a wrapper element.

To preserve additional props, a div wrapper will be created if any props aside from children are passed.

const content = '<span class=\"amount\"><bdi><span class=\"currency-symbol\">&pound;<\/span>11.05<\/bdi><\/span>';
<InnerHTML tagName="span">{ content }</InnerHTML>

A Boolean attribute indicating that an option with a non-empty string value must be entered/selected.

<IsRequiredToolbarControl onClick={ () => setAttributes( { isRequired: ! isRequired } ) } value={ isRequired } />

The "Query" component to render queried items.

<Query
    className={ className }
    Component={ Loop }
    doRender
    havePosts={ havePosts }
    isLoading={ isLoading }
    query={ slicedQuery }
/>

This component renders an array of given posts, and allows users to select one post from a set.

<ListRadioSelect
    isLoading={ isLoading }
    onChange={ ( postId ) => setAttributes( { postId } ) }
    options={ [ { value: 100, label: 'My blog post' }, { value: 108, label: 'My other blog post' } ] }
    value={ "100" }
/>

// => String "100"

Spinners notify users that their action is being processed.

<Loading label={ __( 'Loading posts…' ) } />

Media component to represent image or video element depending on the media type being stored within the block attributes.

<Media
    className={ `${ className }__media` }
    id={ id }
    mediaType={ mediaType }
    url={ url }
/>

Sortable component designed to provide the ability to provide a set of higher-order components to turn any collection of elements given into an accessible and touch-friendly sortable list.

<Sortable
    onChange={ ( value ) => setAttributes( { items: value } ) }
>
    { map( items, ( { value, label }, index ) => (
         <Element key={ value } label={ label } value={ value } onRemove={ () => onRemove( index ) } />
    ) ) }
</Sortable>

MultiSelect component designed to provide the ability to search for and select any number of options from a set of "{ label, value }" pairs in any order.

<MultiSelect
    options={ [ { value: 100, label: 'My blog post' }, { value: 108, label: 'My other blog post' } ] }
    onChange={ ( value ) => { setAttributes( { ids: value } ); } }
    value={ ids }
/>

// => Array [ 100, 108 ]

A wrapper component around the "Button" component provided by the core.

This component has been created to represent creating a new post-type post with consideration for ease of styling and following D.R.Y principle.

<NewPostLink postType="page" />

Display static message to communicate prominent not-found message to the user.

<NotFound status="error">
    __( 'Nothing is here to display!' )
</NotFound>

Pill element with a remove button. This component is typically used as the output when iterating over a collection of items that should be displayed as pills/tags rather than standalone.

<Pill
    label={ label }
    onClick={ handleOnClickPill }
/>

Renders a component is used to generate select input fields with interface to select the parent page/term in a hierarchy of pages/terms.

<TermsTreeSelect
    label={ { __( 'Category' ) } }
    onChange={ ( value ) => setAttributes( { categories: value } ) }
    taxonomy={ 'categories' }
    value={ '12' }
/>

Helper component to adjust arguments to query (retrieve) posts.

<QueryControls
    maxItems={ maxLimit }
    numberOfItems={ limit }
    order={ order }
    orderBy={ orderby }
    onNumberOfItemsChange={ ( value ) => setAttributes( { limit: value } ) }
    onOrderByChange={ ( value ) => setAttributes( { orderby: value } ) }
    onOrderChange={ ( value ) => setAttributes( { order: value } ) }
/>

A wrapper component around the "Button" component provided by the core.

This component has been created to represent removing items from a list with consideration for ease of styling and following D.R.Y principle.

<RemoveButton onClick={ handleOnClickRemove } />

A group component that creates a list of "Width" options to choose from. It can also coordinate the checked state of multiple Button components.

<WidthPanel onChange={ ( value ) => onChange( { width: value } ) } title={ __( 'Width settings' ) } value={ 25 } />