components
1 year ago
css
2 years ago
attributes.js
1 year ago
edit.js
2 years ago
editor.scss
3 years ago
index.js
1 year ago
save.js
4 years ago
transforms.js
1 year ago
transforms.js
323 lines
| 1 | /** |
| 2 | * WordPress dependencies |
| 3 | */ |
| 4 | import { convertLegacyHtmlAttributes } from '@utils/convertLegacyHtmlAttributes'; |
| 5 | import { convertLocalToStyles } from '@utils/legacyStyleUtils'; |
| 6 | import { createBlock, getBlockType } from '@wordpress/blocks'; |
| 7 | |
| 8 | const transforms = { |
| 9 | from: [ |
| 10 | { |
| 11 | type: 'block', |
| 12 | blocks: [ 'core/image' ], |
| 13 | transform: ( { id, url, sizeSlug } ) => { |
| 14 | return createBlock( 'generateblocks/image', { |
| 15 | mediaId: id, |
| 16 | mediaUrl: url, |
| 17 | sizeSlug, |
| 18 | } ); |
| 19 | }, |
| 20 | }, |
| 21 | { |
| 22 | type: 'block', |
| 23 | blocks: [ 'core/post-featured-image' ], |
| 24 | transform: ( { sizeSlug } ) => { |
| 25 | return createBlock( 'generateblocks/image', { |
| 26 | useDynamicData: true, |
| 27 | dynamicContentType: 'featured-image', |
| 28 | sizeSlug, |
| 29 | } ); |
| 30 | }, |
| 31 | }, |
| 32 | ], |
| 33 | to: [ |
| 34 | { |
| 35 | type: 'block', |
| 36 | blocks: [ 'core/image' ], |
| 37 | transform: ( { mediaId, mediaUrl, sizeSlug } ) => { |
| 38 | return createBlock( 'core/image', { |
| 39 | id: mediaId, |
| 40 | url: mediaUrl, |
| 41 | sizeSlug, |
| 42 | } ); |
| 43 | }, |
| 44 | }, |
| 45 | { |
| 46 | type: 'block', |
| 47 | blocks: [ 'generateblocks/media' ], |
| 48 | isMatch: ( attributes, block ) => { |
| 49 | const { useGlobalStyle, isGlobalStyle } = attributes; |
| 50 | |
| 51 | if ( |
| 52 | useGlobalStyle || |
| 53 | isGlobalStyle |
| 54 | ) { |
| 55 | return false; |
| 56 | } |
| 57 | |
| 58 | return block.innerBlocks.length === 0; |
| 59 | }, |
| 60 | transform: ( attributes ) => { |
| 61 | const { |
| 62 | mediaId, |
| 63 | mediaUrl, |
| 64 | alt, |
| 65 | title, |
| 66 | href, |
| 67 | openInNewWindow, |
| 68 | relNoFollow, |
| 69 | relSponsored, |
| 70 | anchor, |
| 71 | htmlAttributes, |
| 72 | globalClasses, |
| 73 | blockLabel, |
| 74 | } = attributes; |
| 75 | const attributeData = getBlockType( 'generateblocks/image' )?.attributes; |
| 76 | const styles = convertLocalToStyles( attributeData, attributes, '&:is(:hover, :focus)' ); |
| 77 | const linkHtmlAttributes = {}; |
| 78 | const relAttributes = []; |
| 79 | const newHtmlAttributes = convertLegacyHtmlAttributes( htmlAttributes ); |
| 80 | newHtmlAttributes.src = mediaUrl; |
| 81 | |
| 82 | if ( anchor ) { |
| 83 | newHtmlAttributes.id = anchor; |
| 84 | } |
| 85 | |
| 86 | if ( alt ) { |
| 87 | newHtmlAttributes.alt = alt; |
| 88 | } |
| 89 | |
| 90 | if ( title ) { |
| 91 | newHtmlAttributes.title = title; |
| 92 | } |
| 93 | |
| 94 | if ( href ) { |
| 95 | linkHtmlAttributes.href = href; |
| 96 | |
| 97 | if ( openInNewWindow ) { |
| 98 | relAttributes.push( 'noopener' ); |
| 99 | relAttributes.push( 'noreferrer' ); |
| 100 | } |
| 101 | |
| 102 | if ( relNoFollow ) { |
| 103 | relAttributes.push( 'nofollow' ); |
| 104 | } |
| 105 | |
| 106 | if ( relSponsored ) { |
| 107 | relAttributes.push( 'sponsored' ); |
| 108 | } |
| 109 | |
| 110 | if ( relAttributes.length > 0 ) { |
| 111 | linkHtmlAttributes.rel = relAttributes.join( ' ' ); |
| 112 | } |
| 113 | } |
| 114 | |
| 115 | const metaData = {}; |
| 116 | |
| 117 | if ( blockLabel ) { |
| 118 | metaData.name = blockLabel; |
| 119 | } |
| 120 | |
| 121 | const customStyles = {}; |
| 122 | |
| 123 | if ( ! styles.width ) { |
| 124 | customStyles.width = 'auto'; |
| 125 | } |
| 126 | |
| 127 | if ( ! styles.height ) { |
| 128 | customStyles.height = 'auto'; |
| 129 | } |
| 130 | |
| 131 | if ( ! styles.maxWidth ) { |
| 132 | customStyles.maxWidth = '100%'; |
| 133 | } |
| 134 | |
| 135 | return createBlock( 'generateblocks/media', { |
| 136 | tagName: 'img', |
| 137 | mediaId, |
| 138 | htmlAttributes: newHtmlAttributes, |
| 139 | linkHtmlAttributes, |
| 140 | styles: { |
| 141 | ...styles, |
| 142 | ...customStyles, |
| 143 | }, |
| 144 | globalClasses, |
| 145 | metadata: metaData, |
| 146 | } ); |
| 147 | }, |
| 148 | }, |
| 149 | { |
| 150 | type: 'block', |
| 151 | blocks: [ 'generateblocks/element' ], |
| 152 | isMatch: ( attributes, block ) => { |
| 153 | const { useGlobalStyle, isGlobalStyle } = attributes; |
| 154 | |
| 155 | if ( |
| 156 | useGlobalStyle || |
| 157 | isGlobalStyle |
| 158 | ) { |
| 159 | return false; |
| 160 | } |
| 161 | |
| 162 | return block.innerBlocks.length > 0; |
| 163 | }, |
| 164 | transform: ( attributes, blocks ) => { |
| 165 | const { |
| 166 | mediaId, |
| 167 | mediaUrl, |
| 168 | alt, |
| 169 | title, |
| 170 | href, |
| 171 | openInNewWindow, |
| 172 | relNoFollow, |
| 173 | relSponsored, |
| 174 | anchor, |
| 175 | htmlAttributes, |
| 176 | globalClasses, |
| 177 | blockLabel, |
| 178 | } = attributes; |
| 179 | const attributeData = getBlockType( 'generateblocks/image' )?.attributes; |
| 180 | const styles = convertLocalToStyles( attributeData, attributes, '&:is(:hover, :focus)' ); |
| 181 | const linkHtmlAttributes = {}; |
| 182 | const relAttributes = []; |
| 183 | const newHtmlAttributes = convertLegacyHtmlAttributes( htmlAttributes ); |
| 184 | newHtmlAttributes.src = mediaUrl; |
| 185 | |
| 186 | if ( anchor ) { |
| 187 | newHtmlAttributes.id = anchor; |
| 188 | } |
| 189 | |
| 190 | if ( alt ) { |
| 191 | newHtmlAttributes.alt = alt; |
| 192 | } |
| 193 | |
| 194 | if ( title ) { |
| 195 | newHtmlAttributes.title = title; |
| 196 | } |
| 197 | |
| 198 | if ( href ) { |
| 199 | linkHtmlAttributes.href = href; |
| 200 | |
| 201 | if ( openInNewWindow ) { |
| 202 | relAttributes.push( 'noopener' ); |
| 203 | relAttributes.push( 'noreferrer' ); |
| 204 | } |
| 205 | |
| 206 | if ( relNoFollow ) { |
| 207 | relAttributes.push( 'nofollow' ); |
| 208 | } |
| 209 | |
| 210 | if ( relSponsored ) { |
| 211 | relAttributes.push( 'sponsored' ); |
| 212 | } |
| 213 | |
| 214 | if ( relAttributes.length > 0 ) { |
| 215 | linkHtmlAttributes.rel = relAttributes.join( ' ' ); |
| 216 | } |
| 217 | } |
| 218 | |
| 219 | const metaData = {}; |
| 220 | |
| 221 | if ( blockLabel ) { |
| 222 | metaData.name = blockLabel; |
| 223 | } |
| 224 | |
| 225 | const customStyles = {}; |
| 226 | |
| 227 | if ( ! styles.width ) { |
| 228 | customStyles.width = 'auto'; |
| 229 | } |
| 230 | |
| 231 | if ( ! styles.height ) { |
| 232 | customStyles.height = 'auto'; |
| 233 | } |
| 234 | |
| 235 | if ( ! styles.maxWidth ) { |
| 236 | customStyles.maxWidth = '100%'; |
| 237 | } |
| 238 | |
| 239 | const imageBlock = createBlock( 'generateblocks/media', { |
| 240 | tagName: 'img', |
| 241 | mediaId, |
| 242 | htmlAttributes: newHtmlAttributes, |
| 243 | linkHtmlAttributes, |
| 244 | styles: { |
| 245 | ...styles, |
| 246 | ...customStyles, |
| 247 | }, |
| 248 | globalClasses, |
| 249 | metadata: metaData, |
| 250 | } ); |
| 251 | |
| 252 | // Clone the Blocks to be Grouped |
| 253 | // Failing to create new block references causes the original blocks |
| 254 | // to be replaced in the switchToBlockType call thereby meaning they |
| 255 | // are removed both from their original location and within the |
| 256 | // new group block. |
| 257 | const groupInnerBlocks = blocks.map( ( block ) => { |
| 258 | if ( 'generateblocks/headline' === block.name ) { |
| 259 | const { |
| 260 | element, |
| 261 | globalClasses: headlineGlobalClasses, |
| 262 | content, |
| 263 | icon, |
| 264 | removeText, |
| 265 | htmlAttributes: headlineHtmlAttributes, |
| 266 | anchor: headlineAnchor, |
| 267 | className: headlineClassName, |
| 268 | blockLabel: headlineBlockLabel, |
| 269 | ariaLabel, |
| 270 | } = block.attributes; |
| 271 | const headlineAttributeData = getBlockType( 'generateblocks/headline' )?.attributes; |
| 272 | const headlineStyles = convertLocalToStyles( headlineAttributeData, block.attributes, '&:is(:hover, :focus)' ); |
| 273 | const newHeadlineHtmlAttributes = convertLegacyHtmlAttributes( headlineHtmlAttributes ); |
| 274 | |
| 275 | if ( headlineAnchor ) { |
| 276 | newHeadlineHtmlAttributes.id = anchor; |
| 277 | } |
| 278 | |
| 279 | if ( ariaLabel ) { |
| 280 | newHeadlineHtmlAttributes[ 'aria-label' ] = ariaLabel; |
| 281 | } |
| 282 | |
| 283 | const headlineMetaData = {}; |
| 284 | |
| 285 | if ( headlineBlockLabel ) { |
| 286 | headlineMetaData.name = headlineBlockLabel; |
| 287 | } |
| 288 | |
| 289 | return createBlock( |
| 290 | 'generateblocks/text', |
| 291 | { |
| 292 | globalClasses: headlineGlobalClasses, |
| 293 | content, |
| 294 | tagName: element, |
| 295 | htmlAttributes: newHeadlineHtmlAttributes, |
| 296 | styles: headlineStyles, |
| 297 | icon, |
| 298 | iconOnly: removeText, |
| 299 | className: headlineClassName, |
| 300 | metadata: headlineMetaData, |
| 301 | } |
| 302 | ); |
| 303 | } |
| 304 | |
| 305 | return null; |
| 306 | } ); |
| 307 | |
| 308 | const innerBlocks = [ imageBlock ].concat( groupInnerBlocks ); |
| 309 | |
| 310 | return createBlock( |
| 311 | 'generateblocks/element', |
| 312 | { |
| 313 | tagName: 'figure', |
| 314 | }, |
| 315 | innerBlocks |
| 316 | ); |
| 317 | }, |
| 318 | }, |
| 319 | ], |
| 320 | }; |
| 321 | |
| 322 | export default transforms; |
| 323 |