From 1c40c2ab725b132baa6862efc292b12e9eba0d65 Mon Sep 17 00:00:00 2001 From: mtdkei Date: Fri, 5 Jul 2024 14:42:07 +0900 Subject: [PATCH 01/19] Add serrated style for Divider Setting --- src/blocks/_pro/outer/component-divider.js | 31 ++++++++++++++++++++++ src/blocks/_pro/outer/edit.js | 4 +++ 2 files changed, 35 insertions(+) diff --git a/src/blocks/_pro/outer/component-divider.js b/src/blocks/_pro/outer/component-divider.js index a80eded35..2226819bb 100644 --- a/src/blocks/_pro/outer/component-divider.js +++ b/src/blocks/_pro/outer/component-divider.js @@ -135,6 +135,34 @@ const componentDivider = ( } }; + // 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 ( + + ); + }; + //背景色をクリアした時は、白に変更 if (!color) { color = '#fff'; @@ -154,6 +182,9 @@ const componentDivider = ( } else if (dividerType === 'triangle') { sectionPadding = Math.abs(lvl); return triangleSectionStyle(lvl, color); + } else if (dividerType === 'serrated') { + sectionPadding = Math.abs(lvl); + return serratedSectionStyle(lvl, color); } }; diff --git a/src/blocks/_pro/outer/edit.js b/src/blocks/_pro/outer/edit.js index de83f61d5..c23d57458 100644 --- a/src/blocks/_pro/outer/edit.js +++ b/src/blocks/_pro/outer/edit.js @@ -632,6 +632,10 @@ export default function OuterEdit(props) { value: 'triangle', label: __('Triangle', 'vk-blocks-pro'), }, + { + value: 'serrated', + label: __('Serrated', 'vk-blocks-pro'), + }, ]} /> From 9f580cb767b5a4fa25fa4fb944c8363574e66a78 Mon Sep 17 00:00:00 2001 From: mtdkei Date: Fri, 5 Jul 2024 14:51:55 +0900 Subject: [PATCH 02/19] Add serrated style for Divider Setting --- src/blocks/_pro/outer/component-divider.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/blocks/_pro/outer/component-divider.js b/src/blocks/_pro/outer/component-divider.js index 2226819bb..4ae1c56b8 100644 --- a/src/blocks/_pro/outer/component-divider.js +++ b/src/blocks/_pro/outer/component-divider.js @@ -139,12 +139,13 @@ const componentDivider = ( 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 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; @@ -152,7 +153,7 @@ const componentDivider = ( return `${x},${y}`; }) .join(' L '); - + return ( ); }; - + //背景色をクリアした時は、白に変更 if (!color) { color = '#fff'; From a88ac38e263098105c290672491f8a97ecc53a3d Mon Sep 17 00:00:00 2001 From: mtdkei Date: Fri, 5 Jul 2024 14:56:55 +0900 Subject: [PATCH 03/19] Add deprecated file for ver.1.78.0 --- .../_pro/outer/deprecated/hooks/index.js | 1 + .../deprecated/save/1.78.0/GenerateBgImage.js | 103 +++++++ .../save/1.78.0/component-divider.js | 235 ++++++++++++++ .../_pro/outer/deprecated/save/1.78.0/save.js | 288 ++++++++++++++++++ .../_pro/outer/deprecated/save/index.js | 5 + 5 files changed, 632 insertions(+) create mode 100644 src/blocks/_pro/outer/deprecated/save/1.78.0/GenerateBgImage.js create mode 100644 src/blocks/_pro/outer/deprecated/save/1.78.0/component-divider.js create mode 100644 src/blocks/_pro/outer/deprecated/save/1.78.0/save.js diff --git a/src/blocks/_pro/outer/deprecated/hooks/index.js b/src/blocks/_pro/outer/deprecated/hooks/index.js index c03e8733e..ea0e9789d 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.78.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.78.0/GenerateBgImage.js b/src/blocks/_pro/outer/deprecated/save/1.78.0/GenerateBgImage.js new file mode 100644 index 000000000..53fb7e570 --- /dev/null +++ b/src/blocks/_pro/outer/deprecated/save/1.78.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.78.0/component-divider.js b/src/blocks/_pro/outer/deprecated/save/1.78.0/component-divider.js new file mode 100644 index 000000000..a80eded35 --- /dev/null +++ b/src/blocks/_pro/outer/deprecated/save/1.78.0/component-divider.js @@ -0,0 +1,235 @@ +/** + * 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 ( + + ); + } + }; + + //背景色をクリアした時は、白に変更 + 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); + } + }; + + 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.78.0/save.js b/src/blocks/_pro/outer/deprecated/save/1.78.0/save.js new file mode 100644 index 000000000..38efb7f16 --- /dev/null +++ b/src/blocks/_pro/outer/deprecated/save/1.78.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..62ac0e0c5 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_78_0 from './1.76.0/save'; const blockAttributes = { bgColor: { @@ -193,6 +194,10 @@ const blockAttributes8 = { */ const deprecated = [ + { + attributes: blockAttributes7, + save: save1_78_0, + }, { attributes: blockAttributes7, save: save1_76_0, From 130ddfcf6231e169435541a32e63964fcd45a80b Mon Sep 17 00:00:00 2001 From: mtdkei Date: Fri, 5 Jul 2024 15:01:46 +0900 Subject: [PATCH 04/19] Add test file --- .../blocks/vk-blocks__outer__default.html | 16 +++++----- .../vk-blocks__outer__deprecated-1-78-0.html | 30 +++++++++++++++++++ 2 files changed, 38 insertions(+), 8 deletions(-) create mode 100644 test/e2e-tests/fixtures/blocks/vk-blocks__outer__deprecated-1-78-0.html 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 c9999e83c..d9fc5761c 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
+ \ No newline at end of file From f9ae53e0d60e8241410906995a3e1d2fd8c8ab27 Mon Sep 17 00:00:00 2001 From: mtdkei Date: Fri, 5 Jul 2024 15:22:59 +0900 Subject: [PATCH 05/19] Fix: text --- test/e2e-tests/fixtures/blocks/vk-blocks__outer__default.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 d9fc5761c..0edec1965 100644 --- a/test/e2e-tests/fixtures/blocks/vk-blocks__outer__default.html +++ b/test/e2e-tests/fixtures/blocks/vk-blocks__outer__default.html @@ -1,5 +1,5 @@ -
Outerリンク - \ No newline at end of file + From 2a807ad28b5e5e1a4a41901bdbd6b75e12b75e5e Mon Sep 17 00:00:00 2001 From: mtdkei Date: Fri, 5 Jul 2024 15:25:13 +0900 Subject: [PATCH 06/19] Update changelog --- readme.txt | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/readme.txt b/readme.txt index e51adc02d..2629f86c2 100644 --- a/readme.txt +++ b/readme.txt @@ -105,6 +105,13 @@ e.g. == Changelog == +[ Add function ][ Outer (Pro) ] Add serrated in divider style. +[ Add function ][ Core Group ] Add toolbar link for components by item. +[ Add function ][ Grid Column (Pro) ] Add toolbar link for components by item. + += 1.78.0 = +[ Other ] Attend to WordPress 6.6 + = 1.77.0 = [ Add function ][ Outer (Pro) ] Add toolbar link for components. [ Add function ][ Accordion ] Added initial display state setting. From 084029cc3652168e38ef821bcde2768563e3271c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=BE=E7=94=B0=E5=95=93?= Date: Thu, 11 Jul 2024 14:56:03 +0900 Subject: [PATCH 07/19] Add serrated and large triangle in divider style for Outer --- editor-css/_editor_before_slider.scss | 10 +- languages/vk-blocks-pro-ja.po | 56 +++---- languages/vk-blocks-pro-js.pot | 28 ++-- readme.txt | 7 +- src/blocks/_pro/fixed-display/block.json | 3 + src/blocks/_pro/fixed-display/index.php | 17 +- src/blocks/_pro/outer/component-divider.js | 36 ++++- src/blocks/_pro/outer/edit.js | 4 + src/blocks/_pro/tab/block.json | 16 ++ src/blocks/_pro/tab/deprecated/1.78.0/save.js | 153 ++++++++++++++++++ src/blocks/_pro/tab/deprecated/index.js | 27 ++++ src/blocks/_pro/tab/edit.js | 117 +++++++++++++- src/blocks/_pro/tab/save.js | 18 +++ src/blocks/_pro/tab/style.scss | 115 ++++++++++++- .../_pro/table-of-contents-new/block.json | 3 + .../deprecated/1.78.0/save.js | 29 ++++ .../table-of-contents-new/deprecated/index.js | 8 +- .../_pro/table-of-contents-new/index.php | 29 +++- src/blocks/_pro/table-of-contents-new/save.js | 6 +- .../_pro/table-of-contents-new/style.scss | 73 +++++---- src/blocks/_pro/table-of-contents-new/view.js | 14 ++ src/blocks/slider/edit.js | 11 +- src/components/link-toolbar/index.js | 75 ++++----- .../blocks/vk-blocks__tab__default.html | 10 +- .../vk-blocks__tab__deprecated-1-78-0.html | 17 ++ .../vk-blocks__table-of-contents-new.html | 6 +- ...le-of-contents-new__deprecated-1-78-0.html | 7 + 27 files changed, 749 insertions(+), 146 deletions(-) create mode 100644 src/blocks/_pro/tab/deprecated/1.78.0/save.js create mode 100644 src/blocks/_pro/table-of-contents-new/deprecated/1.78.0/save.js create mode 100644 test/e2e-tests/fixtures/blocks/vk-blocks__tab__deprecated-1-78-0.html create mode 100644 test/e2e-tests/fixtures/blocks/vk-blocks__table-of-contents-new__deprecated-1-78-0.html diff --git a/editor-css/_editor_before_slider.scss b/editor-css/_editor_before_slider.scss index f03729f4b..6b011fb32 100644 --- a/editor-css/_editor_before_slider.scss +++ b/editor-css/_editor_before_slider.scss @@ -8,6 +8,11 @@ max-width: 100vw; .vk_slider_item { max-width: 100vw; + } + } + .vk_slider.vk_swiper.vk_slider.vk_swiper.alignwide, + .vk_slider.vk_swiper.vk_slider.vk_swiper.alignfull { + .vk_slider_item { &.vk_slider_item-paddingLR-use, &.vk_slider_item-paddingLR-zero{ .vk_slider_item_container{ @@ -20,8 +25,3 @@ } } } -// インサーターが左右左右中央にならないので補正 -vk_slider>.vk_slider_wrapper>div>.block-editor-inner-blocks>.block-editor-block-list__layout>.block-list-appender { - margin-left:auto; - margin-right:auto; -} \ No newline at end of file diff --git a/languages/vk-blocks-pro-ja.po b/languages/vk-blocks-pro-ja.po index 547fbcf67..760bd94ad 100644 --- a/languages/vk-blocks-pro-ja.po +++ b/languages/vk-blocks-pro-ja.po @@ -2,8 +2,8 @@ msgid "" msgstr "" "Project-Id-Version: VK Blocks Pro\n" "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/vk-blocks-pro\n" -"POT-Creation-Date: 2024-07-02T07:02:48+00:00\n" -"PO-Revision-Date: \n" +"POT-Creation-Date: 2024-07-01T05:41:28+00:00\n" +"PO-Revision-Date: 2024-07-01 14:44+0900\n" "Last-Translator: \n" "Language-Team: \n" "Language: ja\n" @@ -12,6 +12,16 @@ msgstr "" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=1; plural=0;\n" "X-Generator: Poedit 3.4.4\n" +"X-Poedit-Basepath: ../../..\n" +"X-Poedit-Flags-xgettext: --add-comments=translators:\n" +"X-Poedit-WPHeader: vk-blocks.php\n" +"X-Poedit-SourceCharset: UTF-8\n" +"X-Poedit-KeywordsList: __;_e;_n:1,2;_x:1,2c;_ex:1,2c;_nx:4c,1,2;esc_attr__;" +"esc_attr_e;esc_attr_x:1,2c;esc_html__;esc_html_e;esc_html_x:1,2c;_n_noop:1,2;" +"_nx_noop:3c,1,2;__ngettext_noop:1,2\n" +"X-Poedit-SearchPath-0: .\n" +"X-Poedit-SearchPathExcluded-0: *.min.js\n" +"X-Poedit-SearchPathExcluded-1: node_modules\n" #: src/admin/balloon/add-button.js:38 msgid "Added balloon image setting" @@ -328,14 +338,14 @@ msgid "Color" msgstr "色" #: src/admin/custom-format/index.js:208 -#: src/blocks/_pro/grid-column-item/edit.js:102 +#: src/blocks/_pro/grid-column-item/edit.js:104 #: src/blocks/_pro/gridcolcard/edit-common.js:166 src/blocks/button/edit.js:749 #: src/blocks/heading/edit.js:324 msgid "Text Color" msgstr "文字の色" #: src/admin/custom-format/index.js:239 -#: src/blocks/_pro/grid-column-item/edit.js:108 +#: src/blocks/_pro/grid-column-item/edit.js:110 #: src/blocks/_pro/gridcolcard/edit-common.js:172 #: src/blocks/border-box/edit.js:248 src/blocks/button/edit.js:732 #: src/blocks/icon/edit.js:304 @@ -600,7 +610,7 @@ msgid "" msgstr "" "レスポンシブスペーサーなどで使用する共通余白のサイズを指定してください。" -#: src/admin/margin.js:81 src/blocks/_pro/grid-column-item/edit.js:173 +#: src/admin/margin.js:81 src/blocks/_pro/grid-column-item/edit.js:175 #: src/blocks/_pro/grid-column/edit.js:78 msgid "Unit" msgstr "単位" @@ -1366,60 +1376,56 @@ msgstr "固定位置" msgid "Top" msgstr "上 " -#: src/blocks/_pro/grid-column-item/edit.js:100 +#: src/blocks/_pro/grid-column-item/edit.js:102 #: src/blocks/_pro/gridcolcard/edit-common.js:164 msgid "Color Settings" msgstr "色設定" -#: src/blocks/_pro/grid-column-item/edit.js:118 +#: src/blocks/_pro/grid-column-item/edit.js:120 msgid "Margin setting inside the item" msgstr "アイテム内の余白設定" -#: src/blocks/_pro/grid-column-item/edit.js:125 +#: src/blocks/_pro/grid-column-item/edit.js:127 msgid "Padding (Top)" msgstr "余白 (上)" -#: src/blocks/_pro/grid-column-item/edit.js:141 +#: src/blocks/_pro/grid-column-item/edit.js:143 #: src/blocks/_pro/outer/edit.js:536 src/blocks/slider-item/edit.js:134 msgid "Padding (Left and Right)" msgstr "余白 (左右)" -#: src/blocks/_pro/grid-column-item/edit.js:157 +#: src/blocks/_pro/grid-column-item/edit.js:159 msgid "Padding (Bottom)" msgstr "余白 (下)" -#: src/blocks/_pro/grid-column-item/edit.js:186 +#: src/blocks/_pro/grid-column-item/edit.js:190 #: src/blocks/_pro/grid-column/edit.js:91 src/blocks/_pro/outer/edit.js:1065 #: src/blocks/icon-outer/edit.js:183 src/blocks/icon/edit.js:172 #: src/utils/unit-options.js:6 msgid "px" msgstr "px" -#: src/blocks/_pro/grid-column-item/edit.js:187 +#: src/blocks/_pro/grid-column-item/edit.js:194 #: src/blocks/_pro/grid-column/edit.js:95 src/blocks/_pro/outer/edit.js:1069 #: src/blocks/icon-outer/edit.js:187 src/blocks/icon/edit.js:176 #: src/utils/unit-options.js:10 msgid "em" msgstr "em" -#: src/blocks/_pro/grid-column-item/edit.js:188 +#: src/blocks/_pro/grid-column-item/edit.js:198 #: src/blocks/_pro/grid-column/edit.js:99 src/blocks/_pro/outer/edit.js:1073 #: src/blocks/icon-outer/edit.js:191 src/blocks/icon/edit.js:180 #: src/utils/unit-options.js:14 msgid "rem" msgstr "rem" -#: src/blocks/_pro/grid-column-item/edit.js:189 +#: src/blocks/_pro/grid-column-item/edit.js:202 #: src/blocks/_pro/grid-column/edit.js:103 src/blocks/_pro/outer/edit.js:1001 #: src/blocks/icon-outer/edit.js:195 src/blocks/icon/edit.js:184 #: src/utils/unit-options.js:18 msgid "vw" msgstr "vw" -#: src/blocks/_pro/grid-column-item/save.js:102 -msgid "Grid column item link" -msgstr "グリッドカラムアイテムリンク" - #: src/blocks/_pro/grid-column/edit.js:53 msgid "Layout Columns" msgstr "カラムレイアウト" @@ -4781,9 +4787,8 @@ msgid "Grid Column Item" msgstr "グリッドカラムアイテム" #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/grid-column-item/block.json -#, fuzzy -#| msgctxt "block description" -#| msgid "One item in a grit column block." +#: inc/vk-blocks/build/blocks/_pro/grid-column-item/block.json +#: src/blocks/_pro/grid-column-item/block.json msgctxt "block description" msgid "One item in a grit column block." msgstr "グリッドカラムブロック内の1つのアイテムです。" @@ -5080,15 +5085,6 @@ msgid "" "explaining the order." msgstr "順番を説明する時に便利でシンプルなスケジュールなどを表示します。" -#: inc/vk-blocks/build/blocks/_pro/grid-column-item/block.json -#: src/blocks/_pro/grid-column-item/block.json -#, fuzzy -#| msgctxt "block description" -#| msgid "One item in a grit column block." -msgctxt "block description" -msgid "One item in a grid column block." -msgstr "グリッドカラムブロック内の1つのアイテムです。" - #~ msgid "Display position from the top of the page" #~ msgstr "ページ上部からの表示位置" diff --git a/languages/vk-blocks-pro-js.pot b/languages/vk-blocks-pro-js.pot index 8699ea180..7c6decae7 100644 --- a/languages/vk-blocks-pro-js.pot +++ b/languages/vk-blocks-pro-js.pot @@ -311,7 +311,7 @@ msgid "Color" msgstr "" #: src/admin/custom-format/index.js:208 -#: src/blocks/_pro/grid-column-item/edit.js:102 +#: src/blocks/_pro/grid-column-item/edit.js:104 #: src/blocks/_pro/gridcolcard/edit-common.js:166 #: src/blocks/button/edit.js:749 #: src/blocks/heading/edit.js:324 @@ -319,7 +319,7 @@ msgid "Text Color" msgstr "" #: src/admin/custom-format/index.js:239 -#: src/blocks/_pro/grid-column-item/edit.js:108 +#: src/blocks/_pro/grid-column-item/edit.js:110 #: src/blocks/_pro/gridcolcard/edit-common.js:172 #: src/blocks/border-box/edit.js:248 #: src/blocks/button/edit.js:732 @@ -588,7 +588,7 @@ msgid "" msgstr "" #: src/admin/margin.js:81 -#: src/blocks/_pro/grid-column-item/edit.js:173 +#: src/blocks/_pro/grid-column-item/edit.js:175 #: src/blocks/_pro/grid-column/edit.js:78 msgid "Unit" msgstr "" @@ -1364,30 +1364,30 @@ msgstr "" msgid "Top" msgstr "" -#: src/blocks/_pro/grid-column-item/edit.js:100 +#: src/blocks/_pro/grid-column-item/edit.js:102 #: src/blocks/_pro/gridcolcard/edit-common.js:164 msgid "Color Settings" msgstr "" -#: src/blocks/_pro/grid-column-item/edit.js:118 +#: src/blocks/_pro/grid-column-item/edit.js:120 msgid "Margin setting inside the item" msgstr "" -#: src/blocks/_pro/grid-column-item/edit.js:125 +#: src/blocks/_pro/grid-column-item/edit.js:127 msgid "Padding (Top)" msgstr "" -#: src/blocks/_pro/grid-column-item/edit.js:141 +#: src/blocks/_pro/grid-column-item/edit.js:143 #: src/blocks/_pro/outer/edit.js:536 #: src/blocks/slider-item/edit.js:134 msgid "Padding (Left and Right)" msgstr "" -#: src/blocks/_pro/grid-column-item/edit.js:157 +#: src/blocks/_pro/grid-column-item/edit.js:159 msgid "Padding (Bottom)" msgstr "" -#: src/blocks/_pro/grid-column-item/edit.js:186 +#: src/blocks/_pro/grid-column-item/edit.js:190 #: src/blocks/_pro/grid-column/edit.js:91 #: src/blocks/_pro/outer/edit.js:1065 #: src/blocks/icon-outer/edit.js:183 @@ -1396,7 +1396,7 @@ msgstr "" msgid "px" msgstr "" -#: src/blocks/_pro/grid-column-item/edit.js:187 +#: src/blocks/_pro/grid-column-item/edit.js:194 #: src/blocks/_pro/grid-column/edit.js:95 #: src/blocks/_pro/outer/edit.js:1069 #: src/blocks/icon-outer/edit.js:187 @@ -1405,7 +1405,7 @@ msgstr "" msgid "em" msgstr "" -#: src/blocks/_pro/grid-column-item/edit.js:188 +#: src/blocks/_pro/grid-column-item/edit.js:198 #: src/blocks/_pro/grid-column/edit.js:99 #: src/blocks/_pro/outer/edit.js:1073 #: src/blocks/icon-outer/edit.js:191 @@ -1414,7 +1414,7 @@ msgstr "" msgid "rem" msgstr "" -#: src/blocks/_pro/grid-column-item/edit.js:189 +#: src/blocks/_pro/grid-column-item/edit.js:202 #: src/blocks/_pro/grid-column/edit.js:103 #: src/blocks/_pro/outer/edit.js:1001 #: src/blocks/icon-outer/edit.js:195 @@ -1423,10 +1423,6 @@ msgstr "" msgid "vw" msgstr "" -#: src/blocks/_pro/grid-column-item/save.js:102 -msgid "Grid column item link" -msgstr "" - #: src/blocks/_pro/grid-column/edit.js:53 msgid "Layout Columns" msgstr "" diff --git a/readme.txt b/readme.txt index b4f33b685..722640c22 100644 --- a/readme.txt +++ b/readme.txt @@ -106,9 +106,14 @@ e.g. == Changelog == -[ Add function ][ Outer (Pro) ] Add serrated in divider style. +[ Add function ][ Outer (Pro) ] Add serrated and const large triangle in divider style. +[ Bug fix ][ Fixed Display (Pro) ] Fixed an issue with redundant JavaScript loading in the WordPress 6.5 environment. +[ Add function ][ Tab (Pro) ] Add settings for when there are many labels or the screen width is narrow. +[ Bug fix ] Fixed an error in the component link toolbar in WordPress version 6.6. +[ Fix ][ Table of Contents (Pro) ] Improved pseudo elements for frontend page accessibility. [ Add function ][ Core Group ] Add toolbar link for components by item. [ Add function ][ Grid Column (Pro) ] Add toolbar link for components by item. +[ Add function ][ Slider ] Add 'Wide' to width. = 1.78.0 = [ Other ] Attend to WordPress 6.6 diff --git a/src/blocks/_pro/fixed-display/block.json b/src/blocks/_pro/fixed-display/block.json index fde0b21a8..17c1993cd 100644 --- a/src/blocks/_pro/fixed-display/block.json +++ b/src/blocks/_pro/fixed-display/block.json @@ -3,6 +3,9 @@ "name": "vk-blocks/fixed-display", "category": "vk-blocks-cat", "title": "Fixed display", + "editorScript": "vk-blocks-build-js", + "editorStyle": "vk-blocks-build-editor-css", + "style": "vk-blocks/fixed-display", "attributes": { "mode": { "type": "string", diff --git a/src/blocks/_pro/fixed-display/index.php b/src/blocks/_pro/fixed-display/index.php index b28e36756..4f8eb3f73 100644 --- a/src/blocks/_pro/fixed-display/index.php +++ b/src/blocks/_pro/fixed-display/index.php @@ -32,14 +32,23 @@ function vk_blocks_register_block_fixed_display() { ); } - register_block_type( - __DIR__, - array( + // クラシックテーマ & 6.5 環境で $assets = array() のように空にしないと重複登録になるため + // ここで初期化しておく + $assets = array(); + // Attend to load separate assets. + // 分割読み込みが有効な場合のみ、分割読み込み用のスクリプトを登録する + if ( method_exists( 'VK_Blocks_Block_Loader', 'should_load_separate_assets' ) && VK_Blocks_Block_Loader::should_load_separate_assets() ) { + $assets = array( 'style' => 'vk-blocks/fixed-display', 'script' => 'vk-blocks/fixed-display-script', 'editor_style' => 'vk-blocks-build-editor-css', 'editor_script' => 'vk-blocks-build-js', - ) + ); + } + + register_block_type( + __DIR__, + $assets ); } add_action( 'init', 'vk_blocks_register_block_fixed_display', 99 ); diff --git a/src/blocks/_pro/outer/component-divider.js b/src/blocks/_pro/outer/component-divider.js index 4ae1c56b8..70f2523c7 100644 --- a/src/blocks/_pro/outer/component-divider.js +++ b/src/blocks/_pro/outer/component-divider.js @@ -39,9 +39,7 @@ const componentDivider = ( /> ); } else if (level < 0) { - //絶対値に変換 const absLevel = Math.abs(level); - return ( { + 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); @@ -183,6 +206,15 @@ const componentDivider = ( } 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 === 'book') { + sectionPadding = Math.abs(lvl); + return bookSectionStyle(lvl, color); + } else if (dividerType === 'pyramid') { + sectionPadding = Math.abs(lvl); + return pyramidSectionStyle(lvl, color); } else if (dividerType === 'serrated') { sectionPadding = Math.abs(lvl); return serratedSectionStyle(lvl, color); diff --git a/src/blocks/_pro/outer/edit.js b/src/blocks/_pro/outer/edit.js index c23d57458..5077f05bc 100644 --- a/src/blocks/_pro/outer/edit.js +++ b/src/blocks/_pro/outer/edit.js @@ -632,6 +632,10 @@ export default function OuterEdit(props) { value: 'triangle', label: __('Triangle', 'vk-blocks-pro'), }, + { + value: 'largeTriangle', + label: __('Large triangle', 'vk-blocks-pro'), + }, { value: 'serrated', label: __('Serrated', 'vk-blocks-pro'), diff --git a/src/blocks/_pro/tab/block.json b/src/blocks/_pro/tab/block.json index 8da3acfc5..08e9d50b8 100644 --- a/src/blocks/_pro/tab/block.json +++ b/src/blocks/_pro/tab/block.json @@ -26,6 +26,22 @@ "type": "number", "default": 0 }, + "tabDisplayOptionsSp": { + "type": "string", + "default": "notSet" + }, + "tabDisplayOptionsTab": { + "type": "string", + "default": "notSet" + }, + "tabDisplayOptionsPc": { + "type": "string", + "default": "notSet" + }, + "displayManyTabs": { + "type": "boolean", + "default": false + }, "blockId": { "type": "string", "default": "" diff --git a/src/blocks/_pro/tab/deprecated/1.78.0/save.js b/src/blocks/_pro/tab/deprecated/1.78.0/save.js new file mode 100644 index 000000000..7019dcaf5 --- /dev/null +++ b/src/blocks/_pro/tab/deprecated/1.78.0/save.js @@ -0,0 +1,153 @@ +import { InnerBlocks, useBlockProps, RichText } from '@wordpress/block-editor'; +import { isHexColor } from '@vkblocks/utils/is-hex-color'; + +export default function save(props) { + const { attributes } = props; + const { + tabOptionJSON, + tabSizeSp, + tabSizeTab, + tabSizePc, + firstActive, + blockId, + className = '', + } = attributes; + + const tabSizePrefix = 'vk_tab_labels-tabSize'; + + const tabSizes = [ + { + name: 'sp', + attribute: tabSizeSp, + }, + { + name: 'tab', + attribute: tabSizeTab, + }, + { + name: 'pc', + attribute: tabSizePc, + }, + ]; + + let tabListClassName = `vk_tab_labels`; + tabSizes.forEach((tabSize) => { + if (tabSize.attribute !== null && tabSize.attribute !== undefined) { + tabListClassName += ` ${tabSizePrefix}--${tabSize.name}-${tabSize.attribute}`; + } + }); + + const tabOption = JSON.parse(tabOptionJSON); + + let tabList = ''; + let tabListInner = ''; + if ( + Object.keys(tabOption).length !== 0 && + tabOption.listArray.length !== 0 + ) { + tabListInner = tabOption.listArray.map((option, index) => { + let activeLabelClass = ''; + if (firstActive === index) { + activeLabelClass = ' vk_tab_labels_label-state-active'; + } else { + activeLabelClass = ' vk_tab_labels_label-state-inactive'; + } + let tabColorClass = ''; + const tabColorStyle = {}; + let tabSpanColorClass = ''; + const tabSpanColorStyle = {}; + + if (option.tabColor !== '') { + if (tabOption.tabLabelBackground) { + tabColorClass = ' has-background'; + if (!isHexColor(option.tabColor)) { + tabColorClass += ` has-${option.tabColor}-background-color`; + } else { + tabColorStyle.backgroundColor = option.tabColor; + } + } else if (tabOption.tabLabelBorderTop) { + tabSpanColorClass = ' has-border-top'; + if (!isHexColor(option.tabColor)) { + tabSpanColorClass += ` has-${option.tabColor}-border-color`; + } else { + tabSpanColorStyle.borderTopColor = option.tabColor; + } + // Only set color if the label is active + if (firstActive === index) { + tabColorStyle.color = option.tabColor; + const borderColorClassMatch = tabSpanColorClass.match( + /has-(.*)-border-color/ + ); + if (borderColorClassMatch) { + tabSpanColorClass += ` has-${borderColorClassMatch[1]}-color`; + } + } + } + } + + if ( + activeLabelClass.includes('vk_tab_labels_label-state-inactive') + ) { + delete tabColorStyle.color; + } + + if ( + className.includes('is-style-vk_tab_labels-line') && + activeLabelClass.includes('vk_tab_labels_label-state-active') && + tabSpanColorClass.includes('has-border-top') && + tabSpanColorStyle.borderTopColor + ) { + tabColorStyle.color = tabSpanColorStyle.borderTopColor; + } + + return ( +
  • 0 + ? tabColorStyle + : undefined + } + tabIndex={firstActive === index ? 0 : -1} + role="tab" + aria-selected={firstActive === index} + aria-controls={`vk_tab_bodys_body-${option.blockId}`} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + e.target.click(); + } + }} + > + +
    • + ); + }); + tabList = ( +
      + {tabListInner} +
    + ); + } + + const blockProps = useBlockProps.save({ + className: `vk_tab ${className || ''}`, + id: `vk-tab-id-${blockId}`, + }); + + return ( +
    + {tabList} +
    + +
    +
    + ); +} diff --git a/src/blocks/_pro/tab/deprecated/index.js b/src/blocks/_pro/tab/deprecated/index.js index 215fc61c5..9edd06b47 100644 --- a/src/blocks/_pro/tab/deprecated/index.js +++ b/src/blocks/_pro/tab/deprecated/index.js @@ -1,6 +1,7 @@ import save1_73_0 from './1.73.0/save'; import save1_74_0 from './1.74.0/save'; import save1_75_0 from './1.75.0/save'; +import save1_78_0 from './1.78.0/save'; const blockAttributes = { tabOptionJSON: { @@ -29,7 +30,33 @@ const blockAttributes = { }, }; +/* +const blockAttributes2 = { + ...blockAttributes, + tabDisplayOptionsSp: { + type: 'string', + default: 'notSet' + }, + tabDisplayOptionsTab: { + type: 'string', + default: 'notSet' + }, + tabDisplayOptionsPc: { + type: 'string', + default: 'notSet' + }, + displayManyTabs: { + type: 'boolean', + default: false + } +} +*/ + const deprecated = [ + { + attributes: blockAttributes, + save: save1_78_0, + }, { attributes: blockAttributes, save: save1_75_0, diff --git a/src/blocks/_pro/tab/edit.js b/src/blocks/_pro/tab/edit.js index e28ac6d39..8d6c394a3 100644 --- a/src/blocks/_pro/tab/edit.js +++ b/src/blocks/_pro/tab/edit.js @@ -24,6 +24,9 @@ export default function TabEdit(props) { firstActive, blockId, className, + tabDisplayOptionsSp, + tabDisplayOptionsTab, + tabDisplayOptionsPc, } = attributes; const ALLOWED_BLOCKS = ['vk-blocks/tab-item']; @@ -289,12 +292,44 @@ export default function TabEdit(props) { ]; let tabListClassName = `vk_tab_labels`; + if (tabDisplayOptionsSp === 'wrap2rows') { + tabListClassName += ' vk_tab_labels--wrap-2rows-sp'; + } else if (tabDisplayOptionsSp === 'scroll') { + tabListClassName += ' vk_tab_labels--scroll-sp'; + } + if (tabDisplayOptionsTab === 'wrap2rows') { + tabListClassName += ' vk_tab_labels--wrap-2rows-tab'; + } else if (tabDisplayOptionsTab === 'scroll') { + tabListClassName += ' vk_tab_labels--scroll-tab'; + } + if (tabDisplayOptionsPc === 'wrap2rows') { + tabListClassName += ' vk_tab_labels--wrap-2rows-pc'; + } else if (tabDisplayOptionsPc === 'scroll') { + tabListClassName += ' vk_tab_labels--scroll-pc'; + } tabSizes.forEach((tabSize) => { if (tabSize.attribute !== null && tabSize.attribute !== undefined) { tabListClassName += ` ${tabSizePrefix}--${tabSize.name}-${tabSize.attribute}`; } }); + // Remove scroll or wrap classes if "Not set" is selected + if (tabDisplayOptionsSp === 'notSet') { + tabListClassName = tabListClassName + .replace(' vk_tab_labels--wrap-2rows-sp', '') + .replace(' vk_tab_labels--scroll-sp', ''); + } + if (tabDisplayOptionsTab === 'notSet') { + tabListClassName = tabListClassName + .replace(' vk_tab_labels--wrap-2rows-tab', '') + .replace(' vk_tab_labels--scroll-tab', ''); + } + if (tabDisplayOptionsPc === 'notSet') { + tabListClassName = tabListClassName + .replace(' vk_tab_labels--wrap-2rows-pc', '') + .replace(' vk_tab_labels--scroll-pc', ''); + } + let tablabelsEditList = ''; let tablabelsEdit = ''; @@ -498,7 +533,7 @@ export default function TabEdit(props) { return ( <> - + + +

    + {__( + 'If there are many labels or the screen width is narrow, you can adjust it here. *Tab size setting will not be effective.', + 'vk-blocks-pro' + )} +

    + { + setAttributes({ tabDisplayOptionsSp: value }); + }} + /> + { + setAttributes({ tabDisplayOptionsTab: value }); + }} + /> + { + setAttributes({ tabDisplayOptionsPc: value }); + }} + /> +
    {tablabelsEdit} diff --git a/src/blocks/_pro/tab/save.js b/src/blocks/_pro/tab/save.js index 7019dcaf5..ae64f22b7 100644 --- a/src/blocks/_pro/tab/save.js +++ b/src/blocks/_pro/tab/save.js @@ -11,6 +11,9 @@ export default function save(props) { firstActive, blockId, className = '', + tabDisplayOptionsSp, + tabDisplayOptionsTab, + tabDisplayOptionsPc, } = attributes; const tabSizePrefix = 'vk_tab_labels-tabSize'; @@ -31,6 +34,21 @@ export default function save(props) { ]; let tabListClassName = `vk_tab_labels`; + if (tabDisplayOptionsSp === 'wrap2rows') { + tabListClassName += ' vk_tab_labels--wrap-2rows-sp'; + } else if (tabDisplayOptionsSp === 'scroll') { + tabListClassName += ' vk_tab_labels--scroll-sp'; + } + if (tabDisplayOptionsTab === 'wrap2rows') { + tabListClassName += ' vk_tab_labels--wrap-2rows-tab'; + } else if (tabDisplayOptionsTab === 'scroll') { + tabListClassName += ' vk_tab_labels--scroll-tab'; + } + if (tabDisplayOptionsPc === 'wrap2rows') { + tabListClassName += ' vk_tab_labels--wrap-2rows-pc'; + } else if (tabDisplayOptionsPc === 'scroll') { + tabListClassName += ' vk_tab_labels--scroll-pc'; + } tabSizes.forEach((tabSize) => { if (tabSize.attribute !== null && tabSize.attribute !== undefined) { tabListClassName += ` ${tabSizePrefix}--${tabSize.name}-${tabSize.attribute}`; diff --git a/src/blocks/_pro/tab/style.scss b/src/blocks/_pro/tab/style.scss index 411673731..3d5f0f82f 100644 --- a/src/blocks/_pro/tab/style.scss +++ b/src/blocks/_pro/tab/style.scss @@ -2,7 +2,7 @@ --vk-color-border: rgba(0,0,0,.12); --vk-color-bg-accent-wh: rgba(255,255,255,0.65); --vk-color-bg-inactive: rgba(0, 0, 0, .08); - --default-color:#337ab7; + --default-color: #337ab7; } $xs-max: 575.98px; @@ -66,6 +66,7 @@ $xl-min: 1200px; } } & > div { + height: 100%; padding: calc( 1rem * 0.5 ) calc( 1rem * 1 ); border-top: 2px solid transparent; } @@ -208,3 +209,115 @@ $xl-min: 1200px; } } } + +/* Display Setting for Many Tabs */ +.vk_tab_labels--scroll_notice { + background-color: #ffeb3b; + padding: 5px; + border-radius: 3px; + font-size: 12px; +} +@media (max-width: $xs-max) { + .vk_tab_labels { + &--scroll { + &-sp { + position: relative; + overflow-x: auto; + white-space: nowrap !important; + .vk_tab_labels_label > div { + white-space: nowrap !important; + } + /* Scrollbar styles */ + &::-webkit-scrollbar { + height: 8px; + } + &::-webkit-scrollbar-track { + background: var(--vk-color-bg-inactive); + border-radius: 10px; + } + &::-webkit-scrollbar-thumb { + background: var(--vk-color-border); + border-radius: 10px; + } + } + } + &--wrap-2rows-sp { + display: flex; + flex-wrap: wrap !important; + .vk_tab_labels_label { + flex: 1 1 calc(50% - .75rem); + box-sizing: border-box; + } + } + } +} + +@media (min-width: $sm-min) and (max-width: $md-max) { + .vk_tab_labels { + &--scroll { + &-tab { + position: relative; + overflow-x: auto; + white-space: nowrap !important; + .vk_tab_labels_label > div { + white-space: nowrap !important; + } + /* Scrollbar styles */ + &::-webkit-scrollbar { + height: 8px; + } + &::-webkit-scrollbar-track { + background: var(--vk-color-bg-inactive); + border-radius: 10px; + } + &::-webkit-scrollbar-thumb { + background: var(--vk-color-border); + border-radius: 10px; + } + } + } + &--wrap-2rows-tab { + display: flex; + flex-wrap: wrap !important; + .vk_tab_labels_label { + flex: 1 1 calc(50% - .75rem); + box-sizing: border-box; + } + } + } +} + +@media (min-width: $lg-min) { + .vk_tab_labels { + &--scroll { + &-pc { + position: relative; + overflow-x: auto; + white-space: nowrap !important; + .vk_tab_labels_label > div { + white-space: nowrap !important; + } + /* Scrollbar styles */ + &::-webkit-scrollbar { + height: 8px; + } + &::-webkit-scrollbar-track { + background: var(--vk-color-bg-inactive); + border-radius: 10px; + } + &::-webkit-scrollbar-thumb { + background: var(--vk-color-border); + border-radius: 10px; + } + } + } + &--wrap-2rows-pc { + display: flex; + flex-wrap: wrap !important; + .vk_tab_labels_label { + flex: 1 1 calc(50% - .75rem); + box-sizing: border-box; + } + } + } +} diff --git a/src/blocks/_pro/table-of-contents-new/block.json b/src/blocks/_pro/table-of-contents-new/block.json index 57e5e42e5..43e632577 100644 --- a/src/blocks/_pro/table-of-contents-new/block.json +++ b/src/blocks/_pro/table-of-contents-new/block.json @@ -5,6 +5,9 @@ "description": "This is a table of contents that is automatically generated according to the headings when added.", "textdomain": "vk-blocks-pro", "category": "vk-blocks-cat", + "editorScript": "vk-blocks-build-js", + "editorStyle": "vk-blocks-build-editor-css", + "style": "vk-blocks/table-of-contents-new", "attributes": { "style": { "type": "string", diff --git a/src/blocks/_pro/table-of-contents-new/deprecated/1.78.0/save.js b/src/blocks/_pro/table-of-contents-new/deprecated/1.78.0/save.js new file mode 100644 index 000000000..73d550808 --- /dev/null +++ b/src/blocks/_pro/table-of-contents-new/deprecated/1.78.0/save.js @@ -0,0 +1,29 @@ +import { useBlockProps } from '@wordpress/block-editor'; +import parse from 'html-react-parser'; +import { __ } from '@wordpress/i18n'; + +export default function save(props) { + const { attributes } = props; + const { style, open, renderHtml } = attributes; + const blockProps = useBlockProps.save({ + className: `vk_tableOfContents vk_tableOfContents-style-${style} tabs`, + }); + /* eslint jsx-a11y/label-has-associated-control: 0 */ + return ( +
    +
    +
    + {__('Table of Contents', 'vk-blocks-pro')} +
    + +
    +
    + ); +} diff --git a/src/blocks/_pro/table-of-contents-new/deprecated/index.js b/src/blocks/_pro/table-of-contents-new/deprecated/index.js index f35018184..5b4b4a7fe 100644 --- a/src/blocks/_pro/table-of-contents-new/deprecated/index.js +++ b/src/blocks/_pro/table-of-contents-new/deprecated/index.js @@ -1,5 +1,7 @@ +import save1_78_0 from './1.78.0/save'; import save0591 from './0.59.1/save'; + const blockAttributes = { style: { type: 'string', @@ -22,7 +24,11 @@ const blockAttributes = { const deprecated = [ { attributes: blockAttributes, - save: save0591, + save: save1_78_0, }, + { + attributes: blockAttributes, + save: save0591, + }, ]; export default deprecated; diff --git a/src/blocks/_pro/table-of-contents-new/index.php b/src/blocks/_pro/table-of-contents-new/index.php index b19d2bb79..6adecb3ea 100644 --- a/src/blocks/_pro/table-of-contents-new/index.php +++ b/src/blocks/_pro/table-of-contents-new/index.php @@ -21,13 +21,34 @@ function vk_blocks_register_block_table_of_contents_new() { ); } - register_block_type( - __DIR__, - array( + // Register Script. + if ( ! is_admin() ) { + wp_register_script( + 'vk-blocks/table-of-contents-new-script', + VK_BLOCKS_DIR_URL . 'build/vk-table-of-contents-new.min.js', + array(), + VK_BLOCKS_VERSION, + true + ); + } + + // クラシックテーマ & 6.5 環境で $assets = array() のように空にしないと重複登録になるため + // ここで初期化しておく + $assets = array(); + // Attend to load separate assets. + // 分割読み込みが有効な場合のみ、分割読み込み用のスクリプトを登録する + if ( method_exists( 'VK_Blocks_Block_Loader', 'should_load_separate_assets' ) && VK_Blocks_Block_Loader::should_load_separate_assets() ) { + $assets = array( 'style' => 'vk-blocks/table-of-contents-new', + 'script' => 'vk-blocks/table-of-contents-new-script', 'editor_style' => 'vk-blocks-build-editor-css', 'editor_script' => 'vk-blocks-build-js', - ) + ); + } + + register_block_type( + __DIR__, + $assets ); } add_action( 'init', 'vk_blocks_register_block_table_of_contents_new', 99 ); diff --git a/src/blocks/_pro/table-of-contents-new/save.js b/src/blocks/_pro/table-of-contents-new/save.js index 73d550808..5ebf5cfc6 100644 --- a/src/blocks/_pro/table-of-contents-new/save.js +++ b/src/blocks/_pro/table-of-contents-new/save.js @@ -19,7 +19,11 @@ export default function save(props) {
      {parse(renderHtml)}
    diff --git a/src/blocks/_pro/table-of-contents-new/style.scss b/src/blocks/_pro/table-of-contents-new/style.scss index cedc2e271..5b9246bfd 100644 --- a/src/blocks/_pro/table-of-contents-new/style.scss +++ b/src/blocks/_pro/table-of-contents-new/style.scss @@ -71,34 +71,20 @@ $toc-left-margin: 1rem; font-size: 0.8em; letter-spacing: 2px; line-height: 1; - text-align: center; - display: block; - margin: 0.5em auto 0; - width: 6em; border: 1px solid #999; padding: 3px 1em 2px; } - .button_status-open { - &::before { - content: "CLOSE"; - } - } - .button_status-close { - &::before { - content: "OPEN"; - } - } .button_status { - &::before { - color: #666; - font-size: 0.8em; - border-radius: 2px; - display: inline-block; - text-align: center; - margin: auto; - width: auto; - transition: all 0.35s; - } + color: #666; + font-size: 0.64em; + border-radius: 2px; + display: inline-block; + margin: auto; + width: auto; + transition: all 0.35s; + position: relative; + left: 50%; + transform: translateX(-50%); } /* Accordion styles */ .tab { @@ -124,16 +110,6 @@ $toc-left-margin: 1rem; } // :checked input:checked { - ~ .button_status-open { - &::before { - content: "OPEN"; - } - } - ~ .button_status-close { - &::before { - content: "CLOSE"; - } - } ~ .tab_content-open { max-height: 0; padding: 0 1em; @@ -143,4 +119,33 @@ $toc-left-margin: 1rem; padding: 1em; } } + + .vk_tableOfContents_list { + margin-bottom: 0; // for lightning + } + + // 編集画面、または ver 1.76.2 以前で疑似要素を使用時 + .button_status-open:not(#vk-tab-label) { + &::before { + content: "CLOSE"; + } + } + .button_status-close:not(#vk-tab-label) { + &::before { + content: "OPEN"; + } + } + // :checked + input:checked { + ~ .button_status-open:not(#vk-tab-label) { + &::before { + content: "OPEN"; + } + } + ~ .button_status-close:not(#vk-tab-label) { + &::before { + content: "CLOSE"; + } + } + } } diff --git a/src/blocks/_pro/table-of-contents-new/view.js b/src/blocks/_pro/table-of-contents-new/view.js index f6fc4ec8b..e18d17dd9 100644 --- a/src/blocks/_pro/table-of-contents-new/view.js +++ b/src/blocks/_pro/table-of-contents-new/view.js @@ -4,4 +4,18 @@ document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.vk_tableOfContents_list li').forEach((item) => { item.innerHTML = item.innerHTML.replace(/\uFFFC/g, ''); // U+FFFCはOBJのUnicodeです }); + + // 開/閉 切り替え (:before 疑似要素のアクセシビリティ問題に対応 #2087) + const openButton = document.getElementById('vk-tab-label'); + openButton.addEventListener('click', function () { + // 直前にあるチェックボックスで判断する + const status = openButton.previousElementSibling; + if (status && status.type === 'checkbox') { + if (status.checked) { + openButton.textContent = 'CLOSE'; + } else { + openButton.textContent = 'OPEN'; + } + } + }); }); diff --git a/src/blocks/slider/edit.js b/src/blocks/slider/edit.js index 31e7f63d1..cf415da8f 100644 --- a/src/blocks/slider/edit.js +++ b/src/blocks/slider/edit.js @@ -835,7 +835,7 @@ export default function SliderEdit(props) { onChange={(nextWidth) => setAttributes({ width: nextWidth }) } - controls={['full']} + controls={['wide', 'full']} /> {__('Normal', 'vk-blocks-pro')} +