components
1 year ago
css
2 years ago
attributes.js
3 years ago
block.js
1 year ago
deprecated.js
3 years ago
edit.js
2 years ago
editor.scss
2 years ago
save.js
3 years ago
transforms.js
1 year ago
transforms.js
140 lines
| 1 | import { convertLegacyHtmlAttributes } from '@utils/convertLegacyHtmlAttributes'; |
| 2 | import { convertLocalToStyles } from '@utils/legacyStyleUtils'; |
| 3 | import { createBlock, getBlockType } from '@wordpress/blocks'; |
| 4 | |
| 5 | export const transforms = { |
| 6 | to: [ |
| 7 | { |
| 8 | type: 'block', |
| 9 | blocks: [ 'generateblocks/text' ], |
| 10 | isMatch: ( { |
| 11 | hasButtonContainer, |
| 12 | variantRole, |
| 13 | useGlobalStyle = false, |
| 14 | isGlobalStyle = false, |
| 15 | } ) => { |
| 16 | if ( |
| 17 | hasButtonContainer || |
| 18 | variantRole, |
| 19 | useGlobalStyle || |
| 20 | isGlobalStyle |
| 21 | ) { |
| 22 | return false; |
| 23 | } |
| 24 | |
| 25 | return true; |
| 26 | }, |
| 27 | transform: ( attributes ) => { |
| 28 | const { |
| 29 | url, |
| 30 | target, |
| 31 | relNoFollow, |
| 32 | relSponsored, |
| 33 | globalClasses, |
| 34 | text, |
| 35 | icon, |
| 36 | removeText, |
| 37 | htmlAttributes, |
| 38 | iconLocation, |
| 39 | anchor, |
| 40 | className, |
| 41 | blockLabel, |
| 42 | ariaLabel, |
| 43 | buttonType, |
| 44 | } = attributes; |
| 45 | const attributeData = getBlockType( 'generateblocks/button' )?.attributes; |
| 46 | const styles = convertLocalToStyles( attributeData, attributes, '&:is(:hover, :focus)' ); |
| 47 | const newHtmlAttributes = convertLegacyHtmlAttributes( htmlAttributes ); |
| 48 | const relAttributes = []; |
| 49 | const metaData = {}; |
| 50 | |
| 51 | if ( blockLabel ) { |
| 52 | metaData.name = blockLabel; |
| 53 | } |
| 54 | |
| 55 | if ( url ) { |
| 56 | if ( target ) { |
| 57 | relAttributes.push( 'noopener' ); |
| 58 | relAttributes.push( 'noreferrer' ); |
| 59 | } |
| 60 | |
| 61 | if ( relNoFollow ) { |
| 62 | relAttributes.push( 'nofollow' ); |
| 63 | } |
| 64 | |
| 65 | if ( relSponsored ) { |
| 66 | relAttributes.push( 'sponsored' ); |
| 67 | } |
| 68 | } |
| 69 | |
| 70 | if ( url ) { |
| 71 | newHtmlAttributes.href = url; |
| 72 | } |
| 73 | |
| 74 | if ( target ) { |
| 75 | newHtmlAttributes.target = '_blank'; |
| 76 | } |
| 77 | |
| 78 | if ( relAttributes.length ) { |
| 79 | newHtmlAttributes.rel = relAttributes.join( ' ' ); |
| 80 | } |
| 81 | |
| 82 | if ( anchor ) { |
| 83 | newHtmlAttributes.id = anchor; |
| 84 | } |
| 85 | |
| 86 | if ( ariaLabel ) { |
| 87 | newHtmlAttributes[ 'aria-label' ] = ariaLabel; |
| 88 | } |
| 89 | |
| 90 | const newIconLocation = 'left' === iconLocation |
| 91 | ? 'before' |
| 92 | : 'after'; |
| 93 | |
| 94 | // Legacy button reverts to a `span` if there is no URL set. |
| 95 | // In some cases, this is just a button with no URL (in our patterns). |
| 96 | // In other cases, users have used a Button block to show an icon with no URL. |
| 97 | // In this case, we should convert to a Text block with an icon. |
| 98 | const isButton = !! url || ( ! url && ! icon ); |
| 99 | |
| 100 | const tagName = () => { |
| 101 | if ( isButton ) { |
| 102 | return 'a'; |
| 103 | } |
| 104 | |
| 105 | if ( 'button' === buttonType ) { |
| 106 | return 'button'; |
| 107 | } |
| 108 | |
| 109 | return 'span'; |
| 110 | }; |
| 111 | |
| 112 | const iconColors = icon |
| 113 | ? { |
| 114 | '.gb-shape svg': { |
| 115 | ...styles[ '.gb-shape svg' ], |
| 116 | fill: 'currentColor', |
| 117 | }, |
| 118 | } : {}; |
| 119 | |
| 120 | return createBlock( 'generateblocks/text', { |
| 121 | globalClasses, |
| 122 | content: text, |
| 123 | tagName: tagName(), |
| 124 | htmlAttributes: newHtmlAttributes, |
| 125 | styles: { |
| 126 | ...styles, |
| 127 | textDecoration: 'none', |
| 128 | ...iconColors, |
| 129 | }, |
| 130 | icon, |
| 131 | iconOnly: removeText, |
| 132 | iconLocation: newIconLocation, |
| 133 | className, |
| 134 | metadata: metaData, |
| 135 | } ); |
| 136 | }, |
| 137 | }, |
| 138 | ], |
| 139 | }; |
| 140 |