From 5acc42151c7d45313b58392a47edb923a4333da5 Mon Sep 17 00:00:00 2001 From: "bfintal@gmail.com" <> Date: Wed, 11 Sep 2024 23:33:51 +0800 Subject: [PATCH] added format to the dynamic content popup --- src/components/base-control2/hooks.js | 2 +- src/components/dynamic-content-control/index.js | 13 ++++++++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/base-control2/hooks.js b/src/components/base-control2/hooks.js index 7fbb41027..ac1b13007 100644 --- a/src/components/base-control2/hooks.js +++ b/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( '.' ) diff --git a/src/components/dynamic-content-control/index.js b/src/components/dynamic-content-control/index.js index 62beaa7cb..ba96f7797 100644 --- a/src/components/dynamic-content-control/index.js +++ b/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 ? `${ newValue }` : `!#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"' ) } /> ) }