Block Editor

Generic block editor module.

Installation

Install the module

npm install @wordpress/block-editor --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 lower versions of IE then using core-js or @babel/polyfill will add support for these methods. Learn more about it in Babel docs.

API

AlignmentToolbar

src/index.js#L15-L15

Undocumented declaration.

Autocomplete

src/index.js#L15-L15

Undocumented declaration.

BlockAlignmentToolbar

src/index.js#L15-L15

Undocumented declaration.

BlockControls

src/index.js#L15-L15

Undocumented declaration.

BlockEdit

src/index.js#L15-L15

Undocumented declaration.

BlockEditorKeyboardShortcuts

src/index.js#L15-L15

Undocumented declaration.

BlockEditorProvider

src/index.js#L15-L15

Undocumented declaration.

BlockFormatControls

src/index.js#L15-L15

Undocumented declaration.

BlockIcon

src/index.js#L15-L15

Undocumented declaration.

BlockInspector

src/index.js#L15-L15

Undocumented declaration.

BlockList

src/index.js#L15-L15

Undocumented declaration.

BlockMover

src/index.js#L15-L15

Undocumented declaration.

BlockNavigationDropdown

src/index.js#L15-L15

Undocumented declaration.

BlockSelectionClearer

src/index.js#L15-L15

Undocumented declaration.

BlockSettingsMenu

src/index.js#L15-L15

Undocumented declaration.

BlockTitle

src/index.js#L15-L15

Undocumented declaration.

BlockToolbar

src/index.js#L15-L15

Undocumented declaration.

ColorPalette

src/index.js#L15-L15

Undocumented declaration.

ContrastChecker

src/index.js#L15-L15

Undocumented declaration.

CopyHandler

src/index.js#L15-L15

Undocumented declaration.

createCustomColorsHOC

src/index.js#L15-L15

A higher-order component factory for creating a 'withCustomColors' HOC, which handles color logic for class generation color value, retrieval and color attribute setting.

Use this higher-order component to work with a custom set of colors.

Usage

const CUSTOM_COLORS = [ { name: 'Red', slug: 'red', color: '#ff0000' }, { name: 'Blue', slug: 'blue', color: '#0000ff' } ];
const withCustomColors = createCustomColorsHOC( CUSTOM_COLORS );
// ...
export default compose(
    withCustomColors( 'backgroundColor', 'borderColor' ),
    MyColorfulComponent,
);

Parameters

• colorsArray Array: The array of color objects (name, slug, color, etc... ).

Returns

Function: Higher-order component.

DefaultBlockAppender

src/index.js#L15-L15

Undocumented declaration.

FontSizePicker

src/index.js#L15-L15

Undocumented declaration.

getColorClassName

src/index.js#L15-L15

Returns a class based on the context a color is being used and its slug.

Parameters

• colorContextName string: Context/place where color is being used e.g: background, text etc...
• colorSlug string: Slug of the color.

Returns

string: String with the class corresponding to the color in the provided context.

getColorObjectByAttributeValues

src/index.js#L15-L15

Provided an array of color objects as set by the theme or by the editor defaults, and the values of the defined color or custom color returns a color object describing the color.

Parameters

• colors Array: Array of color objects as set by the theme or by the editor defaults.
• definedColor ?string: A string containing the color slug.
• customColor ?string: A string containing the customColor value.

Returns

?string: If definedColor is passed and the name is found in colors, the color object exactly as set by the theme or editor defaults is returned. Otherwise, an object that just sets the color is defined.

getColorObjectByColorValue

src/index.js#L15-L15

Provided an array of color objects as set by the theme or by the editor defaults, and a color value returns the color object matching that value or undefined.

Parameters

• colors Array: Array of color objects as set by the theme or by the editor defaults.
• colorValue ?string: A string containing the color value.

Returns

?string: Returns the color object included in the colors array whose color property equals colorValue. Returns undefined if no color object matches this requirement.

getFontSize

src/index.js#L15-L15

Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values. If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned.

Parameters

• fontSizes Array: Array of font size objects containing at least the "name" and "size" values as properties.
• fontSizeAttribute ?string: Content of the font size attribute (slug).
• customFontSizeAttribute ?number: Contents of the custom font size attribute (value).

Returns

?string: If fontSizeAttribute is set and an equal slug is found in fontSizes it returns the font size object for that slug. Otherwise, an object with just the size value based on customFontSize is returned.

getFontSizeClass

src/index.js#L15-L15

Returns a class based on fontSizeName.

Parameters

• fontSizeSlug string: Slug of the fontSize.

Returns

string: String with the class corresponding to the fontSize passed. The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'.

InnerBlocks

src/index.js#L15-L15

Undocumented declaration.

Inserter

src/index.js#L15-L15

Undocumented declaration.

InspectorAdvancedControls

src/index.js#L15-L15

Undocumented declaration.

InspectorControls

src/index.js#L15-L15

Undocumented declaration.

MediaPlaceholder

src/index.js#L15-L15

Undocumented declaration.

MediaUpload

src/index.js#L15-L15

Undocumented declaration.

MediaUploadCheck

src/index.js#L15-L15

Undocumented declaration.

MultiBlocksSwitcher

src/index.js#L15-L15

Undocumented declaration.

MultiSelectScrollIntoView

src/index.js#L15-L15

Undocumented declaration.

NavigableToolbar

src/index.js#L15-L15

Undocumented declaration.

ObserveTyping

src/index.js#L15-L15

Undocumented declaration.

PanelColorSettings

src/index.js#L15-L15

Undocumented declaration.

PlainText

src/index.js#L15-L15

Undocumented declaration.

PreserveScrollInReorder

src/index.js#L15-L15

Undocumented declaration.

RichText

src/index.js#L15-L15

Undocumented declaration.

RichTextShortcut

src/index.js#L15-L15

Undocumented declaration.

RichTextToolbarButton

src/index.js#L15-L15

Undocumented declaration.

SETTINGS_DEFAULTS

src/index.js#L17-L17

The default editor settings

alignWide boolean Enable/Disable Wide/Full Alignments availableLegacyWidgets Array Array of objects representing the legacy widgets available. colors Array Palette colors disableCustomColors boolean Whether or not the custom colors are disabled fontSizes Array Available font sizes disableCustomFontSizes boolean Whether or not the custom font sizes are disabled imageSizes Array Available image sizes maxWidth number Max width to constraint resizing allowedBlockTypes boolean|Array Allowed block types hasFixedToolbar boolean Whether or not the editor toolbar is fixed hasPermissionsToManageWidgets boolean Whether or not the user is able to manage widgets. focusMode boolean Whether the focus mode is enabled or not styles Array Editor Styles isRTL boolean Whether the editor is in RTL mode bodyPlaceholder string Empty post placeholder titlePlaceholder string Empty title placeholder

SkipToSelectedBlock

src/index.js#L15-L15

Undocumented declaration.

UnstableRichTextInputEvent

src/index.js#L15-L15

Undocumented declaration.

URLInput

src/index.js#L15-L15

Undocumented declaration.

URLInputButton

src/index.js#L15-L15

Undocumented declaration.

URLPopover

src/index.js#L15-L15

Undocumented declaration.

Warning

src/index.js#L15-L15

Undocumented declaration.

withColorContext

src/index.js#L15-L15

Undocumented declaration.

withColors

src/index.js#L15-L15

A higher-order component, which handles color logic for class generation color value, retrieval and color attribute setting.

For use with the default editor/theme color palette.

Usage

export default compose(
    withColors( 'backgroundColor', { textColor: 'color' } ),
    MyColorfulComponent,
);

Parameters

• colorTypes ...(object|string): The arguments can be strings or objects. If the argument is an object, it should contain the color attribute name as key and the color context as value. If the argument is a string the value should be the color attribute name, the color context is computed by applying a kebab case transform to the value. Color context represents the context/place where the color is going to be used. The class name of the color is generated using 'has' followed by the color name and ending with the color context all in kebab case e.g: has-green-background-color.

Returns

Function: Higher-order component.

withFontSizes

src/index.js#L15-L15

Higher-order component, which handles font size logic for class generation, font size value retrieval, and font size change handling.

Parameters

• args ...(object|string): The arguments should all be strings Each string contains the font size attribute name e.g: 'fontSize'.

Returns

Function: Higher-order component.

WritingFlow

src/index.js#L15-L15

Undocumented declaration.

_BlockSettingsMenuFirstItem

src/index.js#L15-L15

Undocumented declaration.

_BlockSettingsMenuPluginsExtension

src/index.js#L15-L15

Undocumented declaration.