index.js
38 lines
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | import { PanelBody, BaseControl } from '@wordpress/components'; |
| 3 | import { AlignControl } from '@vkblocks/components/align-control'; |
| 4 | import { capitalize } from '@vkblocks/utils/capitalize'; |
| 5 | import { fixBrokenUnicode } from '@vkblocks/utils/fixBrokenUnicode'; |
| 6 | |
| 7 | export const CardAlignControls = (props) => { |
| 8 | const { attributes } = props; |
| 9 | const schema = JSON.parse(fixBrokenUnicode(attributes.activeControl)); |
| 10 | const createAlignControl = (label, index) => { |
| 11 | props = { |
| 12 | ...props, |
| 13 | ...{ |
| 14 | initial: schema[label], |
| 15 | }, |
| 16 | ...{ |
| 17 | component: label, |
| 18 | }, |
| 19 | }; |
| 20 | return ( |
| 21 | <BaseControl |
| 22 | key={index} |
| 23 | label={__(`${capitalize(label)}`, 'vk-blocks')} // eslint-disable-line @wordpress/i18n-no-variables |
| 24 | id={'vk_card-align'} |
| 25 | > |
| 26 | <AlignControl schema={schema} {...props} /> |
| 27 | </BaseControl> |
| 28 | ); |
| 29 | }; |
| 30 | |
| 31 | const alignControls = ['title', 'text', 'button'].map(createAlignControl); |
| 32 | return ( |
| 33 | <PanelBody title={__('Align', 'vk-blocks')} initialOpen={false}> |
| 34 | {alignControls} |
| 35 | </PanelBody> |
| 36 | ); |
| 37 | }; |
| 38 |