deprecated
4 months ago
block.json
4 months ago
component.js
4 months ago
edit.js
4 months ago
icon.svg
4 months ago
index.js
4 months ago
index.php
4 months ago
save.js
4 months ago
style.scss
4 months ago
transforms.js
4 months ago
edit.js
713 lines
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | import { VKBButton } from './component'; |
| 3 | import { FontAwesome } from '@vkblocks/utils/font-awesome-new'; |
| 4 | import { |
| 5 | SelectControl, |
| 6 | PanelBody, |
| 7 | BaseControl, |
| 8 | TextControl, |
| 9 | __experimentalToggleGroupControl as ToggleGroupControl, |
| 10 | __experimentalToggleGroupControlOption as ToggleGroupControlOption, |
| 11 | ToolbarGroup, |
| 12 | __experimentalUnitControl as UnitControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis |
| 13 | } from '@wordpress/components'; |
| 14 | import { |
| 15 | RichText, |
| 16 | InspectorControls, |
| 17 | useBlockProps, |
| 18 | BlockControls, |
| 19 | } from '@wordpress/block-editor'; |
| 20 | import { useEffect } from '@wordpress/element'; |
| 21 | import { dispatch, select } from '@wordpress/data'; |
| 22 | import { AdvancedColorPalette } from '@vkblocks/components/advanced-color-palette'; |
| 23 | import { isHexColor } from '@vkblocks/utils/is-hex-color'; |
| 24 | import { isParentReusableBlock } from '@vkblocks/utils/is-parent-reusable-block'; |
| 25 | import LinkToolbar from '@vkblocks/components/link-toolbar'; |
| 26 | import { iconLabel } from '@vkblocks/utils/icon-label'; |
| 27 | import { fixBrokenUnicode } from '@vkblocks/utils/fixBrokenUnicode'; |
| 28 | |
| 29 | export default function ButtonEdit(props) { |
| 30 | const { attributes, setAttributes, clientId, context } = props; |
| 31 | const { |
| 32 | content, |
| 33 | subCaption, |
| 34 | buttonUrl, |
| 35 | buttonTarget, |
| 36 | relAttribute, |
| 37 | linkToPost, |
| 38 | buttonSize, |
| 39 | buttonType, |
| 40 | buttonEffect, |
| 41 | buttonColor, |
| 42 | buttonTextColorCustom, |
| 43 | buttonColorCustom, |
| 44 | buttonAlign, |
| 45 | buttonWidthMobile, |
| 46 | buttonWidthTablet, |
| 47 | buttonWidth, |
| 48 | outerGap, |
| 49 | fontAwesomeIconBefore, |
| 50 | fontAwesomeIconAfter, |
| 51 | iconSizeBefore, |
| 52 | iconSizeAfter, |
| 53 | blockId, |
| 54 | old_1_31_0, |
| 55 | } = attributes; |
| 56 | |
| 57 | const isDescendentOfQueryLoop = |
| 58 | typeof context?.queryId === 'number' && |
| 59 | Number.isFinite(context.queryId); |
| 60 | |
| 61 | // 親ブロックが vk-blocks/button-outer かどうか判定 |
| 62 | const parents = select('core/block-editor').getBlockParentsByBlockName( |
| 63 | clientId, |
| 64 | ['vk-blocks/button-outer'] |
| 65 | ); |
| 66 | const isInnerButton = parents.length ? true : false; |
| 67 | |
| 68 | // 以前の値を切り替え |
| 69 | useEffect(() => { |
| 70 | if (attributes.clientId !== undefined) { |
| 71 | setAttributes({ clientId: undefined }); |
| 72 | } |
| 73 | if ( |
| 74 | blockId === undefined || |
| 75 | isParentReusableBlock(clientId) === false |
| 76 | ) { |
| 77 | setAttributes({ blockId: clientId }); |
| 78 | } |
| 79 | if ( |
| 80 | buttonUrl === null || |
| 81 | buttonUrl === 'null' || |
| 82 | buttonUrl === 'undefined' || |
| 83 | buttonUrl === '' |
| 84 | ) { |
| 85 | setAttributes({ buttonUrl: undefined }); |
| 86 | } |
| 87 | if (buttonColorCustom === undefined) { |
| 88 | setAttributes({ buttonTextColorCustom: undefined }); |
| 89 | } |
| 90 | if ( |
| 91 | buttonColorCustom === null || |
| 92 | buttonColorCustom === 'null' || |
| 93 | buttonColorCustom === 'undefined' || |
| 94 | buttonColorCustom === '' |
| 95 | ) { |
| 96 | setAttributes({ buttonColorCustom: undefined }); |
| 97 | } |
| 98 | if ( |
| 99 | fontAwesomeIconBefore === null || |
| 100 | fontAwesomeIconBefore === 'null' || |
| 101 | fontAwesomeIconBefore === 'undefined' || |
| 102 | fontAwesomeIconBefore === '' |
| 103 | ) { |
| 104 | setAttributes({ fontAwesomeIconBefore: undefined }); |
| 105 | } |
| 106 | if ( |
| 107 | fontAwesomeIconAfter === null || |
| 108 | fontAwesomeIconAfter === 'null' || |
| 109 | fontAwesomeIconAfter === 'undefined' || |
| 110 | fontAwesomeIconAfter === '' |
| 111 | ) { |
| 112 | setAttributes({ fontAwesomeIconAfter: undefined }); |
| 113 | } |
| 114 | if ( |
| 115 | subCaption === null || |
| 116 | subCaption === 'null' || |
| 117 | subCaption === 'undefined' || |
| 118 | subCaption === '' |
| 119 | ) { |
| 120 | setAttributes({ subCaption: undefined }); |
| 121 | } |
| 122 | if (old_1_31_0 === undefined) { |
| 123 | if (buttonWidthMobile === undefined) { |
| 124 | setAttributes({ buttonWidthMobile: buttonWidth }); |
| 125 | } |
| 126 | if (buttonWidthTablet === undefined) { |
| 127 | setAttributes({ buttonWidthTablet: buttonWidth }); |
| 128 | } |
| 129 | setAttributes({ old_1_31_0: true }); |
| 130 | } |
| 131 | if (!isInnerButton) { |
| 132 | setAttributes({ buttonWidth: 0 }); |
| 133 | } |
| 134 | }, [clientId]); |
| 135 | |
| 136 | const { updateBlockAttributes } = dispatch('core/block-editor'); |
| 137 | |
| 138 | // buttonColor が有効なら buttonColorCustom と buttonTextColorCustom を無効化 |
| 139 | // プルダウンから直接カスタムを選ぶとその瞬間色が適用されなくなるので primary に戻す |
| 140 | // buttonColorCustom が有効でないと buttonTextColorCustom は意味を成さないので無効化 |
| 141 | useEffect(() => { |
| 142 | if (buttonColor !== 'custom') { |
| 143 | updateBlockAttributes(clientId, { |
| 144 | buttonTextColorCustom: undefined, |
| 145 | }); |
| 146 | updateBlockAttributes(clientId, { buttonColorCustom: undefined }); |
| 147 | } else if ( |
| 148 | buttonColorCustom === undefined && |
| 149 | buttonColor === 'custom' |
| 150 | ) { |
| 151 | updateBlockAttributes(clientId, { buttonColor: 'primary' }); |
| 152 | updateBlockAttributes(clientId, { |
| 153 | buttonTextColorCustom: undefined, |
| 154 | }); |
| 155 | } |
| 156 | }, [buttonColor]); |
| 157 | |
| 158 | // buttonColorCustom が有効なら buttonColor を custom に |
| 159 | // buttonColorCustom が空白かつ buttonColor が custom なら buttonColor を primary に |
| 160 | useEffect(() => { |
| 161 | if (buttonColorCustom !== undefined) { |
| 162 | updateBlockAttributes(clientId, { buttonColor: 'custom' }); |
| 163 | } else if (buttonColor === 'custom') { |
| 164 | // 背景色クリアされたらデフォルトに戻す |
| 165 | updateBlockAttributes(clientId, { buttonColor: 'primary' }); |
| 166 | } |
| 167 | }, [buttonColorCustom]); |
| 168 | |
| 169 | useEffect(() => { |
| 170 | const fixes = {}; |
| 171 | if (fontAwesomeIconBefore) { |
| 172 | const fixed = fixBrokenUnicode(fontAwesomeIconBefore); |
| 173 | if (fixed !== fontAwesomeIconBefore) { |
| 174 | fixes.fontAwesomeIconBefore = fixed; |
| 175 | } |
| 176 | } |
| 177 | if (fontAwesomeIconAfter) { |
| 178 | const fixed = fixBrokenUnicode(fontAwesomeIconAfter); |
| 179 | if (fixed !== fontAwesomeIconAfter) { |
| 180 | fixes.fontAwesomeIconAfter = fixed; |
| 181 | } |
| 182 | } |
| 183 | if (Object.keys(fixes).length > 0) { |
| 184 | setAttributes(fixes); |
| 185 | } |
| 186 | }, [fontAwesomeIconBefore, fontAwesomeIconAfter]); |
| 187 | |
| 188 | let containerClass; |
| 189 | // カスタムカラーの場合 またはアウターにギャップが指定されれいる場合 |
| 190 | if ( |
| 191 | (buttonColorCustom !== undefined && isHexColor(buttonColorCustom)) || |
| 192 | (buttonTextColorCustom !== undefined && |
| 193 | isHexColor(buttonTextColorCustom)) || |
| 194 | outerGap |
| 195 | ) { |
| 196 | containerClass = `vk_button vk_button-color-custom vk_button-${blockId}`; |
| 197 | } else { |
| 198 | containerClass = `vk_button vk_button-color-custom`; |
| 199 | } |
| 200 | |
| 201 | if (isInnerButton) { |
| 202 | if (buttonWidthMobile) { |
| 203 | // 横並びボタンで� |
| 204 | が指定されている |
| 205 | containerClass += ` vk_button-width-mobile-${buttonWidthMobile}`; |
| 206 | } |
| 207 | if (buttonWidthTablet) { |
| 208 | containerClass += ` vk_button-width-tablet-${buttonWidthTablet}`; |
| 209 | } |
| 210 | if (buttonWidth) { |
| 211 | containerClass += ` vk_button-width-${buttonWidth}`; |
| 212 | } |
| 213 | } else { |
| 214 | containerClass += ` vk_button-align-${buttonAlign}`; |
| 215 | } |
| 216 | |
| 217 | // エフェクト |
| 218 | if (buttonEffect !== '') { |
| 219 | containerClass += ` is-style-${buttonEffect}`; |
| 220 | } |
| 221 | |
| 222 | // アイコン単位 |
| 223 | const units = [ |
| 224 | { value: 'px', label: 'px', default: 16 }, |
| 225 | { value: 'em', label: 'em', default: 1 }, |
| 226 | { value: 'rem', label: 'rem', default: 1 }, |
| 227 | ]; |
| 228 | |
| 229 | const blockProps = useBlockProps({ |
| 230 | className: containerClass, |
| 231 | }); |
| 232 | |
| 233 | let inlineStyle = {}; |
| 234 | if ( |
| 235 | buttonTextColorCustom !== undefined && |
| 236 | isHexColor(buttonTextColorCustom) |
| 237 | ) { |
| 238 | inlineStyle = { |
| 239 | // 編集画面対策 |
| 240 | color: `${buttonTextColorCustom}`, |
| 241 | }; |
| 242 | } |
| 243 | |
| 244 | // buttonTargetをlink-toolbarのlinkTargetに変換 |
| 245 | const linkTarget = buttonTarget ? '_blank' : ''; |
| 246 | |
| 247 | return ( |
| 248 | <> |
| 249 | <BlockControls> |
| 250 | <ToolbarGroup> |
| 251 | <LinkToolbar |
| 252 | linkUrl={buttonUrl || ''} |
| 253 | setLinkUrl={(value) => |
| 254 | setAttributes({ buttonUrl: value }) |
| 255 | } |
| 256 | linkTarget={linkTarget} |
| 257 | setLinkTarget={(value) => |
| 258 | setAttributes({ buttonTarget: value === '_blank' }) |
| 259 | } |
| 260 | relAttribute={relAttribute || ''} |
| 261 | setRelAttribute={(value) => |
| 262 | setAttributes({ relAttribute: value }) |
| 263 | } |
| 264 | isDescendentOfQueryLoop={isDescendentOfQueryLoop} |
| 265 | linkToPost={linkToPost} |
| 266 | setLinkToPost={(checked) => |
| 267 | setAttributes({ linkToPost: !!checked }) |
| 268 | } |
| 269 | /> |
| 270 | </ToolbarGroup> |
| 271 | </BlockControls> |
| 272 | <InspectorControls> |
| 273 | <PanelBody title={__('Button setting', 'vk-blocks')}> |
| 274 | <TextControl |
| 275 | label={__('Sub Caption', 'vk-blocks')} |
| 276 | value={subCaption} |
| 277 | className={`mt-0 mb-3`} |
| 278 | onChange={(value) => |
| 279 | setAttributes({ subCaption: value }) |
| 280 | } |
| 281 | placeholder={'Sub Caption'} |
| 282 | /> |
| 283 | |
| 284 | <h4 className="mt-0 mb-2"> |
| 285 | {__('Button Size:', 'vk-blocks')} |
| 286 | </h4> |
| 287 | <ToggleGroupControl |
| 288 | value={buttonSize} |
| 289 | onChange={(value) => |
| 290 | setAttributes({ buttonSize: value }) |
| 291 | } |
| 292 | isBlock |
| 293 | > |
| 294 | <ToggleGroupControlOption |
| 295 | value="lg" |
| 296 | label={__('Large', 'vk-blocks')} |
| 297 | /> |
| 298 | <ToggleGroupControlOption |
| 299 | value="md" |
| 300 | label={__('Normal', 'vk-blocks')} |
| 301 | /> |
| 302 | <ToggleGroupControlOption |
| 303 | value="sm" |
| 304 | label={__('Small', 'vk-blocks')} |
| 305 | /> |
| 306 | </ToggleGroupControl> |
| 307 | {!isInnerButton && ( |
| 308 | <> |
| 309 | <h4 className="mt-0 mb-2"> |
| 310 | {__('Button Position:', 'vk-blocks')} |
| 311 | </h4> |
| 312 | <ToggleGroupControl |
| 313 | value={buttonAlign} |
| 314 | onChange={(value) => |
| 315 | setAttributes({ buttonAlign: value }) |
| 316 | } |
| 317 | className="vk-button-align-control" |
| 318 | isBlock |
| 319 | > |
| 320 | <ToggleGroupControlOption |
| 321 | value="left" |
| 322 | label={__('Left', 'vk-blocks')} |
| 323 | /> |
| 324 | <ToggleGroupControlOption |
| 325 | value="center" |
| 326 | label={__('Center', 'vk-blocks')} |
| 327 | /> |
| 328 | <ToggleGroupControlOption |
| 329 | value="right" |
| 330 | label={__('Right', 'vk-blocks')} |
| 331 | /> |
| 332 | <ToggleGroupControlOption |
| 333 | value="wide" |
| 334 | label={__('Wide', 'vk-blocks')} |
| 335 | /> |
| 336 | <ToggleGroupControlOption |
| 337 | value="block" |
| 338 | label={__('Block', 'vk-blocks')} |
| 339 | /> |
| 340 | </ToggleGroupControl> |
| 341 | <style> |
| 342 | {` |
| 343 | .vk-button-align-control .components-toggle-group-control-option-base { |
| 344 | padding: 0; |
| 345 | } |
| 346 | `} |
| 347 | </style> |
| 348 | </> |
| 349 | )} |
| 350 | |
| 351 | {isInnerButton && ( |
| 352 | <> |
| 353 | <h4 className="mt-0 mb-2"> |
| 354 | {__('Button Width:', 'vk-blocks')} |
| 355 | </h4> |
| 356 | <p className="mt-0 mb-2"> |
| 357 | {__('Mobile', 'vk-blocks')} |
| 358 | </p> |
| 359 | <ToggleGroupControl |
| 360 | value={String(buttonWidthMobile)} |
| 361 | onChange={(value) => { |
| 362 | setAttributes({ |
| 363 | buttonWidthMobile: Number(value), |
| 364 | }); |
| 365 | }} |
| 366 | isBlock |
| 367 | > |
| 368 | <ToggleGroupControlOption |
| 369 | value="0" |
| 370 | label="Auto" |
| 371 | /> |
| 372 | <ToggleGroupControlOption |
| 373 | value="25" |
| 374 | label="25%" |
| 375 | /> |
| 376 | <ToggleGroupControlOption |
| 377 | value="50" |
| 378 | label="50%" |
| 379 | /> |
| 380 | <ToggleGroupControlOption |
| 381 | value="75" |
| 382 | label="75%" |
| 383 | /> |
| 384 | <ToggleGroupControlOption |
| 385 | value="100" |
| 386 | label="100%" |
| 387 | /> |
| 388 | </ToggleGroupControl> |
| 389 | <p className="mt-0 mb-2"> |
| 390 | {__('Tablet', 'vk-blocks')} |
| 391 | </p> |
| 392 | |
| 393 | <ToggleGroupControl |
| 394 | value={String(buttonWidthTablet)} |
| 395 | onChange={(value) => { |
| 396 | setAttributes({ |
| 397 | buttonWidthTablet: Number(value), |
| 398 | }); |
| 399 | }} |
| 400 | isBlock |
| 401 | > |
| 402 | <ToggleGroupControlOption |
| 403 | value="0" |
| 404 | label="Auto" |
| 405 | /> |
| 406 | <ToggleGroupControlOption |
| 407 | value="25" |
| 408 | label="25%" |
| 409 | /> |
| 410 | <ToggleGroupControlOption |
| 411 | value="50" |
| 412 | label="50%" |
| 413 | /> |
| 414 | <ToggleGroupControlOption |
| 415 | value="75" |
| 416 | label="75%" |
| 417 | /> |
| 418 | <ToggleGroupControlOption |
| 419 | value="100" |
| 420 | label="100%" |
| 421 | /> |
| 422 | </ToggleGroupControl> |
| 423 | |
| 424 | <p className="mt-0 mb-2">{__('PC', 'vk-blocks')}</p> |
| 425 | <ToggleGroupControl |
| 426 | value={String(buttonWidth)} |
| 427 | onChange={(value) => { |
| 428 | setAttributes({ |
| 429 | buttonWidth: Number(value), |
| 430 | }); |
| 431 | }} |
| 432 | isBlock |
| 433 | > |
| 434 | <ToggleGroupControlOption |
| 435 | value="0" |
| 436 | label="Auto" |
| 437 | /> |
| 438 | <ToggleGroupControlOption |
| 439 | value="25" |
| 440 | label="25%" |
| 441 | /> |
| 442 | <ToggleGroupControlOption |
| 443 | value="50" |
| 444 | label="50%" |
| 445 | /> |
| 446 | <ToggleGroupControlOption |
| 447 | value="75" |
| 448 | label="75%" |
| 449 | /> |
| 450 | <ToggleGroupControlOption |
| 451 | value="100" |
| 452 | label="100%" |
| 453 | /> |
| 454 | </ToggleGroupControl> |
| 455 | </> |
| 456 | )} |
| 457 | |
| 458 | <h4 className="mt-0 mb-2"> |
| 459 | {__('Button Style:', 'vk-blocks')} |
| 460 | </h4> |
| 461 | <ToggleGroupControl |
| 462 | value={buttonType} |
| 463 | onChange={(value) => { |
| 464 | setAttributes({ buttonType: value }); |
| 465 | |
| 466 | if (value === '1' || value === '2') { |
| 467 | setAttributes({ |
| 468 | buttonTextColorCustom: undefined, |
| 469 | buttonEffect: '', |
| 470 | }); |
| 471 | } |
| 472 | }} |
| 473 | isBlock |
| 474 | > |
| 475 | <ToggleGroupControlOption |
| 476 | value="0" |
| 477 | label={__('Solid color', 'vk-blocks')} |
| 478 | /> |
| 479 | <ToggleGroupControlOption |
| 480 | value="1" |
| 481 | label={__('No background', 'vk-blocks')} |
| 482 | /> |
| 483 | <ToggleGroupControlOption |
| 484 | value="2" |
| 485 | label={__('Text only', 'vk-blocks')} |
| 486 | /> |
| 487 | </ToggleGroupControl> |
| 488 | <p className={`mb-3`}> |
| 489 | {__( |
| 490 | 'If you select "No background", that you need to select a Custom Color.', |
| 491 | 'vk-blocks' |
| 492 | )} |
| 493 | </p> |
| 494 | |
| 495 | {'0' === buttonType && ( |
| 496 | <> |
| 497 | <h4 className="mt-0 mb-2"> |
| 498 | {__('Button Effect:', 'vk-blocks')} |
| 499 | </h4> |
| 500 | <ToggleGroupControl |
| 501 | value={buttonEffect} |
| 502 | onChange={(value) => |
| 503 | setAttributes({ buttonEffect: value }) |
| 504 | } |
| 505 | isBlock |
| 506 | > |
| 507 | <ToggleGroupControlOption |
| 508 | value="none" |
| 509 | label={__('None', 'vk-blocks')} |
| 510 | /> |
| 511 | <ToggleGroupControlOption |
| 512 | value="shine" |
| 513 | label={__('Shine', 'vk-blocks')} |
| 514 | /> |
| 515 | </ToggleGroupControl> |
| 516 | </> |
| 517 | )} |
| 518 | |
| 519 | <h4 className={`mt-0 mb-2`}>{__('Color', 'vk-blocks')}</h4> |
| 520 | <SelectControl |
| 521 | label={__('Default Color (Bootstrap)', 'vk-blocks')} |
| 522 | value={buttonColor} |
| 523 | options={[ |
| 524 | { |
| 525 | label: __('Primary', 'vk-blocks'), |
| 526 | value: 'primary', |
| 527 | }, |
| 528 | { |
| 529 | label: __('Secondary', 'vk-blocks'), |
| 530 | value: 'secondary', |
| 531 | }, |
| 532 | { |
| 533 | label: __('Success', 'vk-blocks'), |
| 534 | value: 'success', |
| 535 | }, |
| 536 | { |
| 537 | label: __('Info', 'vk-blocks'), |
| 538 | value: 'info', |
| 539 | }, |
| 540 | { |
| 541 | label: __('Warning', 'vk-blocks'), |
| 542 | value: 'warning', |
| 543 | }, |
| 544 | { |
| 545 | label: __('Danger', 'vk-blocks'), |
| 546 | value: 'danger', |
| 547 | }, |
| 548 | { |
| 549 | label: __('Light', 'vk-blocks'), |
| 550 | value: 'light', |
| 551 | }, |
| 552 | { |
| 553 | label: __('Dark', 'vk-blocks'), |
| 554 | value: 'dark', |
| 555 | }, |
| 556 | { |
| 557 | label: __('Custom Color', 'vk-blocks'), |
| 558 | value: 'custom', |
| 559 | }, |
| 560 | ]} |
| 561 | onChange={(value) => |
| 562 | setAttributes({ buttonColor: value }) |
| 563 | } |
| 564 | /> |
| 565 | <BaseControl |
| 566 | label={__('Custom Color', 'vk-blocks')} |
| 567 | id={`vk_block_button_custom_color`} |
| 568 | > |
| 569 | <BaseControl |
| 570 | id={`vk_block_button_custom_background_color`} |
| 571 | label={ |
| 572 | buttonType === '0' || buttonType === null |
| 573 | ? __('Background Color', 'vk-blocks') |
| 574 | : __('Button Color', 'vk-blocks') |
| 575 | } |
| 576 | help={__( |
| 577 | 'This color palette overrides the default color. If you want to use the default color, click the clear button.', |
| 578 | 'vk-blocks' |
| 579 | )} |
| 580 | > |
| 581 | <AdvancedColorPalette |
| 582 | schema={'buttonColorCustom'} |
| 583 | {...props} |
| 584 | /> |
| 585 | </BaseControl> |
| 586 | {(buttonType === '0' || buttonType === null) && |
| 587 | buttonColorCustom !== undefined && ( |
| 588 | <BaseControl |
| 589 | id={`vk_block_button_custom_text_color`} |
| 590 | label={__('Text Color', 'vk-blocks')} |
| 591 | > |
| 592 | <AdvancedColorPalette |
| 593 | schema={'buttonTextColorCustom'} |
| 594 | {...props} |
| 595 | /> |
| 596 | </BaseControl> |
| 597 | )} |
| 598 | </BaseControl> |
| 599 | <BaseControl> |
| 600 | <h4 className={`mt-0 mb-2`}> |
| 601 | {iconLabel(__('Icon', 'vk-blocks'))} |
| 602 | </h4> |
| 603 | <BaseControl |
| 604 | id={`vk_block_button_fa_before_text`} |
| 605 | label={__('Before text', 'vk-blocks')} |
| 606 | > |
| 607 | <FontAwesome |
| 608 | attributeName={'fontAwesomeIconBefore'} |
| 609 | {...props} |
| 610 | /> |
| 611 | <UnitControl |
| 612 | label={__('Size', 'vk-blocks')} |
| 613 | value={iconSizeBefore} |
| 614 | units={units} |
| 615 | onChange={(value) => { |
| 616 | setAttributes({ |
| 617 | iconSizeBefore: parseFloat(value) |
| 618 | ? value |
| 619 | : null, |
| 620 | }); |
| 621 | }} |
| 622 | /> |
| 623 | </BaseControl> |
| 624 | <hr /> |
| 625 | <BaseControl |
| 626 | id={`vk_block_button_fa_after_text`} |
| 627 | label={__('After text', 'vk-blocks')} |
| 628 | > |
| 629 | <FontAwesome |
| 630 | attributeName={'fontAwesomeIconAfter'} |
| 631 | {...props} |
| 632 | /> |
| 633 | <UnitControl |
| 634 | label={__('Size', 'vk-blocks')} |
| 635 | value={iconSizeAfter} |
| 636 | units={units} |
| 637 | onChange={(value) => { |
| 638 | setAttributes({ |
| 639 | iconSizeAfter: parseFloat(value) |
| 640 | ? value |
| 641 | : null, |
| 642 | }); |
| 643 | }} |
| 644 | /> |
| 645 | </BaseControl> |
| 646 | </BaseControl> |
| 647 | <h4 className={`mt-0 mb-2`}> |
| 648 | {__('Button border radius', 'vk-blocks')} |
| 649 | </h4> |
| 650 | <UnitControl |
| 651 | value={attributes.borderRadius} |
| 652 | onChange={(value) => { |
| 653 | setAttributes({ borderRadius: value || null }); |
| 654 | }} |
| 655 | units={[ |
| 656 | { value: 'px', label: 'px', default: 5 }, |
| 657 | { value: '%', label: '%', default: 5 }, |
| 658 | { value: 'em', label: 'em', default: 1 }, |
| 659 | { value: 'rem', label: 'rem', default: 1 }, |
| 660 | ]} |
| 661 | /> |
| 662 | </PanelBody> |
| 663 | </InspectorControls> |
| 664 | <div {...blockProps}> |
| 665 | <VKBButton |
| 666 | lbTextColorCustom={buttonTextColorCustom} |
| 667 | lbColorCustom={buttonColorCustom} |
| 668 | lbColor={buttonColor} |
| 669 | lbType={buttonType} |
| 670 | lbAlign={buttonAlign} |
| 671 | lbSize={buttonSize} |
| 672 | lbFontAwesomeIconBefore={fontAwesomeIconBefore} |
| 673 | lbFontAwesomeIconAfter={fontAwesomeIconAfter} |
| 674 | lbIconSizeBefore={iconSizeBefore} |
| 675 | lbIconSizeAfter={iconSizeAfter} |
| 676 | lbsubCaption={subCaption} |
| 677 | inlineStyle={{ |
| 678 | ...inlineStyle, |
| 679 | borderRadius: attributes.borderRadius, |
| 680 | }} |
| 681 | lbRichtext={ |
| 682 | <RichText |
| 683 | tagName={'span'} |
| 684 | className={'vk_button_link_txt'} |
| 685 | onChange={(value) => |
| 686 | setAttributes({ content: value }) |
| 687 | } |
| 688 | value={content} |
| 689 | placeholder={__('Input text', 'vk-blocks')} |
| 690 | allowedFormats={[ |
| 691 | 'core/bold', |
| 692 | // 'core/code', |
| 693 | // 'core/image', |
| 694 | 'core/italic', |
| 695 | // 'core/link', |
| 696 | 'core/strikethrough', |
| 697 | // 'core/underline', |
| 698 | // 'core/text-color', |
| 699 | 'core/superscript', |
| 700 | 'core/subscript', |
| 701 | // 'vk-blocks/highlighter', |
| 702 | 'vk-blocks/responsive-br', |
| 703 | 'vk-blocks/nowrap', |
| 704 | 'vk-blocks/inline-font-size', |
| 705 | ]} |
| 706 | /> |
| 707 | } |
| 708 | /> |
| 709 | </div> |
| 710 | </> |
| 711 | ); |
| 712 | } |
| 713 |