deprecated
2 months ago
block.json
2 days ago
edit.js
2 months ago
icon.svg
2 months ago
index.js
2 months ago
index.php
2 months ago
save.js
2 months ago
style.scss
2 months ago
save.js
153 lines
| 1 | /** |
| 2 | * External dependencies |
| 3 | */ |
| 4 | import classnames from 'classnames'; |
| 5 | |
| 6 | /** |
| 7 | * WordPress dependencies |
| 8 | */ |
| 9 | import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor'; |
| 10 | import parse from 'html-react-parser'; |
| 11 | import { isHexColor } from '@vkblocks/utils/is-hex-color'; |
| 12 | import { sanitizeSlug } from '@vkblocks/utils/sanitizeSlug'; |
| 13 | import { fixBrokenUnicode } from '@vkblocks/utils/fixBrokenUnicode'; |
| 14 | |
| 15 | export default function save(props) { |
| 16 | const { attributes } = props; |
| 17 | const { |
| 18 | heading, |
| 19 | headingTag, |
| 20 | anchor, |
| 21 | faIcon: rawFaIcon, |
| 22 | color, |
| 23 | bgColor, |
| 24 | borderColor, |
| 25 | bodyAlign, |
| 26 | } = attributes; |
| 27 | const faIcon = rawFaIcon ? fixBrokenUnicode(rawFaIcon) : rawFaIcon; |
| 28 | |
| 29 | const inner = <InnerBlocks.Content />; |
| 30 | const title = ( |
| 31 | <RichText.Content |
| 32 | tagName={headingTag} |
| 33 | className={'vk_borderBox_title'} |
| 34 | value={heading} |
| 35 | id={headingTag === 'p' ? undefined : anchor} |
| 36 | /> |
| 37 | ); |
| 38 | |
| 39 | // カラーパレットに対応 |
| 40 | const wrapperClasses = classnames('vk_borderBox', { |
| 41 | [`vk_borderBox-color-${sanitizeSlug(color)}`]: !!color, |
| 42 | [`vk_borderBox-background-${sanitizeSlug(bgColor)}`]: !!bgColor, |
| 43 | [`has-text-color`]: !!borderColor, |
| 44 | [`has-${sanitizeSlug(borderColor)}-color`]: |
| 45 | !!borderColor && !isHexColor(borderColor), |
| 46 | }); |
| 47 | let wrapperStyle = {}; |
| 48 | if (borderColor !== undefined && isHexColor(borderColor)) { |
| 49 | // custom color |
| 50 | wrapperStyle = { |
| 51 | color: `${borderColor}`, |
| 52 | }; |
| 53 | } |
| 54 | const blockProps = useBlockProps.save({ |
| 55 | className: wrapperClasses, |
| 56 | style: wrapperStyle, |
| 57 | }); |
| 58 | |
| 59 | //Defaultクラスを設定 |
| 60 | if (-1 === blockProps.className.indexOf('is-style-')) { |
| 61 | blockProps.className += |
| 62 | ' is-style-vk_borderBox-style-solid-kado-tit-tab'; |
| 63 | } |
| 64 | |
| 65 | //枠パターン |
| 66 | let isFill_title = false; |
| 67 | if ( |
| 68 | -1 < |
| 69 | blockProps.className.indexOf( |
| 70 | 'is-style-vk_borderBox-style-solid-kado-tit-tab' |
| 71 | ) || |
| 72 | -1 < |
| 73 | blockProps.className.indexOf( |
| 74 | 'is-style-vk_borderBox-style-solid-kado-tit-banner' |
| 75 | ) || |
| 76 | -1 < |
| 77 | blockProps.className.indexOf( |
| 78 | 'is-style-vk_borderBox-style-solid-round-tit-tab' |
| 79 | ) |
| 80 | ) { |
| 81 | // タイトル背景塗り 白文字パターン |
| 82 | isFill_title = true; |
| 83 | } |
| 84 | |
| 85 | // title背景 |
| 86 | const titleClasses = classnames('vk_borderBox_title_container', { |
| 87 | [`has-background`]: isFill_title && !!borderColor, |
| 88 | [`has-${sanitizeSlug(borderColor)}-background-color`]: |
| 89 | isFill_title && !!borderColor && !isHexColor(borderColor), |
| 90 | }); |
| 91 | let titleStyle = {}; |
| 92 | if (isFill_title && borderColor !== undefined && isHexColor(borderColor)) { |
| 93 | // custom color |
| 94 | titleStyle = { |
| 95 | backgroundColor: `${borderColor}`, |
| 96 | }; |
| 97 | } |
| 98 | |
| 99 | // アイコン |
| 100 | let icon; |
| 101 | if ( |
| 102 | -1 < |
| 103 | blockProps.className.indexOf( |
| 104 | 'vk_borderBox-style-solid-kado-iconFeature' |
| 105 | ) && |
| 106 | !color |
| 107 | ) { |
| 108 | // 直線 ピン角 アイコン |
| 109 | let iconStyle = ``; |
| 110 | const iconClasses = classnames('vk_borderBox_icon_border', { |
| 111 | [`has-background`]: !!borderColor, |
| 112 | [`has-${sanitizeSlug(borderColor)}-background-color`]: |
| 113 | !!borderColor && !isHexColor(borderColor), |
| 114 | }); |
| 115 | |
| 116 | if (borderColor !== undefined && isHexColor(borderColor)) { |
| 117 | // custom color |
| 118 | iconStyle = `background-color: ${borderColor};`; |
| 119 | } |
| 120 | |
| 121 | // iタグ� |
| 122 | 須 |
| 123 | icon = `<div class="${classnames( |
| 124 | iconClasses |
| 125 | )}" style="${iconStyle}">${faIcon}</div>`; |
| 126 | } else if ( |
| 127 | faIcon !== null && |
| 128 | faIcon !== undefined && |
| 129 | faIcon.indexOf('<i class="') === -1 |
| 130 | ) { |
| 131 | //iタグでdeprecatedが効かなかったので追加。 |
| 132 | // アイコンなし |
| 133 | icon = `<i class="${faIcon}"></i>`; |
| 134 | } else { |
| 135 | // アイコンあり |
| 136 | icon = faIcon; |
| 137 | } |
| 138 | |
| 139 | const bodyClasses = classnames('vk_borderBox_body', { |
| 140 | [`vk_borderBox_body-align-${bodyAlign}`]: !!bodyAlign, |
| 141 | }); |
| 142 | |
| 143 | return ( |
| 144 | <div {...blockProps}> |
| 145 | <div className={titleClasses} style={titleStyle}> |
| 146 | {parse(icon)} |
| 147 | {title} |
| 148 | </div> |
| 149 | <div className={bodyClasses}>{inner}</div> |
| 150 | </div> |
| 151 | ); |
| 152 | } |
| 153 |