Animation List Control

Canonical Override

Provides a field to read and write from the _pmc_canonical_override meta.

TODO: Provide a value and callback setter to the component directly rather than relying on the component to do that work.

Usage

 <CanonicalOverride />

Card

A general Placeholder for elemenets using the core Placeholder component.

Usage

<Card
	title="Title"
	showHiddenIcon={ false }
/>

Props

Collapsable Wrapper

A simple wrapper component that provides the ability to toggle its contents open or closed.

Provides also the ability to remove the block from the closed state with a callback which returns an open/closed boolean, optional.

Usage

<CollapsableWrapper
	canRemove
	className={className}
	clientId={clientId}
	icon={icon}
	isEditing={true}
	isOpen={true}
	isPreviewing={true}
	onEdit={onEdit}
	onPreview={onPreview}
	onToggle={onToggle}
	title={title}
>
	{children}
</CollapsableWrapper>

Props

Custom Slotfill: PMCSidebarPanel

Creates a slot inside the PMC Sidebar panel for adding custom features.

Entity Selector

Displays a FormTokenField (Like the Tags flat term selector) to search for, display, and select taxonomy or post type entities.

Usage

<EntitySelector
	entity="post"
	label={ __( 'Related Story', 'pmc-gutenberg' ) }
	onSelect={ ( next ) =>
		setAttributes( {
			related: next.map( ( term ) => ( {
				post_id: term,
			} ) ),
		} )
	}
	placeholder={ __(
		'Search for a story… ',
		'pmc-gutenberg'
	) }
	query={ {
		category: 'primetime-pilot-panic',
	} }
	type="postType"
	value={
		related?.length
			? related.map( ( post ) => post?.post_id )
			: []
	}
	maxValues={ 6 }
/>

Props

postWithFeaturedImage

Return a post with a featured image.

• props: Object — Props object.
• props.post: Object — Post object.
• props.getMedia: func — Callback to return media by id.
• Reference (opens in a new tab)

LegacyTypography

A component that returns legacy typography output used for the heading, paragraph, and group blocks behind a feature flag.

NOTE: This hook should be removed once those features are migrated into WordPress core typography handling via theme.json.

Hook: useLegacyTypography

A hook to centralize the typography features and return necessary values.

useLegacyTypography

Return values for use in legacy typography component.

• blockConfig: Object — Block config from localization.
• typographyFontFamily: string — Selected font family.

LockableFlatTermSelector

Similar to the PostTaxonomiesFlatTermSelector that comes with Gutenberg core, but is locked down to prevent creation of new post tags. Only allowed to select existing terms in this feature.

Usage

<LockableFlatTermSelector slug={ term } locked />

Props

BulkTermCreator Component

Provides a TextControl field that supports auto-creation of terms by comma-separated string.

Usage

<BulkTermCreator onChange={ onChange } />
/>

Props

MostUsedTerms Component

Displaying a variety of most used terms by taxonomy.

Usage

<MostUsedTerms onSelect={() => null} taxonomy={ taxonomyObject } />

Props

TermSelector Component

Displaying a FormTokenField for selecting and searching for taxonomy terms.

Usage

<TermSelector
	canCreate={ ! isLocked && hasCreateAction }
	max={ MAX_TERMS_SUGGESTIONS }
	onChange={ onChange }
	onInputChange={ debounce( searchTerms, 500 ) }
	singularName={ singularName }
	slug={ slug }
	suggestions={ availableTerms.map(
		( term ) => term.name
	) }
	taxonomy={ taxonomy }
	value={ selectedTerms }
/>

Props

isSameTermName

Compare two term names to determine if they are the same.

• termA: string — Term name for comparison 1.
• termB: string — Term name for comparison 2.

termNamesToIds

For each term name, return an id.

• names: Array — Array of names.
• terms: Array — Array of terms.

MediaPicker

Allows for a reusable media uploader, replacer, and remover for adding media to blocks.

See also https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/media-placeholder/README.md (opens in a new tab) for additional descriptions of shared props.

Usage

<MediaPicker
	className="custom-class-name"
	allowedType={ [ 'image' ] }
	icon="format-image"
	label={ __( 'Product Image', 'pmc-gutenberg' ) }
	instructions={__(
		'Upload an image file, pick one from your media library, or add one with a URL.',
		'pmc-gutenberg'
	)}
	onReset={ () => setAttributes( { image: 0 } ) }
	onSelect={ ( next ) => setAttributes( { image: next } ) }
	size="thumbnail"
	value={ image }
/>

Props

Nova Ad

Nova Button

Nova Card

Nova Cards

Nova Header

A component that provides a selectable image, link, and optional name.

Usage

<Header
	headerImageId={ headerImageId }
	headerText={ headerText }
	isSelected={ isSelected }
	onChange={ setAttributes }
	displayFields
/>

Props

Nova Promotion

Nova Sponsor

A component that provides a selectable image, link, and optional name.

Usage

<Sponsor
	isSelected={ isSelected }
	onChange={ setAttributes }
	sponsorImageId={ sponsorImageId }
	sponsorLeadIn={ sponsorLeadIn }
	sponsorLink={ sponsorLink }
	sponsorName={ sponsorName }
	displayFields
/>

Props

Nova Text

Search

Contains the search form, search list, and list card components for use in the Content Recirculation and Related Content blocks, but are brand and context-agnostic.

Export from the main index.js file is the search form and the search form modal components. PostSearchForm and PostSearchModal respectively.

Components

• Search Card
• Search Form
• Search List
• Search Modal

Search Card

This component displays a single post with a minimal set of post object values.

Usage

  <SearchCard
	onChange={ (next) => onChange(next) }
    value={ posts }
  />

Component Props

Expected Value Shape

The below is the expected object shape. By default the global search endpoint wp/v2/search returns everything below save the media and the post_type (which is the subtype).

The media object contains the thumbnail and featured image alt text. Easily cached rather than needing to make a REST request in browser.

The post_type is the Singular name of the current post type. The subtype is the post's post type slug.

{
	id: PropTypes.number,
	media: PropTypes.shape( {
		alt: PropTypes.string,
		url: PropTypes.string,
	} ),
	post_type: PropTypes.string,
	status: PropTypes.string,
	subtype: PropTypes.string,
	title: PropTypes.string,
	type: PropTypes.exact( 'post' ),
	url: PropTypes.string,
}

Search Form

A parent component containing a search form (core SearchControl component), search results, and individual cards for selection.

The component also provides a "load more" feature which will load additional posts page by page upon request.

This component is exported to PostSearchForm at the root and used inside the PostSearchModal which expects the same props.

Usage

  <SearchForm
    className="custom-class"
	onChange={ () => null }
  />

Props

Search Modal

A parent component containing the SearchForm component.

This component is exported to PostSearchModal at the root and uses the PostSearchForm component as a child which expects the same props.

Usage

  <SearchModal
    className="custom-class"
	onChange={ () => null }
	onDismiss={ () => null }
	isVisible
  />

Props

Component Search Results

Utilizes the SearchCard component to output a list of search-for results. A load-more option is available if there are enough pages of search results to support it via props.

Usage

<SearchResults
	canLoadMore
	isLoading={ loading }
	isVisible
	onChange={ ( next ) => console.log(next) }
	onLoadMore={ () => null }
	options={ [] }
	page={ 1 }
	query="search query"
/>

Props

Render Appender

A custom render appender for use with InnerBlocks allowing you to insert a block of your choice with props of your choice.

This allows you also to pass default attributes to the selected block type(s) and limit the max number of insertable items.

Usage

<RenderAppender
	attributes={{ text: 'This is a test' }}
	block="core/paragraph"
	callback={(nextName, nextAttributes) => callback(nextName, nextAttributes)}
	clientId={clientId}
	icon="plus"
	label={__('Add Block', 'pmc-gutenberg')}
	max={4}
/>

Props

SearchControl

A custom simple search select dropdown. Supply the options, the value, and you are provided a callback for select.

Usage

<SearchControl
	isLoading={ isLoadingPosts }
	label={ __(
		'Start typing to search for a list to add this list item to.',
		'pmc-gutenberg'
	) }
	placeholder={ __( 'Search for a list', 'pmc-gutenberg' ) }
	onSelect={ setSelected }
	onInputChange={ setSearch }
	options={ listPosts }
	value={ search }
/>

Props

SEO Prevent Index

Provides a field to read and write from the _mt_pmc_exclude_from_seo meta.

TODO: Provide a value and callback setter to the component directly rather than relying on the component to do that work.

Usage

 <SeoPreventIndex />

SEO Preview Edit

Provides an editable preview component with editable title and description.

• Title override: mt_seo_title
• Description override: mt_seo_description

Usage

 <SeoPreviewEdit
	description="SEO Description"
	isSelected={true}
	link="https://pmc.com"
	onChange={onChangeCallback}
	published="2022-04-13T15:38:50"
	title="SEO Title"
 />

Props

Term List Control

Uses the core SelectControl to output a list of term objects.

See also https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/select-control (opens in a new tab), though not all props are supported in this component as they've been deemed unecessary.

Usage

<TermListControl
	value={ 10 }
	label={__( 'Select a term', 'pmc-gutenberg' ) }
	terms={ [
		{ id: 10, name: 'Test Category' },
		{ id: 15, name: 'Test Category 2' }
	] }
	onChange={onChangeCallback}
/>

Props

Use Timer

Simple count-up timer that returns minutes and seconds in a duple.

Usage

const App = () => {
	return <Timer isActive={false} />
}

Props

Word Count

Displays the number of words and characters given a string.

Usage

<WordCount
    text="This is a string"
    excludeCharSpaces={ true }
    showRemainingAlert={ 70 }
/>

Note

The showRemainingAlert prop will be used in order to show the visual indication for the remaining character count.

Props