Merge branch 'master' into add/aria-attributes-on-editable

README.md

@@ -24,7 +24,7 @@ Gutenberg is built by many contributors and volunteers. Please see the full list
 - <a href="https://make.wordpress.org/core/2017/05/05/editor-how-little-blocks-work/">How Blocks Work</a>
 - <a href="https://github.com/Automattic/wp-post-grammar">WP Post Grammar Parser</a>
 - <a href="https://make.wordpress.org/core/tag/gutenberg/">Development updates on make.wordpress.org</a>
-- <a href="http://gutenberg-devdoc.surge.sh/">Documentation: Creating Blocks, Reference and Guidelines</a>
+- <a href="http://gutenberg-devdoc.surge.sh/">Documentation: Creating Blocks, Reference, and Guidelines</a>
 
 ## How You Can Contribute
 
@@ -44,6 +44,6 @@ By showing critical UI in the body of the content, many can get their basic blog
 
 **Advanced Formatting**
 
-When the Post Settings sidebar is open — which it is by default — you are essentially in advanced layout mode. By default, you'll see all your metaboxes right there.
+When the Post Settings sidebar is open — which it is by default — you are essentially in advanced layout mode. By default, you'll see all your meta boxes right there.
 
-Every block can be _inspected_ by clicking it. And every block has advanced layout options available in the inspector; text might have drop-cap, image might have fixed position scrolling. As such, block attributes fall in two camps — the most important ones available right on the block, advanced ones living in the sidebar inspector.
+Every block can be _inspected_ by clicking it. And every block has advanced layout options available in the inspector; text might have drop-cap, image might have fixed position scrolling. As such, block attributes fall into two camps — the most important ones available right on the block, advanced ones living in the sidebar inspector.

assets/js/meta-box-resize.js

@@ -41,6 +41,7 @@
 	} );
 
 	window.addEventListener( 'load', sendResize, true );
+	window.addEventListener( 'resize', sendResize, true );
 
 	sendResize();
 } )();

bin/build-plugin-zip.sh

@@ -93,6 +93,7 @@ mv gutenberg.tmp.php gutenberg.php
 status "Creating archive..."
 zip -r gutenberg.zip \
 	gutenberg.php \
+	assets/js/*.js \
 	lib/*.php \
 	blocks/library/*/*.php \
 	post-content.js \

blocks/color-palette/style.scss

@@ -122,7 +122,3 @@ $color-palette-circle-spacing: 14px;
 
 	background-clip: content-box, content-box, content-box, content-box, content-box, content-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box;
 }
-
-.blocks-color-palette__picker .chrome-picker {
-	width: 100% !important;
-}

blocks/library/freeform/old-editor.js

@@ -163,14 +163,16 @@ export default class OldEditor extends Component {
 	}
 
 	render() {
-		const { id } = this.props;
+		const { focus, id } = this.props;
 
 		return [
-			<InspectorControls key="inspector">
-				<BlockDescription>
-					<p>{ __( 'The classic editor, in block form.' ) }</p>
-				</BlockDescription>
-			</InspectorControls>,
+			focus && (
+				<InspectorControls key="inspector">
+					<BlockDescription>
+						<p>{ __( 'The classic editor, in block form.' ) }</p>
+					</BlockDescription>
+				</InspectorControls>
+			),
 			<div
 				key="toolbar"
 				id={ id + '-toolbar' }

components/popover/style.scss

@@ -67,11 +67,6 @@
 	box-shadow: $shadow-popover;
 	border: 1px solid $light-gray-500;
 	background: $white;
-	width: calc( 100vw - 20px );
-
-	@include break-medium {
-		width: 300px;
-	}
 
 	.components-popover.is-top & {
 		bottom: 100%;

editor/block-settings-menu/block-delete-button.js

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+import { flow, noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { IconButton } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { removeBlocks } from '../actions';
+
+export function BlockDeleteButton( { onDelete, onClick = noop, small = false } ) {
+	const label = __( 'Delete' );
+
+	return (
+		<IconButton
+			className="editor-block-settings-menu__control"
+			onClick={ flow( onDelete, onClick ) }
+			icon="trash"
+			label={ small ? label : undefined }
+		>
+			{ ! small && label }
+		</IconButton>
+	);
+}
+
+export default connect(
+	undefined,
+	( dispatch, ownProps ) => ( {
+		onDelete() {
+			dispatch( removeBlocks( ownProps.uids ) );
+		},
+	} )
+)( BlockDeleteButton );

editor/block-settings-menu/block-inspector-button.js

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+import { flow, noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { IconButton } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { isEditorSidebarOpened } from '../selectors';
+import { toggleSidebar, setActivePanel } from '../actions';
+
+export function BlockInspectorButton( {
+	isSidebarOpened,
+	onToggleSidebar,
+	onShowInspector,
+	onClick = noop,
+	small = false,
+} ) {
+	const toggleInspector = () => {
+		onShowInspector();
+		if ( ! isSidebarOpened ) {
+			onToggleSidebar();
+		}
+	};
+	const label = __( 'Settings' );
+
+	return (
+		<IconButton
+			className="editor-block-settings-menu__control"
+			onClick={ flow( toggleInspector, onClick ) }
+			icon="admin-generic"
+			label={ small ? label : undefined }
+		>
+			{ ! small && label }
+		</IconButton>
+	);
+}
+
+export default connect(
+	( state ) => ( {
+		isSidebarOpened: isEditorSidebarOpened( state ),
+	} ),
+	( dispatch ) => ( {
+		onShowInspector() {
+			dispatch( setActivePanel( 'block' ) );
+		},
+		onToggleSidebar() {
+			dispatch( toggleSidebar() );
+		},
+	} )
+)( BlockInspectorButton );

editor/block-settings-menu/block-mode-toggle.js

@@ -17,21 +17,23 @@ import { getBlockType } from '@wordpress/blocks';
 import { getBlockMode, getBlock } from '../selectors';
 import { toggleBlockMode } from '../actions';
 
-export function BlockModeToggle( { blockType, mode, onToggleMode } ) {
+export function BlockModeToggle( { blockType, mode, onToggleMode, small = false } ) {
 	if ( ! blockType || blockType.supportHTML === false ) {
 		return null;
 	}
 
+	const label = mode === 'visual'
+		? __( 'Edit as HTML' )
+		: __( 'Edit visually' );
+
 	return (
 		<IconButton
 			className="editor-block-settings-menu__control"
 			onClick={ onToggleMode }
 			icon="html"
+			label={ small ? label : undefined }
 		>
-			{ mode === 'visual'
-				? __( 'Edit as HTML' )
-				: __( 'Edit visually' )
-			}
+			{ ! small && label }
 		</IconButton>
 	);
 }

editor/block-settings-menu/index.js

@@ -14,10 +14,14 @@ import { IconButton, Dropdown } from '@wordpress/components';
  * Internal dependencies
  */
 import './style.scss';
-import BlockSettingsMenuContent from './content';
+import BlockInspectorButton from './block-inspector-button';
+import BlockModeToggle from './block-mode-toggle';
+import BlockDeleteButton from './block-delete-button';
 import { selectBlock } from '../actions';
 
 function BlockSettingsMenu( { uids, onSelect } ) {
+	const count = uids.length;
+
 	return (
 		<Dropdown
 			className="editor-block-settings-menu"
@@ -43,7 +47,11 @@ function BlockSettingsMenu( { uids, onSelect } ) {
 				);
 			} }
 			renderContent={ ( { onClose } ) => (
-				<BlockSettingsMenuContent uids={ uids } onClose={ onClose } />
+				<div className="editor-block-settings-menu__content">
+					<BlockInspectorButton onClick={ onClose } />
+					{ count === 1 && <BlockModeToggle uid={ uids[ 0 ] } onToggle={ onClose } /> }
+					<BlockDeleteButton uids={ uids } />
+				</div>
 			) }
 		/>
 	);

editor/block-toolbar/index.js

@@ -19,7 +19,9 @@ import { focus, keycodes } from '@wordpress/utils';
 import './style.scss';
 import BlockSwitcher from '../block-switcher';
 import BlockMover from '../block-mover';
-import BlockRightMenu from '../block-settings-menu';
+import BlockInspectorButton from '../block-settings-menu/block-inspector-button';
+import BlockModeToggle from '../block-settings-menu/block-mode-toggle';
+import BlockDeleteButton from '../block-settings-menu/block-delete-button';
 import { isMac } from '../utils/dom';
 
 /**
@@ -146,7 +148,9 @@ class BlockToolbar extends Component {
 							{ showMobileControls &&
 								<div className="editor-block-toolbar__mobile-tools-content">
 									<BlockMover uids={ [ uid ] } />
-									<BlockRightMenu uid={ uid } />
+									<BlockInspectorButton small />
+									<BlockModeToggle uid={ uid } small />
+									<BlockDeleteButton uids={ [ uid ] } small />
 								</div>
 							}
 						</Toolbar>

editor/block-toolbar/style.scss

@@ -78,17 +78,23 @@ $sticky-bottom-offset: 20px;
 		display: none;
 	}
 
-	.editor-block-mover,
-	.editor-block-settings-menu {
+	.editor-block-mover {
 		display: inline-flex;
 		height: auto;
 		position: initial;
-		.components-button {
-			margin: 0 5px;
-		}
 	}
 }
 
 .editor-block-toolbar__mobile-tools-content {
 	overflow: hidden;
+
+	.components-button {
+		margin: 0 5px 0 0;
+		padding: 0 5px;
+		width: auto;
+
+		.dashicon {
+			margin: 0;
+		}
+	}
 }

editor/header/publish-dropdown/style.scss

@@ -1,5 +1,6 @@
 .editor-publish-dropdown {
-	padding: 15px;
+	padding: 16px;
+	width: 300px;
 
 	.components-panel__body {
 		margin-left: -16px;