Gutenberg diff: add plugin for cherry-picking new features

.circleci/config.yml

@@ -20,6 +20,7 @@ references:
         "$CIRCLE_ARTIFACTS/translate"           \
         "$CIRCLE_ARTIFACTS/screenshots"         \
         "$CIRCLE_ARTIFACTS/full-site-editing"   \
+        "$CIRCLE_ARTIFACTS/gutenberg-diff"      \
         "$CIRCLE_ARTIFACTS/wpcom-block-editor"  \
         "$CIRCLE_TEST_REPORTS/client"           \
         "$CIRCLE_TEST_REPORTS/eslint"           \
@@ -312,6 +313,18 @@ jobs:
             cp -R apps/full-site-editing/full-site-editing-plugin $CIRCLE_ARTIFACTS/full-site-editing/
       - store-artifacts-and-test-results
 
+  build-gutenberg-diff:
+    <<: *defaults
+    parallelism: 1
+    steps:
+    - prepare
+    - run:
+        name: Build the Gutenberg Diff plugins
+        command: |
+          npx lerna run build --scope='@automattic/gutenberg-diff'
+          cp -R apps/gutenberg-diff/gutenberg-diff-plugin $CIRCLE_ARTIFACTS/gutenberg-diff/
+    - store-artifacts-and-test-results
+
   test-client:
     <<: *defaults
     parallelism: 6
@@ -618,6 +631,9 @@ workflows:
       - build-full-site-editing:
           requires:
             - setup
+      - build-gutenberg-diff:
+          requires:
+            - setup
       - build-notifications:
           requires:
             - setup

apps/gutenberg-diff/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+	rules: {
+		'import/no-extraneous-dependencies': [ 'error', { packageDir: __dirname } ],
+		'react/react-in-jsx-scope': 0,
+	},
+};

apps/gutenberg-diff/babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+	extends: require.resolve( '@automattic/calypso-build/babel.config.js' ),
+	presets: [ require( '@automattic/calypso-build/babel/wordpress-element' ) ],
+};

apps/gutenberg-diff/gutenberg-diff-plugin/blocks/group/edit.js

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { InspectorControls, InnerBlocks, PanelColorSettings, withColors } from '@wordpress/editor';
+
+import './style.scss';
+
+function GroupEdit( { className, setBackgroundColor, backgroundColor } ) {
+	const styles = {
+		backgroundColor: backgroundColor.color,
+	};
+
+	const classes = classnames( className, backgroundColor.class, {
+		'has-background': !! backgroundColor.color,
+	} );
+
+	return (
+		<Fragment>
+			<InspectorControls>
+				<PanelColorSettings
+					title={ __( 'Color Settings' ) }
+					colorSettings={ [
+						{
+							value: backgroundColor.color,
+							onChange: setBackgroundColor,
+							label: __( 'Background Color' ),
+						},
+					] }
+				/>
+			</InspectorControls>
+			<div className={ classes } style={ styles }>
+				<InnerBlocks />
+			</div>
+		</Fragment>
+	);
+}
+
+export default withColors( 'backgroundColor' )( GroupEdit );

apps/gutenberg-diff/gutenberg-diff-plugin/blocks/group/index.js

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { InnerBlocks, getColorClassName } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import { registerBlockType } from '@wordpress/blocks';
+
+import './style.scss';
+
+export const name = 'gutenberg-diff/group';
+
+export const settings = {
+	title: __( 'Group' ),
+
+	icon: (
+		<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+			<Path d="M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z" />
+			<Path d="M0 0h24v24H0z" fill="none" />
+		</SVG>
+	),
+
+	category: 'layout',
+
+	description: __( 'A wrapping group acting as a container for other blocks.' ),
+
+	keywords: [ __( 'container' ), __( 'wrapper' ), __( 'row' ) ],
+
+	supports: {
+		align: [ 'wide', 'full' ],
+		anchor: true,
+		html: false,
+	},
+
+	attributes: {
+		backgroundColor: {
+			type: 'string',
+		},
+		customBackgroundColor: {
+			type: 'string',
+		},
+	},
+
+	edit,
+
+	save( { attributes } ) {
+		const { backgroundColor, customBackgroundColor } = attributes;
+
+		const backgroundClass = getColorClassName( 'background-color', backgroundColor );
+		const className = classnames( backgroundClass, {
+			'has-background': backgroundColor || customBackgroundColor,
+		} );
+
+		const styles = {
+			backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+		};
+
+		return (
+			<div className={ className } style={ styles }>
+				<InnerBlocks.Content />
+			</div>
+		);
+	},
+};
+
+registerBlockType( 'gutenberg-diff/group', settings );

apps/gutenberg-diff/gutenberg-diff-plugin/blocks/group/style.scss

@@ -0,0 +1,86 @@
+/**
+ * Group: All Alignment Settings
+ */
+
+$block-padding: 14px;
+$block-spacing: 4px;
+
+.wp-block[data-type="gutenberg-diff/group"] {
+
+  // Ensure not rendering outside the element
+  // as -1px causes overflow-x scrollbars
+  .editor-block-list__insertion-point {
+    left: 0;
+    right: 0;
+  }
+
+  // Only applied when background is added to cancel out padding
+  > .editor-block-list__block-edit > div > .wp-block-group.has-background > .editor-inner-blocks {
+    margin-top: -#{$block-padding*2 + $block-spacing};
+    margin-bottom: -#{$block-padding*2 + $block-spacing};
+  }
+
+  // Full Width Blocks
+  // specificity required to only target immediate child Blocks of Group
+  > .editor-block-list__block-edit > div > .wp-block-group > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: $block-padding*2;
+    padding-right: $block-padding*2;
+  }
+
+  // Full Width Blocks with a background (ie: has padding)
+  > .editor-block-list__block-edit > div > .wp-block-group.has-background > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+    // note: using position `left` causes hoz scrollbars so
+    // we opt to use margin instead
+    // the 30px matches the hoz padding applied in `theme.scss`
+    // added when the Block has a background set
+    margin-left: -30px;
+
+    // 60px here is x2 the hoz padding from `theme.scss` added when
+    // the Block has a background set
+    // note: also duplicated below for full width Groups
+    width: calc(100% + 60px);
+  }
+}
+
+/**
+ * Group: Full Width Alignment
+ */
+.wp-block[data-type="gutenberg-diff/group"][data-align="full"] {
+
+  // First tier of InnerBlocks must act like the container of the standard canvas
+  > .editor-block-list__block-edit > div > .wp-block-group > .editor-inner-blocks {
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 0;
+    padding-right: 0;
+
+    > .editor-block-list__layout {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  // Full Width Blocks
+  // specificity required to only target immediate child Blocks of Group
+  > .editor-block-list__block-edit > div > .wp-block-group > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+    padding-right: 0;
+    padding-left: 0;
+    left: 0;
+    width: 100%;
+    max-width: none;
+
+    // Allow to be flush with the edges of the canvas
+    > .editor-block-list__block-edit {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  // Full Width Blocks with a background (ie: has padding)
+  // note: also duplicated above for all Group widths
+  > .editor-block-list__block-edit > div > .wp-block-group.has-background > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+    width: calc(100% + 60px);
+  }
+}

apps/gutenberg-diff/gutenberg-diff-plugin/gutenberg-diff.php

@@ -0,0 +1,49 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Diff
+ */
+
+class A8C_Gutenberg_Diff {
+	static $initialized = false;
+
+	function __construct() {
+		if ( self::$initialized ) {
+			return;
+		}
+		self::$initialized = true;
+
+		add_action( 'init', array( $this, 'register_script_and_style' ), 100 );
+		add_action( 'init', array( $this, 'register_blocks' ), 100 );
+	}
+
+	function register_script_and_style() {
+		$script_dependencies = json_decode( file_get_contents(
+			plugin_dir_path( __FILE__ ) . 'dist/gutenberg-diff.deps.json'
+		), true );
+		wp_register_script(
+			'a8c-gutenberg-diff-script',
+			plugins_url( 'dist/gutenberg-diff.js', __FILE__ ),
+			is_array( $script_dependencies ) ? $script_dependencies : array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'dist/gutenberg-diff.js' )
+		);
+
+		$style_file = is_rtl()
+			? 'gutenberg-diff.rtl.css'
+			: 'gutenberg-diff.css';
+		wp_register_style(
+			'a8c-gutenberg-diff-style',
+			plugins_url( 'dist/' . $style_file, __FILE__ ),
+			array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'dist/' . $style_file )
+		);
+	}
+
+	function register_blocks() {
+		register_block_type( 'a8c/gutenberg-diff', [
+			'editor_script' => 'a8c-gutenberg-diff-script',
+			'editor_style' => 'a8c-gutenberg-diff-style',
+		] );
+	}
+}
+
+new A8C_Gutenberg_Diff();

apps/gutenberg-diff/gutenberg-diff-plugin/index.js

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+import './blocks/group/index';

apps/gutenberg-diff/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "@automattic/gutenberg-diff",
+	"version": "1.0.0-alpha.0",
+	"description": "Cherry picking new Gutenberg features that haven't been merged into core yet",
+	"sideEffects": true,
+	"repository": {
+		"type": "git",
+		"url": "git://github.com/Automattic/wp-calypso.git",
+		"directory": "apps/gutenberg-diff"
+	},
+	"private": true,
+	"author": "Automattic, Inc.",
+	"license": "GPL-2.0-or-later",
+	"bugs": {
+		"url": "https://github.com/Automattic/wp-calypso/issues"
+	},
+	"homepage": "https://github.com/Automattic/wp-calypso",
+	"scripts": {
+		"bundle": "calypso-build",
+		"dev": "npm run bundle",
+		"build": "NODE_ENV=production npm run bundle",
+		"clean": "npx rimraf gutenberg-diff-plugin/dist"
+	},
+	"dependencies": {
+		"@wordpress/blocks": "^6.2.3",
+		"@wordpress/components": "^7.3.0",
+		"@wordpress/compose": "^3.2.0",
+		"@wordpress/data": "^4.4.0",
+		"@wordpress/editor": "^9.2.4",
+		"@wordpress/element": "^2.3.0",
+		"@wordpress/i18n": "^3.3.0",
+		"classnames": "^2.2.6",
+		"lodash": "^4.17.11"
+	}
+}

apps/gutenberg-diff/webpack.config.js

@@ -0,0 +1,48 @@
+/**
+ **** WARNING: No ES6 modules here. Not transpiled! ****
+ */
+/* eslint-disable import/no-nodejs-modules */
+
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line import/no-extraneous-dependencies
+const getBaseWebpackConfig = require( '@automattic/calypso-build/webpack.config.js' );
+const path = require( 'path' );
+
+/**
+ * Internal variables
+ */
+const isDevelopment = process.env.NODE_ENV !== 'production';
+
+/**
+ * Return a webpack config object
+ *
+ * Arguments to this function replicate webpack's so this config can be used on the command line,
+ * with individual options overridden by command line args.
+ *
+ * @see {@link https://webpack.js.org/configuration/configuration-types/#exporting-a-function}
+ * @see {@link https://webpack.js.org/api/cli/}
+ *
+ * @param  {object}  env                           environment options
+ * @param  {object}  argv                          options map
+ * @param  {object}  argv.source                   "plugin" or "theme"
+ * @return {object}                                webpack config
+ */
+function getWebpackConfig( env = {}, argv = {} ) {
+	env.WP = true;
+
+	argv.entry = path.join( __dirname, 'gutenberg-diff-plugin', 'index.js' );
+	argv[ 'output-path' ] = path.join( __dirname, 'gutenberg-diff-plugin', 'dist' );
+	argv[ 'output-filename' ] = 'gutenberg-diff.js';
+
+	const webpackConfig = getBaseWebpackConfig( env, argv );
+
+	return {
+		...webpackConfig,
+		watch: isDevelopment,
+		devtool: isDevelopment ? 'inline-cheap-source-map' : false,
+	};
+}
+
+module.exports = getWebpackConfig;