| 1 |
/** |
| 2 |
* Internal dependencies |
| 3 |
*/ |
| 4 |
import { FONTS } from "./constants"; |
| 5 |
|
| 6 |
/** |
| 7 |
* WordPress dependencies |
| 8 |
*/ |
| 9 |
const { __ } = wp.i18n; |
| 10 |
const { withInstanceId } = wp.compose; |
| 11 |
const { BaseControl } = wp.components; |
| 12 |
|
| 13 |
function FontFamilyPicker({ |
| 14 |
label, |
| 15 |
value, |
| 16 |
help, |
| 17 |
instanceId, |
| 18 |
onChange, |
| 19 |
className, |
| 20 |
...props |
| 21 |
}) { |
| 22 |
const id = `inspector-eb-font-family-${instanceId}`; |
| 23 |
const fonts = [ |
| 24 |
{ value: "", label: __("Default", "betterdocs") }, |
| 25 |
{ value: "Arial", label: "Arial" }, |
| 26 |
{ value: "Helvetica", label: "Helvetica" }, |
| 27 |
{ value: "Times New Roman", label: "Times New Roman" }, |
| 28 |
{ value: "Georgia", label: "Georgia" } |
| 29 |
]; |
| 30 |
|
| 31 |
//Add Google Fonts |
| 32 |
Object.keys(FONTS).map(k => { |
| 33 |
fonts.push({ value: k, label: k }); |
| 34 |
}); |
| 35 |
|
| 36 |
const onChangeValue = event => { |
| 37 |
const meta = wp.data.select("core/editor").getEditedPostAttribute("meta"); |
| 38 |
let ba = ""; |
| 39 |
const googleFontsAttr = |
| 40 |
":100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic"; |
| 41 |
const link = document.createElement("link"); |
| 42 |
link.rel = "stylesheet"; |
| 43 |
|
| 44 |
if (typeof meta !== "undefined" && typeof meta._eb_attr !== "undefined") { |
| 45 |
ba = meta._eb_attr; |
| 46 |
} |
| 47 |
|
| 48 |
if (ba.length > 0) { |
| 49 |
//Load fonts on the header |
| 50 |
if (!ba.includes(event.target.value)) { |
| 51 |
link.href = |
| 52 |
"https://fonts.googleapis.com/css?family=" + |
| 53 |
event.target.value.replace(/ /g, "+") + |
| 54 |
googleFontsAttr; |
| 55 |
document.head.appendChild(link); |
| 56 |
} |
| 57 |
|
| 58 |
ba = ba.replace("," + event.target.value, ""); |
| 59 |
ba = ba + "," + event.target.value; |
| 60 |
} else { |
| 61 |
link.href = |
| 62 |
"https://fonts.googleapis.com/css?family=" + |
| 63 |
event.target.value.replace(/ /g, "+") + |
| 64 |
googleFontsAttr; |
| 65 |
document.head.appendChild(link); |
| 66 |
|
| 67 |
ba = event.target.value; |
| 68 |
} |
| 69 |
|
| 70 |
//Save values to metadata |
| 71 |
wp.data.dispatch("core/editor").editPost({ |
| 72 |
meta: { |
| 73 |
_eb_attr: ba |
| 74 |
} |
| 75 |
}); |
| 76 |
|
| 77 |
onChange(event.target.value); |
| 78 |
}; |
| 79 |
|
| 80 |
return ( |
| 81 |
<BaseControl label={label} id={id} help={help} className={className}> |
| 82 |
<select |
| 83 |
id={id} |
| 84 |
className="components-select-control__input" |
| 85 |
onChange={onChangeValue} |
| 86 |
aria-describedby={!!help ? `${id}__help` : undefined} |
| 87 |
{...props} |
| 88 |
> |
| 89 |
{fonts.map((option, index) => ( |
| 90 |
<option |
| 91 |
key={`${option.label}-${option.value}-${index}`} |
| 92 |
value={option.value} |
| 93 |
selected={value === option.value ? "selected" : ""} |
| 94 |
> |
| 95 |
{option.label} |
| 96 |
</option> |
| 97 |
))} |
| 98 |
</select> |
| 99 |
</BaseControl> |
| 100 |
); |
| 101 |
} |
| 102 |
|
| 103 |
export default withInstanceId(FontFamilyPicker); |
| 104 |
|
