Blocks: Introduce block settings menu toggle

editor/actions.js

@@ -263,6 +263,30 @@ export function stopTyping() {
 	};
 }
 
+/**
+ * Returns an action object used in signalling that the user toggled the sidebar
+ *
+ * @return {Object}         Action object
+ */
+export function toggleSidebar() {
+	return {
+		type: 'TOGGLE_SIDEBAR',
+	};
+}
+
+/**
+ * Returns an action object used in signalling that the user switched the active sidebar tab panel
+ *
+ * @param  {String} panel   The panel name
+ * @return {Object}         Action object
+ */
+export function setActivePanel( panel ) {
+	return {
+		type: 'SET_ACTIVE_PANEL',
+		panel,
+	};
+}
+
 /**
  * Returns an action object used in signalling that the user toggled a sidebar panel
  *

editor/block-mover/style.scss

@@ -1,7 +1,7 @@
 .editor-block-mover {
 	position: absolute;
 	top: 0;
-	left: 0;
+	left: 4px;
 	height: $text-editor-font-size * 4; // same height as an empty paragraph
 	padding: 6px 14px 6px 0; // handles hover area
 	z-index: z-index( '.editor-block-mover' );

editor/block-settings-menu/content.js

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { IconButton } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { isEditorSidebarOpened } from '../selectors';
+import { selectBlock, removeBlock, toggleSidebar, setActivePanel } from '../actions';
+
+function BlockSettingsMenuContent( { onDelete, onSelect, isSidebarOpened, onToggleSidebar, onShowInspector } ) {
+	const toggleInspector = () => {
+		onSelect();
+		onShowInspector();
+		if ( ! isSidebarOpened ) {
+			onToggleSidebar();
+		}
+	};
+
+	return (
+		<div className="editor-block-settings-menu__content">
+			<IconButton
+				className="editor-block-settings-menu__control"
+				onClick={ toggleInspector }
+				icon="admin-generic"
+				label={ __( 'Show inspector' ) }
+			/>
+			<IconButton
+				className="editor-block-settings-menu__control"
+				onClick={ onDelete }
+				icon="trash"
+				label={ __( 'Delete the block' ) }
+			/>
+		</div>
+	);
+}
+
+export default connect(
+	( state ) => ( {
+		isSidebarOpened: isEditorSidebarOpened( state ),
+	} ),
+	( dispatch, ownProps ) => ( {
+		onDelete() {
+			dispatch( removeBlock( ownProps.uid ) );
+		},
+		onSelect() {
+			dispatch( selectBlock( ownProps.uid ) );
+		},
+		onShowInspector() {
+			dispatch( setActivePanel( 'block' ) );
+		},
+		onToggleSidebar() {
+			dispatch( toggleSidebar() );
+		},
+	} )
+)( BlockSettingsMenuContent );

editor/block-settings-menu/index.js

@@ -1,70 +1,66 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { connect } from 'react-redux';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { IconButton } from '@wordpress/components';
+import { Component } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import { isEditorSidebarOpened } from '../selectors';
+import BlockSettingsMenuContent from './content';
 import { selectBlock } from '../actions';
 
-function BlockSettingsMenu( { onDelete, onSelect, isSidebarOpened, toggleSidebar, setActivePanel } ) {
-	const toggleInspector = () => {
-		onSelect();
-		setActivePanel();
-		if ( ! isSidebarOpened ) {
-			toggleSidebar();
-		}
-	};
+class BlockSettingsMenu extends Component {
+	constructor() {
+		super( ...arguments );
+		this.toggleMenu = this.toggleMenu.bind( this );
+		this.state = {
+			opened: false,
+		};
+	}
 
-	return (
-		<div className="editor-block-settings-menu">
-			<IconButton
-				className="editor-block-settings-menu__control"
-				onClick={ toggleInspector }
-				icon="admin-generic"
-				label={ __( 'Show inspector' ) }
-			/>
-			<IconButton
-				className="editor-block-settings-menu__control"
-				onClick={ onDelete }
-				icon="trash"
-				label={ __( 'Delete the block' ) }
-			/>
-		</div>
-	);
+	toggleMenu() {
+		this.props.onSelect();
+		this.setState( ( state ) => ( {
+			opened: ! state.opened,
+		} ) );
+	}
+
+	render() {
+		const { opened } = this.state;
+		const { uid } = this.props;
+		const toggleClassname = classnames( 'editor-block-settings-menu__toggle', 'editor-block-settings-menu__control', {
+			'is-opened': opened,
+		} );
+
+		return (
+			<div className="editor-block-settings-menu">
+				<IconButton
+					className={ toggleClassname }
+					onClick={ this.toggleMenu }
+					icon="ellipsis"
+					label={ opened ? __( 'Close Settings Menu' ) : __( 'Open Settings Menu' ) }
+				/>
+
+				{ opened && <BlockSettingsMenuContent uid={ uid } /> }
+			</div>
+		);
+	}
 }
 
 export default connect(
-	( state ) => ( {
-		isSidebarOpened: isEditorSidebarOpened( state ),
-	} ),
+	undefined,
 	( dispatch, ownProps ) => ( {
-		onDelete() {
-			dispatch( {
-				type: 'REMOVE_BLOCKS',
-				uids: [ ownProps.uid ],
-			} );
-		},
 		onSelect() {
 			dispatch( selectBlock( ownProps.uid ) );
 		},
-		setActivePanel() {
-			dispatch( {
-				type: 'SET_ACTIVE_PANEL',
-				panel: 'block',
-			} );
-		},
-		toggleSidebar() {
-			dispatch( { type: 'TOGGLE_SIDEBAR' } );
-		},
 	} )
 )( BlockSettingsMenu );

editor/block-settings-menu/style.scss

@@ -1,15 +1,29 @@
 .editor-block-settings-menu {
 	position: absolute;
 	top: 0;
-	right: 0;
-	height: $text-editor-font-size * 4; // same height as an empty paragraph
+	right: 4px;
 	padding: 6px 0 6px 14px; // handles hover area
 
 	// Mobile
 	display: none;
 
 	@include break-small {
-		display: block;
+		display: flex;
+		flex-direction: column;
+	}
+}
+
+.editor-block-settings-menu__content {
+	margin-top: 8px;
+}
+
+.editor-block-settings-menu__toggle {
+	transform: rotate( 90deg );
+	transition-duration: 0.3s;
+	transition-property: transform;
+
+	&.is-opened {
+		transform: rotate(0);
 	}
 }
 
@@ -35,7 +49,7 @@
 		display: block;
 	}
 
-	&:first-child {
-		margin-bottom: 4px;
+	.editor-block-settings-menu__content &:first-child {
+		margin-bottom: 8px;
 	}
 }

editor/header/index.js

@@ -19,7 +19,7 @@ import PreviewButton from './preview-button';
 import ModeSwitcher from './mode-switcher';
 import Inserter from '../inserter';
 import { getMultiSelectedBlockUids, hasEditorUndo, hasEditorRedo, isEditorSidebarOpened } from '../selectors';
-import { clearSelectedBlock } from '../actions';
+import { clearSelectedBlock, toggleSidebar, removeBlocks } from '../actions';
 
 function Header( {
 	multiSelectedBlockUids,
@@ -29,7 +29,7 @@ function Header( {
 	redo,
 	hasRedo,
 	hasUndo,
-	toggleSidebar,
+	onToggleSidebar,
 	isSidebarOpened,
 } ) {
 	const count = multiSelectedBlockUids.length;
@@ -90,7 +90,7 @@ function Header( {
 				<PublishButton />
 				<IconButton
 					icon="admin-generic"
-					onClick={ toggleSidebar }
+					onClick={ onToggleSidebar }
 					isToggled={ isSidebarOpened }
 					label={ __( 'Settings' ) }
 				/>
@@ -109,12 +109,9 @@ export default connect(
 	} ),
 	( dispatch ) => ( {
 		onDeselect: () => dispatch( clearSelectedBlock() ),
-		onRemove: ( uids ) => dispatch( {
-			type: 'REMOVE_BLOCKS',
-			uids,
-		} ),
+		onRemove: ( uids ) => dispatch( removeBlocks( uids ) ),
 		undo: () => dispatch( { type: 'UNDO' } ),
 		redo: () => dispatch( { type: 'REDO' } ),
-		toggleSidebar: () => dispatch( { type: 'TOGGLE_SIDEBAR' } ),
+		onToggleSidebar: () => dispatch( toggleSidebar() ),
 	} )
 )( Header );

editor/sidebar/header.js

@@ -13,8 +13,9 @@ import { IconButton } from '@wordpress/components';
  * Internal Dependencies
  */
 import { getActivePanel } from '../selectors';
+import { toggleSidebar, setActivePanel } from '../actions';
 
-const SidebarHeader = ( { panel, onSetPanel, toggleSidebar } ) => {
+const SidebarHeader = ( { panel, onSetPanel, onToggleSidebar } ) => {
 	return (
 		<div className="components-panel__header editor-sidebar__panel-tabs">
 			<button
@@ -32,7 +33,7 @@ const SidebarHeader = ( { panel, onSetPanel, toggleSidebar } ) => {
 				{ __( 'Block' ) }
 			</button>
 			<IconButton
-				onClick={ toggleSidebar }
+				onClick={ onToggleSidebar }
 				icon="no-alt"
 				label={ __( 'Close settings' ) }
 			/>
@@ -45,12 +46,7 @@ export default connect(
 		panel: getActivePanel( state ),
 	} ),
 	( dispatch ) => ( {
-		onSetPanel( panel ) {
-			dispatch( {
-				type: 'SET_ACTIVE_PANEL',
-				panel: panel,
-			} );
-		},
-		toggleSidebar: () => dispatch( { type: 'TOGGLE_SIDEBAR' } ),
+		onSetPanel: ( panel ) => dispatch( setActivePanel( panel ) ),
+		onToggleSidebar: () => dispatch( toggleSidebar() ),
 	} )
 )( SidebarHeader );