How to use @wordpress/blocks - 10 common examples

it( 'should be present for each block', () => {
		const errors = [];

		getBlockTypes()
			.map( ( block ) => block.name )
			// We don't want tests for each oembed provider, which all have the same
			// `save` functions and attributes.
			// The `core/template` is not worth testing here because it's never saved, it's covered better in e2e tests.
			.filter( ( name ) => name.indexOf( 'core-embed' ) !== 0 && name !== 'core/template' )
			.forEach( ( name ) => {
				const nameToFilename = blockNameToFixtureBasename( name );
				const foundFixtures = blockBasenames
					.filter( ( basename ) => (
						basename === nameToFilename ||
						startsWith( basename, nameToFilename + '__' )
					) )
					.map( ( basename ) => {
						const {
							filename: htmlFixtureFileName,
						} = getBlockFixtureHTML( basename );

// $ExpectType string | BlockInstance<{ [k: string]: any; }>[]
blocks.pasteHandler({ HTML: '<p>hello world</p>' });

// $ExpectType BlockInstance&lt;{ [k: string]: any; }&gt;[]
blocks.rawHandler({ HTML: '<p>hello world</p>' });

//
// registration
// ----------------------------------------------------------------------------

// $ExpectType unknown
blocks.getBlockSupport(BLOCK, 'align');

// $ExpectType unknown
blocks.getBlockSupport('core/paragraph', 'anchor');

// $ExpectType string
blocks.getBlockSupport('core/paragraph', 'inserter', 'Hello World');

// $ExpectType number
blocks.getBlockSupport('core/paragraph', 'inserter', 1234);

// $ExpectType { foo: string; }
blocks.getBlockSupport('core/paragraph', 'inserter', { foo: 'bar' });

// $ExpectType Block | undefined
blocks.getBlockType('core/paragraph');

// $ExpectType Block[]
blocks.getBlockTypes();

// $ExpectType BlockInstance<{ [k: string]: any; }>[]
blocks.rawHandler({ HTML: '<p>hello world</p>' });

//
// registration
// ----------------------------------------------------------------------------

// $ExpectType unknown
blocks.getBlockSupport(BLOCK, 'align');

// $ExpectType unknown
blocks.getBlockSupport('core/paragraph', 'anchor');

// $ExpectType string
blocks.getBlockSupport('core/paragraph', 'inserter', 'Hello World');

// $ExpectType number
blocks.getBlockSupport('core/paragraph', 'inserter', 1234);

// $ExpectType { foo: string; }
blocks.getBlockSupport('core/paragraph', 'inserter', { foo: 'bar' });

// $ExpectType Block | undefined
blocks.getBlockType('core/paragraph');

// $ExpectType Block[]
blocks.getBlockTypes();

// $ExpectType string[]
blocks.getChildBlockNames('core/columns');

//
// registration
// ----------------------------------------------------------------------------

// $ExpectType unknown
blocks.getBlockSupport(BLOCK, 'align');

// $ExpectType unknown
blocks.getBlockSupport('core/paragraph', 'anchor');

// $ExpectType string
blocks.getBlockSupport('core/paragraph', 'inserter', 'Hello World');

// $ExpectType number
blocks.getBlockSupport('core/paragraph', 'inserter', 1234);

// $ExpectType { foo: string; }
blocks.getBlockSupport('core/paragraph', 'inserter', { foo: 'bar' });

// $ExpectType Block | undefined
blocks.getBlockType('core/paragraph');

// $ExpectType Block[]
blocks.getBlockTypes();

// $ExpectType string[]
blocks.getChildBlockNames('core/columns');

// $ExpectType string | undefined
blocks.getDefaultBlockName();

);

// $ExpectType BlockInstance<{ [k: string]: any; }>[]
blocks.synchronizeBlocksWithTemplate();

// $ExpectType BlockInstance<{ [k: string]: any; }>[]
blocks.synchronizeBlocksWithTemplate([BLOCK_INSTANCE, BLOCK_INSTANCE]);

// $ExpectType BlockInstance<{ [k: string]: any; }>[]
blocks.synchronizeBlocksWithTemplate(
    [BLOCK_INSTANCE, BLOCK_INSTANCE],
    [['my/foo', { foo: 'bar' }], ['my/foo', { foo: 'bar' }]]
);

// $ExpectType BlockInstance<{ [k: string]: any; }>[]
blocks.synchronizeBlocksWithTemplate(undefined, [['my/foo', { foo: 'bar' }], ['my/foo', { foo: 'bar' }]]);

//
// utils
// ----------------------------------------------------------------------------

// $ExpectType boolean
blocks.isUnmodifiedDefaultBlock(BLOCK_INSTANCE);

// $ExpectType boolean
blocks.isValidIcon(23);

// $ExpectType boolean
blocks.isValidIcon(() => null);

// $ExpectType boolean
blocks.isValidIcon('block-default');

// $ExpectType BlockInstance<{ [k: string]: any; }>[] | null
blocks.switchToBlockType(BLOCK_INSTANCE, 'core/paragraph');

// $ExpectType BlockInstance<{ [k: string]: any; }>[] | null
blocks.switchToBlockType([BLOCK_INSTANCE], 'core/paragraph');

//
// parser
// ----------------------------------------------------------------------------

// $ExpectType Record
blocks.getBlockAttributes('my/foo', '<div>hello world</div>');

// $ExpectType { foo: string; }
blocks.getBlockAttributes(BLOCK, '<div>hello world</div>');

const TEST_HTML = `
    <main id="root">
        <p data-baz="false" data-foo="bar">
            Hello World!
        </p>
        <button class="my-button" disabled="">Click me</button>
        <p>
            Lorem ipsum
        </p>
    </main>
`;

// $ExpectType boolean | undefined
blocks.parseWithAttributeSchema(TEST_HTML, {
    source: 'attribute',

//
// children
// ----------------------------------------------------------------------------

// $ExpectType ReactChild[]
blocks.children.fromDOM(document.querySelectorAll('div'));

// $ExpectType (domNode: Node & ParentNode) => ReactChild[]
blocks.children.matcher('.foo');

//
// factory
// ----------------------------------------------------------------------------

// $ExpectType BlockInstance<{ foo: string; }>
blocks.cloneBlock(BLOCK_INSTANCE);

// $ExpectType BlockInstance<{ foo: string; }>
blocks.createBlock('my/foo', { foo: 'bar' });

blocks.findTransform(
    [
        {
            type: 'block',
            blocks: [],
            priority: 1,
            transform(atts) {
                return blocks.createBlock('my/foo');
            },
        },
    ],
    transform => transform.type === 'block'

blocks.hasBlockSupport(BLOCK, 'className');

// $ExpectType boolean
blocks.hasBlockSupport(BLOCK, 'alignWide', true);

// $ExpectType boolean
blocks.hasChildBlocks('core/columns');

// $ExpectType boolean
blocks.hasChildBlocksWithInserterSupport('core/columns');

// $ExpectType boolean
blocks.isReusableBlock(BLOCK);

// $ExpectType boolean
blocks.isReusableBlock(BLOCK_INSTANCE);

// $ExpectType void
blocks.registerBlockStyle('my/foo', { name: 'foo__bar', label: 'Foobar' });

// $ExpectType Block<{}> | undefined
blocks.registerBlockType('my/foo', {
    attributes: {},
    icon: () => null,
    title: 'Foo',
    category: 'common',
});

// $ExpectType Block<{ foo: string; }> | undefined
blocks.registerBlockType<{ foo: string }>('my/foo', {
    attributes: {
        foo: {

blocks.getUnregisteredTypeHandlerName();

// $ExpectType boolean
blocks.hasBlockSupport(BLOCK, 'className');

// $ExpectType boolean
blocks.hasBlockSupport(BLOCK, 'alignWide', true);

// $ExpectType boolean
blocks.hasChildBlocks('core/columns');

// $ExpectType boolean
blocks.hasChildBlocksWithInserterSupport('core/columns');

// $ExpectType boolean
blocks.isReusableBlock(BLOCK);

// $ExpectType boolean
blocks.isReusableBlock(BLOCK_INSTANCE);

// $ExpectType void
blocks.registerBlockStyle('my/foo', { name: 'foo__bar', label: 'Foobar' });

// $ExpectType Block<{}> | undefined
blocks.registerBlockType('my/foo', {
    attributes: {},
    icon: () => null,
    title: 'Foo',
    category: 'common',
});

// $ExpectType Block<{ foo: string; }> | undefined

blocks.findTransform(
    [
        {
            type: 'block',
            blocks: [],
            priority: 1,
            transform(atts) {
                return blocks.createBlock('my/foo');
            },
        },
    ],
    transform => transform.type === 'block'
);

declare const RAW_TRANSFORM_ARRAY: Array>;
blocks.findTransform(RAW_TRANSFORM_ARRAY, ({ isMatch }) => true);

// $ExpectType string
blocks.getBlockTransforms('to', 'my/foo')[0].blockName;

// $ExpectType string
blocks.getBlockTransforms<{ foo: string }>('to', 'my/foo')[0].blockName;

// $ExpectType Block>[]
blocks.getPossibleBlockTransformations([BLOCK_INSTANCE]);

// $ExpectType BlockInstance<{ [k: string]: any; }>[] | null
blocks.switchToBlockType(BLOCK_INSTANCE, 'core/paragraph');

// $ExpectType BlockInstance<{ [k: string]: any; }>[] | null
blocks.switchToBlockType([BLOCK_INSTANCE], 'core/paragraph');