Wednesday, January 18, 2023
HomeWordPress DevelopmentHow I can get attributes from one block and utilizing it in...

How I can get attributes from one block and utilizing it in one other


I learn loads of information from documentation about utilizing Context however I nonetheless cannot determine it out with this:

I exploit the block Template Half (my customized model) the place I select my template half the place I want to make use of block Social hyperlinks (additionally my customized model). Social media icons and hyperlinks don’t render on the frontend aspect, as a result of URLs not saving after I use block Social media within the template half.

As I perceive block Template Half hasn’t assessed attributes from block Social hyperlinks (url, service, label).

I attempting so as to add in block.json of the Template half

"usesContext": [
    "my-slug/social-links/url",
    "my-slug/social-links/service",
    "my-slug/social-links/label"
  ],

And in block.json of Social hyperlinks

"providesContext": {
    "cmy-slug/social-links/url": "url",
    "my-slug/social-links/service": "service",
    "my-slug/social-links/label": "label"
}

But it surely not working. As I perceive, I want so as to add attributes additionally within the Edit perform for the block Template half, however I do not perceive how. (Or perhaps I’ve one thing lacking?) The return of perform seems like this:

return (
        <>
            <RecursionProvider uniqueId={templatePartId}>
                <TemplatePartAdvancedControls
                    tagName={tagName}
                    setAttributes={setAttributes}
                    isEntityAvailable={isEntityAvailable}
                    templatePartId={templatePartId}
                    defaultWrapper={areaObject.tagName}
                />

                {isPlaceholder && (
                    <TagName {...blockProps}>
                        <TemplatePartPlaceholder
                            space={attributes.space}
                            templatePartId={templatePartId}
                            clientId={clientId}
                            setAttributes={setAttributes}
                            onOpenSelectionModal={() => setIsTemplatePartSelectionOpen(true)}
                        />
                    </TagName>
                )}

                {canReplace && (
                    <BlockSettingsMenuControls>
                        {() => (
                            <MenuItem
                                onClick={() => {
                                    setIsTemplatePartSelectionOpen(true);
                                }}
                            >
                                {createInterpolateElement(
                                    __('Change <BlockTitle />'),
                                    {
                                        BlockTitle: (
                                            <BlockTitle
                                                clientId={clientId}
                                                maximumLength={25}
                                            />
                                        ),
                                    }
                                )}
                            </MenuItem>
                        )}
                    </BlockSettingsMenuControls>
                )}

                {isEntityAvailable && (
                    <TemplatePartInnerBlocks
                        tagName={TagName}
                        blockProps={blockProps}
                        postId={templatePartId}
                        hasInnerBlocks={innerBlocks.size > 0}
                        structure={structure}
                    />
                )}

                {!isPlaceholder && !isResolved && (
                    <TagName {...blockProps}>
                        <Spinner/>
                    </TagName>
                )}
            </RecursionProvider>

            {isTemplatePartSelectionOpen && (
                <Modal
                    overlayClassName="block-editor-template-part__selection-modal"
                    title={sprintf(__('Select header'), areaObject.label.toLowerCase())}
                    closeLabel={__('Cancel')}
                    onRequestClose={() => setIsTemplatePartSelectionOpen(false)}
                >
                    <TemplatePartSelectionModal
                        templatePartId={templatePartId}
                        clientId={clientId}
                        space={space}
                        setAttributes={setAttributes}
                        onClose={() => setIsTemplatePartSelectionOpen(false)}
                    />
                </Modal>
            )}
        </>
    );

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments