| 1 |
import getIcon from '../../utils/get-icon'; |
| 2 |
import metadata from './block.json'; |
| 3 |
import edit from './edit'; |
| 4 |
import save from './save'; |
| 5 |
|
| 6 |
const { name } = metadata; |
| 7 |
|
| 8 |
export { metadata, name }; |
| 9 |
|
| 10 |
export const settings = { |
| 11 |
icon: getIcon('block-shape-divider', true), |
| 12 |
ghostkit: { |
| 13 |
previewUrl: 'https://www.ghostkit.io/docs/blocks/shape-divider/', |
| 14 |
customStylesCallback(attributes) { |
| 15 |
const styles = { |
| 16 |
'--gkt-shape-divider__color': attributes.color || undefined, |
| 17 |
svg: { |
| 18 |
width: undefined, |
| 19 |
height: undefined, |
| 20 |
}, |
| 21 |
media_sm: { |
| 22 |
svg: { |
| 23 |
width: undefined, |
| 24 |
height: undefined, |
| 25 |
}, |
| 26 |
}, |
| 27 |
media_md: { |
| 28 |
svg: { |
| 29 |
width: undefined, |
| 30 |
height: undefined, |
| 31 |
}, |
| 32 |
}, |
| 33 |
media_lg: { |
| 34 |
svg: { |
| 35 |
width: undefined, |
| 36 |
height: undefined, |
| 37 |
}, |
| 38 |
}, |
| 39 |
media_xl: { |
| 40 |
svg: { |
| 41 |
width: undefined, |
| 42 |
height: undefined, |
| 43 |
}, |
| 44 |
}, |
| 45 |
}; |
| 46 |
|
| 47 |
Object.keys(attributes).forEach((key) => { |
| 48 |
if ( |
| 49 |
typeof attributes[key] !== 'undefined' && |
| 50 |
attributes[key] !== '' |
| 51 |
) { |
| 52 |
let prefix = key.split('_')[0]; |
| 53 |
let type = key.split('_')[1]; |
| 54 |
|
| 55 |
if (!type) { |
| 56 |
type = prefix; |
| 57 |
prefix = ''; |
| 58 |
} |
| 59 |
|
| 60 |
if (type && (type === 'height' || type === 'width')) { |
| 61 |
if (type === 'height' && prefix) { |
| 62 |
styles[`media_${prefix}`].svg.height = |
| 63 |
`${attributes[key]}px`; |
| 64 |
} else if (type === 'height') { |
| 65 |
styles.svg.height = `${attributes[key]}px`; |
| 66 |
} else if (type === 'width' && prefix) { |
| 67 |
styles[`media_${prefix}`].svg.width = |
| 68 |
`${attributes[key]}%`; |
| 69 |
} else if (type === 'width') { |
| 70 |
styles.svg.width = `${attributes[key]}%`; |
| 71 |
} |
| 72 |
} |
| 73 |
} |
| 74 |
}); |
| 75 |
|
| 76 |
return styles; |
| 77 |
}, |
| 78 |
}, |
| 79 |
example: { |
| 80 |
attributes: { |
| 81 |
svg: '<svg width="200" height="31" viewBox="0 0 200 31" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path opacity="0.25" d="M176 1.09913C185.695 1.78769 200 5.86594 200 5.86594V31H0V23.6744C0 23.6744 10.8105 26.1825 18 26.4651C33.0506 27.0568 40.0687 20.2366 55 18.7907C76.5387 16.705 88.9682 24.0506 110.5 21.9302C138.336 19.1891 148.033 -0.887161 176 1.09913Z" fill="currentColor"/><path opacity="0.5" d="M177 6.5C186.046 6.8116 200 9.37302 200 9.37302V31H0V26.1526C0 26.1526 12.4813 27.3959 20.5 27.1628C35.8319 26.717 43.2085 21.0806 58.5 20.186C77.5429 19.072 88.3344 25.0361 107.5 24C135.448 22.4892 149.028 5.53653 177 6.5Z" fill="currentColor"/><path d="M176 9.44356C185.589 9.89091 200 12.8801 200 12.8801V31H0V26.9386C0 26.9386 12.7411 28.5221 21 28.5007C37.1016 28.4589 44.9254 22.8358 61 22.2525C79.5556 21.5791 89.4422 27.5882 108 26.9386C136.674 25.935 147.361 8.10748 176 9.44356Z" fill="currentColor"/></svg>', |
| 82 |
ghostkit: { |
| 83 |
id: 'example-shape-divider', |
| 84 |
}, |
| 85 |
className: 'ghostkit-custom-example-shape-divider', |
| 86 |
}, |
| 87 |
}, |
| 88 |
edit, |
| 89 |
save, |
| 90 |
}; |
| 91 |
|
