| @@ -1,8 +1,12 @@ | ||
| 1 | 1 | import React, { useEffect } from 'react' |
| 2 | 2 | |
| 3 | 3 | const SLOT_ID = 'snippets-screen-meta-slot' |
| 4 | 4 | |
| 5 | +export interface ScreenMetaSlotProps { | |
| 6 | + hidden?: boolean | |
| 7 | +} | |
| 8 | + | |
| 5 | 9 | /** |
| 6 | 10 | * Relocates the WordPress Screen Options and Help tabs (and their panels) |
| 7 | 11 | * from above the page content into this slot, so they appear directly below |
| 8 | 12 | * the page's subnavigation bar. The slot div is rendered empty by React and |
| @@ -7,10 +11,14 @@ | ||
| 7 | 11 | * from above the page content into this slot, so they appear directly below |
| 8 | 12 | * the page's subnavigation bar. The slot div is rendered empty by React and |
| 9 | 13 | * never reconciled with children, so adopting the foreign nodes is safe. |
| 10 | 14 | * The nodes are returned to the top of the page when the slot unmounts. |
| 15 | + * | |
| 16 | + * Stays mounted (with `hidden`) rather than being conditionally rendered by | |
| 17 | + * the caller: unmounting hands the adopted nodes back to their native, | |
| 18 | + * visible position at the top of the page instead of hiding them. | |
| 11 | 19 | */ |
| 12 | -export const ScreenMetaSlot: React.FC = () => { | |
| 20 | +export const ScreenMetaSlot: React.FC<ScreenMetaSlotProps> = ({ hidden = false }) => { | |
| 13 | 21 | useEffect(() => { |
| 14 | 22 | const slot = document.getElementById(SLOT_ID) |
| 15 | 23 | const meta = document.getElementById('screen-meta') |
| 16 | 24 | const links = document.getElementById('screen-meta-links') |
| @@ -26,6 +34,6 @@ | ||
| 26 | 34 | parent?.prepend(meta, links) |
| 27 | 35 | } |
| 28 | 36 | }, []) |
| 29 | 37 | |
| 30 | - return <div id={SLOT_ID} className="snippets-screen-meta-slot" /> | |
| 38 | + return <div id={SLOT_ID} className="snippets-screen-meta-slot" hidden={hidden} /> | |
| 31 | 39 | } |
