Allow drag to different page

assets/src/stories-editor/blocks/amp-story-page/edit.css

@@ -76,6 +76,10 @@
 	opacity: .5;
 }
 
+.editor-block-list__layout [data-type="amp/amp-story-page"].amp-page-draggable-hover {
+	opacity: 1;
+}
+
 .editor-block-list__layout [data-type="amp/amp-story-page"].amp-page-inactive > div {
 	pointer-events: none;
 }

assets/src/stories-editor/components/block-mover/block-draggable.js

@@ -10,28 +10,64 @@ import PropTypes from 'prop-types';
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { withDispatch, withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { cloneBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import Draggable from './draggable';
+import { isBlockAllowedOnPage } from '../../helpers';
 
-const BlockDraggable = ( { children, clientId, blockName, rootClientId, blockElementId, index, onDragStart, onDragEnd } ) => {
+const BlockDraggable = ( { children, clientId, blockName, rootClientId, blockElementId, index, onDragStart, onDragEnd, onNeighborDrop, getNeighborPageId } ) => {
 	const transferData = {
 		type: 'block',
 		srcIndex: index,
 		srcRootClientId: rootClientId,
 		srcClientId: clientId,
 	};
 
+	// This holds the currently highlighted element
+	const currentHoverElement = { pageId: null, current: null };
+
+	/**
+	 * Highlight neighboring page on hover. Neigboring page is given by offset.
+	 *
+	 * @param {number} offset  Integer specifying offset from current page - e.g. -2 on page 3 will return id of page 1. Page indices are zero-based.
+	 */
+	const onNeighborHover = ( offset ) => {
+		// Get neighboring page.
+		const newPageId = getNeighborPageId( offset );
+		const hasHighlightChanged = newPageId !== currentHoverElement.pageId;
+
+		if ( ! hasHighlightChanged ) {
+			return;
+		}
+
+		currentHoverElement.pageId = newPageId;
+
+		// Unhighlight old highlighted page.
+		if ( currentHoverElement.current ) {
+			currentHoverElement.current.classList.remove( 'amp-page-draggable-hover' );
+		}
+
+		// Highlight neigboring page.
+		if ( newPageId ) {
+			currentHoverElement.current = document.getElementById( `block-${ newPageId }` );
+			currentHoverElement.current.classList.add( 'amp-page-draggable-hover' );
+		}
+	};
+
 	return (
 		<Draggable
 			blockName={ blockName }
 			elementId={ blockElementId }
 			transferData={ transferData }
 			onDragStart={ onDragStart }
 			onDragEnd={ onDragEnd }
+			onNeighborDrop={ onNeighborDrop }
+			onNeighborHover={ onNeighborHover }
 		>
 			{
 				( { onDraggableStart, onDraggableEnd } ) => {
@@ -54,13 +90,79 @@ BlockDraggable.propTypes = {
 	children: PropTypes.any.isRequired,
 	onDragStart: PropTypes.func,
 	onDragEnd: PropTypes.func,
+	onNeighborHover: PropTypes.func,
+	onNeighborDrop: PropTypes.func,
+	getNeighborPageId: PropTypes.func,
 };
 
-export default withSelect( ( select, { clientId } ) => {
-	const { getBlockIndex, getBlockRootClientId } = select( 'core/block-editor' );
-	const rootClientId = getBlockRootClientId( clientId );
-	return {
-		index: getBlockIndex( clientId, rootClientId ),
-		rootClientId,
-	};
-} )( BlockDraggable );
+export default compose(
+	withSelect( ( select, { clientId } ) => {
+		const { getBlockIndex, getBlockRootClientId, getBlockOrder, getBlock } = select( 'core/block-editor' );
+		const rootClientId = getBlockRootClientId( clientId );
+		return {
+			index: getBlockIndex( clientId, rootClientId ),
+			rootClientId,
+			block: getBlock( clientId ),
+			getBlockOrder,
+		};
+	} ),
+	withDispatch( ( dispatch, { getBlockOrder, rootClientId, clientId, block } ) => {
+		const { setCurrentPage } = dispatch( 'amp/story' );
+		const { selectBlock, removeBlock, insertBlock, updateBlockAttributes } = dispatch( 'core/block-editor' );
+
+		/**
+		 * Get id of neighbor page that is `offset` away from the current page.
+		 *
+		 * If no page exists in that direction, if offset is zero or if element is not allowed on that page, null will be returned.
+		 *
+		 * @param {number} offset  Integer specifying offset from current page - e.g. -2 on page 3 will return id of page 1. Page indices are zero-based.
+		 * @return {string} Returns id of target page or null if element can't be dropped there for any reason.
+		 */
+		const getNeighborPageId = ( offset ) => {
+			const pages = getBlockOrder();
+			const currentPageIndex = pages.findIndex( ( i ) => i === rootClientId );
+			const newPageIndex = currentPageIndex + offset;
+			const isInsidePageCount = newPageIndex >= 0 && newPageIndex < pages.length;
+			const newPageId = pages[ newPageIndex ];
+			const isAllowedOnPage = isBlockAllowedOnPage( block.name, newPageId );
+
+			// Do we even have a legal neighbor in that direction? (offset=0 is not a neighbor)
+			if ( offset === 0 || ! isInsidePageCount || ! isAllowedOnPage ) {
+				return null;
+			}
+
+			return newPageId;
+		};
+
+		/**
+		 * Drop this element on the page `offset` away from the current page (if possible). If dropped, update the position of the element on the new page.
+		 *
+		 * Currently this function removes the old element and creates a clone on the new page.
+		 *
+		 * @param {number} offset  Integer specifying offset from current page - e.g. -2 on page 3 will return id of page 1. Page indices are zero-based.
+		 * @param {Object} newAttributes  Object with attributes to update on element on new page.
+		 */
+		const onNeighborDrop = ( offset, newAttributes ) => {
+			const newPageId = getNeighborPageId( offset );
+			if ( ! newPageId ) {
+				return;
+			}
+
+			// Remove block and add cloned block to new page.
+			removeBlock( clientId );
+			const clonedBlock = cloneBlock( block );
+			insertBlock( clonedBlock, null, newPageId );
+			updateBlockAttributes( clonedBlock.clientId, newAttributes );
+
+			// Switch to new page.
+			setCurrentPage( newPageId );
+			selectBlock( newPageId );
+		};
+
+		return {
+			onNeighborDrop,
+			getNeighborPageId,
+		};
+	} ),
+)( BlockDraggable );
+

assets/src/stories-editor/components/block-mover/draggable.js

@@ -17,12 +17,15 @@ import { withSafeTimeout } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { getPixelsFromPercentage } from '../../helpers';
+import { getPixelsFromPercentage, getPercentageFromPixels, getRelativeElementPosition } from '../../helpers';
 import {
 	STORY_PAGE_INNER_WIDTH,
 	STORY_PAGE_INNER_HEIGHT,
 } from '../../constants';
 
+const PAGE_BORDER = 50;
+const PAGE_AND_BORDER = STORY_PAGE_INNER_WIDTH + PAGE_BORDER;
+
 const { Image, navigator } = window;
 
 const cloneWrapperClass = 'components-draggable__clone';
@@ -61,13 +64,33 @@ class Draggable extends Component {
 	 * @param {Object} event The non-custom DragEvent.
 	 */
 	onDragEnd = ( event ) => {
-		const { onDragEnd = noop } = this.props;
+		const { onNeighborDrop, blockName, setTimeout, onDragEnd = noop } = this.props;
 		if ( event ) {
 			event.preventDefault();
 		}
 
+		// Attempt drop on neighbor if offset
+		if ( this.pageOffset !== 0 ) {
+			// All this is about calculating the position of the (correct) element on the new page.
+			const currentElementTop = parseInt( this.cloneWrapper.style.top );
+			const currentElementLeft = parseInt( this.cloneWrapper.style.left );
+			const newLeft = currentElementLeft - ( this.pageOffset * PAGE_AND_BORDER );
+			const isCTABlock = 'amp/amp-story-cta' === blockName;
+			const baseHeight = isCTABlock ? STORY_PAGE_INNER_HEIGHT / 5 : STORY_PAGE_INNER_HEIGHT;
+			const x = getPercentageFromPixels( 'x', newLeft, STORY_PAGE_INNER_WIDTH );
+			const y = getPercentageFromPixels( 'y', currentElementTop, baseHeight );
+			const xAttribute = isCTABlock ? 'btnPositionLeft' : 'positionLeft';
+			const yAttribute = isCTABlock ? 'btnPositionTop' : 'positionTop';
+			const newAttributes = {
+				[ xAttribute ]: x,
+				[ yAttribute ]: y,
+			};
+
+			onNeighborDrop( this.pageOffset, newAttributes );
+		}
+
 		this.resetDragState();
-		this.props.setTimeout( onDragEnd );
+		setTimeout( onDragEnd );
 	}
 
 	/**
@@ -76,6 +99,7 @@ class Draggable extends Component {
 	 * @param  {Object} event The non-custom DragEvent.
 	 */
 	onDragOver = ( event ) => {
+		const { onNeighborHover } = this.props;
 		const top = parseInt( this.cloneWrapper.style.top ) + event.clientY - this.cursorTop;
 
 		// Don't allow the CTA button to go over its top limit.
@@ -91,6 +115,21 @@ class Draggable extends Component {
 		// Update cursor coordinates.
 		this.cursorLeft = event.clientX;
 		this.cursorTop = event.clientY;
+
+		// Check if mouse (*not* element, but actual cursor) is over neighboring page to either side.
+		const currentElementLeft = parseInt( this.cloneWrapper.style.left );
+		const cursorLeftRelativeToPage = currentElementLeft + this.cursorLeftInsideElement;
+		const isOffRight = cursorLeftRelativeToPage > PAGE_AND_BORDER;
+		const isOffLeft = cursorLeftRelativeToPage < -PAGE_BORDER;
+		this.pageOffset = 0;
+		if ( isOffLeft || isOffRight ) {
+			// Check how far off we are to that side - on large screens you can drag elements 2+ pages over to either side.
+			this.pageOffset = ( isOffLeft ?
+				-Math.ceil( ( -PAGE_BORDER - cursorLeftRelativeToPage ) / PAGE_AND_BORDER ) :
+				Math.ceil( ( cursorLeftRelativeToPage - PAGE_AND_BORDER ) / PAGE_AND_BORDER )
+			);
+		}
+		onNeighborHover( this.pageOffset );
 	}
 
 	onDrop = () => {
@@ -152,8 +191,15 @@ class Draggable extends Component {
 		const baseHeight = isCTABlock ? STORY_PAGE_INNER_HEIGHT / 5 : STORY_PAGE_INNER_HEIGHT;
 
 		// Position clone over the original element.
-		this.cloneWrapper.style.top = `${ getPixelsFromPercentage( 'y', parseInt( clone.style.top ), baseHeight ) }px`;
-		this.cloneWrapper.style.left = `${ getPixelsFromPercentage( 'x', parseInt( clone.style.left ), STORY_PAGE_INNER_WIDTH ) }px`;
+		const top = getPixelsFromPercentage( 'y', parseInt( clone.style.top ), baseHeight );
+		const left = getPixelsFromPercentage( 'x', parseInt( clone.style.left ), STORY_PAGE_INNER_WIDTH );
+		this.cloneWrapper.style.top = `${ top }px`;
+		this.cloneWrapper.style.left = `${ left }px`;
+
+		// Get starting position information
+		const absolutePositionOfPage = getRelativeElementPosition( elementWrapper, document.documentElement );
+		const absoluteElementLeft = absolutePositionOfPage.left + left;
+		this.cursorLeftInsideElement = event.clientX - absoluteElementLeft;
 
 		clone.id = `clone-${ elementId }`;
 		clone.style.top = 0;
@@ -224,6 +270,8 @@ Draggable.propTypes = {
 	transferData: PropTypes.object,
 	onDragStart: PropTypes.func,
 	onDragEnd: PropTypes.func,
+	onNeighborDrop: PropTypes.func,
+	onNeighborHover: PropTypes.func,
 	setTimeout: PropTypes.func.isRequired,
 	children: PropTypes.any.isRequired,
 };

assets/src/stories-editor/components/inserter/menu.js

@@ -52,6 +52,7 @@ import { addQueryArgs } from '@wordpress/url';
 import BlockPreview from '../block-preview';
 import BlockTypesList from '../block-types-list';
 import { ALLOWED_TOP_LEVEL_BLOCKS } from '../../constants';
+import { isBlockAllowedOnPage } from '../../helpers';
 
 const MAX_SUGGESTED_ITEMS = 9;
 
@@ -377,8 +378,6 @@ export default compose(
 			getBlockName,
 			getBlockRootClientId,
 			getBlockSelectionEnd,
-			canInsertBlockType,
-			getBlockListSettings,
 		} = select( 'core/block-editor' );
 		const {
 			getChildBlockNames,
@@ -409,9 +408,7 @@ export default compose(
 				return true;
 			}
 
-			// canInsertBlockType() alone is not enough, see https://github.com/WordPress/gutenberg/issues/14515
-			const destinationBlockListSettings = getBlockListSettings( destinationRootClientId );
-			return canInsertBlockType( name, getCurrentPage() ) && destinationBlockListSettings && destinationBlockListSettings.allowedBlocks.includes( name );
+			return isBlockAllowedOnPage( name, getCurrentPage() );
 		} );
 
 		return {

assets/src/stories-editor/components/media-inserter/index.js

@@ -12,10 +12,11 @@ import { withDispatch, withSelect } from '@wordpress/data';
 import { DropdownMenu } from '@wordpress/components';
 import { compose, ifCondition } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
-import { processMedia } from '../../helpers';
+import { processMedia, isBlockAllowedOnPage } from '../../helpers';
 
 const POPOVER_PROPS = {
 	position: 'bottom right',
@@ -110,7 +111,7 @@ const mediaPicker = ( dialogTitle, mediaType, updateBlock ) => {
 
 const applyWithSelect = withSelect( ( select ) => {
 	const { getCurrentPage } = select( 'amp/story' );
-	const { canInsertBlockType, getBlockListSettings, getBlock } = select( 'core/block-editor' );
+	const { getBlock } = select( 'core/block-editor' );
 	const { isReordering } = select( 'amp/story' );
 
 	const currentPage = getCurrentPage();
@@ -119,11 +120,7 @@ const applyWithSelect = withSelect( ( select ) => {
 
 	return {
 		isReordering: isReordering(),
-		canInsertBlockType: ( name ) => {
-			// canInsertBlockType() alone is not enough, see https://github.com/WordPress/gutenberg/issues/14515
-			const blockSettings = getBlockListSettings( currentPage );
-			return canInsertBlockType( name, currentPage ) && blockSettings && blockSettings.allowedBlocks.includes( name );
-		},
+		canInsertBlockType: ( name ) => isBlockAllowedOnPage( name, currentPage ),
 		// As used in <HeaderToolbar> component
 		showInserter: select( 'core/edit-post' ).getEditorMode() === 'visual' && select( 'core/editor' ).getEditorSettings().richEditingEnabled,
 		mediaType,

assets/src/stories-editor/components/shortcuts/index.js

@@ -12,6 +12,11 @@ import { withDispatch, withSelect } from '@wordpress/data';
 import { IconButton } from '@wordpress/components';
 import { compose, ifCondition } from '@wordpress/compose';
 
+/**
+ * Internal dependencies
+ */
+import { isBlockAllowedOnPage } from '../../helpers';
+
 const Shortcuts = ( { insertBlock, canInsertBlockType, showInserter } ) => {
 	const blocks = [
 		'amp/amp-story-text',
@@ -48,16 +53,13 @@ Shortcuts.propTypes = {
 
 const applyWithSelect = withSelect( ( select ) => {
 	const { getCurrentPage } = select( 'amp/story' );
-	const { canInsertBlockType, getBlockListSettings } = select( 'core/block-editor' );
 	const { isReordering } = select( 'amp/story' );
 
+	const currentPage = getCurrentPage();
+
 	return {
 		isReordering: isReordering(),
-		canInsertBlockType: ( name ) => {
-			// canInsertBlockType() alone is not enough, see https://github.com/WordPress/gutenberg/issues/14515
-			const blockSettings = getBlockListSettings( getCurrentPage() );
-			return canInsertBlockType( name, getCurrentPage() ) && blockSettings && blockSettings.allowedBlocks.includes( name );
-		},
+		canInsertBlockType: ( name ) => isBlockAllowedOnPage( name, currentPage ),
 		// As used in <HeaderToolbar> component
 		showInserter: select( 'core/edit-post' ).getEditorMode() === 'visual' && select( 'core/editor' ).getEditorSettings().richEditingEnabled,
 	};