Package Exports

@wordpress/reusable-blocks
@wordpress/reusable-blocks/build-module/index.js
@wordpress/reusable-blocks/build/index.js
@wordpress/reusable-blocks/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@wordpress/reusable-blocks) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Reusable blocks

Reusable blocks components and logic.

Installation

Install the module

npm install @wordpress/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 ES2015+ such as IE browsers then using core-js will add polyfills for these methods.

How it works

This experimental module provides support for reusable blocks.

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

const { __experimentalReusableBlocks } = useSelect( ( select ) =>
    select( 'core' ).getEntityRecords( 'postType', 'wp_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 @wordpress/reusable-blocks:

import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';

const { __experimentalReusableBlocks } = useSelect( ( select ) =>
    select( 'core' ).getEntityRecords( 'postType', 'wp_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:

import { store as reusableBlocksStore } from '@wordpress/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>
    );
}

Code is Poetry.