Open bobbingwide opened 6 years ago
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.
It appears that importing from lodash is causing the same problems as was reported in https://github.com/WordPress/gutenberg/issues/4043#issuecomment-361001527
The fix appears to be the same.
npm install babel-plugin-lodash which changes package.json by adding
"dependencies": {
"babel-plugin-lodash": "^3.3.2"
}
Change the .babelrc file, adding
["lodash"]
to the list of plugins.
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.
The parameters passed to the iteratee function for map
are value, index|key, collection. Change these around and the code should make more sense.
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
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
and got this unexpected result.
These messages were a known problem in Gutenberg. It's been removed in WordPress 5.9-RC2.
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/#partialonChange={ 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 arraysAnd for the distinction on controlled and uncontrolled form components https://reactjs.org/docs/forms.html