+
- { prefix }
+ {prefix}
- { formattedNumber( number ) }
+ {formattedNumber}
- { suffix }
+ {suffix}
diff --git a/src/index.js b/src/index.js
index 434d0b4..c86ad5b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,8 +5,112 @@ import save from './save';
import metadata from './block.json';
import { Icon, keyFigure } from '@beapi/icons';
-registerBlockType( metadata.name, {
- icon:
,
+// Deprecations for different versions of the block
+const deprecated = [
+ // v1 - Original format without data attributes (blocks prior 1.0.4)
+ {
+ attributes: {
+ align: {
+ type: 'string',
+ },
+ decimalSeparator: {
+ type: 'string',
+ default: 'none',
+ },
+ minimumFractionDigits: {
+ type: 'number',
+ default: 3,
+ },
+ prefix: {
+ type: 'string',
+ source: 'text',
+ selector: '.wp-block-blockparty-key-figure__prefix',
+ default: '+',
+ },
+ number: {
+ type: 'string',
+ source: 'attribute',
+ selector: '.wp-block-blockparty-key-figure__number',
+ attribute: 'data-increment',
+ default: '100',
+ },
+ formattedNumber: {
+ type: 'string',
+ source: 'text',
+ selector: '.wp-block-blockparty-key-figure__number',
+ },
+ suffix: {
+ type: 'string',
+ source: 'text',
+ selector: '.wp-block-blockparty-key-figure__suffix',
+ default: '%',
+ },
+ description: {
+ type: 'string',
+ source: 'html',
+ selector: '.wp-block-blockparty-key-figure__description',
+ },
+ },
+ save({ attributes }) {
+ const {
+ align,
+ prefix,
+ number,
+ formattedNumber,
+ suffix,
+ description,
+ } = attributes;
+
+ return (
+
+
+
+ {prefix}
+
+
+ {formattedNumber || number}
+
+
+ {suffix}
+
+
+ {description && (
+
+ )}
+
+ );
+ },
+ isEligible(attributes, innerBlocks, { innerHTML }) {
+ // Check for original format without any data attributes
+ return (
+ innerHTML &&
+ !innerHTML.includes('data-decimal-separator') &&
+ !innerHTML.includes('data-minimum-fraction-digits')
+ );
+ },
+ migrate(attributes) {
+ // Remove the formattedNumber attribute as it's not needed in the new version
+ const { formattedNumber, ...newAttributes } = attributes;
+ return newAttributes;
+ },
+ },
+];
+
+registerBlockType(metadata.name, {
+ icon:
,
edit: Edit,
save,
-} );
+ deprecated,
+});
diff --git a/src/number-formatter.js b/src/number-formatter.js
new file mode 100644
index 0000000..112f67a
--- /dev/null
+++ b/src/number-formatter.js
@@ -0,0 +1,71 @@
+/**
+ * Number formatting utility for Key Figure blocks
+ * Frontend-only formatting (editor formatting handled in React components)
+ */
+
+function formatNumber(numberToFormat, decimalSeparator, minimumFractionDigits) {
+ if (!numberToFormat && numberToFormat !== 0) {
+ return numberToFormat;
+ }
+
+ if (decimalSeparator === 'none') {
+ return numberToFormat.toString();
+ } else if (decimalSeparator === '.' || decimalSeparator === ',') {
+ return (numberToFormat || 0).toString().replace('.', decimalSeparator);
+ }
+
+ const options = {
+ minimumFractionDigits: minimumFractionDigits || 0,
+ };
+
+ try {
+ return new Intl.NumberFormat(decimalSeparator, options).format(
+ numberToFormat
+ );
+ } catch (error) {
+ // Fallback to simple string conversion if formatting fails
+ return numberToFormat.toString();
+ }
+}
+
+function initializeNumberFormatting() {
+ // Only run on frontend (not in editor)
+ if (typeof wp !== 'undefined' && wp.data && wp.blocks) {
+ return; // Skip in editor context
+ }
+
+ const numberElements = document.querySelectorAll(
+ '.wp-block-blockparty-key-figure__number'
+ );
+
+ numberElements.forEach((element) => {
+ const increment = element.getAttribute('data-increment');
+ const decimalSeparator = element.getAttribute('data-decimal-separator');
+ const minimumFractionDigits = parseInt(
+ element.getAttribute('data-minimum-fraction-digits') || '0',
+ 10
+ );
+
+ if (increment) {
+ const formattedNumber = formatNumber(
+ parseFloat(increment),
+ decimalSeparator,
+ minimumFractionDigits
+ );
+ element.textContent = formattedNumber;
+ }
+ });
+}
+
+// Initialize on DOM ready (frontend only)
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', initializeNumberFormatting);
+} else {
+ initializeNumberFormatting();
+}
+
+// Export for potential use in other contexts
+window.blockpartyKeyFigureFormatter = {
+ formatNumber,
+ initialize: initializeNumberFormatting,
+};
diff --git a/src/save.js b/src/save.js
index 4534af5..76e7596 100644
--- a/src/save.js
+++ b/src/save.js
@@ -2,7 +2,7 @@ import { useBlockProps, RichText } from '@wordpress/block-editor';
import classnames from 'classnames';
-export default function save( { attributes } ) {
+export default function save({ attributes }) {
const {
align,
prefix,
@@ -13,49 +13,34 @@ export default function save( { attributes } ) {
description,
} = attributes;
- const blockProps = useBlockProps.save( {
- className: classnames( {
- [ `has-text-align-${ align }` ]: align,
- } ),
- } );
-
- const formattedNumber = ( numberToFormat ) => {
- if ( 'none' === decimalSeparator ) {
- return numberToFormat;
- } else if ( '.' === decimalSeparator || ',' === decimalSeparator ) {
- return ( numberToFormat || 0 )
- .toString()
- .replace( '.', decimalSeparator );
- }
-
- const options = {
- minimumFractionDigits,
- };
- return new Intl.NumberFormat( decimalSeparator, options ).format(
- numberToFormat
- );
- };
+ const blockProps = useBlockProps.save({
+ className: classnames({
+ [`has-text-align-${align}`]: align,
+ }),
+ });
return (
-
+
- { prefix }
+ {prefix}
- { formattedNumber( number ) }
+ {number}
- { suffix }
+ {suffix}
);