Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | 1x 1x 1x 1x 1x 1x 1x 1x 1x | import * as React from "react"
import ReactDOMServer from "react-dom/server"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faLightbulb } from "@fortawesome/free-solid-svg-icons/faLightbulb"
const Help = ({
title,
content,
}: {
title: string | null
content: string | null
}) => {
return (
<div className="wp-block-help">
<div className="icon">
<FontAwesomeIcon icon={faLightbulb} />
</div>
<div>
{title ? <h4>{title}</h4> : null}
<div
className="content"
dangerouslySetInnerHTML={{ __html: content || "" }}
></div>
</div>
</div>
)
}
export const renderHelp = (cheerioEl: CheerioStatic) =>
cheerioEl("block[type='help']").each(function (this: CheerioElement) {
const $block = cheerioEl(this)
const title = $block.find("h4").remove().text() || null
const content = $block.find("content").html() // the title has been removed so the rest of the block is content.
// Side note: "content" refers here to the <content> tag output by the block on the PHP side, not
// the ".content" class.
const rendered = ReactDOMServer.renderToStaticMarkup(
<Help title={title} content={content} />
)
$block.after(rendered)
$block.remove()
})
|