How to access parent block’s attributes in nested block’s save function?

I currently have a block that passes some of its attributes down to the nested InnerBlocks using React’s Context API (the version of WordPress that I’m on does not yet have the Block Context feature. This allows me to successfully access the parent block’s attributes in the nested blocks’ edit function.

registerBlockType("myblock", {
  title: "My Block",
  attributes: {
    someValue: {
      type: 'string',
      default: '',
    },
  },
  edit(props) {
    const { someValue } = props.attributes;

    // ...other code...

    return (
      <MyContext.Provider value={someValue}>
        <InnerBlocks />
      </MyContext.Provider>
    );
  },
  save(props) {
    const { someValue } = props.attributes;

    return (
      <InnerBlocks.Content />
    );
  }
});

However, I also want to access the parent block’s attributes in the save function of the nested blocks. I have not been able to get React’s Context API to work. Is there a method for doing this in WordPress’s Block API?

You can pass data to a child via the select and dispatch hooks. So you would set up your child block with the inherited attribute and update that when the setting on the parent block changes.

Parent Block

Import dependencies

import { dispatch, select } from "@wordpress/data";

Your edit function might look something like this:

edit({ attributes, className, setAttributes, clientId }) {
    const { headerStyle } = attributes;

    const updateHeaderStyle = function( value ) {
        setAttributes({ headerStyle: value });

        // Update the child block's attributes
        var children = select('core/block-editor').getBlocksByClientId(clientId)[0].innerBlocks;
        children.forEach(function(child){
            dispatch('core/block-editor').updateBlockAttributes(child.clientId, {inheritedHeaderStyle: value})
        });
    }
    

    return (
        <>
            <InspectorControls>
                <PanelBody>
          

                    <RadioControl
                        label="Section Header Style"
                        selected = {headerStyle}
                        options = { [
                            { label: 'h2', value: 'h2' },
                            { label: 'h3', value: 'h3' },
                            { label: 'h4', value: 'h4' },
                            { label: 'h5', value: 'h5' },
                            { label: 'h6', value: 'h6' },
                        ]}
                        onChange= {updateHeaderStyle}
                    />
                </PanelBody>
            </InspectorControls>
            <InnerBlocks
              ...
            />
         <>
  );
  }

Child Block

The above function will update on change, but within the edit function of the child block you can grab the parent attribute and set it if undefined…

if (!inheritedHeaderStyle) {
    var parent = select('core/block-editor').getBlockParents(clientId);
    const parentAtts = select('core/block-editor').getBlockAttributes(parent);
    setAttributes( { inheritedHeaderStyle: parentAtts.headerStyle } )
}