I have a Context.Provider with a value
When I import it in the child component with useContext
it returns undefined
I don’t see what I’m missing here
For context here is the folder structure
src
slider
edit.js
index.js
slide
edit.js
index.js
build
slider
index.js
slide
index.js
index.js
import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
/**
* Internal dependencies
*/
import Edit from './edit';
import save from './save';
import metadata from './block.json';
/**
* Every block starts by registering a new block type definition.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
*/
registerBlockType( metadata.name, {
/**
* @see ./edit.js
*/
edit: Edit,
/**
* @see ./save.js
*/
save,
} );
import React, { createContext, useRef } from 'react'
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor'
export const SlideContext = createContext()
export default function Edit() {
const slideRefs = useRef([])
const setSlideRef = (ref, index) => {
slideRefs.current[index] = ref
console.log('setSlideRef called with ref:', ref, 'and index:', index)
}
// some code omitted for brevity
console.log('Rendering Slider component with context value:', { setSlideRef })
const blockProps = useBlockProps()
return (
<SlideContext.Provider value={{ setSlideRef }}>
<div {...blockProps}>
<div className='splash-slider__wrapper'>
<div
className='splash-slider__track'
>
<InnerBlocks
allowedBlocks={['splash-blocks/slide']}
renderAppender={() => <InnerBlocks.ButtonBlockAppender />}
templateLock={false}
/>
</div>
</div>
</div>
</SlideContext.Provider>
)
}
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor'
import { useEffect, useRef, useContext } from '@wordpress/element' // Same as React
import { SlideContext } from '../slider/edit' // Import the context from the parent block
export default function Edit({ attributes, setAttributes, clientId }) {
const blockProps = useBlockProps({
className: 'splash-slider__slide'
})
const slideRef = useRef()
const slideContext = useContext(SlideContext)
console.log('slideContext:', slideContext) // logs: undefined
const { setSlideRef } = slideContext || {}
useEffect(() => {
console.log('slideRef.current:', slideRef.current) // logs correctly
if (setSlideRef && slideRef.current) {
console.log('Setting slideRef with clientId:', clientId)
setSlideRef(slideRef, clientId)
}
}, [setSlideRef, clientId])
return (
<div {...blockProps} ref={slideRef}>
// InspectorControls and PanelBody omitted for brevity
<InnerBlocks />
</div>
)
}