@wordpress/block-editor
Advanced tools
This module allows you to create and use standalone block editors.
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.
import {
BlockEditorProvider,
BlockList,
WritingFlow,
ObserveTyping
} from '@wordpress/block-editor';
import { Popover } from '@wordpress/components';
import { useState } from '@wordpress/element';
function MyEditorComponent () {
const [ blocks, updateBlocks ] = useState( [] );
return (
<BlockEditorProvider
value={ blocks }
onInput={ updateBlocks }
onChange={ updateBlocks }
>
<WritingFlow>
<ObserveTyping>
<BlockList />
</ObserveTyping>
</WritingFlow>
<Popover.Slot />
</BlockEditorProvider>
);
}
// Make sure to load the block editor stylesheets too
// import '@wordpress/components/build-style/style.css';
// import '@wordpress/block-editor/build-style/style.css';
In this example, we're instantiating a block editor. A block editor is composed by a BlockEditorProvider wrapper component where you passe the current array of blocks and on each change the onInput or onChange callbacks are called depending on whether the change is considered persistent or not.
Inside BlockEditorProvider, you can nest any of the available @wordpress/block-editor UI components to build the UI of your editor.
In the example above we're rendering the BlockList to show and edit the block list. For instance we could add a custom sidebar and use the BlockInspector component to be able to edit the advanced settings for the currently selected block. (See the API for the list of all the available components).
In the example above, there's no registered block type, in order to use the block editor successfully make sure to register some block types. For instance, registering the core block types can be done like so:
import { registerCoreBlocks } from '@wordpress/block-library';
registerCoreBlocks();
// Make sure to load the block stylesheets too
// import '@wordpress/block-library/build-style/style.css';
// import '@wordpress/block-library/build-style/editor.css';
// import '@wordpress/block-library/build-style/theme.css';
# AlignmentToolbar
Undocumented declaration.
# Autocomplete
Related
# BlockAlignmentToolbar
Undocumented declaration.
# BlockBreadcrumb
Block breadcrumb component, displaying the hierarchy of the current block selection as a breadcrumb.
Returns
WPElement: Block Breadcrumb.# BlockControls
Undocumented declaration.
# BlockEdit
Undocumented declaration.
# BlockEditorKeyboardShortcuts
Undocumented declaration.
# BlockEditorProvider
Undocumented declaration.
# BlockFormatControls
Undocumented declaration.
# BlockIcon
Undocumented declaration.
# BlockInspector
Undocumented declaration.
# BlockList
Undocumented declaration.
# BlockMover
Undocumented declaration.
# BlockNavigationDropdown
Undocumented declaration.
# BlockPreview
BlockPreview renders a preview of a block or array of blocks.
Related
Parameters
(Array|Object): A block instance (object) or an array of blocks to be previewed.number: Width of the preview container in pixels. Controls at what size the blocks will be rendered inside the preview. Default: 700.Returns
WPComponent: The component to be rendered.# BlockSelectionClearer
Undocumented declaration.
# BlockSettingsMenu
Undocumented declaration.
# BlockTitle
Undocumented declaration.
# BlockToolbar
Undocumented declaration.
# BlockVerticalAlignmentToolbar
Related
# ButtonBlockerAppender
Related
# ColorPalette
Undocumented declaration.
# ColorPaletteControl
Undocumented declaration.
# ContrastChecker
Undocumented declaration.
# CopyHandler
Undocumented declaration.
# createCustomColorsHOC
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
Array: The array of color objects (name, slug, color, etc... ).Returns
Function: Higher-order component.# DefaultBlockAppender
Undocumented declaration.
# FontSizePicker
Undocumented declaration.
# getColorClassName
Returns a class based on the context a color is being used and its slug.
Parameters
string: Context/place where color is being used e.g: background, text etc...string: Slug of the color.Returns
?string: String with the class corresponding to the color in the provided context. Returns undefined if either colorContextName or colorSlug are not provided.# getColorObjectByAttributeValues
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
Array: Array of color objects as set by the theme or by the editor defaults.?string: A string containing the color slug.?string: A string containing the customColor value.Returns
?Object: 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
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
Array: Array of color objects as set by the theme or by the editor defaults.?string: A string containing the color value.Returns
?Object: Color object included in the colors array whose color property equals colorValue. Returns undefined if no color object matches this requirement.# getFontSize
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
Array: Array of font size objects containing at least the "name" and "size" values as properties.?string: Content of the font size attribute (slug).?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
Returns a class based on fontSizeName.
Parameters
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
Related
# Inserter
Undocumented declaration.
# InspectorAdvancedControls
Undocumented declaration.
# InspectorControls
Related
# MediaPlaceholder
Related
# MediaReplaceFlow
Undocumented declaration.
# MediaUpload
Related
# MediaUploadCheck
Related
# MultiBlocksSwitcher
Undocumented declaration.
# MultiSelectScrollIntoView
Scrolls the multi block selection end into view if not in view already. This is important to do after selection by keyboard.
# NavigableToolbar
Undocumented declaration.
# ObserveTyping
Related
# PanelColorSettings
Undocumented declaration.
# PlainText
Related
# PreserveScrollInReorder
Undocumented declaration.
# RichText
Related
# RichTextShortcut
Undocumented declaration.
# RichTextToolbarButton
Undocumented declaration.
# SETTINGS_DEFAULTS
The default editor settings
Type Definition
ObjectProperties
boolean: Enable/Disable Wide/Full AlignmentsArray: Array of objects representing the legacy widgets available.Array: Palette colorsboolean: Whether or not the custom colors are disabledArray: Available font sizesboolean: Whether or not the custom font sizes are disabledArray: Available image sizesnumber: Max width to constraint resizing(boolean|Array): Allowed block typesboolean: Whether or not the editor toolbar is fixedboolean: Whether or not the user is able to manage widgets.boolean: Whether the focus mode is enabled or notArray: Editor Stylesboolean: Whether the editor is in RTL modestring: Empty post placeholderstring: Empty title placeholderboolean: Whether or not the user can switch to the code editorboolean: Whether or not the inserter help panel is shownboolean: Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.boolean: Whether the user has enabled the Legacy Widget Blockboolean: Whether the user has enabled the Block Directoryboolean: Whether the user has enabled Full Site Editingboolean: Whether the user has enabled Full Site Editing Demo Templatesboolean: Whether the user has enabled the Page Templates# SkipToSelectedBlock
Undocumented declaration.
# storeConfig
Block editor data store configuration.
Related
Type
Object# ToolSelector
Undocumented declaration.
# transformStyles
Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.
Parameters
Array: CSS rules.string: Wrapper Class Name.Returns
Array: converted rules.# Typewriter
Ensures that the text selection keeps the same vertical distance from the viewport during keyboard events within this component. The vertical distance can vary. It is the last clicked or scrolled to position.
# URLInput
Related
# URLInputButton
Related
# URLPopover
Related
# useBlockEditContext
Undocumented declaration.
# Warning
Undocumented declaration.
# withColorContext
Undocumented declaration.
# withColors
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
...(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
Higher-order component, which handles font size logic for class generation, font size value retrieval, and font size change handling.
Parameters
...(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
Handles selection and navigation across blocks. This component should be wrapped around BlockList.
FAQs
Generic block editor.
The npm package @wordpress/block-editor receives a total of 145,824 weekly downloads. As such, @wordpress/block-editor popularity was classified as popular.
We found that @wordpress/block-editor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 23 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A mini Shai-Hulud campaign compromised Red Hat Cloud Services npm packages to steal developer and CI/CD secrets during installation.
Research
/Security News
The North Korean malware loader hides in a Packagist-listed package and its GitHub branch to fetch and execute remote code in a likely Contagious Interview-style lure.
Security News
The Rust project is moving toward formal rules on LLM use in contributions after months of internal debate over maintainer burden, code quality, and contributor experience.