diff --git a/inc/vk-blocks/class-vk-blocks-block-loader.php b/inc/vk-blocks/class-vk-blocks-block-loader.php index f264d705f..bd9bfc7ed 100644 --- a/inc/vk-blocks/class-vk-blocks-block-loader.php +++ b/inc/vk-blocks/class-vk-blocks-block-loader.php @@ -99,9 +99,19 @@ public function load_css_action() { * VK Blocks Add Styles */ public function add_styles() { - // 分割読み込みの場合は register されるファイルが false 指定で何も読み込まれなくなっている. - wp_enqueue_style( 'vk-blocks-build-css' ); + // 共通のスタイル wp_enqueue_style( 'vk-blocks-utils-common-css' ); + + // 分割読み込みが有効かどうかをチェック + if ( self::should_load_separate_assets() && ! is_admin() ) { + // 分割読み込みが有効な場合は個別のスタイルを読み込む + wp_enqueue_style( 'vk-blocks/core-table', VK_BLOCKS_DIR_URL . 'build/extensions/core/table/style.css', array(), VK_BLOCKS_VERSION ); + wp_enqueue_style( 'vk-blocks/core-heading', VK_BLOCKS_DIR_URL . 'build/extensions/core/heading/style.css', array(), VK_BLOCKS_VERSION ); + wp_enqueue_style( 'vk-blocks/core-image', VK_BLOCKS_DIR_URL . 'build/extensions/core/image/style.css', array(), VK_BLOCKS_VERSION ); + } else { + // 分割読み込みが無効な場合はフロントエンド画面では結合スタイルを読み込まない + wp_enqueue_style( 'vk-blocks-build-css' ); + } } /** diff --git a/readme.txt b/readme.txt index 2109578c9..58181dfd9 100644 --- a/readme.txt +++ b/readme.txt @@ -106,10 +106,16 @@ e.g. == Changelog == += 1.90.0 = +[ Add function ][ Outer (Pro) ] Add book and pyramid in divider style. +[ Bug fix ] The split loading option is now supported for core/heading, core/image, and core/table styles for block editor. +[ Bug fix ][ Cover ] Fixed an issue where, after setting a link in the Cover block and adding two unstyled headings inside it, the content positioning would not apply upon returning to the editing screen (editing screen only). +[ Bug fix ][ Slider ] Add alert message. + = 1.89.0 = [ Add function ][ Outer (Pro) ] Added support for core text color settings. -[ Add function ][ Accordion (Pro) ] Added the ability to toggle the Accordion block open and close in the editing screen. -[ Bug Fix ][ Grid Column Card (Pro) ] Fixed slider overflow in Grid Column Card Item Body. +[ Specification Change ][ Accordion (Pro) ] Added the ability to toggle the Accordion block open and close in the editing screen. +[ Bug fix ][ Grid Column Card (Pro) ] Fixed slider overflow in Grid Column Card Item Body. [ Bug fix ][ core/roup ] Fixed an issue where unwanted classes were assigned when links were present in the group block. = 1.88.0 = diff --git a/src/blocks/_pro/outer/component-divider.js b/src/blocks/_pro/outer/component-divider.js index 24c93742f..f575d975e 100644 --- a/src/blocks/_pro/outer/component-divider.js +++ b/src/blocks/_pro/outer/component-divider.js @@ -187,6 +187,97 @@ const componentDivider = ( ); }; + // eslint-disable-next-line no-shadow + const bookSectionStyle = (level, color) => { + const absLevel = Math.abs(level); + let pathData; + + if (level > 0) { + const controlPoint1X = 40; + const controlPoint1Y = 100 - level * 0.1; + const peakX = 50; + const peakY = 100 - level; + const controlPoint2X = 60; + const controlPoint2Y = 100 - level * 0.1; + + pathData = `M0,100 H0 C${controlPoint1X},${controlPoint1Y} ${peakX},${peakY} ${peakX},${peakY} C${peakX},${peakY} ${controlPoint2X},${controlPoint2Y} 100,100 H100 V100 H0 Z`; + } else if (level === 0) { + const controlPoint1X = 40; + const controlPoint1Y = 100; + const peakX = 50; + const peakY = 100; + const controlPoint2X = 60; + const controlPoint2Y = 100; + + pathData = `M0,100 H0 C${controlPoint1X},${controlPoint1Y} ${peakX},${peakY} ${peakX},${peakY} C${peakX},${peakY} ${controlPoint2X},${controlPoint2Y} 100,100 H100 V100 H0 Z`; + } else { + const controlPoint1X = 40; + const controlPoint1Y = absLevel === 100 ? 30 : 100 - absLevel * 0.9; + const peakX = 50; + const peakY = 100; + const controlPoint2X = 60; + const controlPoint2Y = absLevel === 100 ? 30 : 100 - absLevel * 0.9; + const startY = absLevel === 100 ? 0 : 100 - absLevel; + + pathData = `M0,${startY} H0 C${controlPoint1X},${controlPoint1Y} ${peakX},${peakY} ${peakX},${peakY} C${peakX},${peakY} ${controlPoint2X},${controlPoint2Y} 100,${startY} H100 V100 H0 Z`; + } + + return ( + + ); + }; + + // eslint-disable-next-line no-shadow + const pyramidSectionStyle = (level, color) => { + const absLevel = Math.abs(level); + let pathData; + + if (level < 0) { + const firstPeakX = 25; + const firstPeakY = 100 - absLevel * 0.6; + const dipX = 40; + const dipY = 100 - absLevel * 0.2; + const secondPeakX = 75; + const secondPeakY = 100 - absLevel; + const rightEndY = 100 - absLevel * 0.5; + + pathData = `M0,100 H0 L${firstPeakX},${firstPeakY} ${dipX},${dipY} ${secondPeakX},${secondPeakY} 100,${rightEndY} H100 V100 H0 Z`; + } else if (level === 0) { + pathData = `M0,100 H0 L0,100 35,100 65,100 85,100 100,100 H100 V100 H0 Z`; + } else { + const firstPeakX = 75; + const firstPeakY = 100 - level * 0.6; + const dipX = 60; + const dipY = 100 - level * 0.2; + const secondPeakX = 25; + const secondPeakY = 100 - level; + const leftEndY = 100 - level * 0.5; + + pathData = `M0,${leftEndY} H0 L${secondPeakX},${secondPeakY} ${dipX},${dipY} ${firstPeakX},${firstPeakY} 100,100 H100 V100 H0 Z`; + } + + return ( + + ); + }; //背景色をクリアした時は、白に変更 if (!color) { color = '#fff'; @@ -212,6 +303,12 @@ const componentDivider = ( } else if (dividerType === 'serrated') { sectionPadding = 10; return serratedSectionStyle(lvl, color); + } else if (dividerType === 'book') { + sectionPadding = Math.abs(lvl); + return bookSectionStyle(lvl, color); + } else if (dividerType === 'pyramid') { + sectionPadding = Math.abs(lvl); + return pyramidSectionStyle(lvl, color); } }; diff --git a/src/blocks/_pro/outer/deprecated/hooks/index.js b/src/blocks/_pro/outer/deprecated/hooks/index.js index c03e8733e..d5378a6d4 100644 --- a/src/blocks/_pro/outer/deprecated/hooks/index.js +++ b/src/blocks/_pro/outer/deprecated/hooks/index.js @@ -7,6 +7,7 @@ import OuterHook0_0_1 from './0.0.1' // saveの数分必要 export default [ // 後方互換 + OuterHook1_60_0, // 1.89.0 OuterHook1_60_0, // 1.76.0 OuterHook1_60_0, // 1.71.0 OuterHook1_60_0, // 1.64.0 diff --git a/src/blocks/_pro/outer/deprecated/save/1.89.0/GenerateBgImage.js b/src/blocks/_pro/outer/deprecated/save/1.89.0/GenerateBgImage.js new file mode 100644 index 000000000..53fb7e570 --- /dev/null +++ b/src/blocks/_pro/outer/deprecated/save/1.89.0/GenerateBgImage.js @@ -0,0 +1,103 @@ +const GenerateBgImage = (props) => { + const { attributes, prefix } = props; + const { bgImageMobile, bgImageTablet, bgImage, bgSize, blockId } = + attributes; + + const mobileViewport = 'max-width: 575.98px'; + const tabletViewport = 'min-width: 576px'; + const pcViewport = 'min-width: 992px'; + const underPcViewport = 'max-width: 992.98px'; + + let backgroundStyle; + const backgroundPosition = 'background-position:center!important;'; + if ('cover' === bgSize) { + backgroundStyle = `background-size:${bgSize}!important; ${backgroundPosition}`; + } else if ('repeat' === bgSize) { + backgroundStyle = `background-repeat:${bgSize}!important; background-size: auto; ${backgroundPosition}`; + } else { + backgroundStyle = ``; + } + + //moible only + if (bgImageMobile && !bgImageTablet && !bgImage) { + return ( + + ); + } + //tablet only + if (!bgImageMobile && bgImageTablet && !bgImage) { + return ( + + ); + } + //pc only + if (!bgImageMobile && !bgImageTablet && bgImage) { + return ( + + ); + } + //pc -mobile + if (bgImageMobile && !bgImageTablet && bgImage) { + return ( + + ); + } + //pc -tablet + if (!bgImageMobile && bgImageTablet && bgImage) { + return ( + + ); + } + //tablet - mobile + if (bgImageMobile && bgImageTablet && !bgImage) { + return ( + + ); + } + //pc -tablet - mobile + if (bgImageMobile && bgImageTablet && bgImage) { + return ( + + ); + } +}; +export default GenerateBgImage; diff --git a/src/blocks/_pro/outer/deprecated/save/1.89.0/component-divider.js b/src/blocks/_pro/outer/deprecated/save/1.89.0/component-divider.js new file mode 100644 index 000000000..64a136b47 --- /dev/null +++ b/src/blocks/_pro/outer/deprecated/save/1.89.0/component-divider.js @@ -0,0 +1,447 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * Internal dependencies + */ +import { isHexColor } from '@vkblocks/utils/is-hex-color'; + +const componentDivider = ( + level, + color, + whichSide, + dividerType, + levelSettingPerDevice, + level_mobile, + level_tablet, + level_pc +) => { + let sectionPadding; + let sectionClass; + let lenderDivider; + + const pathClassNames = classnames({ + [`has-text-color`]: color !== undefined, + [`has-${color}-color`]: color !== undefined && !isHexColor(color), + }); + + // eslint-disable-next-line no-shadow + const tiltSectionStyle = (level, color) => { + if (level > 0) { + return ( + + ); + } else if (level < 0) { + const absLevel = Math.abs(level); + return ( + + ); + } + }; + + // eslint-disable-next-line no-shadow + const curveSectionStyle = (level, color) => { + if (level > 0) { + return ( + + ); + } else if (level < 0) { + return ( + + ); + } + }; + + // eslint-disable-next-line no-shadow + const waveSectionStyle = (level, color) => { + if (level > 0) { + return ( + + ); + } else if (level < 0) { + return ( + + ); + } + }; + + // eslint-disable-next-line no-shadow + const triangleSectionStyle = (level, color) => { + const absLevel = Math.abs(level); + const DivideAbs4 = absLevel / 4; + + if (level > 0) { + return ( + + ); + } else if (level < 0) { + return ( + + ); + } + }; + + // eslint-disable-next-line no-shadow + const largeTriangleSectionStyle = (level, color) => { + const absLevel = Math.abs(level); + + if (level > 0) { + return ( + + ); + } else if (level < 0) { + return ( + + ); + } + }; + + // eslint-disable-next-line no-shadow + const serratedSectionStyle = (level, color) => { + const absLevel = Math.abs(level); + const baseSerrationCount = 40; + const serrationCount = + level >= 0 + ? baseSerrationCount + Math.floor(absLevel / 5) + : Math.max(baseSerrationCount - Math.floor(absLevel / 5), 5); + const step = 100 / serrationCount; + const height = 10; + + const pathData = Array.from({ length: serrationCount + 1 }) + .map((_, i) => { + const x = i * step; + const y = i % 2 === 0 ? 100 - height : 100; + return `${x},${y}`; + }) + .join(' L '); + + return ( + + ); + }; + + // eslint-disable-next-line no-shadow + const bookSectionStyle = (level, color) => { + const absLevel = Math.abs(level); + let pathData; + + if (level > 0) { + // 0 から -100 の場合のパスデータ（中央が下に移動） + const controlPoint1X = 40; + const controlPoint1Y = 100 - level * 0.1; + const peakX = 50; + const peakY = 100 - level; + const controlPoint2X = 60; + const controlPoint2Y = 100 - level * 0.1; + + pathData = ` + M0,100 + H0 + C${controlPoint1X},${controlPoint1Y}, ${peakX},${peakY}, ${peakX},${peakY} + C${peakX},${peakY}, ${controlPoint2X},${controlPoint2Y}, 100,100 + H100 + V100 + H0 + Z + `; + } else if (level === 0) { + // 0 の場合はフラット + const controlPoint1X = 40; + const controlPoint1Y = 100; + const peakX = 50; + const peakY = 100; + const controlPoint2X = 60; + const controlPoint2Y = 100; + + pathData = ` + M0,100 + H0 + C${controlPoint1X},${controlPoint1Y}, ${peakX},${peakY}, ${peakX},${peakY} + C${peakX},${peakY}, ${controlPoint2X},${controlPoint2Y}, 100,100 + H100 + V100 + H0 + Z + `; + } else { + // 0 から 100 の場合のパスデータ（中央が上に移動） + const controlPoint1X = 40; + const controlPoint1Y = absLevel === 100 ? 30 : 100 - absLevel * 0.9; + const peakX = 50; + const peakY = 100; + const controlPoint2X = 60; + const controlPoint2Y = absLevel === 100 ? 30 : 100 - absLevel * 0.9; + const startY = absLevel === 100 ? 0 : 100 - absLevel; + + pathData = ` + M0,${startY} + H0 + C${controlPoint1X},${controlPoint1Y}, ${peakX},${peakY}, ${peakX},${peakY} + C${peakX},${peakY}, ${controlPoint2X},${controlPoint2Y}, 100,${startY} + H100 + V100 + H0 + Z + `; + } + + return ( + + ); + }; + + // eslint-disable-next-line no-shadow + const pyramidSectionStyle = (level, color) => { + const absLevel = Math.abs(level); + let pathData; + + if (level < 0) { + // -100 から 0 の場合のパスデータ（右寄りのフタコブラクダの形状） + const firstPeakX = 25; + const firstPeakY = 100 - absLevel * 0.6; // 左側の一つ目の山 + const dipX = 40; + const dipY = 100 - absLevel * 0.2; // 中央の谷 + const secondPeakX = 75; + const secondPeakY = 100 - absLevel; // 右側の二つ目の山 + const rightEndY = 100 - absLevel * 0.5; // 右端の高さ + + pathData = ` + M0,100 + H0 + L${firstPeakX},${firstPeakY} ${dipX},${dipY} ${secondPeakX},${secondPeakY} 100,${rightEndY} + H100 + V100 + H0 + Z + `; + } else if (level === 0) { + // 0 の場合はフラット + pathData = ` + M0,100 + H0 + L0,100 35,100 65,100 85,100 100,100 + H100 + V100 + H0 + Z + `; + } else { + // 0 から 100 の場合のパスデータ（左寄りのフタコブラクダの形状） + const firstPeakX = 75; // 右寄りにした一つ目の山を左寄りに移動 + const firstPeakY = 100 - level * 0.6; // 左側の一つ目の山の高さ + const dipX = 60; // 中央の谷を左右反転 + const dipY = 100 - level * 0.2; // 中央の谷の高さ + const secondPeakX = 25; // 右寄りにした二つ目の山を左寄りに移動 + const secondPeakY = 100 - level; // 右側の二つ目の山の高さ + const leftEndY = 100 - level * 0.5; // 左端の高さ + + pathData = ` + M0,${leftEndY} + H0 + L${secondPeakX},${secondPeakY} ${dipX},${dipY} ${firstPeakX},${firstPeakY} 100,100 + H100 + V100 + H0 + Z + `; + } + + return ( + + ); + }; + + //背景色をクリアした時は、白に変更 + if (!color) { + color = '#fff'; + } + + //Paddingの条件分岐を追加 + const getSectionStyle = (lvl) => { + if (dividerType === 'tilt') { + sectionPadding = Math.abs(lvl); + return tiltSectionStyle(lvl, color); + } else if (dividerType === 'curve') { + sectionPadding = lvl > 0 ? Math.abs(lvl) : Math.abs(lvl) * 2; + return curveSectionStyle(lvl, color); + } else if (dividerType === 'wave') { + sectionPadding = Math.abs(lvl); + return waveSectionStyle(lvl, color); + } else if (dividerType === 'triangle') { + sectionPadding = Math.abs(lvl); + return triangleSectionStyle(lvl, color); + } else if (dividerType === 'largeTriangle') { + sectionPadding = Math.abs(lvl); + return largeTriangleSectionStyle(lvl, color); + } else if (dividerType === 'serrated') { + sectionPadding = 10; + return serratedSectionStyle(lvl, color); + } else if (dividerType === 'book') { + sectionPadding = Math.abs(lvl); + return bookSectionStyle(lvl, color); + } else if (dividerType === 'pyramid') { + sectionPadding = Math.abs(lvl); + return pyramidSectionStyle(lvl, color); + } + }; + + lenderDivider = getSectionStyle(level); + + //classにdividerTypeを追加 + // eslint-disable-next-line prefer-const + sectionClass = dividerType; + + // vk_outerのクラス名をデバイスタイプに基づいて追加する + + const renderSVG = (lvl, side, deviceType) => { + lenderDivider = getSectionStyle(lvl); + const style = + side === 'upper' + ? { paddingBottom: sectionPadding + `px` } + : { paddingTop: sectionPadding + `px` }; + + let displayDeviceTypeClass; + if (deviceType === undefined) { + displayDeviceTypeClass = ''; + } else { + displayDeviceTypeClass = ` vk_outer-display-${deviceType}`; + } + + return ( +
+ + {lenderDivider} + +
+ ); + }; + + if (whichSide === 'upper') { + if (levelSettingPerDevice) { + return ( + <> + {level_pc !== 0 && + level_pc && + renderSVG(level_pc, 'upper', 'pc')} + {level_tablet !== 0 && + level_tablet && + renderSVG(level_tablet, 'upper', 'tablet')} + {level_mobile !== 0 && + level_mobile && + renderSVG(level_mobile, 'upper', 'mobile')} + + ); + } + return renderSVG(level, 'upper'); + } else if (whichSide === 'lower') { + if (levelSettingPerDevice) { + return ( + <> + {level_pc !== 0 && + level_pc && + renderSVG(level_pc, 'lower', 'pc')} + {level_tablet !== 0 && + level_tablet && + renderSVG(level_tablet, 'lower', 'tablet')} + {level_mobile !== 0 && + level_mobile && + renderSVG(level_mobile, 'lower', 'mobile')} + + ); + } + return renderSVG(level, 'lower'); + } +}; + +export { componentDivider }; diff --git a/src/blocks/_pro/outer/deprecated/save/1.89.0/save.js b/src/blocks/_pro/outer/deprecated/save/1.89.0/save.js new file mode 100644 index 000000000..38efb7f16 --- /dev/null +++ b/src/blocks/_pro/outer/deprecated/save/1.89.0/save.js @@ -0,0 +1,288 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * Internal dependencies + */ +import { __ } from '@wordpress/i18n'; +import { componentDivider } from './component-divider'; +import GenerateBgImage from './GenerateBgImage'; +import { isHexColor } from '@vkblocks/utils/is-hex-color'; +const prefix = 'vkb-outer'; + +/** + * WordPress dependencies + */ +import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; + +export default function save(props) { + const { attributes } = props; + const { + bgColor, + bgPosition, + bgImageMobile, + bgImageTablet, + bgImage, + outerWidth, + padding_left_and_right, //eslint-disable-line camelcase + padding_top_and_bottom, //eslint-disable-line camelcase + opacity, + levelSettingPerDevice, + upper_level, //eslint-disable-line camelcase + upper_level_mobile, //eslint-disable-line camelcase + upper_level_tablet, //eslint-disable-line camelcase + upper_level_pc, //eslint-disable-line camelcase + lower_level, //eslint-disable-line camelcase + lower_level_mobile, //eslint-disable-line camelcase + lower_level_tablet, //eslint-disable-line camelcase + lower_level_pc, //eslint-disable-line camelcase + upperDividerBgColor, + lowerDividerBgColor, + dividerType, + borderWidth, + borderStyle, + borderColor, + borderRadius, + minHeightValuePC, + minHeightValueTablet, + minHeightValueMobile, + minHeightUnit, + blockId, + linkUrl, + linkTarget, + } = attributes; + + let classPaddingLR; + let classPaddingVertical; + let classBgPosition; + let whichSideUpper; + let whichSideLower; + + const bgColorClasses = classnames({ + [`has-background`]: bgColor !== undefined, + [`has-${bgColor}-background-color`]: + bgColor !== undefined && !isHexColor(bgColor), + [`has-background-dim`]: opacity !== undefined, + }); + + const bgColorStyles = { + backgroundColor: isHexColor(bgColor) ? bgColor : undefined, + opacity: opacity !== undefined ? opacity : undefined, + }; + + const GetBgImage = ( + <> + {(bgImage || bgImageTablet || bgImageMobile) && ( + + )} + + + ); + + //幅のクラス切り替え + const classWidth = + outerWidth === 'full' || outerWidth === 'wide' + ? `vk_outer-width-${outerWidth} align${outerWidth}` + : 'vk_outer-width-normal'; + + //classBgPositionのクラス切り替え + if (bgPosition === 'parallax') { + classBgPosition = 'vk_outer-bgPosition-parallax vk-prlx'; + } else if (bgPosition === 'fixed') { + classBgPosition = 'vk_outer-bgPosition-fixed'; + } else if (bgPosition === 'repeat') { + classBgPosition = 'vk_outer-bgPosition-repeat'; + } else { + classBgPosition = 'vk_outer-bgPosition-normal'; + } + + //classPaddingLRのクラス切り替え + classPaddingLR = ''; + //eslint-disable-next-line camelcase + if (padding_left_and_right === '0') { + classPaddingLR = 'vk_outer-paddingLR-none'; + //eslint-disable-next-line camelcase + } else if (padding_left_and_right === '1') { + classPaddingLR = 'vk_outer-paddingLR-use'; + //eslint-disable-next-line camelcase + } else if (padding_left_and_right === '2') { + // Fit to content area width + classPaddingLR = 'vk_outer-paddingLR-zero'; + } + + //classPaddingVerticalのクラス切り替 + //eslint-disable-next-line camelcase + if (padding_top_and_bottom === '1') { + classPaddingVertical = 'vk_outer-paddingVertical-use'; + } else { + classPaddingVertical = 'vk_outer-paddingVertical-none'; + } + + // 上側セクションの傾き切り替え + //eslint-disable-next-line camelcase + if (!levelSettingPerDevice) { + if (upper_level) { + whichSideUpper = 'upper'; + } + } else if (upper_level_mobile || upper_level_tablet || upper_level_pc) { + whichSideUpper = 'upper'; + } + + // 下側セクションの傾き切り替え + //eslint-disable-next-line camelcase + if (!levelSettingPerDevice) { + if (lower_level) { + whichSideLower = 'lower'; + } + } else if (lower_level_mobile || lower_level_tablet || lower_level_pc) { + whichSideLower = 'lower'; + } + + // 編集画面とサイト上の切り替え + const containerClass = 'vk_outer_container'; + + // Dividerエフェクトがない時のみ枠線を追 + let borderStyleProperty = {}; + //eslint-disable-next-line camelcase + if (!levelSettingPerDevice) { + if ( + upper_level === 0 && //eslint-disable-line camelcase + lower_level === 0 && //eslint-disable-line camelcase + borderWidth > 0 && + borderStyle !== 'none' + ) { + borderStyleProperty = { + borderWidth: `${borderWidth}px`, + borderStyle: `${borderStyle}`, + borderColor: + isHexColor(borderColor) && borderColor + ? borderColor + : undefined, + borderRadius: `${borderRadius}px`, + }; + //eslint-disable-next-line camelcase + } else if (upper_level !== 0 || lower_level !== 0) { + //eslint-disable-line camelcase + borderStyleProperty = { + border: `none`, + borderRadius: `0px`, + }; + } + } else if ( + upper_level_mobile === 0 && //eslint-disable-line camelcase + upper_level_tablet === 0 && //eslint-disable-line camelcase + upper_level_pc === 0 && //eslint-disable-line camelcase + lower_level_mobile === 0 && //eslint-disable-line camelcase + lower_level_tablet === 0 && //eslint-disable-line camelcase + lower_level_pc === 0 && //eslint-disable-line camelcase + borderWidth > 0 && + borderStyle !== 'none' + ) { + borderStyleProperty = { + borderWidth: `${borderWidth}px`, + borderStyle: `${borderStyle}`, + borderColor: + isHexColor(borderColor) && borderColor + ? borderColor + : undefined, + borderRadius: `${borderRadius}px`, + }; + //eslint-disable-next-line camelcase + } else if ( + upper_level_mobile !== 0 || + upper_level_tablet !== 0 || + upper_level_pc !== 0 || + lower_level_mobile !== 0 || + lower_level_tablet !== 0 || + lower_level_pc !== 0 + ) { + //eslint-disable-line camelcase + borderStyleProperty = { + border: `none`, + borderRadius: `0px`, + }; + } + + const blockProps = useBlockProps.save({ + className: classnames( + `vkb-outer-${blockId} vk_outer ${classWidth} ${classPaddingLR} ${classPaddingVertical} ${classBgPosition}`, + { + [`has-border-color`]: + borderStyle !== 'none' && borderColor !== undefined, + [`has-${borderColor}-border-color`]: + borderStyle !== 'none' && + borderColor !== undefined && + !isHexColor(borderColor), + [`vk_outer-minHeight`]: + minHeightValuePC > 0 || + minHeightValueTablet > 0 || + minHeightValueMobile > 0, + } + ), + style: { + ...borderStyleProperty, + '--min-height-mobile': minHeightValueMobile + ? `${minHeightValueMobile}${minHeightUnit}` + : undefined, + '--min-height-tablet': minHeightValueTablet + ? `${minHeightValueTablet}${minHeightUnit}` + : undefined, + '--min-height-pc': minHeightValuePC + ? `${minHeightValuePC}${minHeightUnit}` + : undefined, + }, + }); + + const relAttribute = + linkTarget === '_blank' ? 'noopener noreferrer' : 'noopener'; + const GetLinkUrl = ( + + + {__('Outer link', 'vk-blocks-pro')} + + + ); + + return ( +
+ {linkUrl && GetLinkUrl} + {GetBgImage} +
+ {componentDivider( + upper_level, + upperDividerBgColor, + whichSideUpper, + dividerType, + levelSettingPerDevice, + upper_level_mobile, + upper_level_tablet, + upper_level_pc + )} +
+ +
+ {componentDivider( + lower_level, + lowerDividerBgColor, + whichSideLower, + dividerType, + levelSettingPerDevice, + lower_level_mobile, + lower_level_tablet, + lower_level_pc + )} +
+
+ ); +} diff --git a/src/blocks/_pro/outer/deprecated/save/index.js b/src/blocks/_pro/outer/deprecated/save/index.js index 3d6571002..2f8fe98b3 100644 --- a/src/blocks/_pro/outer/deprecated/save/index.js +++ b/src/blocks/_pro/outer/deprecated/save/index.js @@ -20,6 +20,7 @@ import save1_61_2 from './1.61.2/save'; import save1_64_0 from './1.64.0/save'; import save1_71_0 from './1.71.0/save'; import save1_76_0 from './1.76.0/save'; +import save1_89_0 from './1.89.0/save'; const blockAttributes = { bgColor: { @@ -179,7 +180,6 @@ const blockAttributes7 = { }; // 1.71.0 から attributes を変更 -/* const blockAttributes8 = { ...blockAttributes7, linkUrl: { @@ -190,11 +190,14 @@ const blockAttributes8 = { default: '' }, }; -*/ const deprecated = [ { - attributes: blockAttributes7, + attributes: blockAttributes8, + save: save1_89_0, + }, + { + attributes: blockAttributes8, save: save1_76_0, }, { diff --git a/src/blocks/_pro/outer/edit.js b/src/blocks/_pro/outer/edit.js index 1f0973631..dc07e4c8e 100644 --- a/src/blocks/_pro/outer/edit.js +++ b/src/blocks/_pro/outer/edit.js @@ -643,6 +643,14 @@ export default function OuterEdit(props) { value: 'serrated', label: __('Serrated', 'vk-blocks-pro'), }, + { + value: 'book', + label: __('Book', 'vk-blocks-pro'), + }, + { + value: 'pyramid', + label: __('Pyramid', 'vk-blocks-pro'), + }, ]} /> diff --git a/src/blocks/slider/edit.js b/src/blocks/slider/edit.js index 12f99a96b..c4f283ba0 100644 --- a/src/blocks/slider/edit.js +++ b/src/blocks/slider/edit.js @@ -553,6 +553,7 @@ export default function SliderEdit(props) { // ループに関するアラート let sloderPerViewLoopAlert = ''; if (slidesPerGroup === 'slides-per-view') { + // 一度に遷移するスライドアイテムの数 : 表示アイテム数と同じ sloderPerViewLoopAlert = (
{__( @@ -561,15 +562,29 @@ export default function SliderEdit(props) { )}
); - } else { - sloderPerViewLoopAlert = ( -
- {__( - 'If you want to loop slides, the number of placed slide items must be greater than or equal to the number of items you want to display per view + 1.', - 'vk-blocks-pro' - )} -
- ); + } else if (slidesPerGroup !== 'slides-per-view') { + // ↑ else だけだと lint でエラーにされてコミットさせてもらえないため... + // 一度に遷移するスライドアイテムの数 : １つずつ + if (attributes.centeredSlides) { + // アクティブスライドを中央にする場合 + sloderPerViewLoopAlert = ( +
+ {__( + 'If the active slide is in the center, the number of placed slide items must be greater than or equal to the number of items you want to display in one view + 2.', + 'vk-blocks-pro' + )} +
+ ); + } else { + sloderPerViewLoopAlert = ( +
+ {__( + 'If you want to loop slides, the number of placed slide items must be greater than or equal to the number of items you want to display per view + 1.', + 'vk-blocks-pro' + )} +
+ ); + } } /* ループ時のアラート */ @@ -584,7 +599,11 @@ export default function SliderEdit(props) { (slidesPerGroup === 'slides-per-view' && innerBlocks.length / slidesPerViewMobile < 2) || (slidesPerGroup === 'one-by-one' && - innerBlocks.length - (slidesPerViewMobile + 1) < 0) + innerBlocks.length - (slidesPerViewMobile + 1) < 0 && + !attributes.centeredSlides) || + (slidesPerGroup === 'one-by-one' && + innerBlocks.length - (slidesPerViewMobile + 2) < 0 && + attributes.centeredSlides) ) { slidesPerViewMobileLoopAlert = sloderPerViewLoopAlert; } @@ -592,7 +611,11 @@ export default function SliderEdit(props) { (slidesPerGroup === 'slides-per-view' && innerBlocks.length / slidesPerViewTablet < 2) || (slidesPerGroup === 'one-by-one' && - innerBlocks.length - (slidesPerViewTablet + 1) < 0) + innerBlocks.length - (slidesPerViewTablet + 1) < 0 && + !attributes.centeredSlides) || + (slidesPerGroup === 'one-by-one' && + innerBlocks.length - (slidesPerViewTablet + 2) < 0 && + attributes.centeredSlides) ) { slidesPerViewTabletLoopAlert = sloderPerViewLoopAlert; } @@ -601,7 +624,11 @@ export default function SliderEdit(props) { (slidesPerGroup === 'slides-per-view' && innerBlocks.length / slidesPerViewPC < 2) || (slidesPerGroup === 'one-by-one' && - innerBlocks.length - (slidesPerViewPC + 1) < 0) + innerBlocks.length - (slidesPerViewPC + 1) < 0 && + !attributes.centeredSlides) || + (slidesPerGroup === 'one-by-one' && + innerBlocks.length - (slidesPerViewPC + 2) < 0 && + attributes.centeredSlides) ) { slidesPerViewPCLoopAlert = sloderPerViewLoopAlert; } diff --git a/src/extensions/core/cover/style.js b/src/extensions/core/cover/style.js index 80a268a34..a2e9b6460 100644 --- a/src/extensions/core/cover/style.js +++ b/src/extensions/core/cover/style.js @@ -5,7 +5,7 @@ */ import { addFilter } from '@wordpress/hooks'; import { createHigherOrderComponent } from '@wordpress/compose'; -import { BlockControls, useBlockProps } from '@wordpress/block-editor'; +import { BlockControls } from '@wordpress/block-editor'; import { ToolbarGroup } from '@wordpress/components'; import { Fragment } from '@wordpress/element'; import LinkToolbar from '@vkblocks/components/link-toolbar'; @@ -77,19 +77,18 @@ const insertLinkIntoCoverBlock = (element, blockType, attributes) => { return element; } - const blockProps = useBlockProps.save({ - className: linkUrl - ? `${element.props.className} has-link` - : element.props.className, - style: element.props.style, - }); + // `element` から既存のクラスを取得し、リンクがある場合にのみ `has-link` を追加 + const existingClassName = element.props.className || ''; + const classNameWithLink = + `${existingClassName} ${linkUrl ? 'has-link' : ''}`.trim(); // rel 属性の設定 const relAttribute = linkTarget === '_blank' ? 'noopener noreferrer' : 'noopener'; return ( -
+ ); }; diff --git a/test/e2e-tests/fixtures/blocks/vk-blocks__outer__default.html b/test/e2e-tests/fixtures/blocks/vk-blocks__outer__default.html index 0edec1965..a051f7e3f 100644 --- a/test/e2e-tests/fixtures/blocks/vk-blocks__outer__default.html +++ b/test/e2e-tests/fixtures/blocks/vk-blocks__outer__default.html @@ -1,27 +1,27 @@ - -
Outer link
+ diff --git a/test/e2e-tests/fixtures/blocks/vk-blocks__outer__divider.html b/test/e2e-tests/fixtures/blocks/vk-blocks__outer__divider.html index 059aaf8ea..0050fea2c 100644 --- a/test/e2e-tests/fixtures/blocks/vk-blocks__outer__divider.html +++ b/test/e2e-tests/fixtures/blocks/vk-blocks__outer__divider.html @@ -1,29 +1,29 @@ - -
Outer link

-
- -
Outer link

- \ No newline at end of file + + + +
Outer link
+

+
+ + + +
Outer link
+

+
+ diff --git a/test/e2e-tests/fixtures/blocks/vk-blocks__outer__divider__deprecated-1-89-0.html b/test/e2e-tests/fixtures/blocks/vk-blocks__outer__divider__deprecated-1-89-0.html new file mode 100644 index 000000000..059aaf8ea --- /dev/null +++ b/test/e2e-tests/fixtures/blocks/vk-blocks__outer__divider__deprecated-1-89-0.html @@ -0,0 +1,65 @@ + +
Outer link
+

+
+ + + +
Outer link
+

+
+ \ No newline at end of file diff --git a/test/phpunit/pro/test-block-loader.php b/test/phpunit/pro/test-block-loader.php index 25d805f44..431f99cd8 100644 --- a/test/phpunit/pro/test-block-loader.php +++ b/test/phpunit/pro/test-block-loader.php @@ -67,4 +67,48 @@ public function test_should_load_separate_assets() { $this->assertSame( $correct, $return ); } } + + public function test_add_styles_with_separate_assets() { + + $test_cases = array( + array( + 'option' => true, + 'expected_individual' => true, + 'expected_combined' => false, + ), + array( + 'option' => false, + 'expected_individual' => false, + 'expected_combined' => true, + ), + ); + + foreach ( $test_cases as $case ) { + // 各ケースごとに分割読み込みオプションを設定 + update_option( 'vk_blocks_options', array( 'load_separate_option' => $case['option'] ) ); + + // 既存のスタイルをクリア + wp_dequeue_style( 'vk-blocks-build-css' ); + wp_dequeue_style( 'vk-blocks/core-table' ); + wp_dequeue_style( 'vk-blocks/core-heading' ); + wp_dequeue_style( 'vk-blocks/core-image' ); + + // VK_Blocks_Block_Loader クラスのインスタンスを init メソッドから取得 + $loader = VK_Blocks_Block_Loader::init(); + + // スタイルを読み込む + $loader->add_styles(); + + // 分割読み込みのオプションが有効な場合は個別スタイルがエンキューされることを確認 + $this->assertSame( $case['expected_individual'], wp_style_is( 'vk-blocks/core-table', 'enqueued' ) ); + $this->assertSame( $case['expected_individual'], wp_style_is( 'vk-blocks/core-heading', 'enqueued' ) ); + $this->assertSame( $case['expected_individual'], wp_style_is( 'vk-blocks/core-image', 'enqueued' ) ); + + // 分割読み込みのオプションが無効な場合は結合スタイルがエンキューされることを確認 + $this->assertSame( $case['expected_combined'], wp_style_is( 'vk-blocks-build-css', 'enqueued' ) ); + + // 設定を元に戻す + delete_option( 'vk_blocks_options' ); + } + } } diff --git a/vk-blocks.php b/vk-blocks.php index 51fc8df50..df8f2b047 100644 --- a/vk-blocks.php +++ b/vk-blocks.php @@ -3,7 +3,7 @@ * Plugin Name: VK Blocks Pro * Plugin URI: https://github.com/vektor-inc/vk-blocks * Description: This is a plugin that extends Block Editor. - * Version: 1.89.0.0 + * Version: 1.90.0.0 * Stable tag: 1.88.0.2 * Requires at least: 6.3 * Author: Vektor,Inc.