deprecated
2 weeks ago
block.json
1 month ago
component.js
2 months ago
edit.js
2 months ago
icon.svg
2 months ago
index.js
2 months ago
index.php
2 months ago
save.js
2 months ago
style.scss
2 weeks ago
edit.js
388 lines
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | import { fixBrokenUnicode } from '@vkblocks/utils/fixBrokenUnicode'; |
| 3 | import { VKBIcon } from './component'; |
| 4 | import { FontAwesome } from '@vkblocks/utils/font-awesome-new'; |
| 5 | import { |
| 6 | PanelBody, |
| 7 | BaseControl, |
| 8 | TextControl, |
| 9 | CheckboxControl, |
| 10 | RangeControl, |
| 11 | __experimentalToggleGroupControl as ToggleGroupControl, |
| 12 | __experimentalToggleGroupControlOption as ToggleGroupControlOption, |
| 13 | Button, |
| 14 | SelectControl, |
| 15 | ToolbarGroup, |
| 16 | } from '@wordpress/components'; |
| 17 | import { |
| 18 | InspectorControls, |
| 19 | useBlockProps, |
| 20 | BlockControls, |
| 21 | BlockAlignmentControl, |
| 22 | } from '@wordpress/block-editor'; |
| 23 | import { select } from '@wordpress/data'; |
| 24 | import { useEffect } from '@wordpress/element'; |
| 25 | |
| 26 | import { AdvancedColorPalette } from '@vkblocks/components/advanced-color-palette'; |
| 27 | import LinkToolbar from '@vkblocks/components/link-toolbar'; |
| 28 | import { iconLabel } from '@vkblocks/utils/icon-label'; |
| 29 | |
| 30 | export default function IconEdit(props) { |
| 31 | const { attributes, setAttributes, clientId, context } = props; |
| 32 | let { |
| 33 | faIcon, |
| 34 | iconSize, |
| 35 | iconSizeUnit, |
| 36 | iconMargin, |
| 37 | iconMarginUnit, |
| 38 | iconRadius, |
| 39 | iconAlign, |
| 40 | iconType, |
| 41 | iconColor, |
| 42 | iconFontColor, |
| 43 | iconUrl, |
| 44 | relAttribute, |
| 45 | linkDescription, |
| 46 | iconTarget, |
| 47 | linkToPost, |
| 48 | } = attributes; |
| 49 | |
| 50 | useEffect(() => { |
| 51 | if (attributes.faIcon) { |
| 52 | const fixed = fixBrokenUnicode(attributes.faIcon); |
| 53 | if (fixed !== attributes.faIcon) { |
| 54 | setAttributes({ faIcon: fixed }); |
| 55 | } |
| 56 | } |
| 57 | }, [attributes.faIcon]); |
| 58 | |
| 59 | const isDescendentOfQueryLoop = |
| 60 | typeof context?.queryId === 'number' && |
| 61 | Number.isFinite(context.queryId); |
| 62 | |
| 63 | /** |
| 64 | * 親ブロックが vk-blocks/icon-outer かどうか判定 |
| 65 | */ |
| 66 | const parent = select('core/block-editor').getBlockParentsByBlockName( |
| 67 | clientId, |
| 68 | ['vk-blocks/icon-outer'] |
| 69 | ); |
| 70 | |
| 71 | /** |
| 72 | * 親ブロックが vk-blocks/icon-outer でなければ設定� |
| 73 | 目を追加 |
| 74 | */ |
| 75 | let commonBlockControl = ''; |
| 76 | if (!parent.length) { |
| 77 | commonBlockControl = ( |
| 78 | <BlockControls group="block"> |
| 79 | <BlockAlignmentControl |
| 80 | value={iconAlign} |
| 81 | onChange={(value) => { |
| 82 | setAttributes({ iconAlign: value }); |
| 83 | }} |
| 84 | controls={['left', 'center', 'right']} |
| 85 | /> |
| 86 | </BlockControls> |
| 87 | ); |
| 88 | } |
| 89 | |
| 90 | // 空白チェック |
| 91 | const defaultIconSize = 'px' === iconSizeUnit ? 36 : 1; |
| 92 | const defaultIconMargin = 'px' === iconMarginUnit ? 22 : 1; |
| 93 | |
| 94 | // 親のテキストカラーを継承するか？ |
| 95 | const isColorInherit = iconColor === 'inherit' ? true : false; |
| 96 | |
| 97 | /** |
| 98 | * 親ブロックが vk-blocks/icon-outer でなければ設定� |
| 99 | 目を追加 |
| 100 | */ |
| 101 | let commonInspectorControls = ''; |
| 102 | if (!parent.length) { |
| 103 | commonInspectorControls = ( |
| 104 | <> |
| 105 | <p className={`mt-0 mb-2`}>{__('Size', 'vk-blocks')}</p> |
| 106 | <div className="vk_icon_custombox"> |
| 107 | <TextControl |
| 108 | className={`vk_icon_custombox_number`} |
| 109 | value={iconSize} |
| 110 | step={'px' === iconSizeUnit ? 1 : 0.1} |
| 111 | min={0} |
| 112 | onChange={(value) => { |
| 113 | let newIconSize = value |
| 114 | ? parseFloat(value) |
| 115 | : defaultIconSize; |
| 116 | if ('px' === iconSizeUnit) { |
| 117 | newIconSize = parseInt(newIconSize); |
| 118 | } |
| 119 | setAttributes({ iconSize: newIconSize }); |
| 120 | }} |
| 121 | type={'number'} |
| 122 | /> |
| 123 | <SelectControl |
| 124 | className={`vk_icon_custombox_unit`} |
| 125 | value={iconSizeUnit} |
| 126 | onChange={(value) => { |
| 127 | setAttributes({ iconSizeUnit: value }); |
| 128 | if ('px' === value) { |
| 129 | setAttributes({ iconSize: parseInt(iconSize) }); |
| 130 | } |
| 131 | }} |
| 132 | options={[ |
| 133 | { |
| 134 | value: 'px', |
| 135 | label: __('px', 'vk-blocks'), |
| 136 | }, |
| 137 | { |
| 138 | value: 'em', |
| 139 | label: __('em', 'vk-blocks'), |
| 140 | }, |
| 141 | { |
| 142 | value: 'rem', |
| 143 | label: __('rem', 'vk-blocks'), |
| 144 | }, |
| 145 | { |
| 146 | value: 'vw', |
| 147 | label: __('vw', 'vk-blocks'), |
| 148 | }, |
| 149 | ]} |
| 150 | /> |
| 151 | <Button |
| 152 | className="vk_icon_custombox_reset" |
| 153 | isSmall |
| 154 | isSecondary |
| 155 | onClick={() => { |
| 156 | setAttributes({ iconSize: 36 }); |
| 157 | setAttributes({ iconSizeUnit: 'px' }); |
| 158 | }} |
| 159 | > |
| 160 | {__('Reset')} |
| 161 | </Button> |
| 162 | </div> |
| 163 | <p className={`mt-0 mb-2`}>{__('Margin', 'vk-blocks')}</p> |
| 164 | <div className="vk_icon_custombox"> |
| 165 | <TextControl |
| 166 | className={`vk_icon_custombox_number`} |
| 167 | value={iconMargin} |
| 168 | step={'px' === iconMarginUnit ? 1 : 0.1} |
| 169 | min={0} |
| 170 | onChange={(value) => { |
| 171 | let newIconMargin = value |
| 172 | ? parseFloat(value) |
| 173 | : defaultIconMargin; |
| 174 | if ('px' === iconMarginUnit) { |
| 175 | newIconMargin = parseInt(newIconMargin); |
| 176 | } |
| 177 | setAttributes({ iconMargin: newIconMargin }); |
| 178 | }} |
| 179 | type={'number'} |
| 180 | /> |
| 181 | <SelectControl |
| 182 | className={`vk_icon_custombox_unit`} |
| 183 | value={iconMarginUnit} |
| 184 | onChange={(value) => { |
| 185 | setAttributes({ iconMarginUnit: value }); |
| 186 | if ('px' === value) { |
| 187 | setAttributes({ |
| 188 | iconMargin: parseInt(iconMargin), |
| 189 | }); |
| 190 | } |
| 191 | }} |
| 192 | options={[ |
| 193 | { |
| 194 | value: 'px', |
| 195 | label: __('px', 'vk-blocks'), |
| 196 | }, |
| 197 | { |
| 198 | value: 'em', |
| 199 | label: __('em', 'vk-blocks'), |
| 200 | }, |
| 201 | { |
| 202 | value: 'rem', |
| 203 | label: __('rem', 'vk-blocks'), |
| 204 | }, |
| 205 | { |
| 206 | value: 'vw', |
| 207 | label: __('vw', 'vk-blocks'), |
| 208 | }, |
| 209 | ]} |
| 210 | /> |
| 211 | <Button |
| 212 | className="vk_icon_custombox_reset" |
| 213 | isSmall |
| 214 | isSecondary |
| 215 | onClick={() => { |
| 216 | setAttributes({ iconMargin: 22 }); |
| 217 | setAttributes({ iconMarginUnit: 'px' }); |
| 218 | }} |
| 219 | > |
| 220 | {__('Reset')} |
| 221 | </Button> |
| 222 | </div> |
| 223 | <BaseControl |
| 224 | label={__('Border radius', 'vk-blocks')} |
| 225 | id={`vk_icon-radius`} |
| 226 | > |
| 227 | <RangeControl |
| 228 | value={iconRadius} |
| 229 | onChange={(value) => |
| 230 | setAttributes({ |
| 231 | iconRadius: value !== undefined ? value : 50, |
| 232 | }) |
| 233 | } |
| 234 | min={0} |
| 235 | max={50} |
| 236 | allowReset={true} |
| 237 | /> |
| 238 | </BaseControl> |
| 239 | <p className="mt-0 mb-2">{__('Style', 'vk-blocks')}</p> |
| 240 | <ToggleGroupControl |
| 241 | value={iconType} |
| 242 | onChange={(value) => { |
| 243 | setAttributes({ iconType: value }); |
| 244 | |
| 245 | if (value === '1' || value === '2') { |
| 246 | setAttributes({ iconFontColor: undefined }); |
| 247 | } |
| 248 | }} |
| 249 | isBlock |
| 250 | > |
| 251 | <ToggleGroupControlOption |
| 252 | value="0" |
| 253 | label={__('Solid color', 'vk-blocks')} |
| 254 | /> |
| 255 | <ToggleGroupControlOption |
| 256 | value="1" |
| 257 | label={__('Icon & Frame', 'vk-blocks')} |
| 258 | /> |
| 259 | <ToggleGroupControlOption |
| 260 | value="2" |
| 261 | label={__('Icon only', 'vk-blocks')} |
| 262 | /> |
| 263 | </ToggleGroupControl> |
| 264 | </> |
| 265 | ); |
| 266 | } |
| 267 | |
| 268 | if (faIcon && !faIcon.match(/<i/)) { |
| 269 | faIcon = `<i class="${faIcon}"></i>`; |
| 270 | } |
| 271 | |
| 272 | // コンソールエラー回避のため useEffect を使用（実行タイミングの問題） |
| 273 | useEffect(() => { |
| 274 | // containerClass 互換設定 |
| 275 | if (iconColor === 'undefined') { |
| 276 | setAttributes({ iconColor: undefined }); |
| 277 | } |
| 278 | }, [clientId]); |
| 279 | |
| 280 | const blockProps = useBlockProps({ |
| 281 | className: `vk_icon`, |
| 282 | }); |
| 283 | |
| 284 | return ( |
| 285 | <> |
| 286 | {commonBlockControl} |
| 287 | <BlockControls> |
| 288 | <ToolbarGroup> |
| 289 | <LinkToolbar |
| 290 | linkUrl={iconUrl} |
| 291 | setLinkUrl={(url) => setAttributes({ iconUrl: url })} |
| 292 | linkTarget={iconTarget ? '_blank' : ''} |
| 293 | setLinkTarget={(target) => |
| 294 | setAttributes({ iconTarget: !!target }) |
| 295 | } |
| 296 | relAttribute={relAttribute} |
| 297 | setRelAttribute={(rel) => |
| 298 | setAttributes({ relAttribute: rel }) |
| 299 | } |
| 300 | linkDescription={linkDescription} |
| 301 | setLinkDescription={(description) => |
| 302 | setAttributes({ linkDescription: description }) |
| 303 | } |
| 304 | isDescendentOfQueryLoop={isDescendentOfQueryLoop} |
| 305 | linkToPost={linkToPost} |
| 306 | setLinkToPost={(checked) => |
| 307 | setAttributes({ linkToPost: !!checked }) |
| 308 | } |
| 309 | /> |
| 310 | </ToolbarGroup> |
| 311 | </BlockControls> |
| 312 | <InspectorControls> |
| 313 | <PanelBody title={__('Icon Setting', 'vk-blocks')}> |
| 314 | <BaseControl |
| 315 | label={iconLabel(__('Icon', 'vk-blocks'))} |
| 316 | id={`vk_icon-font`} |
| 317 | > |
| 318 | <FontAwesome attributeName={'faIcon'} {...props} /> |
| 319 | </BaseControl> |
| 320 | {commonInspectorControls} |
| 321 | <TextControl |
| 322 | label={__('Link URL', 'vk-blocks')} |
| 323 | value={iconUrl} |
| 324 | onChange={(value) => setAttributes({ iconUrl: value })} |
| 325 | /> |
| 326 | <CheckboxControl |
| 327 | label={__('Open link new tab', 'vk-blocks')} |
| 328 | checked={iconTarget} |
| 329 | onChange={(checked) => { |
| 330 | setAttributes({ iconTarget: checked }); |
| 331 | }} |
| 332 | /> |
| 333 | </PanelBody> |
| 334 | <PanelBody title={__('Color', 'vk-blocks')}> |
| 335 | <CheckboxControl |
| 336 | label={__('Inherit Parent Color', 'vk-blocks')} |
| 337 | checked={isColorInherit} |
| 338 | onChange={(checked) => { |
| 339 | setAttributes({ |
| 340 | iconColor: checked ? 'inherit' : undefined, |
| 341 | }); |
| 342 | }} |
| 343 | help={__( |
| 344 | 'When checked, the icon color will inherit from the parent element.', |
| 345 | 'vk-blocks' |
| 346 | )} |
| 347 | /> |
| 348 | <BaseControl |
| 349 | id={`vk_block_icon_color`} |
| 350 | label={ |
| 351 | iconType === '0' || iconType === null |
| 352 | ? __('Background Color', 'vk-blocks') |
| 353 | : __('Icon Color', 'vk-blocks') |
| 354 | } |
| 355 | > |
| 356 | <AdvancedColorPalette schema={'iconColor'} {...props} /> |
| 357 | </BaseControl> |
| 358 | {(iconType === '0' || iconType === null) && ( |
| 359 | <BaseControl |
| 360 | id={`vk_block_icon_font_color`} |
| 361 | label={__('Icon Color', 'vk-blocks')} |
| 362 | > |
| 363 | <AdvancedColorPalette |
| 364 | schema={'iconFontColor'} |
| 365 | {...props} |
| 366 | /> |
| 367 | </BaseControl> |
| 368 | )} |
| 369 | </PanelBody> |
| 370 | </InspectorControls> |
| 371 | <div {...blockProps}> |
| 372 | <VKBIcon |
| 373 | lbFontAwesomeIcon={faIcon} |
| 374 | lbSize={iconSize} |
| 375 | lbSizeUnit={iconSizeUnit} |
| 376 | lbMargin={iconMargin} |
| 377 | lbMarginUnit={iconMarginUnit} |
| 378 | lbRadius={iconRadius} |
| 379 | lbAlign={iconAlign} |
| 380 | lbType={iconType} |
| 381 | lbColor={iconColor} |
| 382 | lbFontColor={iconFontColor} |
| 383 | /> |
| 384 | </div> |
| 385 | </> |
| 386 | ); |
| 387 | } |
| 388 |