diff --git a/readme.txt b/readme.txt index 04009501a..cc1c5caf4 100644 --- a/readme.txt +++ b/readme.txt @@ -108,8 +108,12 @@ 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. -[ Bug fix ] [ Icon ] Fixed an unwanted bottom margin appearing. +[ 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). [ Add function ][ Icon ] Added inherit parent element color option as default. diff --git a/src/blocks/_pro/animation/block.json b/src/blocks/_pro/animation/block.json index 9e6cf7279..b9648bf4b 100644 --- a/src/blocks/_pro/animation/block.json +++ b/src/blocks/_pro/animation/block.json @@ -33,6 +33,9 @@ "textdomain": "vk-blocks-pro", "supports": { "html": false, - "className": true + "className": true, + "layout": { + "allowJustification": false + } } } diff --git a/src/blocks/_pro/fixed-display/block.json b/src/blocks/_pro/fixed-display/block.json index a4f14f1c4..e7cd096db 100644 --- a/src/blocks/_pro/fixed-display/block.json +++ b/src/blocks/_pro/fixed-display/block.json @@ -63,6 +63,9 @@ "html": false, "className": true, "anchor": true, + "layout": { + "allowJustification": false + }, "color": { "gradients": true, "link": true, 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/src/blocks/_pro/outer/block.json b/src/blocks/_pro/outer/block.json index 813bab643..23d08e2ba 100644 --- a/src/blocks/_pro/outer/block.json +++ b/src/blocks/_pro/outer/block.json @@ -192,6 +192,9 @@ "html": false, "className": true, "anchor": true, + "layout": { + "allowJustification": false + }, "color": { "text": true, "background": false diff --git a/src/components/code-mirror-css/index.js b/src/components/code-mirror-css/index.js index 6ab87facf..63f1282b7 100644 --- a/src/components/code-mirror-css/index.js +++ b/src/components/code-mirror-css/index.js @@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n'; import { transformStyles } from '@wordpress/block-editor'; import { useState, useRef, useEffect } from '@wordpress/element'; -import { Tooltip, Icon, ResizeObserver } from '@wordpress/components'; +import { Tooltip, Icon } from '@wordpress/components'; import { info } from '@wordpress/icons'; /** @@ -62,7 +62,7 @@ export const CodeMirrorCss = (props) => { // リサイズ検知して高さを動的に調整 useEffect(() => { if (wrapperRef.current) { - const observer = new ResizeObserver(() => { + const observer = new window.ResizeObserver(() => { if (isInitialLoad) { wrapperRef.current.style.setProperty( 'height', @@ -82,7 +82,7 @@ export const CodeMirrorCss = (props) => { if (wrapperRef.current) { const gutters = wrapperRef.current.querySelector('.cm-gutters'); if (gutters) { - const observer = new ResizeObserver(() => { + const observer = new window.ResizeObserver(() => { const guttersHeight = gutters.offsetHeight; if (guttersHeight < 200) { gutters.style.setProperty( diff --git a/src/extensions/core/cover/style.js b/src/extensions/core/cover/style.js index 44c9f2283..2df5a18d5 100644 --- a/src/extensions/core/cover/style.js +++ b/src/extensions/core/cover/style.js @@ -46,69 +46,59 @@ const enhanceCoverBlock = createHigherOrderComponent((BlockEdit) => { }; }, 'enhanceCoverBlock'); -const addLinkAttributesToCoverBlock = (settings, name) => { +const extendCoverBlock = (settings, name) => { if (!isCoverBlock(name)) { return settings; } - settings.attributes = { - ...settings.attributes, - linkUrl: { - type: 'string', - default: '', + return { + ...settings, + attributes: { + ...settings.attributes, + linkUrl: { + type: 'string', + default: '', + }, + linkTarget: { + type: 'string', + default: '_self', + }, }, - linkTarget: { - type: 'string', - default: '_self', - }, - }; + edit: enhanceCoverBlock(settings.edit), + save: (props) => { + const { attributes } = props; + const { linkUrl, linkTarget } = attributes; + const saveElement = settings.save(props); - return settings; -}; + if (!linkUrl) { + return saveElement; + } -const insertLinkIntoCoverBlock = (element, blockType, attributes) => { - if (blockType.name !== 'core/cover') { - return element; - } - - const { linkUrl, linkTarget } = attributes; - - if (!linkUrl) { - return element; - } + const existingClassName = saveElement.props.className || ''; + const classNameWithLink = + `${existingClassName} ${linkUrl ? 'has-link' : ''}`.trim(); + const existingStyle = saveElement.props.style || {}; + const relAttribute = + linkTarget === '_blank' ? 'noopener noreferrer' : 'noopener'; - // `element` から既存のクラスを取得し、リンクがある場合にのみ `has-link` を追加 - const existingClassName = element.props.className || ''; - const classNameWithLink = - `${existingClassName} ${linkUrl ? 'has-link' : ''}`.trim(); - const existingStyle = element.props.style || {}; - - // rel 属性の設定 - const relAttribute = - linkTarget === '_blank' ? 'noopener noreferrer' : 'noopener'; - - return ( -

- {element.props.children} - -
- ); + return ( +
+ {saveElement.props.children} + +
+ ); + }, + }; }; -addFilter('editor.BlockEdit', 'custom/enhance-cover-block', enhanceCoverBlock); addFilter( 'blocks.registerBlockType', - 'custom/add-link-attributes', - addLinkAttributesToCoverBlock -); -addFilter( - 'blocks.getSaveElement', - 'custom/insert-link-into-cover-block', - insertLinkIntoCoverBlock + 'custom/extend-cover-block', + extendCoverBlock ); 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 @@

タ