{"id":135621,"date":"2021-04-21T15:39:48","date_gmt":"2021-04-21T15:39:48","guid":{"rendered":"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-context\/"},"modified":"2026-06-23T03:16:07","modified_gmt":"2026-06-23T03:16:07","slug":"block-context","status":"publish","type":"blocks-handbook","link":"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-context\/","title":{"rendered":"Context"},"content":{"rendered":"

Block context is a feature which enables ancestor blocks to provide values which can be consumed by descendent blocks within its own hierarchy. Those descendent blocks can inherit these values without resorting to hard-coded values and without an explicit awareness of the block which provides those values.<\/p>\n

This is especially useful in full-site editing where, for example, the contents of a block may depend on the context of the post in which it is displayed. A blogroll template may show excerpts of many different posts. Using block context, there can still be one single “Post Excerpt” block which displays the contents of the post based on an inherited post ID.<\/p>\n

If you are familiar with React Context<\/a>, block context adopts many of the same ideas. In fact, the client-side block editor implementation of block context is a very simple application of React Context. Block context is also supported in server-side render_callback<\/code> implementations, demonstrated in the examples below.<\/p>\n

Defining block context<\/h2>\n

Block context is defined in the registered settings of a block. A block can provide a context value, or consume a value it seeks to inherit.<\/p>\n

Providing block context<\/h3>\n

A block can provide a context value by assigning a providesContext<\/code> property in its registered settings. This is an object which maps a context name to one of the block’s own attributes. The value corresponding to that attribute value is made available to descendent blocks and can be referenced by the same context name. Currently, block context only supports values derived from the block’s own attributes. This could be enhanced in the future to support additional sources of context values.<\/p>\n

    attributes: {\n        recordId: {\n            type: 'number',\n        },\n    },\n\n    providesContext: {\n        'my-plugin\/recordId': 'recordId',\n    },\n<\/code><\/pre>\n
For a complete example, refer to the section below.<\/p>\n
Include a namespace<\/h4>\n
As seen in the above example, it is recommended that you include a namespace as part of the name of the context key so as to avoid potential conflicts with other plugins or default context values provided by WordPress. The context namespace should be specific to your plugin, and in most cases can be the same as used in the name of the block itself.<\/p>\n
Consuming block context<\/h3>\n
A block can inherit a context value from an ancestor provider by assigning a usesContext<\/code> property in its registered settings. This should be assigned as an array of the context names the block seeks to inherit.<\/p>\n
registerBlockType('my-plugin\/record-title', {\n    title: 'Record Title',\n    category: 'widgets',\n\n    usesContext: ['my-plugin\/recordId'],\n\n<\/code><\/pre>\n
Using block context<\/h2>\n
Once a block has defined the context it seeks to inherit, this can be accessed in the implementation of edit<\/code> (JavaScript) and render_callback<\/code> (PHP). It is provided as an object (JavaScript) or associative array (PHP) of the context values which have been defined for the block. Note that a context value will only be made available if the block explicitly defines a desire to inherit that value.<\/p>\n
Note: Block Context is not available to save<\/code>.<\/p>\n
JavaScript<\/h3>\n
registerBlockType('my-plugin\/record-title', {\n\n    edit({ context }) {\n        return 'The record ID: ' + context['my-plugin\/recordId'];\n    },\n\n<\/code><\/pre>\n
PHP<\/h3>\n
A block’s context values are available from the context<\/code> property of the $block<\/code> argument passed as the third argument to the render_callback<\/code> function.<\/p>\n
register_block_type( 'my-plugin\/record-title', array(\n    'render_callback' => function( $attributes, $content, $block ) {\n        return 'The current record ID is: ' . $block->context['my-plugin\/recordId'];\n    },\n) );\n<\/code><\/pre>\n
Example<\/h2>\n
    \n
  1. Create a record<\/code> block.<\/li>\n<\/ol>\n
    npm init @wordpress\/block --namespace my-plugin record\ncd record\n<\/code><\/pre>\n
      \n
    1. Edit src\/index.js<\/code>. Insert the recordId<\/code> attribute and providesContext<\/code> property in the registerBlockType<\/code> function and add the registration of the record-title<\/code> block at the bottom:<\/li>\n<\/ol>\n
      registerBlockType( 'my-plugin\/record', {\n    \/\/ ... cut ...\n\n    attributes: {\n        recordId: {\n            type: 'number',\n        },\n    },\n\n    providesContext: {\n        'my-plugin\/recordId': 'recordId',\n    },\n\n    \/**\n     * @see .\/edit.js\n     *\/\n    edit: Edit,\n\n    \/**\n     * @see .\/save.js\n     *\/\n    save,\n} );\n\nregisterBlockType( 'my-plugin\/record-title', {\n    title: 'Record Title',\n    category: 'widgets',\n\n    usesContext: [ 'my-plugin\/recordId' ],\n\n    edit( { context } ) {\n        return 'The record ID: ' + context[ 'my-plugin\/recordId' ];\n    },\n\n    save() {\n        return null;\n    },\n} );\n<\/code><\/pre>\n
        \n
      1. Edit src\/edit.js<\/code> for the record<\/code> block. Replace the Edit<\/code> function with the following code:<\/li>\n<\/ol>\n
        import { TextControl } from '@wordpress\/components';\nimport { InnerBlocks } from '@wordpress\/block-editor';\nimport { __ } from '@wordpress\/i18n';\n\nexport default function Edit( props ) {\n    const MY_TEMPLATE = [ [ 'my-plugin\/record-title', {} ] ];\n    const {\n        attributes: { recordId },\n        setAttributes,\n    } = props;\n    return (\n        <div>\n            <TextControl\n                label={ __( 'Record ID' ) }\n                value={ recordId }\n                onChange={ ( val ) =>\n                    setAttributes( { recordId: Number( val ) } )\n                }\n            \/>\n            <InnerBlocks template={ MY_TEMPLATE } templateLock=\"all\" \/>\n        <\/div>\n    );\n}\n<\/code><\/pre>\n
          \n
        1. Edit src\/save.js<\/code> for the record<\/code> block. Replace the save<\/code> function with the following code:<\/li>\n<\/ol>\n
          export default function save( props ) {\n    return <p>The record ID: { props.attributes.recordId }<\/p>;\n}\n<\/code><\/pre>\n
            \n
          1. Create a new post and add the record<\/code> block. If you type a number in the text box, you’ll see the same number is shown in the record-title<\/code> block below it.<\/li>\n<\/ol>\n
            \"Block<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":134406,"menu_order":64,"template":"","meta":{"footnotes":""},"class_list":["post-135621","blocks-handbook","type-blocks-handbook","status-publish","hentry","type-handbook"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/135621","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook"}],"about":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/types\/blocks-handbook"}],"version-history":[{"count":12,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/135621\/revisions"}],"predecessor-version":[{"id":182241,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/135621\/revisions\/182241"}],"up":[{"embeddable":true,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134406"}],"wp:attachment":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/media?parent=135621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}