| 1 |
// Lives outside the .extendify-quick-edit prefix scope; modal styles need |
| 2 |
// the /* no-prefix */ marker to match the body-level DOM wp-components portals to. |
| 3 |
import { createRoot } from '@wordpress/element'; |
| 4 |
|
| 5 |
const ROOT_ID = 'extendify-quick-edit-modal-root'; |
| 6 |
|
| 7 |
// Override @wordpress/components Modal's default bodyOpenClassName ("modal-open") |
| 8 |
// so our modals don't trip the wp.media-detection rule in quick-edit.css |
| 9 |
// (`body.modal-open .components-modal__frame:has(.extendify-quick-edit-modal)`). |
| 10 |
// Round-6 keyed that rule off `body.modal-open` thinking it was a wp.media-only |
| 11 |
// signal; @wordpress/components Modal also adds it on mount, so every QE modal |
| 12 |
// was hiding itself on first open. |
| 13 |
export const QE_MODAL_BODY_OPEN_CLASS = 'extendify-quick-edit-modal-open'; |
| 14 |
|
| 15 |
let modalRoot = null; |
| 16 |
let reactRoot = null; |
| 17 |
|
| 18 |
const ensureNode = () => { |
| 19 |
if (modalRoot?.isConnected) return modalRoot; |
| 20 |
modalRoot = document.createElement('div'); |
| 21 |
modalRoot.id = ROOT_ID; |
| 22 |
modalRoot.className = 'extendify-quick-edit'; |
| 23 |
document.body.appendChild(modalRoot); |
| 24 |
return modalRoot; |
| 25 |
}; |
| 26 |
|
| 27 |
export const mountModal = (element) => { |
| 28 |
const node = ensureNode(); |
| 29 |
if (!reactRoot) reactRoot = createRoot(node); |
| 30 |
reactRoot.render(element); |
| 31 |
}; |
| 32 |
|
| 33 |
export const closeModal = (reload) => { |
| 34 |
if (reactRoot) { |
| 35 |
reactRoot.unmount(); |
| 36 |
reactRoot = null; |
| 37 |
} |
| 38 |
if (modalRoot) { |
| 39 |
modalRoot.remove(); |
| 40 |
modalRoot = null; |
| 41 |
} |
| 42 |
if (reload) window.location.reload(); |
| 43 |
}; |
| 44 |
|
