Docs: Coding Guidelines: Document JavaScript language support commitm…

…ent (#22030)

* Docs: Coding Gudelines: Document JavaScript language support commitment

* Babel Preset Default: Document JavaScript language support commitment

* Babel Preset Default: Document extending configuration

* Babel Preset Default: Remove mention of Gutenberg guidelines

docs/contributors/coding-guidelines.md

@@ -65,6 +65,10 @@ Examples of styles that appear in both the theme and the editor include gallery
 
 ## JavaScript
 
+JavaScript in Gutenberg uses modern language features of the [ECMAScript language specification](https://www.ecma-international.org/ecma-262/) as well as the [JSX language syntax extension](https://reactjs.org/docs/introducing-jsx.html). These are enabled through a combination of preset configurations, notably [`@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/master/packages/babel-preset-default) which is used as a preset in the project's [Babel](https://babeljs.io/) configuration. 
+
+While the [staged process](https://tc39.es/process-document/) for introducing a new JavaScript language feature offers an opportunity to use new features before they are considered complete, **the Gutenberg project and the `@wordpress/babel-preset-default` configuration will only target support for proposals which have reached Stage 4 ("Finished")**.
+
 ### Imports
 
 In the Gutenberg project, we use [the ES2015 import syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) to enable us to create modular code with clear separations between code of a specific feature, code shared across distinct WordPress features, and third-party dependencies.

packages/babel-preset-default/README.md

@@ -2,6 +2,8 @@
 
 Default [Babel](https://babeljs.io/) preset for WordPress development.
 
+The preset includes configuration which enable language features and syntax extensions targeted for support by WordPress. This includes [ECMAScript proposals](https://github.com/tc39/proposals) which have reached [Stage 4 ("Finished")](https://tc39.es/process-document/), as well as the [JSX syntax extension](https://reactjs.org/docs/introducing-jsx.html). For more information, refer to the [JavaScript Coding Guidelines](https://github.com/WordPress/gutenberg/blob/master/docs/contributors/coding-guidelines.md#javascript).
+
 ## Installation
 
 Install the module
@@ -12,26 +14,27 @@ npm install @wordpress/babel-preset-default --save-dev
 
 ### Usage
 
-#### Via .babelrc (Recommended)
+There are a number of methods to configure Babel. See [Babel's Configuration documentation](https://babeljs.io/docs/en/configuration) for more information. To use this preset, simply reference `@wordpress/default` in the `presets` option in your Babel configuration.
+
+For example, using `.babelrc`:
 
 ```json
 {
   "presets": [ "@wordpress/default" ]
 }
 ```
 
-#### Via CLI
+#### Extending Configuration
 
-```bash
-babel script.js --presets @wordpress/default
-```
+This preset is an opinionated configuration. If you would like to add to or change this configuration, you can do so by expanding your Babel configuration to include plugins or presets which override those included through this preset. It may help to familiarize yourself [the implementation of the configuration](https://github.com/WordPress/gutenberg/blob/master/packages/babel-preset-default/index.js) to see which specific plugins are enabled by default through this preset.
 
-#### Via Node API
+For example, if you'd like to use a new language feature proposal which has not reached the stability requirements of WordPress, you can add those as additional plugins in your Babel configuration:
 
-```js
-require( '@babel/core' ).transform( 'code', {
-  presets: [ '@wordpress/default' ]
-} );
+```json
+{
+  "presets": [ "@wordpress/babel-preset-default" ],
+  "plugins": [ "@babel/plugin-proposal-class-properties" ]
+}
 ```
 
 <br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>