Create a dynamic block for the [nivo] slider

[bobbingwide]

Having battled with multiple attributes in the Countdown block I now want to try to implement a generic solution that uses the techniques suggested by @aduth.
We'll try doing this for the [nivo] shortcode.

These are the helpful notes from Andrew Duthie.

These aren’t really specific to Gutenberg, but to your questions on generalization, seems like it can be solved with a few functions, and maybe some partial application via Function#bind (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) or Lodash/Underscore _.partial http://underscorejs.org/#partial

onChange={ partial( handleChange, 'someKey' ) }

/// ...

function handleChange( key, value ) {
var nextAttributes = {};
nextAttributes[ key ] = value;
setAttributes( nextAttributes );
// ES6: setAttributes( { [ key ]: value } );
}

I’d suggest reading more on the keys article, as the answer is not “add key to everything”, it’s specific to when you’re returning an array from a component (you can also return Fragment to avoid this, wp.element.Fragment https://reactjs.org/docs/fragments.html) or when mapping over arrays

And for the distinction on controlled and uncontrolled form components https://reactjs.org/docs/forms.html

[bobbingwide]

Having found that I can import partial from lodash ( ah... must be an alias for underscore... that's what Andrew said ) I'm now trying to implement some of the parameters as SelectControl's.
I don't yet understand what map does so the code seems to be back to front.

[bobbingwide]

It appears that importing from lodash is causing the same problems as was reported in WordPress/gutenberg#4043 (comment)

The fix appears to be the same.

1. npm install babel-plugin-lodash
   which changes package.json by adding

"dependencies": {
  "babel-plugin-lodash": "^3.3.2"
}

2. Change the .babelrc file, adding

		["lodash"]

to the list of plugins.

[bobbingwide]

Latest screenshot showing the Select drop down and the Theme entry field and t2 select both having the capability to set the theme= parameter of the shortcode. This is a bonus behaviour - two controls to the value of an attribute.

[bobbingwide]

The parameters passed to the iteratee function for map are value, index|key, collection. Change these around and the code should make more sense.

[bobbingwide]

It’s possible to use both a TextField and a Select control against the same attribute. This will allow the user to pick a common value from the select control or type a different value in the entry field. Thi can be used for parameters such as thumbnail= where the known values are thumbnail|medium|large|full but we also support wxh - width times height

[bobbingwide]

While checking the current status of this block I edited the documentation at https://s.b/oikcom/wp-admin/post.php?post=33956&action=edit
and got this unexpected result.

There were 6 of the slide up messages.

WordPress 5.8.1, Gutenberg 12.3.0

Explanation

• The messages appeared when I recovered the Nivo block
• The post does contain a Gallery block
• The messages didn't appear on a subsequent visit to the post, even though I'd cancelled the update.

[bobbingwide]

and got this unexpected result.

These messages were a known problem in Gutenberg. It's been removed in WordPress 5.9-RC2.