Initial commit

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = tab
+
+[{*.json,*.yml,.babelrc,.bowerrc,.browserslistrc,.postcssrc}]
+indent_style = space
+indent_size = 2
+
+[*.txt,wp-config-sample.php]
+end_of_line = crlf

.eslintignore

@@ -0,0 +1,7 @@
+assets/js/vendor
+assets/js/admin/vendor
+assets/js/frontend/vendor
+assets/js/shared/vendor
+gulp-tasks/
+webpack.config.babel.js
+gulpfile.babel.js

.eslintrc

@@ -0,0 +1,9 @@
+{
+	"extends": "@10up/eslint-config",
+	"globals": {
+		"module": true,
+		"process": true,
+		"wp": true,
+		"lodash": true
+	}
+}

.gitignore

@@ -0,0 +1,31 @@
+node_modules
+bower_components
+release
+vendor
+.idea
+*.log
+
+# Project Files
+dist
+
+# Editors
+*.esproj
+*.tmproj
+*.tmproject
+tmtags
+.*.sw[a-z]
+*.un~
+Session.vim
+*.swp
+
+# Mac OSX
+.DS_Store
+._*
+.Spotlight-V100
+.Trashes
+
+# Windows
+Thumbs.db
+Desktop.ini
+
+config.local.php

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

README.md

@@ -0,0 +1,3 @@
+# Gutenbridge
+
+Gutenbridge is a WordPress plugin that transforms classic editor content to Gutenberg blocks on the fly.

assets/js/editor/editor.js

@@ -0,0 +1,48 @@
+import ClassicBlockTransformer from './transform/ClassicBlockTransformer';
+
+/**
+ * GutenbridgeEditorSupport connects the JS implementation of
+ * Gutenbridge to Gutenberg JS.
+ */
+class GutenbridgeEditorSupport {
+
+	/**
+	 * Returns the singleton instance of GutenbridgeEditorSupport.
+	 *
+	 * @return GutenbridgeEditorSupport
+	 */
+	static getInstance() {
+		if ( ! this.instance ) {
+			this.instance = new GutenbridgeEditorSupport();
+		}
+
+		return this.instance;
+	}
+
+	/**
+	 * Activates the GutenbridgeEditorSupport
+	 *
+	 * @return void
+	 */
+	enable() {
+		document.addEventListener(
+			'DOMContentLoaded', this.didBlockEditorLoad.bind( this )
+		);
+	}
+
+	/**
+	 * Executes the classic to block transform.
+	 *
+	 * @return void
+	 */
+	didBlockEditorLoad() {
+		const transformer = new ClassicBlockTransformer();
+		transformer.execute();
+	}
+
+}
+
+const support = GutenbridgeEditorSupport.getInstance();
+support.enable();
+
+export default GutenbridgeEditorSupport;

assets/js/editor/transform/ClassicBlockTransformer.js

@@ -0,0 +1,113 @@
+/**
+ * ClassicBlockTransformer upgrades classic content on the current document into
+ * Gutenberg Blocks.
+ *
+ * Props: Ty Bailey & Gutenberg Core
+ */
+class ClassicBlockTransformer {
+
+	/**
+	 * Saves a local wp object for later lookup.
+	 */
+	constructor() {
+		this.wp = window.wp;
+	}
+
+	/**
+	 * Runs the Classic to Gutenberg Block transform on the current document.
+	 */
+	execute() {
+		const coreEditor = this.wp.data.select( 'core/block-editor' );
+		const blocks     = coreEditor.getBlocks();
+
+		if ( this.validBlocks( blocks ) ) {
+			/* Currently set to do 3 levels of recursion */
+			this.convertBlocks( blocks, 1, 3 );
+		}
+	}
+
+	/**
+	 * Converts the specified blocks and it's nested blocks if within
+	 * the depth constraints.
+	 *
+	 * Note: This function is called recursively. Specifying a very high
+	 * maxDepth can crash the browser.
+	 *
+	 * @param {Array}  blocks The list of blocks to convert
+	 * @param {number} depth The current call stack depth
+	 * @param {number} maxDepth The maximum allowed depth
+	 * @return void
+	 */
+	convertBlocks( blocks, depth = 1, maxDepth = 3 ) {
+		const n = blocks.length;
+		let i, block, innerBlocks;
+
+		for ( i = 0; i < n; i++ ) {
+			block       = blocks[i];
+			innerBlocks = { block };
+
+			this.transform( block );
+
+			if ( depth <= maxDepth && this.validBlocks( innerBlocks ) ) {
+				this.convertBlocks( innerBlocks, depth + 1, maxDepth );
+			}
+		}
+	}
+
+	/**
+	 * If the specified block is a freeform / classic block, replaces it
+	 * with corresponding Gutenberg blocks
+	 *
+	 * @param {Object} block The current block object
+	 * @return void
+	 */
+	transform( block ) {
+		if ( this.isFreeformBlock( block ) ) {
+			this.wp.data.dispatch( 'core/editor' ).replaceBlocks(
+				block.clientId,
+				this.blockHandler( block )
+			);
+		}
+	}
+
+	/**
+	 * Uses the Core Raw HTML Block Handler to convert classic block to
+	 * corresponding blocks
+	 *
+	 * @param {Object} block The block object
+	 * @return object
+	 */
+	blockHandler( block ) {
+		const { blocks } = this.wp;
+
+		return blocks.rawHandler( {
+			HTML: blocks.getBlockContent( block ),
+		} );
+	}
+
+	/* helpers */
+
+	/**
+	 * Checks if the blocks specified are valid
+	 *
+	 * @param {Array} blocks The array of blocks
+	 * @return bool
+	 */
+	validBlocks( blocks ) {
+		return blocks && 0 < blocks.length;
+	}
+
+	/**
+	 * Checks if the specified block is a freeform/classic block
+	 *
+	 * @param {Object} block The block object
+	 * @return bool
+	 */
+	isFreeformBlock( block ) {
+		return 'core/freeform' === block.name;
+	}
+
+}
+
+export default ClassicBlockTransformer;
+

babel.config.js

@@ -0,0 +1,48 @@
+/**
+ * Babel Config.
+ *
+ * @param {Object} api
+ * @returns {{presets: {Object}}}
+ */
+module.exports = api => {
+
+	/**
+	 * @link https://babeljs.io/docs/en/config-files#apicache
+	 */
+	api.cache.using( () => 'development' === process.env.NODE_ENV );
+
+	/**
+	 * Presets
+	 *
+	 * @link https://babeljs.io/docs/en/presets
+	 * @type {Array}
+	 */
+	const presets = [
+		[
+			/**
+			 * @link https://babeljs.io/docs/en/babel-preset-env#corejs
+			 */
+			'@babel/preset-env',
+			{
+				useBuiltIns: 'usage',
+				corejs: {
+					version: 3,
+					proposals: true
+				},
+			}
+		],
+	];
+
+	/**
+	 * Plugins
+	 *
+	 * @link https://babeljs.io/docs/en/plugins
+	 * @type {Array}
+	 */
+	const plugins = [];
+
+	return {
+		presets,
+		plugins
+	};
+};