generateblocks
/
src
/
extend
/
inspector-control
/
controls
/
typography
/
components
/
alignment.js
generateblocks
/
src
/
extend
/
inspector-control
/
controls
/
typography
/
components
Last commit date
TypographyCSS.js
2 years ago
alignment.js
2 years ago
font-family.js
2 years ago
font-size.js
2 years ago
font-weight.js
2 years ago
letter-spacing.js
2 years ago
line-height.js
2 years ago
text-transform.js
2 years ago
alignment.js
30 lines
| 1 | import { BaseControl, Button, ButtonGroup, Tooltip } from '@wordpress/components'; |
| 2 | import typographyOptions from '../options'; |
| 3 | |
| 4 | export default function Alignment( { value, onChange, label } ) { |
| 5 | const alignments = typographyOptions.alignments; |
| 6 | |
| 7 | return ( |
| 8 | <BaseControl |
| 9 | label={ label } |
| 10 | id="gblocks-alignment-button-group" |
| 11 | > |
| 12 | <div> |
| 13 | <ButtonGroup className="gblocks-alignment-button-group" id="gblocks-alignment-button-group"> |
| 14 | { Object.values( alignments ).map( ( alignment ) => { |
| 15 | return ( |
| 16 | <Tooltip key={ alignment.align } text={ alignment.title }> |
| 17 | <Button |
| 18 | isPrimary={ alignment.align === value } |
| 19 | onClick={ () => onChange( alignment.align !== value ? alignment.align : '' ) } |
| 20 | icon={ alignment.icon } |
| 21 | /> |
| 22 | </Tooltip> |
| 23 | ); |
| 24 | } ) } |
| 25 | </ButtonGroup> |
| 26 | </div> |
| 27 | </BaseControl> |
| 28 | ); |
| 29 | } |
| 30 |