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 } )
}