From 4ca14266d91ea20a6b23105e562b7910249187ac Mon Sep 17 00:00:00 2001 From: mtdkei Date: Tue, 21 Jan 2025 16:58:11 +0900 Subject: [PATCH 01/17] Fix: blockProps --- src/extensions/core/table/style.js | 167 ++++++++++++++++++++++++--- src/extensions/core/table/style.scss | 55 +++++++++ 2 files changed, 203 insertions(+), 19 deletions(-) diff --git a/src/extensions/core/table/style.js b/src/extensions/core/table/style.js index 9afbfb794..4d7d4362a 100644 --- a/src/extensions/core/table/style.js +++ b/src/extensions/core/table/style.js @@ -56,6 +56,14 @@ export const addAttribute = (settings) => { type: 'boolean', default: true, }, + alignVertical: { + type: 'boolean', + default: false, + }, + alignVerticalBreakpoint: { + type: 'string', + default: 'table-align-vertical-mobile', + }, }; } return settings; @@ -74,25 +82,43 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => { scrollIconRight, iconOutputLeft, iconOutputRight, + alignVertical, + alignVerticalBreakpoint, } = attributes; const blockProps = useBlockProps({ - className: scrollable ? 'is-style-vk-table-scrollable' : '', + className: `${scrollable ? 'is-style-vk-table-scrollable' : ''} ${alignVertical ? 'is-style-vk-table-align-vertical' : ''}`.trim(), }); // アイコンスタイルを定義 - let iconStyle = { + const iconStyle = { width: '24px', height: '24px', }; - if (scrollable) { - iconStyle = { - ...iconStyle, - color: '#fff', - background: '#1e1e1e', - }; - } + // scrollable に関連するアイコンスタイル + const scrollableIconStyle = { + color: scrollable ? '#fff' : 'initial', // scrollable が ON のときは白、OFF のときはデフォルト + background: scrollable ? '#1e1e1e' : 'transparent', // scrollable が ON のときは背景色、OFF のときは透明 + }; + + // alignVertical に関連するアイコンスタイル + const alignVerticalIconStyle = { + color: alignVertical ? '#fff' : 'initial', // alignVertical が ON のときは白、OFF のときはデフォルト + background: alignVertical ? '#1e1e1e' : 'transparent', // alignVertical が ON のときは背景色、OFF のときは透明 + }; + + // scrollable 用アイコンスタイルを独立して適用 + const scrollableIconStyleFinal = { + ...iconStyle, + ...scrollableIconStyle, + }; + + // alignVertical 用アイコンスタイルを独立して適用 + const alignVerticalIconStyleFinal = { + ...iconStyle, + ...alignVerticalIconStyle, + }; // スクロール可能トグル変更のハンドル const handleToggleChange = (checked) => { @@ -111,9 +137,26 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => { setAttributes({ scrollBreakpoint: value }); }; + // alignVerticalトグル変更のハンドル + const handleAlignVerticalToggleChange = (checked) => { + setAttributes({ alignVertical: checked }); + + if (!checked) { + // OFF の場合、関連するクラスや属性をリセット + setAttributes({ + alignVerticalBreakpoint: 'table-align-vertical-mobile', + }); + } + }; + + // alignVerticalブレークポイント選択変更のハンドル + const handleAlignVerticalSelectChange = (value) => { + setAttributes({ alignVerticalBreakpoint: value }); + }; + // コンポーネントのマウントまたは更新後に属性を更新 useEffect(() => { - // 初期ロード時にクラスや属性を確認して scrollable を ON にする + // 初期ロード時にクラスや属性を確認して scrollable を ON にする∂ const checkTableScrollAttributes = () => { const tables = document.querySelectorAll('.wp-block-table'); tables.forEach((table) => { @@ -135,11 +178,11 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => { // scrollable の状態が確定したら処理を実行 useEffect(() => { - const updateTableScrollAttributes = () => { - const tables = document.querySelectorAll( - '.wp-block-table.is-style-vk-table-scrollable' - ); + const updateTableAttributes = () => { + // .wp-block-table を持つすべてのテーブル要素を取得 + const tables = document.querySelectorAll('.wp-block-table'); tables.forEach((table) => { + // scrollable 状態に応じてクラスと属性を更新 if (!scrollable) { table.classList.remove('is-style-vk-table-scrollable'); table.removeAttribute('data-scroll-breakpoint'); @@ -147,6 +190,7 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => { const breakpoint = table.getAttribute('data-scroll-breakpoint') || 'table-scrollable-mobile'; + table.classList.add('is-style-vk-table-scrollable'); table.setAttribute( 'data-scroll-breakpoint', breakpoint @@ -167,11 +211,28 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => { 'data-icon-output-right', iconOutputRight ? 'true' : 'false' ); + + // alignVertical 状態に応じたクラスと属性を更新 + if (!alignVertical) { + // alignVertical が OFF の場合 + table.classList.remove( + 'is-style-vk-table-align-vertical' + ); + table.removeAttribute('data-align-vertical-breakpoint'); + } else { + // alignVertical が ON の場合 + table.classList.add('is-style-vk-table-align-vertical'); + table.setAttribute( + 'data-align-vertical-breakpoint', + alignVerticalBreakpoint + ); + } }); }; + // 状態が undefined でない場合のみ実行 if (typeof scrollable !== 'undefined') { - updateTableScrollAttributes(); + updateTableAttributes(); } }, [ scrollable, @@ -181,6 +242,8 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => { scrollIconRight, iconOutputLeft, iconOutputRight, + alignVertical, // alignVertical を依存関係に追加 + alignVerticalBreakpoint, // alignVerticalBreakpoint を依存関係に追加 ]); if (isValidBlockType(name) && props.isSelected) { @@ -227,7 +290,12 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => { 'Table Horizontal Scroll', 'vk-blocks-pro' )} - icon={} + icon={ + + } initialOpen={false} > { )} + + } + initialOpen={false} + > + + {alignVertical && ( + <> + + + )} + ); @@ -297,12 +418,19 @@ const addExtraProps = (saveElementProps, blockType, attributes) => { `${saveElementProps.className || ''} is-style-vk-table-scrollable`.trim(); saveElementProps['data-scroll-breakpoint'] = attributes.scrollBreakpoint; + } + + // alignVerticalがtrueの場合にalignVerticalBreakpointを設定 + if (attributes.alignVertical) { + saveElementProps.className += ` table-align-vertical-${attributes.alignVerticalBreakpoint}`; + saveElementProps['data-align-vertical-breakpoint'] = + attributes.alignVerticalBreakpoint; } else { - // 'scrollable' が false の場合、クラスと属性を削除 + // alignVerticalがfalseの場合、不要なクラスや属性を削除 saveElementProps.className = saveElementProps.className - .replace('is-style-vk-table-scrollable', '') + .replace(/table-align-vertical-\S+/g, '') .trim(); - delete saveElementProps['data-scroll-breakpoint']; + delete saveElementProps['data-align-vertical-breakpoint']; } // 'showScrollMessage' が true の場合のみ 'data-output-scroll-hint' を追加 @@ -331,6 +459,7 @@ const addExtraProps = (saveElementProps, blockType, attributes) => { delete saveElementProps['data-output-scroll-hint']; delete saveElementProps['data-icon-output-left']; delete saveElementProps['data-icon-output-right']; + delete saveElementProps['data-align-vertical-breakpoint']; } return saveElementProps; diff --git a/src/extensions/core/table/style.scss b/src/extensions/core/table/style.scss index 04e6b40b9..94a7ccdc1 100644 --- a/src/extensions/core/table/style.scss +++ b/src/extensions/core/table/style.scss @@ -36,6 +36,39 @@ } } +// 縦積み +@mixin align-vertical-table { + + table { + table-layout: auto; + + :is(th,td) { + width: 100%; + display: block; + border-top: none; + } + :is(td + td) { + border-bottom: none; + } + } + +} + +@mixin align-verticaltable-editor { + + table { + table-layout: auto; + + :is(th,td) { + width: 100%; + display: block; + border-top: none; + } + :is(td + td) { + border-bottom: none; + } + } +} /* フロントエンド /*-------------------------------------------*/ @@ -105,6 +138,25 @@ @include scrollable-table; } } + + &.is-style-vk-table-align-vertical { + + &[data-align-vertical-breakpoint="table-align-vertical-mobile"] { + @media (max-width: 575.98px) { + @include align-vertical-table; + } + } + + &[data-align-vertical-breakpoint="table-align-vertical-tablet"] { + @media (max-width: 991.98px) { + @include align-vertical-table; + } + } + + &[data-align-vertical-breakpoint="table-align-vertical-pc"] { + @include align-vertical-table; + } + } } /* 編集画面 @@ -119,5 +171,8 @@ &.is-style-vk-table-scrollable { @include scrollable-table-editor; } + &.is-style-vk-table-align-vertical { + @include align-verticaltable-editor; + } } } From 99214b0918e850eb33a95f55c7e9326c6cc3be78 Mon Sep 17 00:00:00 2001 From: mtdkei Date: Tue, 21 Jan 2025 16:58:34 +0900 Subject: [PATCH 02/17] Fix: lint --- src/extensions/core/table/style.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/extensions/core/table/style.js b/src/extensions/core/table/style.js index 4d7d4362a..c3bd4d41d 100644 --- a/src/extensions/core/table/style.js +++ b/src/extensions/core/table/style.js @@ -87,7 +87,8 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => { } = attributes; const blockProps = useBlockProps({ - className: `${scrollable ? 'is-style-vk-table-scrollable' : ''} ${alignVertical ? 'is-style-vk-table-align-vertical' : ''}`.trim(), + className: + `${scrollable ? 'is-style-vk-table-scrollable' : ''} ${alignVertical ? 'is-style-vk-table-align-vertical' : ''}`.trim(), }); // アイコンスタイルを定義 From 0252779611e6120009340890d432fbed036b657b Mon Sep 17 00:00:00 2001 From: mtdkei Date: Tue, 21 Jan 2025 17:10:57 +0900 Subject: [PATCH 03/17] Fix: label --- src/extensions/core/table/style.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/extensions/core/table/style.js b/src/extensions/core/table/style.js index c3bd4d41d..d8ab6be0e 100644 --- a/src/extensions/core/table/style.js +++ b/src/extensions/core/table/style.js @@ -243,8 +243,8 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => { scrollIconRight, iconOutputLeft, iconOutputRight, - alignVertical, // alignVertical を依存関係に追加 - alignVerticalBreakpoint, // alignVerticalBreakpoint を依存関係に追加 + alignVertical, + alignVerticalBreakpoint, ]); if (isValidBlockType(name) && props.isSelected) { @@ -348,7 +348,7 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => { )} { initialOpen={false} > @@ -366,7 +366,7 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => { <> Date: Tue, 21 Jan 2025 17:11:13 +0900 Subject: [PATCH 04/17] Fix: lint --- src/extensions/core/table/style.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/extensions/core/table/style.js b/src/extensions/core/table/style.js index d8ab6be0e..839218d0f 100644 --- a/src/extensions/core/table/style.js +++ b/src/extensions/core/table/style.js @@ -348,7 +348,10 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => { )} { initialOpen={false} > From 1359557ec4e5b1a5e19d543e2b5dec51afa8980e Mon Sep 17 00:00:00 2001 From: mtdkei Date: Tue, 21 Jan 2025 17:12:44 +0900 Subject: [PATCH 05/17] Add: changelog --- readme.txt | 2 ++ 1 file changed, 2 insertions(+) diff --git a/readme.txt b/readme.txt index 4fc748216..671b0ece0 100644 --- a/readme.txt +++ b/readme.txt @@ -108,6 +108,8 @@ e.g. == Changelog == +[ Add function ][ Core Table ] Add Vertical alignment setting. + = 1.94.0 = [ Add Block ][ Visual Embed ] Add Visual Embed block. [ Add function ][ Grid Column (Pro) ] Added noreferrer, nofollow, and link description options to the link feature. From 1605a13ecd6fab196757fedf3ce444df4e1b895d Mon Sep 17 00:00:00 2001 From: mtdkei Date: Tue, 21 Jan 2025 17:56:18 +0900 Subject: [PATCH 06/17] Fix: align-vertical-table --- src/extensions/core/table/style.js | 4 +-- src/extensions/core/table/style.scss | 38 ++++++++++------------------ 2 files changed, 16 insertions(+), 26 deletions(-) diff --git a/src/extensions/core/table/style.js b/src/extensions/core/table/style.js index 839218d0f..35a0d9702 100644 --- a/src/extensions/core/table/style.js +++ b/src/extensions/core/table/style.js @@ -429,13 +429,13 @@ const addExtraProps = (saveElementProps, blockType, attributes) => { // alignVerticalがtrueの場合にalignVerticalBreakpointを設定 if (attributes.alignVertical) { - saveElementProps.className += ` table-align-vertical-${attributes.alignVerticalBreakpoint}`; + saveElementProps.className += ` is-style-vk-table-align-vertical`; saveElementProps['data-align-vertical-breakpoint'] = attributes.alignVerticalBreakpoint; } else { // alignVerticalがfalseの場合、不要なクラスや属性を削除 saveElementProps.className = saveElementProps.className - .replace(/table-align-vertical-\S+/g, '') + .replace('is-style-vk-table-align-vertical', '') .trim(); delete saveElementProps['data-align-vertical-breakpoint']; } diff --git a/src/extensions/core/table/style.scss b/src/extensions/core/table/style.scss index 94a7ccdc1..10996ccaa 100644 --- a/src/extensions/core/table/style.scss +++ b/src/extensions/core/table/style.scss @@ -40,34 +40,24 @@ @mixin align-vertical-table { table { - table-layout: auto; - - :is(th,td) { + + :is(th, td) { width: 100%; display: block; - border-top: none; + border-top-color: transparent; + box-sizing: border-box; + + /* 最後のセルには border-bottom: none を適用 */ + &:last-of-type:not(:last-child) { + border-bottom-color: transparent; } - :is(td + td) { - border-bottom: none; } - } - -} - -@mixin align-verticaltable-editor { - - table { - table-layout: auto; - - :is(th,td) { - width: 100%; - display: block; - border-top: none; - } - :is(td + td) { - border-bottom: none; + + /* 最初の行を除外するためのスタイル */ + tr:first-of-type :is(th, td):first-of-type { + border-top-color: var(--vk-color-border-hr); } - } + } } /* フロントエンド @@ -172,7 +162,7 @@ @include scrollable-table-editor; } &.is-style-vk-table-align-vertical { - @include align-verticaltable-editor; + @include align-vertical-table; } } } From 49e2028eb3e94683d30a2607c5efe07e8e47d565 Mon Sep 17 00:00:00 2001 From: mtdkei Date: Wed, 29 Jan 2025 12:30:24 +0900 Subject: [PATCH 07/17] Fix: align to cell for name --- src/extensions/core/table/style.js | 104 ++++++++++++++--------------- 1 file changed, 52 insertions(+), 52 deletions(-) diff --git a/src/extensions/core/table/style.js b/src/extensions/core/table/style.js index 35a0d9702..b8ea83920 100644 --- a/src/extensions/core/table/style.js +++ b/src/extensions/core/table/style.js @@ -56,13 +56,13 @@ export const addAttribute = (settings) => { type: 'boolean', default: true, }, - alignVertical: { + cellVertical: { type: 'boolean', default: false, }, - alignVerticalBreakpoint: { + cellVerticalBreakpoint: { type: 'string', - default: 'table-align-vertical-mobile', + default: 'table-cell-vertical-mobile', }, }; } @@ -82,13 +82,13 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => { scrollIconRight, iconOutputLeft, iconOutputRight, - alignVertical, - alignVerticalBreakpoint, + cellVertical, + cellVerticalBreakpoint, } = attributes; const blockProps = useBlockProps({ className: - `${scrollable ? 'is-style-vk-table-scrollable' : ''} ${alignVertical ? 'is-style-vk-table-align-vertical' : ''}`.trim(), + `${scrollable ? 'is-style-vk-table-scrollable' : ''} ${cellVertical ? 'is-style-vk-table-cell-vertical' : ''}`.trim(), }); // アイコンスタイルを定義 @@ -103,10 +103,10 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => { background: scrollable ? '#1e1e1e' : 'transparent', // scrollable が ON のときは背景色、OFF のときは透明 }; - // alignVertical に関連するアイコンスタイル - const alignVerticalIconStyle = { - color: alignVertical ? '#fff' : 'initial', // alignVertical が ON のときは白、OFF のときはデフォルト - background: alignVertical ? '#1e1e1e' : 'transparent', // alignVertical が ON のときは背景色、OFF のときは透明 + // cellVertical に関連するアイコンスタイル + const cellVerticalIconStyle = { + color: cellVertical ? '#fff' : 'initial', // cellVertical が ON のときは白、OFF のときはデフォルト + background: cellVertical ? '#1e1e1e' : 'transparent', // cellVertical が ON のときは背景色、OFF のときは透明 }; // scrollable 用アイコンスタイルを独立して適用 @@ -115,10 +115,10 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => { ...scrollableIconStyle, }; - // alignVertical 用アイコンスタイルを独立して適用 - const alignVerticalIconStyleFinal = { + // cellVertical 用アイコンスタイルを独立して適用 + const cellVerticalIconStyleFinal = { ...iconStyle, - ...alignVerticalIconStyle, + ...cellVerticalIconStyle, }; // スクロール可能トグル変更のハンドル @@ -138,21 +138,21 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => { setAttributes({ scrollBreakpoint: value }); }; - // alignVerticalトグル変更のハンドル - const handleAlignVerticalToggleChange = (checked) => { - setAttributes({ alignVertical: checked }); + // cellVerticalトグル変更のハンドル + const handleCellVerticalToggleChange = (checked) => { + setAttributes({ cellVertical: checked }); if (!checked) { // OFF の場合、関連するクラスや属性をリセット setAttributes({ - alignVerticalBreakpoint: 'table-align-vertical-mobile', + cellVerticalBreakpoint: 'table-cell-vertical-mobile', }); } }; - // alignVerticalブレークポイント選択変更のハンドル - const handleAlignVerticalSelectChange = (value) => { - setAttributes({ alignVerticalBreakpoint: value }); + // cellVerticalブレークポイント選択変更のハンドル + const handleCellVerticalSelectChange = (value) => { + setAttributes({ cellVerticalBreakpoint: value }); }; // コンポーネントのマウントまたは更新後に属性を更新 @@ -213,19 +213,19 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => { iconOutputRight ? 'true' : 'false' ); - // alignVertical 状態に応じたクラスと属性を更新 - if (!alignVertical) { - // alignVertical が OFF の場合 + // cellVertical 状態に応じたクラスと属性を更新 + if (!cellVertical) { + // cellVertical が OFF の場合 table.classList.remove( - 'is-style-vk-table-align-vertical' + 'is-style-vk-table-cell-vertical' ); - table.removeAttribute('data-align-vertical-breakpoint'); + table.removeAttribute('data-cell-vertical-breakpoint'); } else { - // alignVertical が ON の場合 - table.classList.add('is-style-vk-table-align-vertical'); + // cellVertical が ON の場合 + table.classList.add('is-style-vk-table-cell-vertical'); table.setAttribute( - 'data-align-vertical-breakpoint', - alignVerticalBreakpoint + 'data-cell-vertical-breakpoint', + cellVerticalBreakpoint ); } }); @@ -243,8 +243,8 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => { scrollIconRight, iconOutputLeft, iconOutputRight, - alignVertical, - alignVerticalBreakpoint, + cellVertical, + cellVerticalBreakpoint, ]); if (isValidBlockType(name) && props.isSelected) { @@ -349,58 +349,58 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => { } initialOpen={false} > - {alignVertical && ( + {cellVertical && ( <> @@ -427,17 +427,17 @@ const addExtraProps = (saveElementProps, blockType, attributes) => { attributes.scrollBreakpoint; } - // alignVerticalがtrueの場合にalignVerticalBreakpointを設定 - if (attributes.alignVertical) { - saveElementProps.className += ` is-style-vk-table-align-vertical`; - saveElementProps['data-align-vertical-breakpoint'] = - attributes.alignVerticalBreakpoint; + // cellVerticalがtrueの場合にcellVerticalBreakpointを設定 + if (attributes.cellVertical) { + saveElementProps.className += ` is-style-vk-table-cell-vertical`; + saveElementProps['data-cell-vertical-breakpoint'] = + attributes.cellVerticalBreakpoint; } else { - // alignVerticalがfalseの場合、不要なクラスや属性を削除 + // cellVerticalがfalseの場合、不要なクラスや属性を削除 saveElementProps.className = saveElementProps.className - .replace('is-style-vk-table-align-vertical', '') + .replace('is-style-vk-table-cell-vertical', '') .trim(); - delete saveElementProps['data-align-vertical-breakpoint']; + delete saveElementProps['data-cell-vertical-breakpoint']; } // 'showScrollMessage' が true の場合のみ 'data-output-scroll-hint' を追加 @@ -466,7 +466,7 @@ const addExtraProps = (saveElementProps, blockType, attributes) => { delete saveElementProps['data-output-scroll-hint']; delete saveElementProps['data-icon-output-left']; delete saveElementProps['data-icon-output-right']; - delete saveElementProps['data-align-vertical-breakpoint']; + delete saveElementProps['data-cell-vertical-breakpoint']; } return saveElementProps; From f96f23682e41c62f9b6d05ad79384ec554ed04de Mon Sep 17 00:00:00 2001 From: mtdkei Date: Wed, 29 Jan 2025 12:31:35 +0900 Subject: [PATCH 08/17] Fix: align to cell for name --- src/extensions/core/table/style.scss | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/extensions/core/table/style.scss b/src/extensions/core/table/style.scss index 10996ccaa..2cfad937b 100644 --- a/src/extensions/core/table/style.scss +++ b/src/extensions/core/table/style.scss @@ -37,7 +37,7 @@ } // 縦積み -@mixin align-vertical-table { +@mixin cell-vertical-table { table { @@ -129,22 +129,22 @@ } } - &.is-style-vk-table-align-vertical { + &.is-style-vk-table-cell-vertical { - &[data-align-vertical-breakpoint="table-align-vertical-mobile"] { + &[data-cell-vertical-breakpoint="table-cell-vertical-mobile"] { @media (max-width: 575.98px) { - @include align-vertical-table; + @include cell-vertical-table; } } - &[data-align-vertical-breakpoint="table-align-vertical-tablet"] { + &[data-cell-vertical-breakpoint="table-cell-vertical-tablet"] { @media (max-width: 991.98px) { - @include align-vertical-table; + @include cell-vertical-table; } } - &[data-align-vertical-breakpoint="table-align-vertical-pc"] { - @include align-vertical-table; + &[data-cell-vertical-breakpoint="table-cell-vertical-pc"] { + @include cell-vertical-table; } } } @@ -161,8 +161,8 @@ &.is-style-vk-table-scrollable { @include scrollable-table-editor; } - &.is-style-vk-table-align-vertical { - @include align-vertical-table; + &.is-style-vk-table-cell-vertical { + @include cell-vertical-table; } } } From 554ca3b49d1d3d409e8747e5ca7cd8c7c4511a69 Mon Sep 17 00:00:00 2001 From: mtdkei Date: Wed, 29 Jan 2025 12:31:55 +0900 Subject: [PATCH 09/17] Fix: lint --- src/extensions/core/table/style.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/extensions/core/table/style.js b/src/extensions/core/table/style.js index b8ea83920..f9d107150 100644 --- a/src/extensions/core/table/style.js +++ b/src/extensions/core/table/style.js @@ -348,10 +348,7 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => { )} { initialOpen={false} > From cbce83675645da873a4b39a8cb2be43faa4524e7 Mon Sep 17 00:00:00 2001 From: mtdkei Date: Thu, 30 Jan 2025 10:15:04 +0900 Subject: [PATCH 10/17] Fix: is-style css --- src/extensions/core/table/style.scss | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/src/extensions/core/table/style.scss b/src/extensions/core/table/style.scss index 2cfad937b..db102f9aa 100644 --- a/src/extensions/core/table/style.scss +++ b/src/extensions/core/table/style.scss @@ -49,15 +49,29 @@ /* 最後のセルには border-bottom: none を適用 */ &:last-of-type:not(:last-child) { - border-bottom-color: transparent; + border-bottom: none } } + } + - /* 最初の行を除外するためのスタイル */ - tr:first-of-type :is(th, td):first-of-type { - border-top-color: var(--vk-color-border-hr); + /* 最初の行を除外するためのスタイル */ + &:not(.is-style-stripe) tr:first-of-type :is(th, td):first-of-type { + order: 1px solid; + } + + &.is-style-vk-table { + &-border-top-bottom, + &-border, + &-border-stripes { + // theme.json のあるファイルでテーブルの線の色指定がない場合のみ適用 + table:where(:not(.has-border-color)) { + :where(th, td) { + border: 1px solid var(--vk-color-border-hr); + } + } } - } + } } /* フロントエンド From 87548764d0aa0ab7b490b32ed1646340fed0e389 Mon Sep 17 00:00:00 2001 From: mtdkei Date: Thu, 30 Jan 2025 10:37:51 +0900 Subject: [PATCH 11/17] Fix: css --- src/extensions/core/table/style.scss | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/extensions/core/table/style.scss b/src/extensions/core/table/style.scss index db102f9aa..dd514c0f5 100644 --- a/src/extensions/core/table/style.scss +++ b/src/extensions/core/table/style.scss @@ -53,11 +53,10 @@ } } } - /* 最初の行を除外するためのスタイル */ - &:not(.is-style-stripe) tr:first-of-type :is(th, td):first-of-type { - order: 1px solid; + &:not(.is-style-stripes) tr:first-of-type :is(th, td):first-of-type { + border-top: 1px solid; } &.is-style-vk-table { @@ -65,9 +64,9 @@ &-border, &-border-stripes { // theme.json のあるファイルでテーブルの線の色指定がない場合のみ適用 - table:where(:not(.has-border-color)) { - :where(th, td) { - border: 1px solid var(--vk-color-border-hr); + table:not(.has-border-color) { + tr:first-of-type :is(th, td):first-of-type { + border-top: 1px solid var(--vk-color-border-hr); } } } From ed73ac25a723db5bd4610d20b83c52f6390b5c10 Mon Sep 17 00:00:00 2001 From: mtdkei Date: Thu, 30 Jan 2025 10:44:19 +0900 Subject: [PATCH 12/17] Add editor css --- src/extensions/core/table/style.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/extensions/core/table/style.scss b/src/extensions/core/table/style.scss index dd514c0f5..fc0e378a1 100644 --- a/src/extensions/core/table/style.scss +++ b/src/extensions/core/table/style.scss @@ -176,6 +176,11 @@ } &.is-style-vk-table-cell-vertical { @include cell-vertical-table; + &:not(.is-style-stripes) table:not(.has-border-color) { + tr:first-of-type :is(th, td):first-of-type { + border-top: 1px solid var(--vk-color-border-hr); + } + } } } } From 88db818b9ac76a647c700c202eb5e44aaeb9ea99 Mon Sep 17 00:00:00 2001 From: mtdkei Date: Thu, 30 Jan 2025 11:15:33 +0900 Subject: [PATCH 13/17] Fix: editor css --- src/extensions/core/table/style.scss | 39 ++++++++++++++++++++++++++-- 1 file changed, 37 insertions(+), 2 deletions(-) diff --git a/src/extensions/core/table/style.scss b/src/extensions/core/table/style.scss index fc0e378a1..8d609245d 100644 --- a/src/extensions/core/table/style.scss +++ b/src/extensions/core/table/style.scss @@ -171,16 +171,51 @@ border-color: var(--vk-color-border-hr); } } + + &.is-style-vk-table-scrollable { - @include scrollable-table-editor; + + &[data-scroll-breakpoint="table-scrollable-mobile"] { + @media (max-width: 575.98px) { + @include scrollable-table-editor; + } + } + + &[data-scroll-breakpoint="table-scrollable-tablet"] { + @media (max-width: 991.98px) { + @include scrollable-table-editor; + } + } + + &[data-scroll-breakpoint="table-scrollable-pc"] { + @include scrollable-table-editor; + } } + &.is-style-vk-table-cell-vertical { - @include cell-vertical-table; + + /* 最初の行を除外するためのスタイル */ &:not(.is-style-stripes) table:not(.has-border-color) { tr:first-of-type :is(th, td):first-of-type { border-top: 1px solid var(--vk-color-border-hr); } } + + &[data-cell-vertical-breakpoint="table-cell-vertical-mobile"] { + @media (max-width: 575.98px) { + @include cell-vertical-table; + } + } + + &[data-cell-vertical-breakpoint="table-cell-vertical-tablet"] { + @media (max-width: 991.98px) { + @include cell-vertical-table; + } + } + + &[data-cell-vertical-breakpoint="table-cell-vertical-pc"] { + @include cell-vertical-table; + } } } } From 0e17b732a6515a209a6cd93bfd6c041a3916ffa8 Mon Sep 17 00:00:00 2001 From: mtdkei Date: Thu, 30 Jan 2025 11:16:09 +0900 Subject: [PATCH 14/17] Add blockProps --- src/extensions/core/table/style.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/extensions/core/table/style.js b/src/extensions/core/table/style.js index f9d107150..dd46be7f9 100644 --- a/src/extensions/core/table/style.js +++ b/src/extensions/core/table/style.js @@ -89,7 +89,9 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => { const blockProps = useBlockProps({ className: `${scrollable ? 'is-style-vk-table-scrollable' : ''} ${cellVertical ? 'is-style-vk-table-cell-vertical' : ''}`.trim(), - }); + ...(scrollable && { 'data-scroll-breakpoint': scrollBreakpoint }), + ...(cellVertical && { 'data-cell-vertical-breakpoint': cellVerticalBreakpoint }), + }); // アイコンスタイルを定義 const iconStyle = { From a1dab0010624b51c928db9190661574737b27fda Mon Sep 17 00:00:00 2001 From: kurudrive Date: Thu, 30 Jan 2025 12:08:38 +0900 Subject: [PATCH 15/17] update readme --- readme.txt | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/readme.txt b/readme.txt index 760e93f5b..329a7ef39 100644 --- a/readme.txt +++ b/readme.txt @@ -108,7 +108,8 @@ e.g. == Changelog == -[ Add function ][ Core Table ] Add Vertical alignment setting. +[ Add function ][ Core Table ] Add table cell vertical setting. + = 1.94.2 = [ Bug fix / Specification Change ][ Visual Embed ] Strengthened validation for XSS protection and restricted the range of allowed URLs. From 458ac136a5a91d82b90b2844b4dc7604195d31c0 Mon Sep 17 00:00:00 2001 From: mtdkei Date: Thu, 30 Jan 2025 12:51:11 +0900 Subject: [PATCH 16/17] Remove vk-table--mobile-block class if present --- src/extensions/core/table/style.js | 516 +++-------------------------- 1 file changed, 48 insertions(+), 468 deletions(-) diff --git a/src/extensions/core/table/style.js b/src/extensions/core/table/style.js index dd46be7f9..1466213f1 100644 --- a/src/extensions/core/table/style.js +++ b/src/extensions/core/table/style.js @@ -1,474 +1,54 @@ -import { useEffect } from 'react'; +import { ReactComponent as Icon } from './icon.svg'; import { __ } from '@wordpress/i18n'; -import { addFilter } from '@wordpress/hooks'; -import { - PanelBody, - ToggleControl, - SelectControl, - Icon, -} from '@wordpress/components'; -import { createHigherOrderComponent } from '@wordpress/compose'; -import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; -import ScrollHint from '@vkblocks/components/scroll-hint'; +import { registerFormatType, insert } from '@wordpress/rich-text'; +import { BlockControls } from '@wordpress/block-editor'; +import { ToolbarGroup, ToolbarItem, DropdownMenu } from '@wordpress/components'; -/** - * Internal dependencies - */ -import { ReactComponent as IconSVG } from './icon.svg'; +const breakPoints = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']; -const isValidBlockType = (name) => { - const validBlockTypes = ['core/table']; - return validBlockTypes.includes(name); +// 改行を挿入する +const insertBR = (value, onChange, breakPoint) => { + onChange(insert(value, `[br-${breakPoint}]`, value.start, value.end)); }; -export const addAttribute = (settings) => { - if (isValidBlockType(settings.name)) { - settings.attributes = { - ...settings.attributes, - scrollable: { - type: 'boolean', - }, - scrollBreakpoint: { - type: 'string', - default: 'table-scrollable-mobile', - }, - showScrollMessage: { - type: 'boolean', - default: false, - }, - scrollMessageText: { - type: 'string', - default: __('You can scroll', 'vk-blocks-pro'), - }, - scrollIconLeft: { - type: 'string', - default: 'fa-solid fa-caret-left', - }, - scrollIconRight: { - type: 'string', - default: 'fa-solid fa-caret-right', - }, - iconOutputLeft: { - type: 'boolean', - default: true, - }, - iconOutputRight: { - type: 'boolean', - default: true, - }, - cellVertical: { - type: 'boolean', - default: false, - }, - cellVerticalBreakpoint: { - type: 'string', - default: 'table-cell-vertical-mobile', - }, - }; - } - return settings; -}; -addFilter('blocks.registerBlockType', 'vk-blocks/table-style', addAttribute); - -export const addBlockControl = createHigherOrderComponent((BlockEdit) => { - return (props) => { - const { attributes, setAttributes, name } = props; - const { - scrollable, - scrollBreakpoint, - showScrollMessage, - scrollMessageText, - scrollIconLeft, - scrollIconRight, - iconOutputLeft, - iconOutputRight, - cellVertical, - cellVerticalBreakpoint, - } = attributes; - - const blockProps = useBlockProps({ - className: - `${scrollable ? 'is-style-vk-table-scrollable' : ''} ${cellVertical ? 'is-style-vk-table-cell-vertical' : ''}`.trim(), - ...(scrollable && { 'data-scroll-breakpoint': scrollBreakpoint }), - ...(cellVertical && { 'data-cell-vertical-breakpoint': cellVerticalBreakpoint }), - }); - - // アイコンスタイルを定義 - const iconStyle = { - width: '24px', - height: '24px', - }; - - // scrollable に関連するアイコンスタイル - const scrollableIconStyle = { - color: scrollable ? '#fff' : 'initial', // scrollable が ON のときは白、OFF のときはデフォルト - background: scrollable ? '#1e1e1e' : 'transparent', // scrollable が ON のときは背景色、OFF のときは透明 - }; - - // cellVertical に関連するアイコンスタイル - const cellVerticalIconStyle = { - color: cellVertical ? '#fff' : 'initial', // cellVertical が ON のときは白、OFF のときはデフォルト - background: cellVertical ? '#1e1e1e' : 'transparent', // cellVertical が ON のときは背景色、OFF のときは透明 - }; - - // scrollable 用アイコンスタイルを独立して適用 - const scrollableIconStyleFinal = { - ...iconStyle, - ...scrollableIconStyle, - }; - - // cellVertical 用アイコンスタイルを独立して適用 - const cellVerticalIconStyleFinal = { - ...iconStyle, - ...cellVerticalIconStyle, - }; - - // スクロール可能トグル変更のハンドル - const handleToggleChange = (checked) => { - setAttributes({ scrollable: checked }); - - if (!checked) { - setAttributes({ - showScrollMessage: false, - scrollBreakpoint: 'table-scrollable-mobile', - }); - } - }; - - // ブレークポイント選択変更のハンドル - const handleSelectChange = (value) => { - setAttributes({ scrollBreakpoint: value }); - }; - - // cellVerticalトグル変更のハンドル - const handleCellVerticalToggleChange = (checked) => { - setAttributes({ cellVertical: checked }); - - if (!checked) { - // OFF の場合、関連するクラスや属性をリセット - setAttributes({ - cellVerticalBreakpoint: 'table-cell-vertical-mobile', - }); - } - }; - - // cellVerticalブレークポイント選択変更のハンドル - const handleCellVerticalSelectChange = (value) => { - setAttributes({ cellVerticalBreakpoint: value }); - }; - - // コンポーネントのマウントまたは更新後に属性を更新 - useEffect(() => { - // 初期ロード時にクラスや属性を確認して scrollable を ON にする∂ - const checkTableScrollAttributes = () => { - const tables = document.querySelectorAll('.wp-block-table'); - tables.forEach((table) => { - // もし is-style-vk-table-scrollable クラスや data-scroll-breakpoint 属性がついていたら scrollable を ON に設定 - if ( - table.classList.contains( - 'is-style-vk-table-scrollable' - ) || - table.hasAttribute('data-scroll-breakpoint') - ) { - setAttributes({ scrollable: true }); - } - }); - }; - - // コンポーネントの初回レンダリング時に実行 - checkTableScrollAttributes(); - }, []); // 初期レンダリング時のみ実行 - - // scrollable の状態が確定したら処理を実行 - useEffect(() => { - const updateTableAttributes = () => { - // .wp-block-table を持つすべてのテーブル要素を取得 - const tables = document.querySelectorAll('.wp-block-table'); - tables.forEach((table) => { - // scrollable 状態に応じてクラスと属性を更新 - if (!scrollable) { - table.classList.remove('is-style-vk-table-scrollable'); - table.removeAttribute('data-scroll-breakpoint'); - } else { - const breakpoint = - table.getAttribute('data-scroll-breakpoint') || - 'table-scrollable-mobile'; - table.classList.add('is-style-vk-table-scrollable'); - table.setAttribute( - 'data-scroll-breakpoint', - breakpoint - ); - } - - table.setAttribute( - 'data-output-scroll-hint', - showScrollMessage ? 'true' : 'false' - ); - - table.setAttribute( - 'data-icon-output-left', - iconOutputLeft ? 'true' : 'false' - ); - - table.setAttribute( - 'data-icon-output-right', - iconOutputRight ? 'true' : 'false' - ); - - // cellVertical 状態に応じたクラスと属性を更新 - if (!cellVertical) { - // cellVertical が OFF の場合 - table.classList.remove( - 'is-style-vk-table-cell-vertical' - ); - table.removeAttribute('data-cell-vertical-breakpoint'); - } else { - // cellVertical が ON の場合 - table.classList.add('is-style-vk-table-cell-vertical'); - table.setAttribute( - 'data-cell-vertical-breakpoint', - cellVerticalBreakpoint - ); - } - }); - }; - - // 状態が undefined でない場合のみ実行 - if (typeof scrollable !== 'undefined') { - updateTableAttributes(); - } - }, [ - scrollable, - scrollBreakpoint, - showScrollMessage, - scrollIconLeft, - scrollIconRight, - iconOutputLeft, - iconOutputRight, - cellVertical, - cellVerticalBreakpoint, - ]); - - if (isValidBlockType(name) && props.isSelected) { - const blockEditContent = ; - - return ( - <> -
- {scrollable && showScrollMessage && ( -
- {iconOutputLeft && ( - - )} - {scrollMessageText} - {iconOutputRight && ( - - )} -
- )} - {blockEditContent} -
- - - } - initialOpen={false} - > - { + const { onChange, value } = props; + + return ( + + + + {(toggleProps) => ( + } + toggleProps={toggleProps} + label={__(`Responsive BR`, 'vk-blocks-pro')} + controls={breakPoints.map((breakPoint) => { + return { + title: + __( + `Responsive BR`, + 'vk-blocks-pro' + ) + `( ${breakPoint} )`, + icon: , + onClick: () => { + insertBR( + value, + onChange, + breakPoint + ); + }, + }; + })} /> - {scrollable && ( - <> - - - - )} - - - } - initialOpen={false} - > - - {cellVertical && ( - <> - - - )} - - - - ); - } - - return ; - }; -}, 'addMyCustomBlockControls'); -addFilter('editor.BlockEdit', 'vk-blocks/table-style', addBlockControl); - -// 保存時に追加のプロパティを設定 -const addExtraProps = (saveElementProps, blockType, attributes) => { - if (isValidBlockType(blockType.name)) { - // 'scrollable' が true の場合のみ 'is-style-vk-table-scrollable' クラスと 'data-scroll-breakpoint' を設定 - if (attributes.scrollable) { - saveElementProps.className = - `${saveElementProps.className || ''} is-style-vk-table-scrollable`.trim(); - saveElementProps['data-scroll-breakpoint'] = - attributes.scrollBreakpoint; - } - - // cellVerticalがtrueの場合にcellVerticalBreakpointを設定 - if (attributes.cellVertical) { - saveElementProps.className += ` is-style-vk-table-cell-vertical`; - saveElementProps['data-cell-vertical-breakpoint'] = - attributes.cellVerticalBreakpoint; - } else { - // cellVerticalがfalseの場合、不要なクラスや属性を削除 - saveElementProps.className = saveElementProps.className - .replace('is-style-vk-table-cell-vertical', '') - .trim(); - delete saveElementProps['data-cell-vertical-breakpoint']; - } - - // 'showScrollMessage' が true の場合のみ 'data-output-scroll-hint' を追加 - if (attributes.showScrollMessage) { - saveElementProps['data-output-scroll-hint'] = 'true'; - } else { - delete saveElementProps['data-output-scroll-hint']; - } - - // iconOutputLeft が true の場合のみ属性を追加 - if (attributes.iconOutputLeft && attributes.showScrollMessage) { - saveElementProps['data-icon-output-left'] = 'true'; - } else { - delete saveElementProps['data-icon-output-left']; - } - - // iconOutputRight が true の場合のみ属性を追加 - if (attributes.iconOutputRight && attributes.showScrollMessage) { - saveElementProps['data-icon-output-right'] = 'true'; - } else { - delete saveElementProps['data-icon-output-right']; - } - } else { - // 他のブロックでは不要な属性を削除 - delete saveElementProps['data-scroll-breakpoint']; - delete saveElementProps['data-output-scroll-hint']; - delete saveElementProps['data-icon-output-left']; - delete saveElementProps['data-icon-output-right']; - delete saveElementProps['data-cell-vertical-breakpoint']; - } - - return saveElementProps; -}; -addFilter( - 'blocks.getSaveContent.extraProps', - 'vk-blocks/table-style', - addExtraProps -); + )} + + + + ); + }, +}); From 1905436ad745862335a701cfbac12c7ddae2223d Mon Sep 17 00:00:00 2001 From: mtdkei Date: Thu, 30 Jan 2025 13:33:22 +0900 Subject: [PATCH 17/17] Add removeVkTableMobileBlockFromEditor --- src/extensions/core/table/style.js | 548 ++++++++++++++++++++++++++--- 1 file changed, 501 insertions(+), 47 deletions(-) diff --git a/src/extensions/core/table/style.js b/src/extensions/core/table/style.js index 1466213f1..b76f71cf5 100644 --- a/src/extensions/core/table/style.js +++ b/src/extensions/core/table/style.js @@ -1,54 +1,508 @@ -import { ReactComponent as Icon } from './icon.svg'; +import { useEffect } from 'react'; import { __ } from '@wordpress/i18n'; -import { registerFormatType, insert } from '@wordpress/rich-text'; -import { BlockControls } from '@wordpress/block-editor'; -import { ToolbarGroup, ToolbarItem, DropdownMenu } from '@wordpress/components'; +import { addFilter } from '@wordpress/hooks'; +import { + PanelBody, + ToggleControl, + SelectControl, + Icon, +} from '@wordpress/components'; +import { createHigherOrderComponent } from '@wordpress/compose'; +import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; +import ScrollHint from '@vkblocks/components/scroll-hint'; -const breakPoints = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']; +/** + * Internal dependencies + */ +import { ReactComponent as IconSVG } from './icon.svg'; -// 改行を挿入する -const insertBR = (value, onChange, breakPoint) => { - onChange(insert(value, `[br-${breakPoint}]`, value.start, value.end)); +const isValidBlockType = (name) => { + const validBlockTypes = ['core/table']; + return validBlockTypes.includes(name); }; -registerFormatType(`vk-blocks/responsive-br`, { - title: __(`Responsive Br`, 'vk-blocks-pro'), - tagName: 'br', - className: null, - edit: (props) => { - const { onChange, value } = props; - - return ( - - - - {(toggleProps) => ( - } - toggleProps={toggleProps} - label={__(`Responsive BR`, 'vk-blocks-pro')} - controls={breakPoints.map((breakPoint) => { - return { - title: - __( - `Responsive BR`, - 'vk-blocks-pro' - ) + `( ${breakPoint} )`, - icon: , - onClick: () => { - insertBR( - value, - onChange, - breakPoint - ); - }, - }; - })} - /> +export const addAttribute = (settings) => { + if (isValidBlockType(settings.name)) { + settings.attributes = { + ...settings.attributes, + scrollable: { + type: 'boolean', + }, + scrollBreakpoint: { + type: 'string', + default: 'table-scrollable-mobile', + }, + showScrollMessage: { + type: 'boolean', + default: false, + }, + scrollMessageText: { + type: 'string', + default: __('You can scroll', 'vk-blocks-pro'), + }, + scrollIconLeft: { + type: 'string', + default: 'fa-solid fa-caret-left', + }, + scrollIconRight: { + type: 'string', + default: 'fa-solid fa-caret-right', + }, + iconOutputLeft: { + type: 'boolean', + default: true, + }, + iconOutputRight: { + type: 'boolean', + default: true, + }, + cellVertical: { + type: 'boolean', + default: false, + }, + cellVerticalBreakpoint: { + type: 'string', + default: 'table-cell-vertical-mobile', + }, + }; + } + return settings; +}; +addFilter('blocks.registerBlockType', 'vk-blocks/table-style', addAttribute); + +export const addBlockControl = createHigherOrderComponent((BlockEdit) => { + return (props) => { + const { attributes, setAttributes, name } = props; + const { + scrollable, + scrollBreakpoint, + showScrollMessage, + scrollMessageText, + scrollIconLeft, + scrollIconRight, + iconOutputLeft, + iconOutputRight, + cellVertical, + cellVerticalBreakpoint, + } = attributes; + + const blockProps = useBlockProps({ + className: + `${scrollable ? 'is-style-vk-table-scrollable' : ''} ${cellVertical ? 'is-style-vk-table-cell-vertical' : ''}`.trim(), + ...(scrollable && { 'data-scroll-breakpoint': scrollBreakpoint }), + ...(cellVertical && { + 'data-cell-vertical-breakpoint': cellVerticalBreakpoint, + }), + }); + + // アイコンスタイルを定義 + const iconStyle = { + width: '24px', + height: '24px', + }; + + // scrollable に関連するアイコンスタイル + const scrollableIconStyle = { + color: scrollable ? '#fff' : 'initial', // scrollable が ON のときは白、OFF のときはデフォルト + background: scrollable ? '#1e1e1e' : 'transparent', // scrollable が ON のときは背景色、OFF のときは透明 + }; + + // cellVertical に関連するアイコンスタイル + const cellVerticalIconStyle = { + color: cellVertical ? '#fff' : 'initial', // cellVertical が ON のときは白、OFF のときはデフォルト + background: cellVertical ? '#1e1e1e' : 'transparent', // cellVertical が ON のときは背景色、OFF のときは透明 + }; + + // scrollable 用アイコンスタイルを独立して適用 + const scrollableIconStyleFinal = { + ...iconStyle, + ...scrollableIconStyle, + }; + + // cellVertical 用アイコンスタイルを独立して適用 + const cellVerticalIconStyleFinal = { + ...iconStyle, + ...cellVerticalIconStyle, + }; + + // スクロール可能トグル変更のハンドル + const handleToggleChange = (checked) => { + setAttributes({ scrollable: checked }); + + if (!checked) { + setAttributes({ + showScrollMessage: false, + scrollBreakpoint: 'table-scrollable-mobile', + }); + } + }; + + // ブレークポイント選択変更のハンドル + const handleSelectChange = (value) => { + setAttributes({ scrollBreakpoint: value }); + }; + + // cellVerticalトグル変更のハンドル + const handleCellVerticalToggleChange = (checked) => { + setAttributes({ cellVertical: checked }); + + if (!checked) { + // OFF の場合、関連するクラスや属性をリセット + setAttributes({ + cellVerticalBreakpoint: 'table-cell-vertical-mobile', + }); + } + }; + + // cellVerticalブレークポイント選択変更のハンドル + const handleCellVerticalSelectChange = (value) => { + setAttributes({ cellVerticalBreakpoint: value }); + }; + + // コンポーネントのマウントまたは更新後に属性を更新 + useEffect(() => { + // 初期ロード時にクラスや属性を確認して scrollable を ON にする∂ + const checkTableScrollAttributes = () => { + const tables = document.querySelectorAll('.wp-block-table'); + tables.forEach((table) => { + // もし is-style-vk-table-scrollable クラスや data-scroll-breakpoint 属性がついていたら scrollable を ON に設定 + if ( + table.classList.contains( + 'is-style-vk-table-scrollable' + ) || + table.hasAttribute('data-scroll-breakpoint') + ) { + setAttributes({ scrollable: true }); + } + }); + }; + + // コンポーネントの初回レンダリング時に実行 + checkTableScrollAttributes(); + }, []); // 初期レンダリング時のみ実行 + + // scrollable、cellVertical の状態が確定したら処理を実行 + useEffect(() => { + const updateTableAttributes = () => { + // .wp-block-table を持つすべてのテーブル要素を取得 + const tables = document.querySelectorAll('.wp-block-table'); + tables.forEach((table) => { + // scrollable 状態に応じてクラスと属性を更新 + if (!scrollable) { + table.classList.remove('is-style-vk-table-scrollable'); + table.removeAttribute('data-scroll-breakpoint'); + } else { + const breakpoint = + table.getAttribute('data-scroll-breakpoint') || + 'table-scrollable-mobile'; + table.classList.add('is-style-vk-table-scrollable'); + table.setAttribute( + 'data-scroll-breakpoint', + breakpoint + ); + } + + table.setAttribute( + 'data-output-scroll-hint', + showScrollMessage ? 'true' : 'false' + ); + + table.setAttribute( + 'data-icon-output-left', + iconOutputLeft ? 'true' : 'false' + ); + + table.setAttribute( + 'data-icon-output-right', + iconOutputRight ? 'true' : 'false' + ); + + // cellVertical 状態に応じたクラスと属性を更新 + if (!cellVertical) { + // cellVertical が OFF の場合 + table.classList.remove( + 'is-style-vk-table-cell-vertical' + ); + table.removeAttribute('data-cell-vertical-breakpoint'); + } else { + // cellVertical が ON の場合 + table.classList.add('is-style-vk-table-cell-vertical'); + table.setAttribute( + 'data-cell-vertical-breakpoint', + cellVerticalBreakpoint + ); + } + }); + }; + + // 状態が undefined でない場合のみ実行 + if (typeof scrollable !== 'undefined') { + updateTableAttributes(); + } + }, [ + scrollable, + scrollBreakpoint, + showScrollMessage, + scrollIconLeft, + scrollIconRight, + iconOutputLeft, + iconOutputRight, + cellVertical, + cellVerticalBreakpoint, + ]); + + if (isValidBlockType(name) && props.isSelected) { + const blockEditContent = ; + + return ( + <> +
+ {scrollable && showScrollMessage && ( +
+ {iconOutputLeft && ( + + )} + {scrollMessageText} + {iconOutputRight && ( + + )} +
)} - - - - ); + {blockEditContent} +
+ + + } + initialOpen={false} + > + + {scrollable && ( + <> + + + + )} + + + } + initialOpen={false} + > + + {cellVertical && ( + <> + + + )} + + + + ); + } + + return ; + }; +}, 'addMyCustomBlockControls'); +addFilter('editor.BlockEdit', 'vk-blocks/table-style', addBlockControl); + +// 保存時に追加のプロパティを設定 +const addExtraProps = (saveElementProps, blockType, attributes) => { + if (isValidBlockType(blockType.name)) { + // 'scrollable' が true の場合のみ 'is-style-vk-table-scrollable' クラスと 'data-scroll-breakpoint' を設定 + if (attributes.scrollable) { + saveElementProps.className = + `${saveElementProps.className || ''} is-style-vk-table-scrollable`.trim(); + saveElementProps['data-scroll-breakpoint'] = + attributes.scrollBreakpoint; + } + + // cellVerticalがtrueの場合にcellVerticalBreakpointを設定 + if (attributes.cellVertical) { + saveElementProps.className += ` is-style-vk-table-cell-vertical`; + saveElementProps['data-cell-vertical-breakpoint'] = + attributes.cellVerticalBreakpoint; + } else { + // cellVerticalがfalseの場合、不要なクラスや属性を削除 + saveElementProps.className = saveElementProps.className + .replace('is-style-vk-table-cell-vertical', '') + .trim(); + delete saveElementProps['data-cell-vertical-breakpoint']; + } + + // 'showScrollMessage' が true の場合のみ 'data-output-scroll-hint' を追加 + if (attributes.showScrollMessage) { + saveElementProps['data-output-scroll-hint'] = 'true'; + } else { + delete saveElementProps['data-output-scroll-hint']; + } + + // iconOutputLeft が true の場合のみ属性を追加 + if (attributes.iconOutputLeft && attributes.showScrollMessage) { + saveElementProps['data-icon-output-left'] = 'true'; + } else { + delete saveElementProps['data-icon-output-left']; + } + + // iconOutputRight が true の場合のみ属性を追加 + if (attributes.iconOutputRight && attributes.showScrollMessage) { + saveElementProps['data-icon-output-right'] = 'true'; + } else { + delete saveElementProps['data-icon-output-right']; + } + } else { + // 他のブロックでは不要な属性を削除 + delete saveElementProps['data-scroll-breakpoint']; + delete saveElementProps['data-output-scroll-hint']; + delete saveElementProps['data-icon-output-left']; + delete saveElementProps['data-icon-output-right']; + delete saveElementProps['data-cell-vertical-breakpoint']; + } + + return saveElementProps; +}; +addFilter( + 'blocks.getSaveContent.extraProps', + 'vk-blocks/table-style', + addExtraProps +); + +const removeVkTableMobileBlockFromEditor = createHigherOrderComponent( + (BlockListBlock) => { + return (props) => { + const { attributes, setAttributes } = props; + + // `cellVertical` が `true` の場合のみ `.vk-table--mobile-block` を削除 + if ( + attributes?.cellVertical && + attributes?.className?.includes('vk-table--mobile-block') + ) { + const updatedClassName = attributes.className + .replace(/\bvk-table--mobile-block\b/g, '') + .trim(); + + // `setAttributes` を使用して `className` を更新 + if (updatedClassName !== attributes.className) { + setAttributes({ className: updatedClassName }); + } + } + + return ; + }; }, -}); + 'withRemoveVkTableMobileBlock' +); + +addFilter( + 'editor.BlockListBlock', + 'vk-blocks/remove-vk-table-mobile-block', + removeVkTableMobileBlockFromEditor +);