diff --git a/blocks/editable/index.js b/blocks/editable/index.js index 58875845230a6c..1f87da1609920e 100644 --- a/blocks/editable/index.js +++ b/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; diff --git a/blocks/library/button/editor.scss b/blocks/library/button/editor.scss index 1a7551cee2194c..0ef5b887497157 100644 --- a/blocks/library/button/editor.scss +++ b/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; } diff --git a/blocks/library/categories/editor.scss b/blocks/library/categories/editor.scss index d40346c0b43f9d..3cdcae84815275 100644 --- a/blocks/library/categories/editor.scss +++ b/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; diff --git a/blocks/library/cover-image/editor.scss b/blocks/library/cover-image/editor.scss index 80fa2f17294ff3..84164588c1a58a 100644 --- a/blocks/library/cover-image/editor.scss +++ b/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; } diff --git a/blocks/library/freeform/editor.scss b/blocks/library/freeform/editor.scss index 6b921969c645e4..f2a39d42b2da4a 100644 --- a/blocks/library/freeform/editor.scss +++ b/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 { diff --git a/blocks/library/gallery/editor.scss b/blocks/library/gallery/editor.scss index 5a2f09add7d5c9..151c856d1d81c9 100644 --- a/blocks/library/gallery/editor.scss +++ b/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; } diff --git a/blocks/library/heading/editor.scss b/blocks/library/heading/editor.scss index cf488f8916887f..722abc33ae49a9 100644 --- a/blocks/library/heading/editor.scss +++ b/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, diff --git a/blocks/library/image/editor.scss b/blocks/library/image/editor.scss index 3fcf4e79e2b8a8..d5858bb067c471 100644 --- a/blocks/library/image/editor.scss +++ b/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; diff --git a/blocks/library/latest-posts/editor.scss b/blocks/library/latest-posts/editor.scss index 1bdc9ca4d7b78c..ba9538ed844aee 100644 --- a/blocks/library/latest-posts/editor.scss +++ b/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; diff --git a/blocks/library/more/editor.scss b/blocks/library/more/editor.scss index 9fe06ecf878c37..334060fca22af7 100644 --- a/blocks/library/more/editor.scss +++ b/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' ); } } diff --git a/blocks/library/pullquote/editor.scss b/blocks/library/pullquote/editor.scss index 6deb68c1433006..2924c16cdc075a 100644 --- a/blocks/library/pullquote/editor.scss +++ b/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; diff --git a/blocks/library/table/editor.scss b/blocks/library/table/editor.scss index 5f9ed5805bf381..908ecdec9902ee 100644 --- a/blocks/library/table/editor.scss +++ b/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; diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss index c1732644c80894..59e97538ba24c0 100644 --- a/editor/assets/stylesheets/_z-index.scss +++ b/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, diff --git a/editor/assets/stylesheets/main.scss b/editor/assets/stylesheets/main.scss index f68ee6b43b327c..eac479612217a4 100644 --- a/editor/assets/stylesheets/main.scss +++ b/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; diff --git a/editor/modes/visual-editor/block-contextual-toolbar.js b/editor/components/block-list/block-contextual-toolbar.js similarity index 93% rename from editor/modes/visual-editor/block-contextual-toolbar.js rename to editor/components/block-list/block-contextual-toolbar.js index 8f28fc6f51339c..ffd5ff0657eee0 100644 --- a/editor/modes/visual-editor/block-contextual-toolbar.js +++ b/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 } ) { diff --git a/editor/modes/visual-editor/block-crash-boundary.js b/editor/components/block-list/block-crash-boundary.js similarity index 100% rename from editor/modes/visual-editor/block-crash-boundary.js rename to editor/components/block-list/block-crash-boundary.js diff --git a/editor/modes/visual-editor/block-crash-warning.js b/editor/components/block-list/block-crash-warning.js similarity index 85% rename from editor/modes/visual-editor/block-crash-warning.js rename to editor/components/block-list/block-crash-warning.js index 52dcab22852dd7..f712961a4c4dd4 100644 --- a/editor/modes/visual-editor/block-crash-warning.js +++ b/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 = ( diff --git a/editor/modes/visual-editor/block-drop-zone.js b/editor/components/block-list/block-drop-zone.js similarity index 100% rename from editor/modes/visual-editor/block-drop-zone.js rename to editor/components/block-list/block-drop-zone.js diff --git a/editor/modes/visual-editor/block-html.js b/editor/components/block-list/block-html.js similarity index 96% rename from editor/modes/visual-editor/block-html.js rename to editor/components/block-list/block-html.js index 4a6e62271d2393..7f155696a8140e 100644 --- a/editor/modes/visual-editor/block-html.js +++ b/editor/components/block-list/block-html.js @@ -54,7 +54,7 @@ class BlockHTML extends Component { const { html } = this.state; return ( 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 ); diff --git a/editor/modes/visual-editor/block-list.js b/editor/components/block-list/index.js similarity index 95% rename from editor/modes/visual-editor/block-list.js rename to editor/components/block-list/index.js index 3a4fd2bfb951b8..cc2ba18d53a8b5 100644 --- a/editor/modes/visual-editor/block-list.js +++ b/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 (
- { !! blocks.length && } + { !! blocks.length && } { flatMap( blocks, ( uid ) => [ - , - , ] ) } { ! blocks.length && -
+
-

+