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