BU Block Imports

Standardized set of components, hooks, and utilities that can be used within WordPress blocks.

In Development: This is just starting (March 2025) and it should be assumed that nothing actually works yet. Bug reports, feature requests, questions, and pull requests are welcome.

Installation

1. Run npm i @bostonuniversity/block-imports -D within your WordPress theme or plugin.
2. Within your block editor code, import the relevant component(s) e.g. import { ContentPicker } from '@bostonuniversity/block-imports';

Components

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.

These should be named in PascalCase without a BU namespace. They should use the .mjs extension.

• AllowedBlocks
• Background
• BlockIcons
• ColorSettings
• ContentPicker
• CustomBlockAppender
• FetchAllTermSelectControl
• HelpWrapper
• IconPicker
• Image
• LinkToolbar
• LoadingSpinner
• MediaCredit
• Optional
• ParagraphCaptionStyle
• ParagraphEndOfArticleStyle
• PlainTextWithLimit
• PostChooser
• PostPicker
• Repeater
• RichTextWithLimit
• ShareTool

Hooks

These are React Hooks, not WordPress Hooks. Hooks allow function components to have access to state, lifecycle methods, and other React features.

These should be named in camelCase without a BU namespace. They should use the .mjs extension.

• use-filtered-list
• use-icons
• useAllTerms
• useMedia
• useRenderAppenderWithBlockLimit
• useRequestData

Utils

These are just your standard garden variety javascript functions. They don't need all the features that hooks have.

These should be named in camelCase without a BU namespace. They should use the .mjs extension.

• umlautEverything

---

Development

Each folder should contain a README.md file explaining the purpose and usage of the component/hook/util.

Debugging

There is no build for this package. You can debug it though by running npx wp-scripts build index.js and ensure all paths can be resolved.

Publishing & Release Process

This package is managed through NPM. It can be found here: https://www.npmjs.com/package/@bostonuniversity/block-components

This repo has an action that will run whenever a new release is created.

To learn more about how NPM is managed for BU projects, please read https://developer.bu.edu/webteam/developer/vcs/npm-javascript-packages/

NOTE: you should verify that the package JSON file includes the following to make publishing easier:

"publishConfig": {
    "access": "public"
  }