diff --git a/readme.txt b/readme.txt index 56bb5f440..4673f588a 100644 --- a/readme.txt +++ b/readme.txt @@ -108,9 +108,10 @@ e.g. == Changelog == [ Add function ][ group ] Added noreferrer, nofollow, and link description options to the link feature. - +[ Add function ][ Icon / Slider ] Added noreferrer, nofollow, and link description options to the link feature. +[ Add function ][ Grid Column Card (Pro) ] Added noreferrer and nofollow to the link feature. +[ Editor Design Bug Fix ] [ Grid Column (Pro) ] Fixed an issue where the 'is-vertical' layout of grid column items was not displayed vertically. [ Add function ][ Slider ] Added noreferrer, nofollow, and link description options to the link feature. - [ Add function ][ Animation (Pro) / Fixed Display (Pro) / Outer (Pro) ] Added support for layout.allowJustification: false, allowing full-width/wide alignment in block themes where wrapped blocks previously did not appear as full-width or wide in the editor. [ Bug fix ][ Icon ] Fixed an unwanted bottom margin appearing. [ Specification change ] Fixed the zoom-out toggle not always displaying in the editor toolbar (updated blocks.json API version from 2 to 3). diff --git a/src/blocks/_pro/gridcolcard-item/block.json b/src/blocks/_pro/gridcolcard-item/block.json index 6bb16146c..826f4350d 100644 --- a/src/blocks/_pro/gridcolcard-item/block.json +++ b/src/blocks/_pro/gridcolcard-item/block.json @@ -70,11 +70,16 @@ "type": "string" }, "url": { - "type": "string" + "type": "string", + "default": "" }, "urlOpenType": { "type": "boolean", "default": false + }, + "relAttribute": { + "type": "string", + "default": "" } } } diff --git a/src/blocks/_pro/gridcolcard-item/deprecated/1.95.0/save.js b/src/blocks/_pro/gridcolcard-item/deprecated/1.95.0/save.js new file mode 100644 index 000000000..2a75da6fe --- /dev/null +++ b/src/blocks/_pro/gridcolcard-item/deprecated/1.95.0/save.js @@ -0,0 +1,109 @@ +import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; +import { isHexColor } from '@vkblocks/utils/is-hex-color'; +import { isGradientStyle } from '@vkblocks/utils/is-gradient-style'; + +import classnames from 'classnames'; + +export default function save(props) { + const { attributes } = props; + const { + backgroundColor, + textColor, + headerDisplay, + footerDisplay, + containerSpace, + borderRadius, + border, + borderColor, + borderWidth, + backgroundGradient, + url, + urlOpenType, + } = attributes; + + // カラーパレットに対応 + const containerClasses = classnames('vk_gridcolcard_item', { + [`vk_gridcolcard_item-noHeader`]: headerDisplay === 'delete', + [`vk_gridcolcard_item-noFooter`]: footerDisplay === 'delete', + [`has-background`]: !!backgroundColor, + [`has-border-color`]: !!border, + [`has-${backgroundColor}-background-color`]: + !!backgroundColor && !isHexColor(backgroundColor), + [`has-${backgroundGradient}-gradient-background`]: + !!backgroundGradient && !isGradientStyle(backgroundGradient), + [`has-${borderColor}-border-color`]: + !!border && !!borderColor && !isHexColor(borderColor), + }); + + const innerClasses = classnames('vk_gridcolcard_item_container', { + [`has-text-color`]: !!textColor, + [`has-${textColor}-color`]: !!textColor && !isHexColor(textColor), + }); + + const style = { + backgroundColor: null, + border: null, + }; + if (borderRadius) { + style.borderRadius = `${borderRadius}`; + } + + // 背景色 + if (backgroundColor && isHexColor(backgroundColor)) { + // custom color + style.backgroundColor = `${backgroundColor}`; + } + + // 背景グラデーション + if (backgroundGradient && isGradientStyle(backgroundGradient)) { + // custom color + style.background = `${backgroundGradient}`; + } + + // 線の色と太さ + if (border) { + style.borderWidth = borderWidth; + if (isHexColor(borderColor)) { + // custom color + style.borderColor = `${borderColor}`; + } + } + + // 文字色 + const textColorCustom = + textColor && isHexColor(textColor) ? textColor : null; + + const blockProps = useBlockProps.save({ + className: classnames(containerClasses, { + 'vk_gridcolcard_item-noHeader': headerDisplay === 'delete', + 'vk_gridcolcard_item-noFooter': footerDisplay === 'delete', + [`vk_gridcolcard_item-header-${headerDisplay}`]: + headerDisplay !== 'delete', + [`vk_gridcolcard_item-footer-${footerDisplay}`]: + footerDisplay !== 'delete', + }), + style, + }); + + const TagName = url ? 'a' : 'div'; + + return ( +
+ + + +
+ ); +} diff --git a/src/blocks/_pro/gridcolcard-item/deprecated/index.js b/src/blocks/_pro/gridcolcard-item/deprecated/index.js index c55eff269..b8226d847 100644 --- a/src/blocks/_pro/gridcolcard-item/deprecated/index.js +++ b/src/blocks/_pro/gridcolcard-item/deprecated/index.js @@ -1,6 +1,7 @@ import save1_38_0 from './1.38.0/save'; import save1_71_0 from './1.71.0/save'; import save1_87_0 from './1.87.0/save'; +import save1_95_0 from './1.95.0/save'; const blockAttributes = { editLock: { @@ -63,12 +64,45 @@ const blockAttributes = { const blockAttributes2 = { ...blockAttributes, borderWidth: { - type: 'number', - default: 1, + type: 'string', + default: '1px', + }, +}; + +// 1.87.0 からの変更で追加したもの +const blockAttributes3 = { + ...blockAttributes2, + headerDisplay: { + type: 'string', + default: 'display' + }, + footerDisplay: { + type: 'string', + default: 'display' }, }; +/* 次回対応おねがいします +const blockAttributes4 = { + ...blockAttributes3, + relAttribute: { + "type": "string", + "default": "" + } +}; +*/ + const deprecated = [ + { + attributes: blockAttributes3, + save: save1_95_0, + migrate: (attributes) => { + return { + ...attributes, + relAttribute: '' + }; + }, + }, { attributes: blockAttributes2, save: save1_87_0, diff --git a/src/blocks/_pro/gridcolcard-item/edit.js b/src/blocks/_pro/gridcolcard-item/edit.js index 8cf09aef6..84e8c5d86 100644 --- a/src/blocks/_pro/gridcolcard-item/edit.js +++ b/src/blocks/_pro/gridcolcard-item/edit.js @@ -8,8 +8,6 @@ import { CheckboxControl, TextControl, ToolbarGroup, - ToolbarButton, - Dropdown, } from '@wordpress/components'; import { InspectorControls, @@ -17,16 +15,15 @@ import { useBlockProps, BlockControls, store as blockEditorStore, - URLInput, } from '@wordpress/block-editor'; import { useSelect, useDispatch } from '@wordpress/data'; import { useEffect, useState } from '@wordpress/element'; import CommonItemControl from '../gridcolcard/edit-common.js'; -import { link, linkOff, keyboardReturn } from '@wordpress/icons'; import classnames from 'classnames'; import { isHexColor } from '@vkblocks/utils/is-hex-color'; import { isGradientStyle } from '@vkblocks/utils/is-gradient-style'; import { isParentReusableBlock } from '@vkblocks/utils/is-parent-reusable-block'; +import LinkToolbar from '@vkblocks/components/link-toolbar'; export default function Edit(props) { const { attributes, setAttributes, clientId } = props; @@ -57,6 +54,7 @@ export default function Edit(props) { backgroundGradient, url, urlOpenType, + relAttribute, } = attributes; // editModeは値として保持させずに常にすべてのカラムモードでスタートさせる @@ -224,78 +222,35 @@ export default function Edit(props) { style, }); + const handleRelChange = (type, checked) => { + const rel = relAttribute ? relAttribute.split(' ') : []; + if (checked) { + rel.push(type); + } else { + const index = rel.indexOf(type); + if (index !== -1) { + rel.splice(index, 1); + } + } + + setAttributes({ relAttribute: rel.join(' ') }); + }; + return ( <> - { - const setLink = () => { - if (isOpen && url !== '') { - // linkOff - setAttributes({ url: '' }); - } - onToggle(); - }; - return ( - - ); - }} - renderContent={(params) => { - return ( -
{ - params.onClose(); - }} - > -
-
- { - setAttributes({ - url: value, - }); - }} - /> -
-
- - setAttributes({ - urlOpenType: checked, - }) - } - /> - - ); + setAttributes({ url })} + linkTarget={urlOpenType ? '_blank' : undefined} + setLinkTarget={(target) => { + setAttributes({ urlOpenType: !!target }); }} + relAttribute={relAttribute} + setRelAttribute={(rel) => + setAttributes({ relAttribute: rel }) + } />
@@ -356,6 +311,23 @@ export default function Edit(props) { setAttributes({ urlOpenType: checked }) } /> + + + handleRelChange('noreferrer', checked) + } + /> + + + handleRelChange('nofollow', checked) + } + /> +

{__( 'If you set a link URL, do not place the link element (text or button) in the Grid Column Card Item. It may not be displayed correctly.', diff --git a/src/blocks/_pro/gridcolcard-item/save.js b/src/blocks/_pro/gridcolcard-item/save.js index 2a75da6fe..0a315340c 100644 --- a/src/blocks/_pro/gridcolcard-item/save.js +++ b/src/blocks/_pro/gridcolcard-item/save.js @@ -1,7 +1,6 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; import { isHexColor } from '@vkblocks/utils/is-hex-color'; import { isGradientStyle } from '@vkblocks/utils/is-gradient-style'; - import classnames from 'classnames'; export default function save(props) { @@ -19,6 +18,7 @@ export default function save(props) { backgroundGradient, url, urlOpenType, + relAttribute, } = attributes; // カラーパレットに対応 @@ -98,9 +98,13 @@ export default function save(props) { paddingRight: containerSpace.right, color: textColorCustom, }} - href={url} - target={urlOpenType ? '_blank' : undefined} - rel={urlOpenType ? 'noopener noreferrer' : undefined} + {...(TagName === 'a' + ? { + href: url, + target: urlOpenType ? '_blank' : undefined, + rel: relAttribute || undefined, + } + : {})} > diff --git a/test/e2e-tests/fixtures/blocks/vk-blocks__gridcolcard-1-94-2.html b/test/e2e-tests/fixtures/blocks/vk-blocks__gridcolcard-1-94-2.html new file mode 100644 index 000000000..1b6c2ca3c --- /dev/null +++ b/test/e2e-tests/fixtures/blocks/vk-blocks__gridcolcard-1-94-2.html @@ -0,0 +1,62 @@ + +

+
+
+
VK Blocks Block Library
+
+ + + +
+

タイトル

+ + + +

本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

+
+ + + +
+
+
ボタン
+
+
+
+ + + +
+
+
VK Blocks Block Library
+
+ + + +
+

タイトル

+ + + +

本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

+
+ + +
+
+ \ No newline at end of file diff --git a/test/e2e-tests/fixtures/blocks/vk-blocks__gridcolcard__default.html b/test/e2e-tests/fixtures/blocks/vk-blocks__gridcolcard__default.html index 1b6c2ca3c..735b59903 100644 --- a/test/e2e-tests/fixtures/blocks/vk-blocks__gridcolcard__default.html +++ b/test/e2e-tests/fixtures/blocks/vk-blocks__gridcolcard__default.html @@ -1,5 +1,5 @@ - -
+ +
VK Blocks Block Library
@@ -25,7 +25,7 @@

タイトル

- +
VK Blocks Block Library
@@ -44,17 +44,17 @@

タ