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.

APIs

• registerBlockExtension
• registerIcons

Components

• ClipboardButton
• ColorSettings
• ContentPicker
• ContentSearch
• CustomBlockAppender
• IconPicker
• Image
• Link
• InnerBlockSlider
• 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?