| @@ -1,5 +1,5 @@ | ||
| 1 | -wp.domReady(function () { | |
| 1 | +( function () { | |
| 2 | 2 | var el = wp.element.createElement; |
| 3 | 3 | var useEffect = wp.element.useEffect; |
| 4 | 4 | var __ = wp.i18n.__; |
| 5 | 5 | var registerBlockType = wp.blocks.registerBlockType; |
| @@ -13,8 +13,16 @@ | ||
| 13 | 13 | var RangeControl = wp.components.RangeControl; |
| 14 | 14 | var BaseControl = wp.components.BaseControl; |
| 15 | 15 | var Button = wp.components.Button; |
| 16 | 16 | |
| 17 | + function getTypographyControl() { | |
| 18 | + return (window.bkbgTypographyControl || function () { return null; }); | |
| 19 | + } | |
| 20 | + var _tv = (function () { | |
| 21 | + var fn = window.bkbgTypoCssVars; | |
| 22 | + return fn ? fn : function () { return {}; }; | |
| 23 | + })(); | |
| 24 | + | |
| 17 | 25 | // Custom Appender that opens sidebar inserter instead of popover |
| 18 | 26 | function SidebarInserterAppender(props) { |
| 19 | 27 | var rootClientId = props.rootClientId; |
| 20 | 28 | |
| @@ -154,9 +162,9 @@ | ||
| 154 | 162 | |
| 155 | 163 | registerBlockType('blockenberg/column', { |
| 156 | 164 | title: __('Column', 'blockenberg'), |
| 157 | 165 | icon: columnIcon, |
| 158 | - category: 'blockenberg', | |
| 166 | + category: 'bkbg-layout', | |
| 159 | 167 | parent: ['blockenberg/row'], |
| 160 | 168 | description: __('A column container within a row for content.', 'blockenberg'), |
| 161 | 169 | |
| 162 | 170 | edit: function (props) { |
| @@ -276,8 +284,17 @@ | ||
| 276 | 284 | newWidths[mode] = value; |
| 277 | 285 | setAttributes({ widths: newWidths }); |
| 278 | 286 | } |
| 279 | 287 | |
| 288 | + var colStyle = Object.assign({}, { | |
| 289 | + '--bkbg-col-desktop': (a.widths && a.widths.desktop || 50) + '%', | |
| 290 | + '--bkbg-col-tablet': (a.widths && a.widths.tablet || a.widths && a.widths.desktop || 50) + '%', | |
| 291 | + '--bkbg-col-mobile': (a.widths && a.widths.mobile || 100) + '%', | |
| 292 | + flexBasis: displayWidth + '%', | |
| 293 | + maxWidth: displayWidth + '%', | |
| 294 | + width: displayWidth + '%' | |
| 295 | + }, getSpacingStyles(a)); | |
| 296 | + Object.assign(colStyle, _tv(a.typoContent, '--bkbg-col-cn')); | |
| 280 | 297 | var blockProps = useBlockProps({ |
| 281 | 298 | className: [ |
| 282 | 299 | 'bkbg-column', |
| 283 | 300 | 'bkbg-column--padding-' + a.paddingInner, |
| @@ -282,16 +299,9 @@ | ||
| 282 | 299 | 'bkbg-column', |
| 283 | 300 | 'bkbg-column--padding-' + a.paddingInner, |
| 284 | 301 | 'bkbg-column--valign-' + (a.vAlign || 'top') |
| 285 | 302 | ].join(' '), |
| 286 | - style: Object.assign({}, { | |
| 287 | - '--bkbg-col-desktop': (a.widths && a.widths.desktop || 50) + '%', | |
| 288 | - '--bkbg-col-tablet': (a.widths && a.widths.tablet || a.widths && a.widths.desktop || 50) + '%', | |
| 289 | - '--bkbg-col-mobile': (a.widths && a.widths.mobile || 100) + '%', | |
| 290 | - flexBasis: displayWidth + '%', | |
| 291 | - maxWidth: displayWidth + '%', | |
| 292 | - width: displayWidth + '%' | |
| 293 | - }, getSpacingStyles(a)), | |
| 303 | + style: colStyle, | |
| 294 | 304 | 'data-uid': a.uid |
| 295 | 305 | }); |
| 296 | 306 | |
| 297 | 307 | function renderSpacingControl(type, label) { |
| @@ -414,8 +424,14 @@ | ||
| 414 | 424 | el('strong', {}, __('UID:', 'blockenberg')), |
| 415 | 425 | ' ' + (a.uid || 'N/A') |
| 416 | 426 | ) |
| 417 | 427 | ) |
| 428 | + ), | |
| 429 | + el(PanelBody, { title: __('Typography', 'blockenberg'), initialOpen: false }, | |
| 430 | + (function () { | |
| 431 | + var TC = getTypographyControl(); | |
| 432 | + return el(TC, { label: __('Content', 'blockenberg'), value: a.typoContent || {}, onChange: function (v) { setAttributes({ typoContent: v }); } }); | |
| 433 | + })() | |
| 418 | 434 | ) |
| 419 | 435 | ); |
| 420 | 436 | |
| 421 | 437 | return el('div', blockProps, |
| @@ -460,8 +476,14 @@ | ||
| 460 | 476 | save: function (props) { |
| 461 | 477 | var a = props.attributes; |
| 462 | 478 | var widths = a.widths || { desktop: 50, tablet: 50, mobile: 100 }; |
| 463 | 479 | |
| 480 | + var saveStyle = Object.assign({}, { | |
| 481 | + '--bkbg-col-desktop': widths.desktop + '%', | |
| 482 | + '--bkbg-col-tablet': (widths.tablet || widths.desktop) + '%', | |
| 483 | + '--bkbg-col-mobile': (widths.mobile || 100) + '%' | |
| 484 | + }, getSpacingStyles(a)); | |
| 485 | + Object.assign(saveStyle, _tv(a.typoContent, '--bkbg-col-cn')); | |
| 464 | 486 | var blockProps = useBlockProps.save({ |
| 465 | 487 | className: [ |
| 466 | 488 | 'bkbg-column', |
| 467 | 489 | 'bkbg-column--padding-' + a.paddingInner, |
| @@ -466,13 +488,9 @@ | ||
| 466 | 488 | 'bkbg-column', |
| 467 | 489 | 'bkbg-column--padding-' + a.paddingInner, |
| 468 | 490 | 'bkbg-column--valign-' + (a.vAlign || 'top') |
| 469 | 491 | ].join(' '), |
| 470 | - style: Object.assign({}, { | |
| 471 | - '--bkbg-col-desktop': widths.desktop + '%', | |
| 472 | - '--bkbg-col-tablet': (widths.tablet || widths.desktop) + '%', | |
| 473 | - '--bkbg-col-mobile': (widths.mobile || 100) + '%' | |
| 474 | - }, getSpacingStyles(a)), | |
| 492 | + style: saveStyle, | |
| 475 | 493 | 'data-uid': a.uid |
| 476 | 494 | }); |
| 477 | 495 | |
| 478 | 496 | return el('div', blockProps, |
| @@ -481,5 +499,5 @@ | ||
| 481 | 499 | ) |
| 482 | 500 | ); |
| 483 | 501 | } |
| 484 | 502 | }); |
| 485 | -}); | |
| 503 | +}() ); | |
