WordPress

edytor bloków – Gutenberg Dev – React Context.Provider zwraca niezdefiniowane

  • 28 lipca, 2024
  • 2 min read
edytor bloków – Gutenberg Dev – React Context.Provider zwraca niezdefiniowane


Mam Context.Provider z wartością skonfigurowaną w slider/edit.js.
Kiedy importuję go do komponentu podrzędnego slide/edit.js z useContext zwraca wartość undefined
Nie widzę, czego mi tu brakuje

Dla kontekstu oto struktura folderów

src
    slider
        edit.js
        index.js
    slide
        edit.js
        index.js

build
    slider
        index.js
    slide
        index.js

indeks.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 
 */
registerBlockType( metadata.name, {
    /**
     * @see ./edit.js
     */
    edit: Edit,

    /**
     * @see ./save.js
     */
    save,
} );

suwak/edycja.js

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

slajd/edycja.js

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


Źródło

Warto przeczytać!  niestandardowe pole - wordpress prosta ocena wielu postów z post_meta i user_meta