added format to the dynamic content popup

src/components/base-control2/hooks.js

@@ -8,7 +8,7 @@ import {
 	get, set, cloneDeep,
 } from 'lodash'
 
-export const useControlHandlers = ( _attribute, responsive = false, hover = false, valueCallback = null, changeCallback = null ) => {
+export const useControlHandlers = ( _attribute = '', responsive = false, hover = false, valueCallback = null, changeCallback = null ) => {
 	// If there's a '.' it means the attribute value is an object, and we want
 	// to change a single property inside that object.
 	const willUpdateObjectProperty = _attribute.includes( '.' )

src/components/dynamic-content-control/index.js

@@ -13,7 +13,7 @@ import { QueryLoopContext } from '~stackable/higher-order/with-query-loop-contex
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n'
+import { __, sprintf } from '@wordpress/i18n'
 import { useBlockEditContext } from '@wordpress/block-editor'
 import {
 	Button,
@@ -120,12 +120,17 @@ export const useDynamicContentControlProps = props => {
 	const isPressed = isPopoverOpen || activeAttributes.length
 	const activeAttribute = first( activeAttributes ) || ''
 
-	const onChange = ( newValue, editorQueryString, frontendQueryString ) => {
+	const onChange = ( newValue, editorQueryString, frontendQueryString, format = '' ) => {
 		// If `isFormatType` is true, the onChange function will generate a `stackable/dynamic-content` format type.
-		const willChangeValue = props.isFormatType
+		let willChangeValue = props.isFormatType
 			? `<span data-stk-dynamic="${ frontendQueryString }" contenteditable="false" class="stk-dynamic-content">${ newValue }</span>`
 			: `!#stk_dynamic/${ frontendQueryString }!#`
 
+		// If `format` is set, then we will use it to format the value.
+		if ( format ) {
+			willChangeValue = sprintf( format, willChangeValue )
+		}
+
 		props.onChange( willChangeValue )
 		setDebouncedValue( willChangeValue )
 
@@ -465,6 +470,8 @@ export const DynamicContentButton = memo( props => {
 							activeAttribute={ props.activeAttribute }
 							type={ props.type }
 							blockDetails={ block }
+							value={ props.value }
+							hasFormat={ !! props.value?.includes( 'class="stk-dynamic-content"' ) }
 						/>
 					) }