| 1 |
import { InspectorControls } from "@wordpress/block-editor"; |
| 2 |
import { createRoot } from "@wordpress/element"; |
| 3 |
import { ArrowUpRight } from "../../icons/icons"; |
| 4 |
import "./editor.scss"; |
| 5 |
import { blockDocLink, blockPreviewPanelLink } from "../../controls/constants"; |
| 6 |
import Library from "../../prebuild-library/Library"; |
| 7 |
|
| 8 |
let modalRoot = null; |
| 9 |
|
| 10 |
const InspectorControl = ({ Inspector, attributes, setAttributes, isSelected = false }) => { |
| 11 |
const { blockName } = attributes; |
| 12 |
|
| 13 |
// Close modal. |
| 14 |
const removeModal = () => { |
| 15 |
if (modalRoot) { |
| 16 |
modalRoot.unmount(); |
| 17 |
modalRoot = null; |
| 18 |
} |
| 19 |
const modalNode = document.querySelector(".sp-smart-builder-modal"); |
| 20 |
if (modalNode) modalNode.remove(); |
| 21 |
document.body.classList.remove("sp-smart-popup-open"); |
| 22 |
}; |
| 23 |
// Open modal. |
| 24 |
const onInsertButtonClick = (e) => { |
| 25 |
e.preventDefault(); |
| 26 |
|
| 27 |
// If modal already exists, do nothing. |
| 28 |
if (document.querySelector(".sp-smart-builder-modal")) return; |
| 29 |
|
| 30 |
const node = document.createElement("div"); |
| 31 |
node.className = "sp-smart-builder-modal sp-smart-blocks-layouts"; |
| 32 |
document.body.appendChild(node); |
| 33 |
|
| 34 |
modalRoot = createRoot(node); |
| 35 |
modalRoot.render(<Library isShow={true} onClose={removeModal} currentBlockName={blockName} />); |
| 36 |
document.body.classList.add("sp-smart-popup-open"); |
| 37 |
|
| 38 |
// Close when clicking outside. |
| 39 |
setTimeout(() => { |
| 40 |
node.addEventListener("click", (e) => { |
| 41 |
if (e.target === node) removeModal(); |
| 42 |
}); |
| 43 |
}, 0); |
| 44 |
}; |
| 45 |
|
| 46 |
return ( |
| 47 |
<InspectorControls> |
| 48 |
<div className="sp-smart-post-tab-panel"> |
| 49 |
{/* Documentation link */} |
| 50 |
{blockDocLink[blockName] && ( |
| 51 |
<div className="sp-smart-post-tab-panel-doc-link-wrapper"> |
| 52 |
<div className="sp-smart-post-block-doc-link"> |
| 53 |
<a href={blockDocLink[blockName]} target="_blank" rel="noreferrer"> |
| 54 |
Documentation |
| 55 |
</a> |
| 56 |
</div> |
| 57 |
</div> |
| 58 |
)} |
| 59 |
|
| 60 |
{/* Buttons */} |
| 61 |
<div className="sp-smart-post-tab-panel-header-btn-wrapper"> |
| 62 |
<div className="sp-smart-post-btn-group"> |
| 63 |
{ "container" !== blockName && ( |
| 64 |
<button |
| 65 |
type="button" |
| 66 |
data-block={blockName} |
| 67 |
onClick={onInsertButtonClick} |
| 68 |
className="sp-smart-post-tab-panel-header-btn sp-btn-item sp-ready-patterns" |
| 69 |
> |
| 70 |
Ready Patterns |
| 71 |
</button> |
| 72 |
)} |
| 73 |
|
| 74 |
{blockPreviewPanelLink[blockName] && ( |
| 75 |
<a |
| 76 |
className="sp-smart-post-tab-panel-header-btn sp-btn-item sp-block-preview" |
| 77 |
href={blockPreviewPanelLink[blockName]} |
| 78 |
target="_blank" |
| 79 |
rel="noreferrer" |
| 80 |
> |
| 81 |
Block Preview |
| 82 |
</a> |
| 83 |
)} |
| 84 |
</div> |
| 85 |
</div> |
| 86 |
|
| 87 |
{/* Rest of the inspector */} |
| 88 |
<Inspector attributes={attributes} setAttributes={setAttributes} isSelected={isSelected} /> |
| 89 |
</div> |
| 90 |
</InspectorControls> |
| 91 |
); |
| 92 |
}; |
| 93 |
|
| 94 |
export default InspectorControl; |
| 95 |
|
