deprecated
2 months ago
advanced-spacer-control.js
2 months ago
block.json
2 days ago
edit.js
2 weeks ago
icon.svg
2 months ago
index.js
2 months ago
index.php
2 months ago
save.js
2 months ago
spacers.js
2 months ago
style.scss
2 months ago
transforms.js
2 months ago
transforms.js
110 lines
| 1 | import { createBlock } from '@wordpress/blocks'; |
| 2 | |
| 3 | // preset from |
| 4 | const SPACER_PRESET_FROM = { |
| 5 | 20: 'xxs', |
| 6 | 30: 'xs', |
| 7 | 40: 'small', |
| 8 | 50: 'medium', |
| 9 | 60: 'large', |
| 10 | 70: 'xl', |
| 11 | 80: 'xxl', |
| 12 | }; |
| 13 | |
| 14 | // preset to |
| 15 | const SPACER_PRESET_TO = Object.entries(SPACER_PRESET_FROM).reduce( |
| 16 | (acc, [preset, label]) => { |
| 17 | acc[label] = preset; |
| 18 | return acc; |
| 19 | }, |
| 20 | {} |
| 21 | ); |
| 22 | |
| 23 | const transforms = { |
| 24 | from: [ |
| 25 | // Spacer -> Responsive Spacer |
| 26 | { |
| 27 | type: 'block', |
| 28 | blocks: ['core/spacer'], |
| 29 | transform: (attributes) => { |
| 30 | const { height } = attributes; |
| 31 | let toSize = 'medium'; |
| 32 | let toValue = 40; |
| 33 | let toUnit = 'px'; |
| 34 | |
| 35 | // core classname |
| 36 | let toClassName = attributes.className; |
| 37 | if (toClassName !== undefined) { |
| 38 | toClassName = (toClassName || '') |
| 39 | .trim() |
| 40 | .split(/\s+/) |
| 41 | .filter((word) => word && !word.startsWith('is-style-')) |
| 42 | .join(' '); |
| 43 | } |
| 44 | |
| 45 | if (!height.startsWith('var:preset|spacing|')) { |
| 46 | // custom |
| 47 | toSize = 'custom'; |
| 48 | toValue = height.replace(/[^0-9]/g, ''); |
| 49 | toUnit = height.replace(/\d/g, ''); |
| 50 | } else { |
| 51 | // preset |
| 52 | const presetSize = height.replace( |
| 53 | 'var:preset|spacing|', |
| 54 | '' |
| 55 | ); |
| 56 | toSize = SPACER_PRESET_FROM[presetSize]; |
| 57 | } |
| 58 | |
| 59 | const transformAttributes = { |
| 60 | ...(toClassName ? { className: toClassName } : {}), |
| 61 | spaceSize: toSize, |
| 62 | pc: toValue, |
| 63 | unit: toUnit, |
| 64 | }; |
| 65 | |
| 66 | if (!toClassName) { |
| 67 | // クラスがひとつもないとき |
| 68 | delete attributes.className; |
| 69 | } |
| 70 | |
| 71 | return createBlock('vk-blocks/spacer', transformAttributes); |
| 72 | }, |
| 73 | }, |
| 74 | ], |
| 75 | to: [ |
| 76 | // Responsive Spacer -> Spacer |
| 77 | { |
| 78 | type: 'block', |
| 79 | blocks: ['core/spacer'], |
| 80 | transform: (attributes) => { |
| 81 | const { unit, pc, spaceSize } = attributes; |
| 82 | |
| 83 | let toSize; |
| 84 | if ('custom' === spaceSize) { |
| 85 | // custom |
| 86 | toSize = pc + unit; |
| 87 | } else { |
| 88 | // preset |
| 89 | toSize = |
| 90 | 'var:preset|spacing|' + SPACER_PRESET_TO[spaceSize]; |
| 91 | } |
| 92 | |
| 93 | const transformSpacerAttributes = { |
| 94 | ...attributes, |
| 95 | height: toSize, |
| 96 | }; |
| 97 | |
| 98 | const blockContent = []; |
| 99 | |
| 100 | blockContent.push( |
| 101 | createBlock('core/spacer', transformSpacerAttributes) |
| 102 | ); |
| 103 | return blockContent; |
| 104 | }, |
| 105 | }, |
| 106 | ], |
| 107 | }; |
| 108 | |
| 109 | export default transforms; |
| 110 |