Merge branch 'master' into add/317-gallery-block

.editorconfig

@@ -8,7 +8,7 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 
-[{package.json,.travis.yml}]
+[{*.json,*.yml}]
 indent_style = space
 indent_size = 2
 

.eslintrc.json

@@ -8,6 +8,7 @@
 	],
 	"env": {
 		"browser": false,
+		"es6": true,
 		"node": true,
 		"mocha": true
 	},
@@ -35,6 +36,7 @@
 	"rules": {
 		"array-bracket-spacing": [ "error", "always" ],
 		"brace-style": [ "error", "1tbs" ],
+		"camelcase": [ "error", { "properties": "never" } ],
 		"comma-dangle": [ "error", "always-multiline" ],
 		"comma-spacing": "error",
 		"comma-style": "error",

.gitignore

@@ -5,3 +5,4 @@ gutenberg.pot
 *.log
 yarn.lock
 gutenberg.zip
+storybook-static

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-options/register';

.storybook/config.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import 'prismjs';
+import { configure, setAddon } from '@storybook/react';
+import infoAddon from '@storybook/addon-info';
+import { setOptions } from '@storybook/addon-options';
+
+/**
+ * Internal dependencies
+ */
+import * as element from 'element';
+import './style.scss';
+
+function loadStories() {
+	window.wp = { ...window.wp, element };
+	require( '../components/story' );
+	require( '../components/button/story' );
+}
+
+setOptions( {
+	name: 'Gutenberg',
+	url: 'https://github.com/WordPress/gutenberg',
+	goFullScreen: false,
+	showLeftPanel: true,
+	showDownPanel: true,
+	showSearchBox: false,
+	downPanelInRight: true,
+	sortStoriesByKind: false,
+} );
+setAddon( infoAddon );
+
+configure( loadStories, module );

.storybook/style.scss

@@ -0,0 +1,52 @@
+@import url( 'https://wordpress.org/wp-admin/load-styles.php?c=0&dir=ltr&load%5B%5D=common,buttons,dashicons,forms' );
+
+html {
+	height: auto;
+}
+
+body {
+	background: none;
+	padding: 20px;
+	margin: 0;
+}
+
+p, h1, h2, li {
+	// Match Info Addon Styling
+	font-family: -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
+	color: rgb(68, 68, 68);
+	-webkit-font-smoothing: antialiased;
+	font-weight: 400;
+	line-height: 1.45;
+	font-size: 15px;
+}
+
+h1 {
+	font-size: 2em;
+	margin: .67em 0;
+	font-weight: 600;
+}
+
+h2 {
+	margin: 0px 0px 10px;
+	padding: 0px;
+	font-weight: 400;
+	font-size: 22px;
+}
+
+pre {
+	font-size: 0.88em;
+	font-family: Menlo, Monaco, "Courier New", monospace;
+	background-color: rgb(250, 250, 250);
+	padding: 0.5rem;
+	line-height: 1.5;
+	overflow-x: auto !important; // Overrides the Info Addon Styling
+
+	&:before, &:after {
+		background: red;
+	}
+}
+
+code {
+	font-family: Menlo, Monaco, "Courier New", monospace;
+	background-color: rgb(250, 250, 250);
+}

.storybook/webpack.config.js

@@ -0,0 +1,35 @@
+const config = require( '../webpack.config' );
+const webpack = require( 'webpack' );
+config.module.rules = [
+	// Exclude the sass loader to override it
+	...config.module.rules.filter( ( rule ) => ! rule.test.test( '.scss' ) ),
+	{
+		test: /\.md/,
+		use: 'raw-loader',
+	},
+	{
+		test: /\.scss$/,
+		use: [
+			{ loader: 'style-loader' },
+			{ loader: 'css-loader' },
+			{ loader: 'postcss-loader' },
+			{
+				loader: 'sass-loader',
+				query: {
+					includePaths: [ 'editor/assets/stylesheets' ],
+					data: '@import "variables"; @import "mixins"; @import "animations";@import "z-index";',
+					outputStyle: 'production' === process.env.NODE_ENV ?
+						'compressed' : 'nested',
+				},
+			},
+		],
+	},
+];
+config.externals = [];
+
+// Exclude Uglify Plugin to avoid breaking the React Components Display Name
+config.plugins = config.plugins.filter( plugin => {
+	return plugin.constructor !== webpack.optimize.UglifyJsPlugin;
+} );
+
+module.exports = config;

.travis.yml

@@ -44,8 +44,7 @@ before_script:
     fi
   - |
     if [[ "$TRAVISCI" == "phpcs" ]] ; then
-      composer global require wp-coding-standards/wpcs
-      phpcs --config-set installed_paths $HOME/.composer/vendor/wp-coding-standards/wpcs
+      composer install
     fi
 
 script:
@@ -58,10 +57,19 @@ script:
     fi
   - |
     if [[ "$TRAVISCI" == "phpcs" ]] ; then
-      phpcs
+      ./vendor/bin/phpcs
     fi
   - |
     if [[ "$TRAVISCI" == "js" ]] ; then
       npm install || exit 1
       npm run ci || exit 1
     fi
+
+before_deploy:
+  - npm install && npm run build-storybook
+
+deploy:
+  provider: surge
+  project: ./storybook-static/
+  domain: gutenberg-devdoc.surge.sh
+  skip_cleanup: true

blocks/alignment-toolbar/index.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from 'i18n';
+import { Toolbar } from 'components';
+
+const ALIGNMENT_CONTROLS = [
+	{
+		icon: 'editor-alignleft',
+		title: __( 'Align left' ),
+		align: 'left',
+	},
+	{
+		icon: 'editor-aligncenter',
+		title: __( 'Align center' ),
+		align: 'center',
+	},
+	{
+		icon: 'editor-alignright',
+		title: __( 'Align right' ),
+		align: 'right',
+	},
+];
+
+export default function AlignmentToolbar( { value, onChange } ) {
+	return (
+		<Toolbar
+			controls={ ALIGNMENT_CONTROLS.map( ( control ) => {
+				const { align } = control;
+				const isActive = ( value === align );
+
+				return {
+					...control,
+					isActive,
+					onClick: () => onChange( isActive ? null : align ),
+				};
+			} ) }
+		/>
+	);
+}

blocks/api/categories.js

@@ -14,8 +14,9 @@ import { __ } from 'i18n';
 const categories = [
 	{ slug: 'common', title: __( 'Common Blocks' ) },
 	{ slug: 'formatting', title: __( 'Formatting' ) },
-	{ slug: 'embed', title: __( 'Embed' ) },
 	{ slug: 'layout', title: __( 'Layout Blocks' ) },
+	{ slug: 'widgets', title: __( 'Widgets' ) },
+	{ slug: 'embed', title: __( 'Embed' ) },
 ];
 
 /**

blocks/api/registration.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-console */
+/* eslint no-console: [ 'error', { allow: [ 'error' ] } ] */
 
 /**
  * Block settings keyed by block slug.

blocks/block-controls/index.js

@@ -8,10 +8,11 @@ import { Fill } from 'react-slot-fill';
  */
 import { Toolbar } from 'components';
 
-export default function BlockControls( { controls } ) {
+export default function BlockControls( { controls, children } ) {
 	return (
 		<Fill name="Formatting.Toolbar">
 			<Toolbar controls={ controls } />
+			{ children }
 		</Fill>
 	);
 }

blocks/editable/index.js

@@ -2,15 +2,14 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { last, isEqual, capitalize, omitBy, forEach, merge, identity, find } from 'lodash';
+import { last, isEqual, omitBy, forEach, merge, identity, find } from 'lodash';
 import { nodeListToReact } from 'dom-react';
 import { Fill } from 'react-slot-fill';
 import 'element-closest';
 
 /**
  * WordPress dependencies
  */
-import { Toolbar } from 'components';
 import { BACKSPACE, DELETE } from 'utils/keycodes';
 
 /**
@@ -20,30 +19,6 @@ import './style.scss';
 import FormatToolbar from './format-toolbar';
 import TinyMCE from './tinymce';
 
-const alignmentMap = {
-	alignleft: 'left',
-	alignright: 'right',
-	aligncenter: 'center',
-};
-
-const ALIGNMENT_CONTROLS = [
-	{
-		icon: 'editor-alignleft',
-		title: wp.i18n.__( 'Align left' ),
-		align: 'left',
-	},
-	{
-		icon: 'editor-aligncenter',
-		title: wp.i18n.__( 'Align center' ),
-		align: 'center',
-	},
-	{
-		icon: 'editor-alignright',
-		title: wp.i18n.__( 'Align right' ),
-		align: 'right',
-	},
-];
-
 function createElement( type, props, ...children ) {
 	if ( props[ 'data-mce-bogus' ] === 'all' ) {
 		return null;
@@ -78,7 +53,6 @@ export default class Editable extends wp.element.Component {
 
 		this.state = {
 			formats: {},
-			alignment: null,
 			bookmark: null,
 			empty: ! props.value || ! props.value.length,
 		};
@@ -137,7 +111,10 @@ export default class Editable extends wp.element.Component {
 			empty: ! content || ! content.length,
 		} );
 
-		if ( this.props.focus.collapsed !== collapsed ) {
+		if (
+			this.props.focus && this.props.onFocus &&
+			this.props.focus.collapsed !== collapsed
+		) {
 			this.props.onFocus( {
 				...this.props.focus,
 				collapsed,
@@ -293,12 +270,10 @@ export default class Editable extends wp.element.Component {
 		}
 		const activeFormats = this.editor.formatter.matchAll( [	'bold', 'italic', 'strikethrough' ] );
 		activeFormats.forEach( ( activeFormat ) => formats[ activeFormat ] = true );
-		const alignments = this.editor.formatter.matchAll( [ 'alignleft', 'aligncenter', 'alignright' ] );
-		const alignment = alignments.length > 0 ? alignmentMap[ alignments[ 0 ] ] : null;
 
 		const focusPosition = this.getRelativePosition( element );
 		const bookmark = this.editor.selection.getBookmark( 2, true );
-		this.setState( { alignment, bookmark, formats, focusPosition } );
+		this.setState( { bookmark, formats, focusPosition } );
 	}
 
 	updateContent() {
@@ -344,7 +319,7 @@ export default class Editable extends wp.element.Component {
 	}
 
 	componentDidUpdate( prevProps ) {
-		if ( this.props.focus !== prevProps.focus ) {
+		if ( ! isEqual( this.props.focus, prevProps.focus ) ) {
 			this.updateFocus();
 		}
 
@@ -397,28 +372,13 @@ export default class Editable extends wp.element.Component {
 		this.editor.setDirty( true );
 	}
 
-	isAlignmentActive( align ) {
-		return this.state.alignment === align;
-	}
-
-	toggleAlignment( align ) {
-		this.editor.focus();
-
-		if ( this.isAlignmentActive( align ) ) {
-			this.editor.execCommand( 'JustifyNone' );
-		} else {
-			this.editor.execCommand( 'Justify' + capitalize( align ) );
-		}
-	}
-
 	render() {
 		const {
 			tagName,
 			style,
 			value,
 			focus,
 			className,
-			showAlignments = false,
 			inlineToolbar = false,
 			formattingControls,
 			placeholder,
@@ -443,15 +403,6 @@ export default class Editable extends wp.element.Component {
 			<div className={ classes }>
 				{ focus &&
 					<Fill name="Formatting.Toolbar">
-						{ showAlignments &&
-							<Toolbar
-								controls={ ALIGNMENT_CONTROLS.map( ( control ) => ( {
-									...control,
-									onClick: () => this.toggleAlignment( control.align ),
-									isActive: this.isAlignmentActive( control.align ),
-								} ) ) }
-							/>
-						}
 						{ ! inlineToolbar && formatToolbar }
 					</Fill>
 				}