Use 03-editable-esnext to introduce people to esnext #18
Conversation
If you have not been exposed to esnext, it's easy to get lost. Concepts like Destructuring assignment and arrow functions can be foriegn. This adds inline documentation with esnext terminoly and links to mozilla documentation. Additionally, Gutenberg specific concepts are linked to in order to assist with understanding how to build your own blocks.
03-editable-esnext/block.js
Outdated
| icon: 'universal-access-alt', | ||
| // The category where the block will live in the block selector | ||
| category: 'layout', | ||
| // this blocks structrued data |
There was a problem hiding this comment.
Typo: "structrued" -> "structured"
03-editable-esnext/block.js
Outdated
| title: __( 'Example: Editable (esnext)' ), | ||
| // this can be any of WordPress Dashicons, or a custom svg element. | ||
| icon: 'universal-access-alt', | ||
| // The category where the block will live in the block selector |
There was a problem hiding this comment.
Terminology-wise, I think it'd be good to be consistent with use of "Inserter" for block, over selector.
There was a problem hiding this comment.
Maybe a note to possible values?
https://wordpress.org/gutenberg/handbook/block-api/#category
03-editable-esnext/block.js
Outdated
| // These are using Destructing Assignment which can be used to unpack properties from an object | ||
| // see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment | ||
| const { __ } = wp.i18n; | ||
| const { registerBlockType, Editable, source: { children } } = wp.blocks; |
There was a problem hiding this comment.
This is also out-of-date. There is no wp.blocks.source, and it's not used in this code anymore.
If we're wanting to introduce ESNext, I'd also recommend we stay away from nested destructuring, as I find it can be quite difficult to read, even when becoming familiar with the syntax.
| // See https://wordpress.org/gutenberg/handbook/block-api/attributes/ | ||
| attributes: { | ||
| content: { | ||
| // the data type we are storing |
There was a problem hiding this comment.
Maybe a note to supported values?
http://json-schema.org/latest/json-schema-validation.html#rfc.section.6.1.1
03-editable-esnext/block.js
Outdated
| content: { | ||
| // the data type we are storing | ||
| type: 'array', | ||
| // source and selector combine to dictate how to get this content |
There was a problem hiding this comment.
Note that this can be specific to the type of source. The HTML-based sources will have selector, but others (like meta, and perhaps eventually post, TBD) will have their own property configuration.
03-editable-esnext/block.js
Outdated
| selector: 'p', | ||
| }, | ||
| }, | ||
| // This uses arrow functions which inherit `this` from it's parent. |
There was a problem hiding this comment.
And in this instance, the this inheritance isn't really impactful, and personally, the use of arrow function here isn't really giving us any wins over the object function value shorthand: edit( props ) {
| // We are returning JSX which babel will convert for us due to the use of `babel-plugin-transform-react-jsx` | ||
| // Intro to JSX: https://reactjs.org/docs/introducing-jsx.html | ||
| return ( | ||
| // see: https://wordpress.org/gutenberg/handbook/block-api/editable-api/ |
There was a problem hiding this comment.
This component has since been renamed RichText, but the documentation in the handbook is languishing and continuing to show the old component:
https://wordpress.org/gutenberg/handbook/block-api/rich-text-api/
|
You can copy inline docs also from https://wordpress.org/gutenberg/handbook/blocks/generate-blocks-with-wp-cli/#create-a-block-inside-the-plugin. They are included as part of the |
|
@aaronjorbin this PR has some merge conflicts. Do you mind addressing them or do you think it's better at this point to close and re-approach this given the amount of changes in the repo? |
If you have not been exposed to esnext, it's easy to get lost. Concepts
like Destructuring assignment and arrow functions can be foriegn. This
adds inline documentation with esnext terminoly and links to mozilla
documentation. Additionally, Gutenberg specific concepts are linked to
in order to assist with understanding how to build your own blocks.