Merge pull request #1165 from Automattic/add/amp-mathml_component

[Gutenberg] Add amp-mathml block

.babelrc

@@ -0,0 +1,25 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "modules": false
+      }
+    ]
+  ],
+  "plugins": [
+    "transform-object-rest-spread",
+    [
+      "transform-react-jsx",
+      {
+        "pragma": "wp.element.createElement"
+      }
+    ]
+  ],
+  "env": {
+    "default": {
+      "plugins": ["transform-runtime"]
+    },
+    "production": {}
+  }
+}

.eslintignore

@@ -0,0 +1,4 @@
+**/*.min.js
+**/node_modules/**
+**/vendor/**
+**/assets/js/amp-blocks-compiled.js

.eslintrc

@@ -1,7 +1,19 @@
 {
 	"root": true,
 	"extends": [
-		"wordpress"
+		"wordpress",
+		"eslint:recommended",
+		"plugin:react/recommended"
+	],
+	"parserOptions": {
+		"ecmaVersion": 6,
+		"sourceType": "module",
+		"ecmaFeatures": {
+			"jsx": true
+		}
+	},
+	"plugins": [
+		"react"
 	],
 	"env": {
 		"browser": true
@@ -121,6 +133,7 @@
 		"react/display-name": "off",
 		"react/no-children-prop": "off",
 		"react/prop-types": "off",
+		"react/react-in-jsx-scope": "off",
 		"semi": "error",
 		"semi-spacing": "error",
 		"space-before-blocks": [

.gitignore

@@ -4,3 +4,4 @@ build
 node_modules
 wiki
 amp.zip
+**/*-compiled.js

.jshintignore

@@ -0,0 +1,4 @@
+**/*.min.js
+**/node_modules/**
+**/vendor/**
+**/assets/js/amp-blocks-compiled.js

.jshintrc

@@ -0,0 +1,27 @@
+{
+  "boss": true,
+  "curly": true,
+  "eqeqeq": true,
+  "eqnull": true,
+  "es3": true,
+  "esversion": 6,
+  "expr": true,
+  "immed": true,
+  "noarg": true,
+  "nonbsp": true,
+  "onevar": true,
+  "quotmark": "single",
+  "trailing": true,
+  "undef": true,
+  "unused": true,
+
+  "browser": true,
+
+  "globals": {
+    "_": false,
+    "Backbone": false,
+    "jQuery": false,
+    "JSON": false,
+    "wp": false
+  }
+}

Gruntfile.js

@@ -100,9 +100,10 @@ module.exports = function( grunt ) {
 			versionAppend = commitHash + '-' + new Date().toISOString().replace( /\.\d+/, '' ).replace( /-|:/g, '' );
 
 			paths = lsOutput.trim().split( /\n/ ).filter( function( file ) {
-				return ! /^(\.|bin|([^/]+)+\.(md|json|xml)|Gruntfile\.js|tests|wp-assets|dev-lib|readme\.md|composer\..*)/.test( file );
+				return ! /^(blocks|\.|bin|([^/]+)+\.(md|json|xml)|Gruntfile\.js|tests|wp-assets|dev-lib|readme\.md|composer\..*)/.test( file );
 			} );
 			paths.push( 'vendor/autoload.php' );
+			paths.push( 'assets/js/*-compiled.js' );
 			paths.push( 'vendor/composer/**' );
 			paths.push( 'vendor/sabberworm/php-css-parser/lib/**' );
 

assets/js/amp-block-validation.js

@@ -7,7 +7,7 @@
 
 /* exported ampBlockValidation */
 /* global wp, _ */
-var ampBlockValidation = ( function() {
+var ampBlockValidation = ( function() { // eslint-disable-line no-unused-vars
 	'use strict';
 
 	var module = {

assets/js/amp-customize-controls.js

@@ -1,7 +1,7 @@
 /* exported ampCustomizeControls */
 /* eslint no-magic-numbers: [ "error", { "ignore": [ 0, 1, 250] } ] */
 
-var ampCustomizeControls = ( function( api, $ ) {
+var ampCustomizeControls = ( function( api, $ ) { // eslint-disable-line no-unused-vars
 	'use strict';
 
 	var component = {

assets/js/amp-customize-preview.js

@@ -1,6 +1,6 @@
 /* exported ampCustomizePreview */
 
-var ampCustomizePreview = ( function( api ) {
+var ampCustomizePreview = ( function( api ) { // eslint-disable-line no-unused-vars
 	'use strict';
 
 	var component = {};

assets/js/amp-post-meta-box.js

@@ -7,7 +7,7 @@
  *
  * @since 0.6
  */
-var ampPostMetaBox = ( function( $ ) {
+var ampPostMetaBox = ( function( $ ) { // eslint-disable-line no-unused-vars
 	'use strict';
 
 	var component = {

blocks/amp-mathml/index.js

@@ -0,0 +1,56 @@
+
+/**
+ * Internal block libraries.
+ */
+const { __ } = wp.i18n;
+const {
+	registerBlockType
+} = wp.blocks;
+const {
+	PlainText
+} = wp.editor;
+
+/**
+ * Register block.
+ */
+export default registerBlockType(
+	'amp/amp-mathml',
+	{
+		title: __( 'AMP MathML' ),
+		category: 'common',
+		icon: 'welcome-learn-more',
+		keywords: [
+			__( 'Mathematical formula' ),
+			__( 'Scientific content ' )
+		],
+
+		attributes: {
+			dataFormula: {
+				type: 'string'
+			}
+		},
+
+		edit( { attributes, setAttributes } ) {
+			const { dataFormula } = attributes;
+
+			return [
+				<PlainText
+					key='formula'
+					value={ dataFormula }
+					placeholder={ __( 'Insert formula' ) }
+					onChange={ ( value ) => setAttributes( { dataFormula: value } ) }
+				/>
+			];
+		},
+
+		save( { attributes } ) {
+			let mathmlProps = {
+				'data-formula': attributes.dataFormula,
+				layout: 'container'
+			};
+			return (
+				<amp-mathml { ...mathmlProps }></amp-mathml>
+			);
+		}
+	}
+);

blocks/index.js

@@ -0,0 +1,4 @@
+/**
+ * Import blocks.
+ */
+import './amp-mathml';

contributing.md

@@ -16,6 +16,10 @@ To install the `pre-commit` hook, do `bash dev-lib/install-pre-commit-hook.sh`.
 
 Note that pull requests will be checked against [WordPress-Coding-Standards](https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards) with PHPCS, and for JavaScript linting is done with ESLint and (for now) JSCS and JSHint.
 
+## Modifying JavaScript for Blocks
+
+To edit JavaScript code which is built/complied, run `npm run dev` to watch the files which Webpack will build. These complied files are excluded from version control but they are included in the release packages.
+
 ## Creating a Plugin Build
 
 To create a build of the plugin for installing in WordPress as a ZIP package, do:

includes/admin/class-amp-editor-blocks.php

@@ -16,7 +16,7 @@ class AMP_Editor_Blocks {
 	 */
 	public function init() {
 		if ( function_exists( 'gutenberg_init' ) ) {
-			add_action( 'admin_enqueue_scripts', array( $this, 'add_editor_filters' ) );
+			add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_block_editor_assets' ) );
 			add_filter( 'wp_kses_allowed_html', array( $this, 'whitelist_layout_in_wp_kses_allowed_html' ), 10 );
 		}
 	}
@@ -39,7 +39,16 @@ public function whitelist_layout_in_wp_kses_allowed_html( $tags ) {
 	 * Enqueue filters for extending core blocks attributes.
 	 * Has to be loaded before registering the blocks in registerCoreBlocks.
 	 */
-	public function add_editor_filters() {
+	public function enqueue_block_editor_assets() {
+
+		// Scripts.
+		wp_enqueue_script(
+			'amp-editor-blocks-build',
+			amp_get_asset_url( 'js/amp-blocks-compiled.js' ),
+			array( 'wp-blocks', 'lodash', 'wp-i18n', 'wp-element', 'wp-components' ),
+			AMP__VERSION
+		);
+
 		wp_enqueue_script(
 			'amp-editor-blocks',
 			amp_get_asset_url( 'js/amp-editor-blocks.js' ),