# @gechiui/reusable-blocks

> Reusable blocks utilities.

Latest version **3.0.24** (published 2022-04-26) · GPL-2.0-or-later license · 0 weekly downloads

## Install

```sh
npm install @gechiui/reusable-blocks
pnpm add @gechiui/reusable-blocks
yarn add @gechiui/reusable-blocks
bun add @gechiui/reusable-blocks
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.24 |
| Published | 2022-04-26 |
| First published | 2022-03-17 |
| Weekly downloads | 0 |
| License | GPL-2.0-or-later |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 12 |
| Unpacked size | 143.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | The GeChiUI Contributors |
| Maintainers | gechiui |
| Keywords | gechiui, gutenberg, reusable blocks |

## Links

- npm: https://www.npmjs.com/package/@gechiui/reusable-blocks
- Repository: https://github.com/GeChiUI/gutenberg
- Homepage: https://github.com/GeChiUI/gutenberg/tree/HEAD/packages/reusable-blocks/README.md
- Issues: https://github.com/GeChiUI/gutenberg/issues
- npm.io page: https://npm.io/package/@gechiui/reusable-blocks

## Dependencies (12)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [@gechiui/url](https://npm.io/package/@gechiui/url.md) ^3.3.2
- [@gechiui/data](https://npm.io/package/@gechiui/data.md) ^6.1.5
- [@gechiui/i18n](https://npm.io/package/@gechiui/i18n.md) ^4.2.4
- [@gechiui/icons](https://npm.io/package/@gechiui/icons.md) ^6.1.1
- [@gechiui/blocks](https://npm.io/package/@gechiui/blocks.md) ^11.1.5
- [@gechiui/compose](https://npm.io/package/@gechiui/compose.md) ^5.0.7
- [@gechiui/element](https://npm.io/package/@gechiui/element.md) ^4.0.4
- [@gechiui/notices](https://npm.io/package/@gechiui/notices.md) ^3.2.8
- [@gechiui/core-data](https://npm.io/package/@gechiui/core-data.md) ^4.0.11
- [@gechiui/components](https://npm.io/package/@gechiui/components.md) ^19.2.3
- [@gechiui/block-editor](https://npm.io/package/@gechiui/block-editor.md) ^8.0.18

## Recent versions

- 3.0.24 (latest) — 2022-04-26
- 3.0.23 — 2022-04-08
- 3.0.22 — 2022-03-17

## README

# Reusable blocks

Reusable blocks components and logic.

## Installation

Install the module

```bash
npm install @gechiui/reusable-blocks --save
```

_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@gechiui/babel-preset-default`](https://github.com/GeChiUI/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._

## How it works

This experimental module provides support for reusable blocks.

Reusable blocks are GeChiUI entities and the following is enough to ensure they are available in the inserter:

```js
const { __experimentalReusableBlocks } = useSelect( ( select ) =>
	select( 'core' ).getEntityRecords( 'postType', 'gc_block' )
);

return (
	<BlockEditorProvider
		value={ blocks }
		onInput={ onInput }
		onChange={ onChange }
		settings={ {
			...settings,
			__experimentalReusableBlocks,
		} }
		{ ...props }
	/>
);
```

With the above configuration management features (such as creating new reusable blocks) are still missing from the editor. Enter `@gechiui/reusable-blocks`:

```js
import { ReusableBlocksMenuItems } from '@gechiui/reusable-blocks';

const { __experimentalReusableBlocks } = useSelect( ( select ) =>
	select( 'core' ).getEntityRecords( 'postType', 'gc_block' )
);

return (
	<BlockEditorProvider
		value={ blocks }
		onInput={ onInput }
		onChange={ onChange }
		settings={ {
			...settings,
			__experimentalReusableBlocks,
		} }
		{ ...props }
	>
		<ReusableBlocksMenuItems />
		{ children }
	</BlockEditorProvider>
);
```

This package also provides convenient utilities for managing reusable blocks through redux actions:

```js
import { store as reusableBlocksStore } from '@gechiui/reusable-blocks';

function MyConvertToStaticButton( { clientId } ) {
	const { __experimentalConvertBlockToStatic } = useDispatch(
		reusableBlocksStore
	);
	return (
		<button
			onClick={ () => __experimentalConvertBlockToStatic( clientId ) }
		>
			Convert to static
		</button>
	);
}

function MyConvertToReusableButton( { clientId } ) {
	const { __experimentalConvertBlocksToReusable } = useDispatch(
		reusableBlocksStore
	);
	return (
		<button
			onClick={ () =>
				__experimentalConvertBlocksToReusable( [ clientId ] )
			}
		>
			Convert to reusable
		</button>
	);
}

function MyDeleteReusableBlockButton( { id } ) {
	const { __experimentalDeleteReusableBlock } = useDispatch(
		reusableBlocksStore
	);
	return (
		<button onClick={ () => __experimentalDeleteReusableBlock( id ) }>
			Delete reusable block
		</button>
	);
}
```

<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

---
_Source: https://npm.io/package/@gechiui/reusable-blocks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._