Merge pull request #3546 from WordPress/move/block-list

Editor: Extract BlockList as reusable component

blocks/editable/index.js

@@ -361,7 +361,7 @@ export default class Editable extends Component {
 		// Find the parent "relative" positioned container
 		const container = this.props.inlineToolbar ?
 			this.editor.getBody().closest( '.blocks-editable' ) :
-			this.editor.getBody().closest( '.editor-visual-editor__block' );
+			this.editor.getBody().closest( '.editor-block-list__block' );
 		const containerPosition = container.getBoundingClientRect();
 		const blockPadding = 14;
 		const blockMoverMargin = 18;

blocks/library/button/editor.scss

@@ -1,6 +1,6 @@
 $blocks-button__height: 46px;
 
-.editor-visual-editor__block[data-type="core/button"] {
+.editor-block-list__block[data-type="core/button"] {
 	&[data-align="center"] {
 		text-align: center;
 	}

blocks/library/categories/editor.scss

@@ -1,6 +1,4 @@
-
-.editor-visual-editor__block[data-type="core/categories"] {
-
+.editor-block-list__block[data-type="core/categories"] {
 	.wp-block-categories ul {
 		padding-left: 2.5em;
 

blocks/library/cover-image/editor.scss

@@ -1,4 +1,4 @@
-.editor-visual-editor__block[data-type="core/cover-image"] {
+.editor-block-list__block[data-type="core/cover-image"] {
 	.blocks-editable__tinymce[data-is-empty="true"]:before {
 		position: inherit;
 	}

blocks/library/freeform/editor.scss

@@ -1,4 +1,4 @@
-.editor-visual-editor__block[data-type="core/freeform"] .blocks-editable__tinymce {
+.editor-block-list__block[data-type="core/freeform"] .blocks-editable__tinymce {
 	margin-top: $item-spacing;
 
 	p {

blocks/library/gallery/editor.scss

@@ -3,7 +3,7 @@
 	margin-bottom: -16px;
 }
 
-.editor-visual-editor__block[data-type="core/gallery"] .editor-visual-editor__block-edit {
+.editor-block-list__block[data-type="core/gallery"] .editor-block-list__block-edit {
 	overflow: hidden;
 }
 

blocks/library/heading/editor.scss

@@ -1,4 +1,4 @@
-.editor-visual-editor__block[data-type="core/heading"] {
+.editor-block-list__block[data-type="core/heading"] {
 	h1,
 	h2,
 	h3,

blocks/library/image/editor.scss

@@ -52,7 +52,7 @@
 	left: -6px !important;
 }
 
-.editor-visual-editor__block[data-type="core/image"] {
+.editor-block-list__block[data-type="core/image"] {
 	.blocks-format-toolbar__link-modal {
 		top: 0;
 		left: 0;
@@ -73,8 +73,8 @@
 	}
 }
 
-.editor-visual-editor__block[data-type="core/image"][data-align="right"],
-.editor-visual-editor__block[data-type="core/image"][data-align="left"] {
+.editor-block-list__block[data-type="core/image"][data-align="right"],
+.editor-block-list__block[data-type="core/image"][data-align="left"] {
 	max-width: none !important;
 	&[data-resized="false"] {
 		max-width: 370px !important;

blocks/library/latest-posts/editor.scss

@@ -1,5 +1,5 @@
 
-.editor-visual-editor__block[data-type="core/latest-posts"] {
+.editor-block-list__block[data-type="core/latest-posts"] {
 
 	.wp-block-latest-posts {
 		padding-left: 2.5em;

blocks/library/more/editor.scss

@@ -1,9 +1,9 @@
-.editor-visual-editor__block[data-type="core/more"] {
+.editor-block-list__block[data-type="core/more"] {
 	max-width: 100%;
 	text-align: center;
 }
 
-.editor-visual-editor__block .wp-block-more {
+.editor-block-list__block .wp-block-more {
 	input {
 		font-size: 12px;
 		text-transform: uppercase;
@@ -29,6 +29,6 @@
 		left: $block-mover-padding-visible + $block-padding;
 		right: $block-mover-padding-visible + $block-padding;
 		border-top: 3px dashed $light-gray-700;
-		z-index: z-index( '.editor-visual-editor__block .wp-block-more:before' );
+		z-index: z-index( '.editor-block-list__block .wp-block-more:before' );
 	}
 }

blocks/library/pullquote/editor.scss

@@ -1,4 +1,4 @@
-.editor-visual-editor__block[data-type="core/pullquote"] {
+.editor-block-list__block[data-type="core/pullquote"] {
 	&[data-align="left"],
 	&[data-align="right"] {
 		max-width: 400px;

blocks/library/table/editor.scss

@@ -1,4 +1,4 @@
-.editor-visual-editor__block[data-type="core/table"] {
+.editor-block-list__block[data-type="core/table"] {
 
 	.editor-block-toolbar__group > div:not(.editor-block-toolbar__mobile-tools) {
 		display: flex;

editor/assets/stylesheets/_z-index.scss

@@ -4,12 +4,12 @@
 
 $z-layers: (
 	'.editor-block-switcher__arrow': 1,
-	'.editor-visual-editor__block:before': -1,
-	'.editor-visual-editor__block .wp-block-more:before': -1,
-	'.editor-visual-editor__block {core/image aligned left or right}': 20,
+	'.editor-block-list__block:before': -1,
+	'.editor-block-list__block .wp-block-more:before': -1,
+	'.editor-block-list__block {core/image aligned left or right}': 20,
 	'.freeform-toolbar': 10,
 	'.editor-warning': 1,
-	'.editor-visual-editor__sibling-inserter': 1,
+	'.editor-block-list__sibling-inserter': 1,
 	'.components-form-toggle__input': 1,
 	'.editor-format-list__menu': 1,
 	'.editor-inserter__tabs': 1,

editor/assets/stylesheets/main.scss

@@ -90,7 +90,7 @@ body.gutenberg-editor-page {
 }
 
 .editor-post-title,
-.editor-visual-editor__block {
+.editor-block-list__block {
 	input,
 	textarea {
 		border-radius: 4px;

editor/modes/visual-editor/block-contextual-toolbar.js → editor/components/block-list/block-contextual-toolbar.js

@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import NavigableToolbar from '../../navigable-toolbar';
-import { BlockToolbar } from '../../components';
+import { BlockToolbar } from '../';
 import { isFeatureActive } from '../../selectors';
 
 function BlockContextualToolbar( { hasFixedToolbar } ) {

editor/modes/visual-editor/block-crash-warning.js → editor/components/block-list/block-crash-warning.js

@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { Warning } from '../../components';
+import Warning from '../warning';
 
 const warning = (
 	<Warning>

editor/modes/visual-editor/block-html.js → editor/components/block-list/block-html.js

@@ -54,7 +54,7 @@ class BlockHTML extends Component {
 		const { html } = this.state;
 		return (
 			<TextareaAutosize
-				className="blocks-visual-editor__block-html-textarea"
+				className="editor-block-list__block-html-textarea"
 				value={ html }
 				onBlur={ this.onBlur }
 				onChange={ this.onChange }

editor/modes/visual-editor/block.js → editor/components/block-list/block.js

@@ -16,8 +16,8 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import BlockMover from '../../components/block-mover';
-import BlockSettingsMenu from '../../components/block-settings-menu';
+import BlockMover from '../block-mover';
+import BlockSettingsMenu from '../block-settings-menu';
 import InvalidBlockWarning from './invalid-block-warning';
 import BlockCrashWarning from './block-crash-warning';
 import BlockCrashBoundary from './block-crash-boundary';
@@ -56,7 +56,31 @@ import {
 
 const { BACKSPACE, ESCAPE, DELETE, ENTER, UP, RIGHT, DOWN, LEFT } = keycodes;
 
-class VisualEditorBlock extends Component {
+/**
+ * Given a DOM node, finds the closest scrollable container node.
+ *
+ * @param  {Element}  node Node from which to start
+ * @return {?Element}      Scrollable container node, if found
+ */
+function getScrollContainer( node ) {
+	if ( ! node ) {
+		return;
+	}
+
+	// Scrollable if scrollable height exceeds displayed...
+	if ( node.scrollHeight > node.clientHeight ) {
+		// ...except when overflow is defined to be hidden or visible
+		const { overflowY } = window.getComputedStyle( node );
+		if ( /(auto|scroll)/.test( overflowY ) ) {
+			return node;
+		}
+	}
+
+	// Continue traversing
+	return getScrollContainer( node.parentNode );
+}
+
+class BlockListBlock extends Component {
 	constructor() {
 		super( ...arguments );
 
@@ -91,9 +115,6 @@ class VisualEditorBlock extends Component {
 		if ( this.props.isTyping ) {
 			document.addEventListener( 'mousemove', this.stopTypingOnMouseMove );
 		}
-
-		// Not Ideal, but it's the easiest way to get the scrollable container
-		this.editorLayout = document.querySelector( '.editor-layout__content' );
 	}
 
 	componentWillReceiveProps( newProps ) {
@@ -109,9 +130,13 @@ class VisualEditorBlock extends Component {
 	componentDidUpdate( prevProps ) {
 		// Preserve scroll prosition when block rearranged
 		if ( this.previousOffset ) {
-			this.editorLayout.scrollTop = this.editorLayout.scrollTop +
-				this.node.getBoundingClientRect().top -
-				this.previousOffset;
+			const scrollContainer = getScrollContainer( this.node );
+			if ( scrollContainer ) {
+				scrollContainer.scrollTop = scrollContainer.scrollTop +
+					this.node.getBoundingClientRect().top -
+					this.previousOffset;
+			}
+
 			this.previousOffset = null;
 		}
 
@@ -324,7 +349,7 @@ class VisualEditorBlock extends Component {
 		const { isHovered, isSelected, isMultiSelected, isFirstMultiSelected, focus } = this.props;
 		const showUI = isSelected && ( ! this.props.isTyping || ( focus && focus.collapsed === false ) );
 		const { error } = this.state;
-		const wrapperClassName = classnames( 'editor-visual-editor__block', {
+		const wrapperClassName = classnames( 'editor-block-list__block', {
 			'has-warning': ! isValid || !! error,
 			'is-selected': showUI,
 			'is-multi-selected': isMultiSelected,
@@ -369,7 +394,7 @@ class VisualEditorBlock extends Component {
 					onMouseDown={ this.onPointerDown }
 					onKeyDown={ this.onKeyDown }
 					onFocus={ this.onFocus }
-					className="editor-visual-editor__block-edit"
+					className="editor-block-list__block-edit"
 					tabIndex="0"
 					aria-label={ blockLabel }
 				>
@@ -487,4 +512,4 @@ export default connect(
 			dispatch( editPost( { meta } ) );
 		},
 	} )
-)( VisualEditorBlock );
+)( BlockListBlock );

editor/modes/visual-editor/block-list.js → editor/components/block-list/index.js

@@ -25,8 +25,9 @@ import { serialize, getDefaultBlockName, createBlock } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
-import VisualEditorBlock from './block';
-import VisualEditorSiblingInserter from './sibling-inserter';
+import './style.scss';
+import BlockListBlock from './block';
+import BlockListSiblingInserter from './sibling-inserter';
 import BlockDropZone from './block-drop-zone';
 import {
 	getBlockUids,
@@ -38,7 +39,7 @@ import {
 } from '../../selectors';
 import { insertBlock, startMultiSelect, stopMultiSelect, multiSelect, selectBlock } from '../../actions';
 
-class VisualEditorBlockList extends Component {
+class BlockList extends Component {
 	constructor( props ) {
 		super( props );
 
@@ -209,22 +210,22 @@ class VisualEditorBlockList extends Component {
 
 		return (
 			<div>
-				{ !! blocks.length && <VisualEditorSiblingInserter /> }
+				{ !! blocks.length && <BlockListSiblingInserter /> }
 				{ flatMap( blocks, ( uid ) => [
-					<VisualEditorBlock
+					<BlockListBlock
 						key={ 'block-' + uid }
 						uid={ uid }
 						blockRef={ this.setBlockRef }
 						onSelectionStart={ this.onSelectionStart }
 						onShiftSelection={ this.onShiftSelection }
 					/>,
-					<VisualEditorSiblingInserter
+					<BlockListSiblingInserter
 						key={ 'sibling-inserter-' + uid }
 						uid={ uid }
 					/>,
 				] ) }
 				{ ! blocks.length &&
-					<div className="editor-visual-editor__placeholder">
+					<div className="editor-block-list__placeholder">
 						<BlockDropZone />
 						<input
 							type="text"
@@ -270,4 +271,4 @@ export default connect(
 			dispatch( { type: 'REMOVE_BLOCKS', uids } );
 		},
 	} )
-)( VisualEditorBlockList );
+)( BlockList );

editor/modes/visual-editor/invalid-block-warning.js → editor/components/block-list/invalid-block-warning.js

@@ -8,11 +8,6 @@ import { connect } from 'react-redux';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { Warning } from '../../components';
 import {
 	getBlockType,
 	getUnknownTypeHandlerName,
@@ -23,6 +18,7 @@ import {
  * Internal dependencies
  */
 import { replaceBlock } from '../../actions';
+import Warning from '../warning';
 
 function InvalidBlockWarning( { ignoreInvalid, switchToBlockType } ) {
 	const htmlBlockName = 'core/html';
@@ -37,7 +33,7 @@ function InvalidBlockWarning( { ignoreInvalid, switchToBlockType } ) {
 				'Overwrite the external changes or Convert to %s or %s to keep ' +
 				'your changes.'
 			), defaultBlockType.title, htmlBlockType.title ) }</p>
-			<p className="visual-editor__invalid-block-warning-buttons">
+			<p>
 				<Button
 					onClick={ ignoreInvalid }
 					isLarge

editor/modes/visual-editor/multi-controls.js → editor/components/block-list/multi-controls.js

@@ -6,14 +6,14 @@ import { connect } from 'react-redux';
 /**
  * Internal dependencies
  */
-import BlockMover from '../../components/block-mover';
-import BlockSettingsMenu from '../../components/block-settings-menu';
+import BlockMover from '../block-mover';
+import BlockSettingsMenu from '../block-settings-menu';
 import {
 	getMultiSelectedBlockUids,
 	isMultiSelecting,
 } from '../../selectors';
 
-function VisualEditorBlockMultiControls( { multiSelectedBlockUids, isSelecting } ) {
+function BlockListMultiControls( { multiSelectedBlockUids, isSelecting } ) {
 	if ( isSelecting ) {
 		return null;
 	}
@@ -36,4 +36,4 @@ export default connect( ( state ) => {
 		multiSelectedBlockUids: getMultiSelectedBlockUids( state ),
 		isSelecting: isMultiSelecting( state ),
 	};
-} )( VisualEditorBlockMultiControls );
+} )( BlockListMultiControls );