10up Block Components

A collection of components built to be used in the block editor.

Overview

A collection of components built to be used in the block editor. These components do not include any build files and do not bundle the WordPress components. Therefore these need to be used in an environment where the Dependency Extraction Webpack Plugin is used and the import { component } from '@wordpress/package'; is supported. If your project is using 10up-toolkit, this is handled automatically.

Installation

1. Run npm install --save @10up/block-components within your WordPress theme or plugin.
2. Within your block editor code, import the relevant component(s) e.g. import { ContentPicker } from '@10up/block-components';
3. We highly recommend you use 10up-toolkit to build your block files as it handles dependency extraction for you.

Importing individual modules

As of v1.20.6, you can now import individual modules directly to reduce bundle size.

Instead of importing from the base entry point:

import { ContentPicker } from '@10up/block-components';
import { useAllTerms } from '@10up/block-components';
import { registerBlockExtension } from '@10up/block-components';
import { iconStore } from '@10up/block-components';

You can import components, hooks, apis, and stores individually from their specific paths:

import { ContentPicker } from '@10up/block-components/components/content-picker';
import { useAllTerms } from '@10up/block-components/hooks/use-all-terms';
import { registerBlockExtension } from '@10up/block-components/api/register-block-extension';
import { iconStore } from '@10up/block-components/stores/icons';

This approach offers improved tree-shaking and results in smaller bundles, especially when only using a subset of the library.

The original import paths are still fully supported and will continue to work as expected.

APIs

• registerBlockExtension
• registerIcons

Components

• ClipboardButton
• ColorSettings
• ContentPicker
• ContentSearch
• CustomBlockAppender
• IconPicker
• Image
• Link
• InnerBlockSlider DEPRECATED
• IsAdmin
• MediaToolbar
• Optional
• Repeater
• RichTextCharacterLimit

Post related Components

These components read/write information from the global post object or a PostContext.

• PostAuthor
• PostCategoryList
• PostContext
• PostDate
• PostExcerpt
• PostFeaturedImage
• PostPrimaryCategory
• PostPrimaryTerm
• PostTermList
• PostTitle
• PostMeta

Hooks

• useFilteredList
• useHasSelectedInnerBlock
• useIcons
• useMedia
• useRequestData
• useBlockParentAttributes
• useScript
• useIsPluginActive
• usePopover

Post related hooks

These hooks read/write information from the global post object or a PostContext.

• useAllTerms
• useTaxonomy
• useIsSupportedTaxonomy
• usePost
• usePrimaryTerm
• useSelectedTermIds
• useSelectedTerms
• useSelectedTermsOfSavedPost
• usePostMetaValue

Stores

• iconStore

Support Level

Active: 10up is actively working on this, and we expect to continue work for the foreseeable future including keeping tested up to the most recent version of WordPress. Bug reports, feature requests, questions, and pull requests are welcome.

Contributing

Please read CODE_OF_CONDUCT.md for details on our code of conduct and CONTRIBUTING.md for details on the process for submitting pull requests to us.

Like what you see?