How to use @wordpress/block-editor - 10 common examples
To help you get started, we’ve selected a few @wordpress/block-editor examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
DefinitelyTyped / DefinitelyTyped / types / wordpress__block-editor / wordpress__block-editor-tests.tsx View on Github 
title: 'bar',
onClick() {
console.log('bar');
},
},
]}
>
This is the warning message
;
//
// Utils
// ============================================================================
// $ExpectType string[]
be.transformStyles(STYLES);
// $ExpectType string[]
be.transformStyles(STYLES, '.foobar');
//
// Store
// ============================================================================
// $ExpectType void
dispatch('core/block-editor').insertBlock(BLOCK_INSTANCE);
dispatch('core/block-editor').insertBlock(BLOCK_INSTANCE, 4);
dispatch('core/block-editor').insertBlock(BLOCK_INSTANCE, 4, 'foo');
dispatch('core/block-editor').insertBlock(BLOCK_INSTANCE, 4, 'foo', false);
// $ExpectType IterableIterator
dispatch('core/block-editor').insertBlocks([BLOCK_INSTANCE]);;
;
})();
//
// colors
//
// $ExpectType ComponentType
be.createCustomColorsHOC(COLORS)('backgroundColor', 'borderColor')(() => <h1>Hello World</h1>);
// $ExpectType string
be.getColorClassName('foo', 'bar');
// $ExpectType string | undefined
be.getColorClassName(undefined, 'bar');
// $ExpectType EditorColor | Pick
be.getColorObjectByAttributeValues(COLORS, 'red', '#ff0000');
// $ExpectType EditorColor | Pick
be.getColorObjectByAttributeValues(COLORS, undefined, '#ff0000');
// $ExpectType EditorColor | undefined
be.getColorObjectByColorValue(COLORS, '#ff0000');
// $ExpectType EditorColor | undefined
be.getColorObjectByColorValue(COLORS, undefined);
// $ExpectType ComponentType
be.withColors('backgroundColor', { textColor: 'color' })(() => <h1>Hello World</h1>);be.getColorClassName(undefined, 'bar');
// $ExpectType EditorColor | Pick
be.getColorObjectByAttributeValues(COLORS, 'red', '#ff0000');
// $ExpectType EditorColor | Pick
be.getColorObjectByAttributeValues(COLORS, undefined, '#ff0000');
// $ExpectType EditorColor | undefined
be.getColorObjectByColorValue(COLORS, '#ff0000');
// $ExpectType EditorColor | undefined
be.getColorObjectByColorValue(COLORS, undefined);
// $ExpectType ComponentType
be.withColors('backgroundColor', { textColor: 'color' })(() => <h1>Hello World</h1>);
//
// contrast-checker
//
;
;
;
//
// font-sizes
//
// $ExpectType Partial & Pick
be.getFontSize(FONT_SIZES, 'small', 15);
// $ExpectType Partial & Pick//
// font-sizes
//
// $ExpectType Partial & Pick
be.getFontSize(FONT_SIZES, 'small', 15);
// $ExpectType Partial & Pick
be.getFontSize(FONT_SIZES, undefined, 15);
// $ExpectType string
be.getFontSizeClass('foo');
// $ExpectType ComponentType
be.withFontSizes('fontSize')(() => <h1>Hello World</h1>);
//
// inner-blocks
//
;
;
;
;
//
// inserter
//
;
;
//;
;
;
//
// font-sizes
//
// $ExpectType Partial & Pick
be.getFontSize(FONT_SIZES, 'small', 15);
// $ExpectType Partial & Pick
be.getFontSize(FONT_SIZES, undefined, 15);
// $ExpectType string
be.getFontSizeClass('foo');
// $ExpectType ComponentType
be.withFontSizes('fontSize')(() => <h1>Hello World</h1>);
//
// inner-blocks
//
;
;
;
;
//
// inserter
//
;//
// colors
//
// $ExpectType ComponentType
be.createCustomColorsHOC(COLORS)('backgroundColor', 'borderColor')(() => <h1>Hello World</h1>);
// $ExpectType string
be.getColorClassName('foo', 'bar');
// $ExpectType string | undefined
be.getColorClassName(undefined, 'bar');
// $ExpectType EditorColor | Pick
be.getColorObjectByAttributeValues(COLORS, 'red', '#ff0000');
// $ExpectType EditorColor | Pick
be.getColorObjectByAttributeValues(COLORS, undefined, '#ff0000');
// $ExpectType EditorColor | undefined
be.getColorObjectByColorValue(COLORS, '#ff0000');
// $ExpectType EditorColor | undefined
be.getColorObjectByColorValue(COLORS, undefined);
// $ExpectType ComponentType
be.withColors('backgroundColor', { textColor: 'color' })(() => <h1>Hello World</h1>);
//
// contrast-checker
////
// $ExpectType ComponentType
be.createCustomColorsHOC(COLORS)('backgroundColor', 'borderColor')(() => <h1>Hello World</h1>);
// $ExpectType string
be.getColorClassName('foo', 'bar');
// $ExpectType string | undefined
be.getColorClassName(undefined, 'bar');
// $ExpectType EditorColor | Pick
be.getColorObjectByAttributeValues(COLORS, 'red', '#ff0000');
// $ExpectType EditorColor | Pick
be.getColorObjectByAttributeValues(COLORS, undefined, '#ff0000');
// $ExpectType EditorColor | undefined
be.getColorObjectByColorValue(COLORS, '#ff0000');
// $ExpectType EditorColor | undefined
be.getColorObjectByColorValue(COLORS, undefined);
// $ExpectType ComponentType
be.withColors('backgroundColor', { textColor: 'color' })(() => <h1>Hello World</h1>);
//
// contrast-checker
//
;
;
;be.getColorClassName('foo', 'bar');
// $ExpectType string | undefined
be.getColorClassName(undefined, 'bar');
// $ExpectType EditorColor | Pick
be.getColorObjectByAttributeValues(COLORS, 'red', '#ff0000');
// $ExpectType EditorColor | Pick
be.getColorObjectByAttributeValues(COLORS, undefined, '#ff0000');
// $ExpectType EditorColor | undefined
be.getColorObjectByColorValue(COLORS, '#ff0000');
// $ExpectType EditorColor | undefined
be.getColorObjectByColorValue(COLORS, undefined);
// $ExpectType ComponentType
be.withColors('backgroundColor', { textColor: 'color' })(() => <h1>Hello World</h1>);
//
// contrast-checker
//
;
;
;
//
// font-sizes
//
// $ExpectType Partial & Pickbe.createCustomColorsHOC(COLORS)('backgroundColor', 'borderColor')(() => <h1>Hello World</h1>);
// $ExpectType string
be.getColorClassName('foo', 'bar');
// $ExpectType string | undefined
be.getColorClassName(undefined, 'bar');
// $ExpectType EditorColor | Pick
be.getColorObjectByAttributeValues(COLORS, 'red', '#ff0000');
// $ExpectType EditorColor | Pick
be.getColorObjectByAttributeValues(COLORS, undefined, '#ff0000');
// $ExpectType EditorColor | undefined
be.getColorObjectByColorValue(COLORS, '#ff0000');
// $ExpectType EditorColor | undefined
be.getColorObjectByColorValue(COLORS, undefined);
// $ExpectType ComponentType
be.withColors('backgroundColor', { textColor: 'color' })(() => <h1>Hello World</h1>);
//
// contrast-checker
//
;
;
;
//
// font-sizes},
},
]}
>
This is the warning message
;
//
// Utils
// ============================================================================
// $ExpectType string[]
be.transformStyles(STYLES);
// $ExpectType string[]
be.transformStyles(STYLES, '.foobar');
//
// Store
// ============================================================================
// $ExpectType void
dispatch('core/block-editor').insertBlock(BLOCK_INSTANCE);
dispatch('core/block-editor').insertBlock(BLOCK_INSTANCE, 4);
dispatch('core/block-editor').insertBlock(BLOCK_INSTANCE, 4, 'foo');
dispatch('core/block-editor').insertBlock(BLOCK_INSTANCE, 4, 'foo', false);
// $ExpectType IterableIterator
dispatch('core/block-editor').insertBlocks([BLOCK_INSTANCE]);
dispatch('core/block-editor').insertBlocks([BLOCK_INSTANCE], 5);
dispatch('core/block-editor').insertBlocks([BLOCK_INSTANCE], 5, 'foo');
dispatch('core/block-editor').insertBlocks([BLOCK_INSTANCE], 5, 'foo', false);
Popular @wordpress/block-editor functions
- @wordpress/block-editor.__experimentalBlock.figure
- @wordpress/block-editor.__experimentalGetGradientClass
- @wordpress/block-editor.__experimentalUseColors
- @wordpress/block-editor.__experimentalUseGradient
- @wordpress/block-editor.__experimentalUsePageTemplatePickerVisible
- @wordpress/block-editor.createCustomColorsHOC
- @wordpress/block-editor.getColorClassName
- @wordpress/block-editor.getColorObjectByAttributeValues
- @wordpress/block-editor.getColorObjectByColorValue
- @wordpress/block-editor.getFontSize
- @wordpress/block-editor.getFontSizeClass
- @wordpress/block-editor.InnerBlocks
- @wordpress/block-editor.InnerBlocks.ButtonBlockAppender
- @wordpress/block-editor.InnerBlocks.Content
- @wordpress/block-editor.InnerBlocks.prototype
- @wordpress/block-editor.RichText.isEmpty
- @wordpress/block-editor.transformStyles
- @wordpress/block-editor.withColorContext
- @wordpress/block-editor.withColors
- @wordpress/block-editor.withFontSizes