BorderControl.js
1 year ago
BoxShadowControl.js
1 year ago
ColorSelectorControl.js
1 year ago
FontSizeControl.js
1 year ago
LatepointIcons.js
1 year ago
LetterSpacingControl.js
1 year ago
LineHeightControl.js
1 year ago
PaddingBoxControl.js
1 year ago
TypographyControl.js
1 year ago
TypographyControl.js
87 lines
| 1 | import {__} from '@wordpress/i18n'; |
| 2 | import {SelectControl} from '@wordpress/components'; |
| 3 | import React from "react"; |
| 4 | import FontSizeControl from "./FontSizeControl"; |
| 5 | import LineHeightControl from "./LineHeightControl"; |
| 6 | import LetterSpacingControl from "./LetterSpacingControl"; |
| 7 | |
| 8 | const TypographyControl = ({attributes, setAttributes, fontSizeAttr}) => { |
| 9 | |
| 10 | const fonts = [ |
| 11 | {label: '', value: ''}, |
| 12 | {label: 'Arial', value: 'Arial, sans-serif'}, |
| 13 | {label: 'Helvetica', value: 'Helvetica, sans-serif'}, |
| 14 | {label: 'Times New Roman', value: '"Times New Roman", Times, serif'}, |
| 15 | {label: 'Georgia', value: 'Georgia, serif'}, |
| 16 | {label: 'Courier New', value: '"Courier New", Courier, monospace'}, |
| 17 | {label: 'Verdana', value: 'Verdana, sans-serif'}, |
| 18 | {label: 'Trebuchet MS', value: '"Trebuchet MS", sans-serif'}, |
| 19 | {label: 'Lucida Sans', value: '"Lucida Sans", sans-serif'}, |
| 20 | {label: 'Tahoma', value: 'Tahoma, sans-serif'}, |
| 21 | {label: 'Palatino Linotype', value: '"Palatino Linotype", "Book Antiqua", Palatino, serif'}, |
| 22 | {label: 'Arial Black', value: '"Arial Black", Gadget, sans-serif'}, |
| 23 | {label: 'Comic Sans MS', value: '"Comic Sans MS", cursive, sans-serif'}, |
| 24 | {label: 'Impact', value: 'Impact, Charcoal, sans-serif'}, |
| 25 | {label: 'Lucida Console', value: '"Lucida Console", Monaco, monospace'}, |
| 26 | {label: 'Garamond', value: 'Garamond, serif'}, |
| 27 | {label: 'Roboto', value: '"Roboto", sans-serif'}, |
| 28 | {label: 'Open Sans', value: '"Open Sans", sans-serif'}, |
| 29 | {label: 'Lato', value: '"Lato", sans-serif'}, |
| 30 | {label: 'Montserrat', value: '"Montserrat", sans-serif'}, |
| 31 | {label: 'Oswald', value: '"Oswald", sans-serif'}, |
| 32 | {label: 'Raleway', value: '"Raleway", sans-serif'}, |
| 33 | {label: 'Merriweather', value: '"Merriweather", serif'}, |
| 34 | {label: 'Ubuntu', value: '"Ubuntu", sans-serif'}, |
| 35 | {label: 'Playfair Display', value: '"Playfair Display", serif'}, |
| 36 | {label: 'Nunito', value: '"Nunito", sans-serif'}, |
| 37 | {label: 'PT Serif', value: '"PT Serif", serif'} |
| 38 | ]; |
| 39 | |
| 40 | |
| 41 | return ( |
| 42 | <> |
| 43 | <SelectControl |
| 44 | label={__('Font Family', 'latepoint')} |
| 45 | value={attributes.font_family} |
| 46 | className="latepoint-control-two-columns" |
| 47 | options={fonts} |
| 48 | onChange={(font_family) => setAttributes({font_family})} |
| 49 | /> |
| 50 | |
| 51 | <FontSizeControl attributes={attributes} setAttributes={setAttributes} fontSizeAttr={fontSizeAttr}></FontSizeControl> |
| 52 | |
| 53 | <SelectControl |
| 54 | label={__('Weight', 'latepoint')} |
| 55 | className="latepoint-control-two-columns" |
| 56 | value={attributes.font_weight} |
| 57 | options={[ |
| 58 | {label: __('400', 'latepoint'), value: '400'}, |
| 59 | {label: __('500', 'latepoint'), value: '500'}, |
| 60 | {label: __('600', 'latepoint'), value: '600'}, |
| 61 | {label: __('700', 'latepoint'), value: '700'}, |
| 62 | ]} |
| 63 | onChange={(font_weight) => setAttributes({font_weight})} |
| 64 | /> |
| 65 | |
| 66 | <SelectControl |
| 67 | label={__('Transform', 'latepoint')} |
| 68 | value={attributes.text_transform} |
| 69 | className="latepoint-control-two-columns" |
| 70 | options={[ |
| 71 | {label: __('Default', 'latepoint'), value: ''}, |
| 72 | {label: __('None', 'latepoint'), value: 'none'}, |
| 73 | {label: __('Uppercase', 'latepoint'), value: 'uppercase'}, |
| 74 | {label: __('Lowercase', 'latepoint'), value: 'lowercase'}, |
| 75 | {label: __('Capitalize', 'latepoint'), value: 'capitalize'}, |
| 76 | ]} |
| 77 | onChange={(text_transform) => setAttributes({text_transform})} |
| 78 | /> |
| 79 | |
| 80 | <LineHeightControl attributes={attributes} setAttributes={setAttributes}></LineHeightControl> |
| 81 | <LetterSpacingControl attributes={attributes} setAttributes={setAttributes}></LetterSpacingControl> |
| 82 | </> |
| 83 | ); |
| 84 | }; |
| 85 | |
| 86 | export default TypographyControl; |
| 87 |