I can not seem to discover a solution to this that I can perceive
I’ve tabs and a tab block, which is a clone of this fundamental tab block plugin. I am attempting so as to add the power to pick out an “icon” for every tab block.
I am shut. Utilizing the MediaUpload element, I will see the file I’ve chosen below the activeTab
object, however it would not replace the mum or dad block attribute, so I can not reference the icon_url
attribute.
tab/edit.js
const Edit = ({ attributes, setAttributes, clientId }) => {
const { uid, activeTab } = attributes;
useEffect(() => {
if (!uid) {
setAttributes({ uid: clientId });
}
}, []);
const show = activeTab === uid ? "block" : "none";
const ALLOWED_MEDIA_TYPES = ["image", "svg"];
const setTabIcon = (icon_url) => {
const parentBlock = choose("core/block-editor").getBlock(clientId);
dispatch("core/block-editor").updateBlockAttributes(
parentBlock.clientId,
{
...attributes,
icon_url,
}
);
};
return (
<div {...useBlockProps()}>
<InspectorControls>
<div>
<MediaUpload
allowedTypes={ALLOWED_MEDIA_TYPES}
onSelect={(media) => setTabIcon(media.url)}
render={({ open }) => (
<button onClick={open}>Open Media Library</button>
)}
/>
</div>
</InspectorControls>
<div className={"guten-tab-panel"} fashion={{ show }}>
<InnerBlocks
allowedBlocks={["core/heading", "core/paragraph"]}
renderAppender={() => <InnerBlocks.ButtonBlockAppender />}
/>
</div>
</div>
);
};
export default Edit;
In tabs.js, I am attempting to reference tab.icon_url. icon_url would not exist, solely uid
and title
tabs/tabs.js
const Edit = ({ attributes, setAttributes, clientId }) => {
const { tabs, activeTab } = attributes;
const blockProps = useBlockProps({
className: `${useBlockProps().className} guten-tab-wrapper`,
});
const setActiveTab = (uid) => {
setAttributes({ activeTab: uid });
const parentBlock = choose("core/block-editor").getBlock(clientId);
parentBlock.innerBlocks.forEach((innerBlock) => {
dispatch("core/block-editor").updateBlockAttributes(
innerBlock.clientId,
{
activeTab: uid,
}
);
});
};
const addNewTab = () => {
const tab = createBlock("ahsan03/tab");
const place = tabs.size;
dispatch("core/block-editor").insertBlock(tab, place, clientId);
setAttributes({
tabs: [
...tabs,
{
uid: tab.clientId,
title: `Tab ${tabs.length + 1}`,
icon_url: "",
},
],
});
setActiveTab(tab.clientId);
};
const tabTitleChange = (newValue) => {
setAttributes({
tabs: [
...tabs.map((tab) => {
return tab.uid === activeTab
? {
...tab,
title: newValue,
}
: tab;
}),
],
});
};
useEffect(() => {
if (tabs.size && !activeTab) {
setActiveTab(tabs[0].uid);
}
}, [tabs]);
return (
<>
<div {...blockProps}>
<div className={"guten-tabs-nav"}>
{tabs.map((tab) => {
return (
<div
key={tab.uid}
className={"guten-tab-item"}
position="tab"
tabIndex="0"
onClick={() => setActiveTab(tab.uid)}
>
<div
className={`guten-tab-link${
tab.uid === activeTab
? " is-active"
: ""
}`}
>
<img src={tab.icon_url} alt="" />
{console.log("tabs tab", {
tab,
})}
<RichText
tagName="div"
worth={tab.title}
onChange={tabTitleChange}
/>
</div>
</div>
);
})}
<Button
variant={"main"}
icon={"plus"}
onClick={addNewTab}
>
{__("", "gtt")}
</Button>
</div>
<div className={"guten-tab-content"}>
<InnerBlocks
allowedBlocks={["ahsan03/tab"]}
renderAppender={false}
/>
</div>
</div>
</>
);
};
export default Edit;
How can I repair this so importing a picture is within the mum or dad block attributes?
Here is an up to date setTabIcon perform that I feel is nearer to what I would like, I am simply unsure what to do after fetching the parentBlock.
const setTabIcon = (icon_url) => {
const parentBlockIds =
choose("core/block-editor").getBlockParents(clientId);
parentBlockIds.forEach((parentBlockId) => {
const parentBlock = choose("core/block-editor").getBlock(parentBlockId);
console.log({ parentBlock });
});
};