deprecated
2 months ago
GenerateBgImage.js
2 months ago
block.json
1 month ago
edit.js
1 week 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
114 lines
| 1 | /** |
| 2 | * External dependencies |
| 3 | */ |
| 4 | import classnames from 'classnames'; |
| 5 | import { sanitizeSlug } from '@vkblocks/utils/sanitizeSlug'; |
| 6 | |
| 7 | /* eslint camelcase: 0 */ |
| 8 | import { __ } from '@wordpress/i18n'; |
| 9 | import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; |
| 10 | import GenerateBgImage from './GenerateBgImage'; |
| 11 | import { isHexColor } from '@vkblocks/utils/is-hex-color'; |
| 12 | import { toPresetSpacingVar } from '@vkblocks/utils/to-preset-spacing-var'; |
| 13 | const prefix = 'vk_slider_item'; |
| 14 | |
| 15 | export default function save(props) { |
| 16 | const { attributes } = props; |
| 17 | const { |
| 18 | verticalAlignment, |
| 19 | bgColor, |
| 20 | opacity, |
| 21 | style, |
| 22 | bgImageMobile, |
| 23 | bgImageTablet, |
| 24 | bgImage, |
| 25 | linkUrl, |
| 26 | linkTarget, |
| 27 | relAttribute, |
| 28 | linkDescription, |
| 29 | contentWidth, |
| 30 | blockId, |
| 31 | } = attributes; |
| 32 | |
| 33 | const hasLink = !!linkUrl; |
| 34 | const effectiveUrl = linkUrl; |
| 35 | |
| 36 | const spacingPaddingLeft = style?.spacing?.padding?.left; |
| 37 | const spacingPaddingRight = style?.spacing?.padding?.right; |
| 38 | const spacingPaddingLeftVar = toPresetSpacingVar(spacingPaddingLeft); |
| 39 | const spacingPaddingRightVar = toPresetSpacingVar(spacingPaddingRight); |
| 40 | |
| 41 | // classPaddingLRのクラス切り替え |
| 42 | let classPaddingLR = ''; |
| 43 | |
| 44 | if (contentWidth) { |
| 45 | classPaddingLR += `is-layout-constrained`; |
| 46 | } |
| 47 | if (!spacingPaddingLeft && !spacingPaddingRight) { |
| 48 | classPaddingLR += ` ${prefix}-paddingLR-use`; |
| 49 | } |
| 50 | |
| 51 | let containerClass = ''; |
| 52 | if (contentWidth) { |
| 53 | containerClass = `${prefix}_container container`; |
| 54 | } else { |
| 55 | containerClass = `${prefix}_container`; |
| 56 | } |
| 57 | |
| 58 | const opacityClass = opacity && opacity * 10; |
| 59 | const bgAreaClasses = classnames('vk_slider_item-background-area', { |
| 60 | [`has-background`]: bgColor !== undefined, |
| 61 | [`has-${sanitizeSlug(bgColor)}-background-color`]: |
| 62 | bgColor !== undefined && !isHexColor(bgColor), |
| 63 | [`has-background-dim`]: opacity !== undefined, |
| 64 | [`has-background-dim-${opacityClass}`]: opacityClass !== undefined, |
| 65 | }); |
| 66 | |
| 67 | const bgAreaStyles = { |
| 68 | backgroundColor: isHexColor(bgColor) ? bgColor : undefined, |
| 69 | paddingLeft: spacingPaddingLeftVar, |
| 70 | paddingRight: spacingPaddingRightVar, |
| 71 | }; |
| 72 | |
| 73 | const GetBgImage = ( |
| 74 | <> |
| 75 | {(bgImage || bgImageTablet || bgImageMobile) && ( |
| 76 | <GenerateBgImage prefix={prefix} blockId={blockId} {...props} /> |
| 77 | )} |
| 78 | <div className={bgAreaClasses} style={bgAreaStyles}></div> |
| 79 | </> |
| 80 | ); |
| 81 | |
| 82 | const GetLinkUrl = ( |
| 83 | <a |
| 84 | href={effectiveUrl} |
| 85 | {...(linkTarget ? { target: linkTarget } : {})} |
| 86 | {...(relAttribute ? { rel: relAttribute } : {})} |
| 87 | className={`${prefix}-link`} |
| 88 | > |
| 89 | <span className="screen-reader-text"> |
| 90 | {linkDescription |
| 91 | ? linkDescription |
| 92 | : __('Slider item link', 'vk-blocks')} |
| 93 | </span> |
| 94 | </a> |
| 95 | ); |
| 96 | |
| 97 | const blockProps = useBlockProps.save({ |
| 98 | className: `vk_slider_item swiper-slide vk_valign-${verticalAlignment} ${prefix}-${blockId} ${classPaddingLR} ${prefix}-paddingVertical-none`, |
| 99 | style: { |
| 100 | paddingLeft: spacingPaddingLeftVar, |
| 101 | paddingRight: spacingPaddingRightVar, |
| 102 | }, |
| 103 | }); |
| 104 | return ( |
| 105 | <div {...blockProps}> |
| 106 | {hasLink && GetLinkUrl} |
| 107 | {GetBgImage} |
| 108 | <div className={containerClass}> |
| 109 | <InnerBlocks.Content /> |
| 110 | </div> |
| 111 | </div> |
| 112 | ); |
| 113 | } |
| 114 |