Update for latest gutenberg compatibility (#23)

* Update for gutenberg 2.9 compatibility

* Add text domain & setLocale

* Fix coding standards

* Config eslint & fix code

* Load locale data & refactor assets loading

* Clean .gitignore & .eslintignore

* Use var for es5 examples instead of const

* Move gutenberg check to top

* Handle undefined alignment

* Fix className on save

.eslintignore

@@ -0,0 +1,3 @@
+
+node_modules
+*.build.js

.eslintrc.js

@@ -0,0 +1,159 @@
+module.exports = {
+	extends: [
+		'wordpress',
+		'plugin:wordpress/esnext',
+		'plugin:react/recommended',
+		'plugin:jsx-a11y/recommended',
+	],
+	env: {
+		browser: false,
+		es6: true,
+		node: true,
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaFeatures: {
+			jsx: true,
+		},
+	},
+	globals: {
+		wp: true,
+		window: true,
+		document: true,
+	},
+	plugins: [
+		'wordpress',
+		'react',
+		'jsx-a11y',
+	],
+	rules: {
+		'array-bracket-spacing': [ 'error', 'always' ],
+		'arrow-parens': [ 'error', 'always' ],
+		'arrow-spacing': 'error',
+		'brace-style': [ 'error', '1tbs' ],
+		camelcase: [ 'error', { properties: 'never' } ],
+		'comma-dangle': [ 'error', 'always-multiline' ],
+		'comma-spacing': 'error',
+		'comma-style': 'error',
+		'computed-property-spacing': [ 'error', 'always' ],
+		'dot-notation': 'error',
+		'eol-last': 'error',
+		eqeqeq: 'error',
+		'func-call-spacing': 'error',
+		indent: [ 'error', 'tab', { SwitchCase: 1 } ],
+		'jsx-a11y/label-has-for': [ 'error', {
+			required: 'id',
+		} ],
+		'jsx-a11y/media-has-caption': 'off',
+		'jsx-a11y/no-noninteractive-tabindex': 'off',
+		'jsx-a11y/role-has-required-aria-props': 'off',
+		'jsx-quotes': 'error',
+		'key-spacing': 'error',
+		'keyword-spacing': 'error',
+		'lines-around-comment': 'off',
+		'no-alert': 'error',
+		'no-bitwise': 'error',
+		'no-caller': 'error',
+		'no-console': 'error',
+		'no-debugger': 'error',
+		'no-dupe-args': 'error',
+		'no-dupe-keys': 'error',
+		'no-duplicate-case': 'error',
+		'no-else-return': 'error',
+		'no-eval': 'error',
+		'no-extra-semi': 'error',
+		'no-fallthrough': 'error',
+		'no-lonely-if': 'error',
+		'no-mixed-operators': 'error',
+		'no-mixed-spaces-and-tabs': 'error',
+		'no-multiple-empty-lines': [ 'error', { max: 1 } ],
+		'no-multi-spaces': 'error',
+		'no-multi-str': 'off',
+		'no-negated-in-lhs': 'error',
+		'no-nested-ternary': 'error',
+		'no-redeclare': 'error',
+		'no-restricted-syntax': [
+			'error',
+			{
+				selector: 'CallExpression[callee.name=/^__|_n|_x$/]:not([arguments.0.type=/^Literal|BinaryExpression$/])',
+				message: 'Translate function arguments must be string literals.',
+			},
+			{
+				selector: 'CallExpression[callee.name=/^_n|_x$/]:not([arguments.1.type=/^Literal|BinaryExpression$/])',
+				message: 'Translate function arguments must be string literals.',
+			},
+			{
+				selector: 'CallExpression[callee.name=_nx]:not([arguments.2.type=/^Literal|BinaryExpression$/])',
+				message: 'Translate function arguments must be string literals.',
+			},
+		],
+		'no-shadow': 'error',
+		'no-undef': 'error',
+		'no-undef-init': 'error',
+		'no-unreachable': 'error',
+		'no-unsafe-negation': 'error',
+		'no-unused-expressions': 'error',
+		'no-unused-vars': 'error',
+		'no-useless-return': 'error',
+		'no-whitespace-before-property': 'error',
+		'object-curly-spacing': [ 'error', 'always' ],
+		'padded-blocks': [ 'error', 'never' ],
+		quotes: [ 'error', 'single', { allowTemplateLiterals: true, avoidEscape: true } ],
+		'quote-props': [ 'error', 'as-needed' ],
+		'react/display-name': 'off',
+		'react/jsx-curly-spacing': [ 'error', {
+			when: 'always',
+			children: true,
+		} ],
+		'react/jsx-equals-spacing': 'error',
+		'react/jsx-indent': [ 'error', 'tab' ],
+		'react/jsx-indent-props': [ 'error', 'tab' ],
+		'react/jsx-key': 'error',
+		'react/jsx-tag-spacing': 'error',
+		'react/no-children-prop': 'off',
+		'react/prop-types': 'off',
+		'react/react-in-jsx-scope': 'off',
+		semi: 'error',
+		'semi-spacing': 'error',
+		'space-before-blocks': [ 'error', 'always' ],
+		'space-before-function-paren': [ 'error', {
+			anonymous: 'never',
+			named: 'never',
+			asyncArrow: 'always',
+		} ],
+		'space-in-parens': [ 'error', 'always' ],
+		'space-infix-ops': [ 'error', { int32Hint: false } ],
+		'space-unary-ops': [ 'error', {
+			overrides: {
+				'!': true,
+				yield: true,
+			},
+		} ],
+		'valid-jsdoc': [ 'error', {
+			prefer: {
+				arg: 'param',
+				argument: 'param',
+				extends: 'augments',
+				returns: 'return',
+			},
+			preferType: {
+				array: 'Array',
+				bool: 'boolean',
+				Boolean: 'boolean',
+				float: 'number',
+				Float: 'number',
+				int: 'number',
+				integer: 'number',
+				Integer: 'number',
+				Number: 'number',
+				object: 'Object',
+				String: 'string',
+				Void: 'void',
+			},
+			requireParamDescription: false,
+			requireReturn: false,
+		} ],
+		'valid-typeof': 'error',
+		yoda: 'off',
+	},
+};

.gitignore

@@ -0,0 +1,7 @@
+# Directories/files that may be generated by this project
+node_modules
+
+# Directories/files that may appear in your environment
+.DS_Store
+*.log
+/yarn.lock

01-basic-esnext/block.js

@@ -1,4 +1,4 @@
-const { __ } = wp.i18n;
+const { __, setLocaleData } = wp.i18n;
 const { registerBlockType } = wp.blocks;
 
 const blockStyle = {
@@ -7,8 +7,10 @@ const blockStyle = {
 	padding: '20px',
 };
 
+setLocaleData( window.gutenberg_examples_01_esnext.localeData, 'gutenberg-examples' );
+
 registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
-	title: __( 'Example: Basic (esnext)' ),
+	title: __( 'Example: Basic (esnext)', 'gutenberg-examples' ),
 	icon: 'universal-access-alt',
 	category: 'layout',
 	edit() {

01-basic-esnext/index.php

@@ -2,13 +2,52 @@
 
 defined( 'ABSPATH' ) || exit;
 
-add_action( 'enqueue_block_editor_assets', 'gutenberg_examples_01_esnext_enqueue_block_editor_assets' );
+/**
+ * Load all translations for our plugin from the MO file.
+*/
+add_action( 'init', 'gutenberg_examples_01_esnext_load_textdomain' );
 
-function gutenberg_examples_01_esnext_enqueue_block_editor_assets() {
-	wp_enqueue_script(
+function gutenberg_examples_01_esnext_load_textdomain() {
+	load_plugin_textdomain( 'gutenberg-examples', false, basename( __DIR__ ) . '/languages' );
+}
+
+/**
+ * Registers all block assets so that they can be enqueued through Gutenberg in
+ * the corresponding context.
+ *
+ * Passes translations to JavaScript.
+ */
+function gutenberg_examples_01_esnext_register_block() {
+
+	if ( ! function_exists( 'register_block_type' ) ) {
+		// Gutenberg is not active.
+		return;
+	}
+
+	wp_register_script(
 		'gutenberg-examples-01-esnext',
 		plugins_url( 'block.build.js', __FILE__ ),
 		array( 'wp-blocks', 'wp-i18n', 'wp-element' ),
 		filemtime( plugin_dir_path( __FILE__ ) . 'block.build.js' )
 	);
-}
+
+	register_block_type( 'gutenberg-examples/example-01-basic-esnext', array(
+		'script' => 'gutenberg-examples-01-esnext',
+	) );
+
+	/*
+	 * Pass already loaded translations to our JavaScript.
+	 *
+	 * This happens _before_ our JavaScript runs, afterwards it's too late.
+	 */
+	wp_add_inline_script(
+		'gutenberg-examples-01-esnext',
+		sprintf( 
+			'var gutenberg_examples_01_esnext = { localeData: %s };', 
+			json_encode( gutenberg_get_jed_locale_data( 'gutenberg-examples' ) ) 
+		),
+		'before'
+	);
+
+} 
+add_action( 'init', 'gutenberg_examples_01_esnext_register_block' );