[Resolved] Dynamic API Example

[Author]

Posts

[SteveR6772]

Tell us what you are trying to do? Make a block plugin based on the Dynamic API

Is there any documentation that you are following? https://toolset.com/documentation/programmer-reference/dynamic-sources-api/

I have successfully made an initial version of my plugin (I am trying to make a linked container where the link source can be dynamic.)

The issue I have is trying to add functionality missing from the example (hidden link). While it handles they dynamic case, it does not handle the static case for a value.

At this point in the edit code I have extended the inspector controls like this

			<InspectorControls>
				{/* In the "PanelBody" is the UI of the the Dynamic Sources API that will be rendered in the Inspector bar. */}
				<PanelBody title={ __( 'URL' ) }>
					{ this.props.dynamicFieldControlRender( DYNAMIC_URL ) }
					{ !hasDynamicSource &&
						<URLInputButton
                        url={ staticUrl }
                        onChange={ ( url, post ) => setAttributes( { staticUrl: url } ) }
                    />
					}
				</PanelBody>
			</InspectorControls>
Initially I tried using the same attribute for both case but that seem to produce a conflict so I switched to two attributes, one for each case.  The change is this part
					{ !hasDynamicSource &&
						<URLInputButton
                        url={ staticUrl }
                        onChange={ ( url, post ) => setAttributes( { staticUrl: url } ) }
                    />
					}

where I show an URLInputButton if the source is not dynamic.

I am clueless though how to handle this on save. I tried using this.props.dynamicFieldGet( DYNAMIC_URL ).isActive; but get this error in the browser's developer console: TypeError: "this.props.dynamicFieldGet is not a function"

Could please provide me with information on how to handle the static case when using the dynamic API?

Thanks
Steve Ringwood

[Beda]

I cannot help with this API in the Support forum, as it is directed to advanced Developers and I am in all honesty not familiar with it.

I will have to ask our Developer who made it if yes we can provide support for it (as it's custom code), and if he would have time to elaborate on this for you here in the forum.
However, he is back only Monday - while I am back only Tuesday.

Can you wait until then for an answer? I am not sure he will be able to help on this as it is falling under Custom Code, however given the API is new and not many developers did show interest in it, it can be that we will do some extra here.

I extend my apologies that I cannot help with the problem here in the support directly, and either me or my colleagues will update you here in the forum next week.

[SteveR6772]

Waiting is not a problem. I realize it is custom code, but it is about your api and both the documentation and example seem incomplete and I am hoping you can provide help.

Thanks
Steve Ringwood

[SteveR6772]

Spent the day playing with the plugin and now have a working version. In the process I changed to a single attribute which is used the store the value regardless if the value is dynamic or static.

So I am wondering if the patterns I used seem reasonable/appropriate when using the dynamic API.

In addition to changing the attributes to add the new ones and changing the save so reflect the output I want for the block, the biggest changes are in the edit function and this is where I wonder about my approach.

I changed the part with the EditWrapper to this pattern where I only show the EditWrapper when there is a Dynamic Source and handle other aspects of the block in the div that follows it.

{
  hasDynamicSource &&
  <EditWrapper ...> .... </EditWrapper>
}
<div>
// This handles the non-dynamic aspects of the block.
</div>

The for the InspectorControls I used this pattern. Here I had a section after the call to dynamicFieldControlRender to handle the case when a dynamic value is not be used.

<InspectorControls>
				{/* In the "PanelBody" is the UI of the the Dynamic Sources API that will be rendered in the Inspector bar. */}
				<PanelBody title={ __( 'URL' ) }>
					{ this.props.dynamicFieldControlRender( DYNAMIC_URL ) }
					{ !hasDynamicSource &&
						// The components and html I need to the non-dynamic values
					}
				</PanelBody>
			</InspectorControls>

Does this seems like a reasonable approach?

Thanks
Steve Ringwood
Nevets Software

[Beda]

Our Developer is looking into this as I type here.

I will keep you in the loop (or maybe he'll reply directly here)

Thank you for your patience with this.

[Konstantinos Galanakis]

Hello Steve.

This is Konstantinos G. from the Toolset Development team.

Regarding your questions, your last approach seems reasonable to me but lately, we've come up to a more sophisticated way to do such things with Dynamic Block attributes.

Hopefully, we will find some time before the actual production release of Views 3.0 to also update the Dynamic Sources Example plugin with the changes we are introducing for the sake of Views 3.0.

Keep track of the plugin's GitHub repo for changes.

[Beda]

Thanks Konstantinos 🙂

Steve, are the questions you had clarified with this answer?

Thank you again for your patience.

[SteveR6772]

My issue is resolved now. Thank you!