UNPKG

@wordpress/blocks

Version:
893 lines (530 loc) 29.3 kB
# Blocks "Block" is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage. The idea combines concepts of what in WordPress today we achieve with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. For more context, refer to [_What Are Little Blocks Made Of?_](https://make.wordpress.org/design/2017/01/25/what-are-little-blocks-made-of/) from the [Make WordPress Design](https://make.wordpress.org/design/) blog. The following documentation outlines steps you as a developer will need to follow to add your own custom blocks to WordPress's editor interfaces. ## Installation Install the module ```bash npm install @wordpress/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](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## Getting Started If you're not already accustomed to working with JavaScript in your WordPress plugins, you may first want to reference the guide on [_Including CSS & JavaScript_](https://developer.wordpress.org/themes/basics/including-css-javascript/) in the Theme Handbook. At a minimum, you will need to enqueue scripts for your block as part of a `enqueue_block_editor_assets` action callback, with a dependency on the `wp-blocks` and `wp-element` script handles: ```php <?php // myplugin.php function myplugin_enqueue_block_editor_assets() { wp_enqueue_script( 'myplugin-block', plugins_url( 'block.js', __FILE__ ), array( 'wp-blocks', 'wp-element' ) ); } add_action( 'enqueue_block_editor_assets', 'myplugin_enqueue_block_editor_assets' ); ``` The `enqueue_block_editor_assets` hook is only run in the Gutenberg editor context when the editor is ready to receive additional scripts and stylesheets. There is also an `enqueue_block_assets` hook which is run under **both** the editor and front-end contexts. This should be used to enqueue stylesheets common to the front-end and the editor. (The rules can be overridden in the editor-specific stylesheet if necessary.) The following sections will describe what you'll need to include in `block.js` to describe the behavior of your custom block. Note that all JavaScript code samples in this document are enclosed in a function that is evaluated immediately afterwards. We recommend using either ES6 modules [as used in this project](/docs/contributors/develop/coding-guidelines.md#imports) (documentation on setting up a plugin with Webpack + ES6 modules coming soon) or these ["immediately-invoked function expressions"](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression) as used in this document. Both of these methods ensure that your plugin's variables will not pollute the global `window` object, which could cause incompatibilities with WordPress core or with other plugins. ## Example Let's imagine you wanted to define a block to show a randomly generated image in a post's content using [lorempixel.com](http://lorempixel.com/). The service provides a choice of category and you'd like to offer this as an option when editing the post. Take a step back and consider the ideal workflow for adding a new random image: - Insert the block. It should be shown in some empty state, with an option to choose a category in a select dropdown. - Upon confirming my selection, a preview of the image should be shown next to the dropdown. At this point, you might realize that while you'd want some controls to be shown when editing content, the markup included in the published post might not appear the same (your visitors should not see a dropdown field when reading your content). This leads to the first requirement of describing a block: **You will need to provide implementations both for what's to be shown in an editor and what's to be saved with the published content**. To eliminate redundant effort here, share common behaviors by splitting your code up into [components](/packages/element/README.md). Now that we've considered user interaction, you should think about the underlying values that determine the markup generated by your block. In our example, the output is affected only when the category changes. Put another way: **the output of a block is a function of its attributes**. The category, a simple string, is the only thing we require to be able to generate the image we want to include in the published content. We call these underlying values of a block instance its **attributes**. With these concepts in mind, let's explore an implementation of our random image block: ```php <?php // random-image.php function random_image_enqueue_block_editor_assets() { wp_enqueue_script( 'random-image-block', plugins_url( 'block.js', __FILE__ ), array( 'wp-blocks', 'wp-element', 'wp-block-editor', ) ); } add_action( 'enqueue_block_editor_assets', 'random_image_enqueue_block_editor_assets' ); ``` ```js // block.js ( function ( blocks, element, blockEditor ) { var el = element.createElement, source = blocks.source, useBlockProps = blockEditor.useBlockProps; function RandomImage( props ) { var src = 'http://lorempixel.com/400/200/' + props.category; return el( 'img', { src: src, alt: props.category, } ); } blocks.registerBlockType( 'myplugin/random-image', { apiVersion: 2, title: 'Random Image', icon: 'format-image', category: 'text', attributes: { category: { type: 'string', source: 'attribute', attribute: 'alt', selector: 'img', }, }, edit: function ( props ) { var blockProps = useBlockProps(); var category = props.attributes.category, children; function setCategory( event ) { var selected = event.target.querySelector( 'option:checked' ); props.setAttributes( { category: selected.value } ); event.preventDefault(); } children = []; if ( category ) { children.push( RandomImage( { category: category } ) ); } children.push( el( 'select', { value: category, onChange: setCategory }, el( 'option', null, '- Select -' ), el( 'option', { value: 'sports' }, 'Sports' ), el( 'option', { value: 'animals' }, 'Animals' ), el( 'option', { value: 'nature' }, 'Nature' ) ) ); return el( 'form', Object.assing( blockProps, { onSubmit: setCategory } ), children ); }, save: function ( props ) { return RandomImage( { category: props.attributes.category } ); }, } ); } )( window.wp.blocks, window.wp.element, window.wp.blockEditor ); ``` _[(Example in ES2015+, JSX)](https://gist.github.com/aduth/fb1cc9a2296110a62b96383e4b2e8a7c)_ Let's briefly review a few items you might observe in the implementation: - When registering a new block, you must prefix its name with a namespace for your plugin. This helps prevent conflicts when more than one plugin registers a block with the same name. - You will use `createElement` to describe the structure of your block's markup. See the [Element documentation](/packages/element/README.md) for more information. - Extracting `RandomImage` to a separate function allows us to reuse it in both the editor-specific interface and the published content. - The `edit` function should handle any case where an attribute is unset, as in the case of the block being newly inserted. - We only change the attributes of a block by calling the `setAttributes` helper. Never assign a value on the attributes object directly. - React provides conveniences for working with `select` element with [`value` and `onChange` props](https://facebook.github.io/react/docs/forms.html#the-select-tag). By concerning yourself only with describing the markup of a block given its attributes, you need not worry about maintaining the state of the page, or how your block interacts in the context of the surrounding editor. But how does the markup become an object of attributes? We need a pattern for encoding the values into the published post's markup, and then retrieving them the next time the post is edited. This is the motivation for the block's `attributes` property. The shape of this object matches that of the attributes object we'd like to receive, where each value is a [**source**](http://github.com/aduth/hpq) which tries to find the desired value from the markup of the block. In the random image block above, we've given the `alt` attribute of the image a secondary responsibility of tracking the selected category. There are a few other ways we could have achieved this, but the category value happens to work well as an `alt` descriptor. In the `attributes` property, we define an object with a key of `category` whose value tries to find this `alt` attribute of the markup. If it's successful, the category's value in our `edit` and `save` functions will be assigned. In the case of a new block or invalid markup, this value would be `undefined`, so we adjust our return value accordingly. ## API <!-- START TOKEN(Autogenerated API docs) --> <a name="cloneBlock" href="#cloneBlock">#</a> **cloneBlock** Given a block object, returns a copy of the block object, optionally merging new attributes and/or replacing its inner blocks. _Parameters_ - _block_ `Object`: Block instance. - _mergeAttributes_ `Object`: Block attributes. - _newInnerBlocks_ `?Array`: Nested blocks. _Returns_ - `Object`: A cloned block. <a name="createBlock" href="#createBlock">#</a> **createBlock** Returns a block object given its type and attributes. _Parameters_ - _name_ `string`: Block name. - _attributes_ `Object`: Block attributes. - _innerBlocks_ `?Array`: Nested blocks. _Returns_ - `Object`: Block object. <a name="createBlocksFromInnerBlocksTemplate" href="#createBlocksFromInnerBlocksTemplate">#</a> **createBlocksFromInnerBlocksTemplate** Given an array of InnerBlocks templates or Block Objects, returns an array of created Blocks from them. It handles the case of having InnerBlocks as Blocks by converting them to the proper format to continue recursively. _Parameters_ - _innerBlocksOrTemplate_ `Array`: Nested blocks or InnerBlocks templates. _Returns_ - `Object[]`: Array of Block objects. <a name="doBlocksMatchTemplate" href="#doBlocksMatchTemplate">#</a> **doBlocksMatchTemplate** Checks whether a list of blocks matches a template by comparing the block names. _Parameters_ - _blocks_ `Array`: Block list. - _template_ `Array`: Block template. _Returns_ - `boolean`: Whether the list of blocks matches a templates <a name="findTransform" href="#findTransform">#</a> **findTransform** Given an array of transforms, returns the highest-priority transform where the predicate function returns a truthy value. A higher-priority transform is one with a lower priority value (i.e. first in priority order). Returns null if the transforms set is empty or the predicate function returns a falsey value for all entries. _Parameters_ - _transforms_ `Object[]`: Transforms to search. - _predicate_ `Function`: Function returning true on matching transform. _Returns_ - `?Object`: Highest-priority transform candidate. <a name="getBlockAttributes" href="#getBlockAttributes">#</a> **getBlockAttributes** Returns the block attributes of a registered block node given its type. _Parameters_ - _blockTypeOrName_ `string|Object`: Block type or name. - _innerHTML_ `string`: Raw block content. - _attributes_ `?Object`: Known block attributes (from delimiters). _Returns_ - `Object`: All block attributes. <a name="getBlockContent" href="#getBlockContent">#</a> **getBlockContent** Given a block object, returns the Block's Inner HTML markup. _Parameters_ - _block_ `Object`: Block instance. _Returns_ - `string`: HTML. <a name="getBlockDefaultClassName" href="#getBlockDefaultClassName">#</a> **getBlockDefaultClassName** Returns the block's default classname from its name. _Parameters_ - _blockName_ `string`: The block name. _Returns_ - `string`: The block's default class. <a name="getBlockFromExample" href="#getBlockFromExample">#</a> **getBlockFromExample** Create a block object from the example API. _Parameters_ - _name_ `string`: - _example_ `Object`: _Returns_ - `Object`: block. <a name="getBlockMenuDefaultClassName" href="#getBlockMenuDefaultClassName">#</a> **getBlockMenuDefaultClassName** Returns the block's default menu item classname from its name. _Parameters_ - _blockName_ `string`: The block name. _Returns_ - `string`: The block's default menu item class. <a name="getBlockSupport" href="#getBlockSupport">#</a> **getBlockSupport** Returns the block support value for a feature, if defined. _Parameters_ - _nameOrType_ `(string|Object)`: Block name or type object - _feature_ `string`: Feature to retrieve - _defaultSupports_ `*`: Default value to return if not explicitly defined _Returns_ - `?*`: Block support value <a name="getBlockTransforms" href="#getBlockTransforms">#</a> **getBlockTransforms** Returns normal block transforms for a given transform direction, optionally for a specific block by name, or an empty array if there are no transforms. If no block name is provided, returns transforms for all blocks. A normal transform object includes `blockName` as a property. _Parameters_ - _direction_ `string`: Transform direction ("to", "from"). - _blockTypeOrName_ `string|Object`: Block type or name. _Returns_ - `Array`: Block transforms for direction. <a name="getBlockType" href="#getBlockType">#</a> **getBlockType** Returns a registered block type. _Parameters_ - _name_ `string`: Block name. _Returns_ - `?Object`: Block type. <a name="getBlockTypes" href="#getBlockTypes">#</a> **getBlockTypes** Returns all registered blocks. _Returns_ - `Array`: Block settings. <a name="getBlockVariations" href="#getBlockVariations">#</a> **getBlockVariations** Returns an array with the variations of a given block type. _Parameters_ - _blockName_ `string`: Name of block (example: “core/columns”). - _scope_ `[WPBlockVariationScope]`: Block variation scope name. _Returns_ - `(WPBlockVariation[]|void)`: Block variations. <a name="getCategories" href="#getCategories">#</a> **getCategories** Returns all the block categories. _Returns_ - `WPBlockCategory[]`: Block categories. <a name="getChildBlockNames" href="#getChildBlockNames">#</a> **getChildBlockNames** Returns an array with the child blocks of a given block. _Parameters_ - _blockName_ `string`: Name of block (example: “latest-posts”). _Returns_ - `Array`: Array of child block names. <a name="getDefaultBlockName" href="#getDefaultBlockName">#</a> **getDefaultBlockName** Retrieves the default block name. _Returns_ - `?string`: Block name. <a name="getFreeformContentHandlerName" href="#getFreeformContentHandlerName">#</a> **getFreeformContentHandlerName** Retrieves name of block handling non-block content, or undefined if no handler has been defined. _Returns_ - `?string`: Block name. <a name="getGroupingBlockName" href="#getGroupingBlockName">#</a> **getGroupingBlockName** Retrieves name of block used for handling grouping interactions. _Returns_ - `?string`: Block name. <a name="getPhrasingContentSchema" href="#getPhrasingContentSchema">#</a> **getPhrasingContentSchema** Undocumented declaration. <a name="getPossibleBlockTransformations" href="#getPossibleBlockTransformations">#</a> **getPossibleBlockTransformations** Returns an array of block types that the set of blocks received as argument can be transformed into. _Parameters_ - _blocks_ `Array`: Blocks array. _Returns_ - `Array`: Block types that the blocks argument can be transformed to. <a name="getSaveContent" href="#getSaveContent">#</a> **getSaveContent** Given a block type containing a save render implementation and attributes, returns the static markup to be saved. _Parameters_ - _blockTypeOrName_ `string|Object`: Block type or name. - _attributes_ `Object`: Block attributes. - _innerBlocks_ `?Array`: Nested blocks. _Returns_ - `string`: Save content. <a name="getSaveElement" href="#getSaveElement">#</a> **getSaveElement** Given a block type containing a save render implementation and attributes, returns the enhanced element to be saved or string when raw HTML expected. _Parameters_ - _blockTypeOrName_ `string|Object`: Block type or name. - _attributes_ `Object`: Block attributes. - _innerBlocks_ `?Array`: Nested blocks. _Returns_ - `Object|string`: Save element or raw HTML string. <a name="getUnregisteredTypeHandlerName" href="#getUnregisteredTypeHandlerName">#</a> **getUnregisteredTypeHandlerName** Retrieves name of block handling unregistered block types, or undefined if no handler has been defined. _Returns_ - `?string`: Block name. <a name="hasBlockSupport" href="#hasBlockSupport">#</a> **hasBlockSupport** Returns true if the block defines support for a feature, or false otherwise. _Parameters_ - _nameOrType_ `(string|Object)`: Block name or type object. - _feature_ `string`: Feature to test. - _defaultSupports_ `boolean`: Whether feature is supported by default if not explicitly defined. _Returns_ - `boolean`: Whether block supports feature. <a name="hasChildBlocks" href="#hasChildBlocks">#</a> **hasChildBlocks** Returns a boolean indicating if a block has child blocks or not. _Parameters_ - _blockName_ `string`: Name of block (example: “latest-posts”). _Returns_ - `boolean`: True if a block contains child blocks and false otherwise. <a name="hasChildBlocksWithInserterSupport" href="#hasChildBlocksWithInserterSupport">#</a> **hasChildBlocksWithInserterSupport** Returns a boolean indicating if a block has at least one child block with inserter support. _Parameters_ - _blockName_ `string`: Block type name. _Returns_ - `boolean`: True if a block contains at least one child blocks with inserter support and false otherwise. <a name="isReusableBlock" href="#isReusableBlock">#</a> **isReusableBlock** Determines whether or not the given block is a reusable block. This is a special block type that is used to point to a global block stored via the API. _Parameters_ - _blockOrType_ `Object`: Block or Block Type to test. _Returns_ - `boolean`: Whether the given block is a reusable block. <a name="isTemplatePart" href="#isTemplatePart">#</a> **isTemplatePart** Determines whether or not the given block is a template part. This is a special block type that allows composing a page template out of reusable design elements. _Parameters_ - _blockOrType_ `Object`: Block or Block Type to test. _Returns_ - `boolean`: Whether the given block is a template part. <a name="isUnmodifiedDefaultBlock" href="#isUnmodifiedDefaultBlock">#</a> **isUnmodifiedDefaultBlock** Determines whether the block is a default block and its attributes are equal to the default attributes which means the block is unmodified. _Parameters_ - _block_ `WPBlock`: Block Object _Returns_ - `boolean`: Whether the block is an unmodified default block <a name="isValidBlockContent" href="#isValidBlockContent">#</a> **isValidBlockContent** Returns true if the parsed block is valid given the input content. A block is considered valid if, when serialized with assumed attributes, the content matches the original value. Logs to console in development environments when invalid. _Parameters_ - _blockTypeOrName_ `string|Object`: Block type. - _attributes_ `Object`: Parsed block attributes. - _originalBlockContent_ `string`: Original block content. _Returns_ - `boolean`: Whether block is valid. <a name="isValidIcon" href="#isValidIcon">#</a> **isValidIcon** Function that checks if the parameter is a valid icon. _Parameters_ - _icon_ `*`: Parameter to be checked. _Returns_ - `boolean`: True if the parameter is a valid icon and false otherwise. <a name="normalizeIconObject" href="#normalizeIconObject">#</a> **normalizeIconObject** Function that receives an icon as set by the blocks during the registration and returns a new icon object that is normalized so we can rely on just on possible icon structure in the codebase. _Parameters_ - _icon_ `WPBlockTypeIconRender`: Render behavior of a block type icon; one of a Dashicon slug, an element, or a component. _Returns_ - `WPBlockTypeIconDescriptor`: Object describing the icon. <a name="parse" href="#parse">#</a> **parse** Utilizes an optimized token-driven parser based on the Gutenberg grammar spec defined through a parsing expression grammar to take advantage of the regular cadence provided by block delimiters -- composed syntactically through HTML comments -- which, given a general HTML document as an input, returns a block list array representation. This is a recursive-descent parser that scans linearly once through the input document. Instead of directly recursing it utilizes a trampoline mechanism to prevent stack overflow. This initial pass is mainly interested in separating and isolating the blocks serialized in the document and manifestly not in the content within the blocks. _Related_ - <https://developer.wordpress.org/block-editor/packages/packages-block-serialization-default-parser/> _Parameters_ - _content_ `string`: The post content. _Returns_ - `Array`: Block list. <a name="parseWithAttributeSchema" href="#parseWithAttributeSchema">#</a> **parseWithAttributeSchema** Given a block's raw content and an attribute's schema returns the attribute's value depending on its source. _Parameters_ - _innerHTML_ `string`: Block's raw content. - _attributeSchema_ `Object`: Attribute's schema. _Returns_ - `*`: Attribute value. <a name="pasteHandler" href="#pasteHandler">#</a> **pasteHandler** Converts an HTML string to known blocks. Strips everything else. _Parameters_ - _options_ `Object`: - _options.HTML_ `[string]`: The HTML to convert. - _options.plainText_ `[string]`: Plain text version. - _options.mode_ `[string]`: Handle content as blocks or inline content. _ 'AUTO': Decide based on the content passed. _ 'INLINE': Always handle as inline content, and return string. \* 'BLOCKS': Always handle as blocks, and return array of blocks. - _options.tagName_ `[Array]`: The tag into which content will be inserted. - _options.preserveWhiteSpace_ `[boolean]`: Whether or not to preserve consequent white space. _Returns_ - `Array|string`: A list of blocks or a string, depending on `handlerMode`. <a name="rawHandler" href="#rawHandler">#</a> **rawHandler** Converts an HTML string to known blocks. _Parameters_ - _$1_ `Object`: - _$1.HTML_ `string`: The HTML to convert. _Returns_ - `Array`: A list of blocks. <a name="registerBlockCollection" href="#registerBlockCollection">#</a> **registerBlockCollection** Registers a new block collection to group blocks in the same namespace in the inserter. _Parameters_ - _namespace_ `string`: The namespace to group blocks by in the inserter; corresponds to the block namespace. - _settings_ `Object`: The block collection settings. - _settings.title_ `string`: The title to display in the block inserter. - _settings.icon_ `[Object]`: The icon to display in the block inserter. <a name="registerBlockStyle" href="#registerBlockStyle">#</a> **registerBlockStyle** Registers a new block style variation for the given block. _Parameters_ - _blockName_ `string`: Name of block (example: “core/latest-posts”). - _styleVariation_ `Object`: Object containing `name` which is the class name applied to the block and `label` which identifies the variation to the user. <a name="registerBlockType" href="#registerBlockType">#</a> **registerBlockType** Registers a new block provided a unique name and an object defining its behavior. Once registered, the block is made available as an option to any editor interface where blocks are implemented. _Parameters_ - _name_ `string`: Block name. - _settings_ `Object`: Block settings. _Returns_ - `?WPBlock`: The block, if it has been successfully registered; otherwise `undefined`. <a name="registerBlockTypeFromMetadata" href="#registerBlockTypeFromMetadata">#</a> **registerBlockTypeFromMetadata** Registers a new block provided from metadata stored in `block.json` file. It uses `registerBlockType` internally. _Related_ - registerBlockType _Parameters_ - _metadata_ `Object`: Block metadata loaded from `block.json`. - _metadata.name_ `string`: Block name. - _metadata.textdomain_ `string`: Textdomain to use with translations. - _additionalSettings_ `Object`: Additional block settings. _Returns_ - `?WPBlock`: The block, if it has been successfully registered; otherwise `undefined`. <a name="registerBlockVariation" href="#registerBlockVariation">#</a> **registerBlockVariation** Registers a new block variation for the given block type. _Parameters_ - _blockName_ `string`: Name of the block (example: “core/columns”). - _variation_ `WPBlockVariation`: Object describing a block variation. <a name="serialize" href="#serialize">#</a> **serialize** Takes a block or set of blocks and returns the serialized post content. _Parameters_ - _blocks_ `Array`: Block(s) to serialize. - _options_ `WPBlockSerializationOptions`: Serialization options. _Returns_ - `string`: The post content. <a name="setCategories" href="#setCategories">#</a> **setCategories** Sets the block categories. _Parameters_ - _categories_ `WPBlockCategory[]`: Block categories. <a name="setDefaultBlockName" href="#setDefaultBlockName">#</a> **setDefaultBlockName** Assigns the default block name. _Parameters_ - _name_ `string`: Block name. <a name="setFreeformContentHandlerName" href="#setFreeformContentHandlerName">#</a> **setFreeformContentHandlerName** Assigns name of block for handling non-block content. _Parameters_ - _blockName_ `string`: Block name. <a name="setGroupingBlockName" href="#setGroupingBlockName">#</a> **setGroupingBlockName** Assigns name of block for handling block grouping interactions. _Parameters_ - _name_ `string`: Block name. <a name="setUnregisteredTypeHandlerName" href="#setUnregisteredTypeHandlerName">#</a> **setUnregisteredTypeHandlerName** Assigns name of block handling unregistered block types. _Parameters_ - _blockName_ `string`: Block name. <a name="store" href="#store">#</a> **store** Store definition for the blocks namespace. _Related_ - <https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore> _Type_ - `Object` <a name="switchToBlockType" href="#switchToBlockType">#</a> **switchToBlockType** Switch one or more blocks into one or more blocks of the new block type. _Parameters_ - _blocks_ `Array|Object`: Blocks array or block object. - _name_ `string`: Block name. _Returns_ - `?Array`: Array of blocks or null. <a name="synchronizeBlocksWithTemplate" href="#synchronizeBlocksWithTemplate">#</a> **synchronizeBlocksWithTemplate** Synchronize a block list with a block template. Synchronizing a block list with a block template means that we loop over the blocks keep the block as is if it matches the block at the same position in the template (If it has the same name) and if doesn't match, we create a new block based on the template. Extra blocks not present in the template are removed. _Parameters_ - _blocks_ `Array`: Block list. - _template_ `Array`: Block template. _Returns_ - `Array`: Updated Block list. <a name="unregisterBlockStyle" href="#unregisterBlockStyle">#</a> **unregisterBlockStyle** Unregisters a block style variation for the given block. _Parameters_ - _blockName_ `string`: Name of block (example: “core/latest-posts”). - _styleVariationName_ `string`: Name of class applied to the block. <a name="unregisterBlockType" href="#unregisterBlockType">#</a> **unregisterBlockType** Unregisters a block. _Parameters_ - _name_ `string`: Block name. _Returns_ - `?WPBlock`: The previous block value, if it has been successfully unregistered; otherwise `undefined`. <a name="unregisterBlockVariation" href="#unregisterBlockVariation">#</a> **unregisterBlockVariation** Unregisters a block variation defined for the given block type. _Parameters_ - _blockName_ `string`: Name of the block (example: “core/columns”). - _variationName_ `string`: Name of the variation defined for the block. <a name="updateCategory" href="#updateCategory">#</a> **updateCategory** Updates a category. _Parameters_ - _slug_ `string`: Block category slug. - _category_ `WPBlockCategory`: Object containing the category properties that should be updated. <a name="withBlockContentContext" href="#withBlockContentContext">#</a> **withBlockContentContext** A Higher Order Component used to inject BlockContent using context to the wrapped component. _Returns_ - `WPComponent`: Enhanced component with injected BlockContent as prop. <!-- END TOKEN(Autogenerated API docs) --> <br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>