Allow drag to different page

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

@@ -76,6 +76,45 @@
 	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-draggable-hover-droppable::before,
+.editor-block-list__layout [data-type="amp/amp-story-page"].amp-page-draggable-hover-amp-amp-story-cta.amp-page-draggable-hover-droppable::before {
+	display: block;
+	content: "";
+	position: absolute;
+	top: -4px;
+	bottom: -4px;
+	left: -4px;
+	right: -4px;
+	border: 4px solid theme(primary);
+	z-index: 10;
+}
+
+.editor-block-list__layout [data-type="amp/amp-story-page"].amp-page-draggable-hover-amp-amp-story-cta.amp-page-draggable-hover-droppable::before {
+	top: calc(80% - 2px);
+}
+
+.editor-block-list__layout [data-type="amp/amp-story-page"].amp-page-draggable-hover-undroppable::after,
+.editor-block-list__layout [data-type="amp/amp-story-page"].amp-page-draggable-hover-amp-amp-story-cta.amp-page-draggable-hover-droppable::after {
+	display: block;
+	content: "";
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: #fff;
+	opacity: .8;
+	z-index: 10;
+}
+
+.editor-block-list__layout [data-type="amp/amp-story-page"].amp-page-draggable-hover-amp-amp-story-cta.amp-page-draggable-hover-droppable::after {
+	bottom: calc(20% + 2px);
+}
+
 .editor-block-list__layout [data-type="amp/amp-story-page"].amp-page-inactive > div {
 	pointer-events: none;
 }

assets/src/stories-editor/components/block-mover/README.md

@@ -9,8 +9,6 @@ In addition the component also uses default `IgnoreNestedEvents` component which
 ## Unchanged files.
 
 The following files of the component are 100% or almost unchanged:
-- block-draggable.js:
-  - This file is mainly copied from core, the only difference is switching to using internal Draggable
 - ignore-nested-events.js (unchanged)
 
 ## Modified files
@@ -19,6 +17,9 @@ draggable.js: This file has been modified to display the clone in relation to th
 - The clone styling has been changed to ignore the % values and to match the size of the original element;
 - Resizing the dragged clone has been removed.
 
+block-draggable.js: This file has been extended to allow drag between pages
+- Assumes that blocks are only draggable inside pages, not inside other types of elements
+
 block-drag-area.js: This was renamed from from drag-handle.js
 - Now wraps draggable element(s) as children, whereas it used to appear alongside them.
 - Enables dragging the entire block.

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

@@ -10,28 +10,110 @@ import PropTypes from 'prop-types';
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+import { useIsBlockAllowedOnPage, useMoveBlockToPage } from '../../helpers';
 import Draggable from './draggable';
 
-const BlockDraggable = ( { children, clientId, blockName, rootClientId, blockElementId, index, onDragStart, onDragEnd } ) => {
+const BlockDraggable = ( { children, clientId, blockName, blockElementId, onDragStart, onDragEnd } ) => {
+	const { rootClientId } = useSelect( ( select ) => select( 'core/block-editor' ).getBlockRootClientId( clientId ) );
+	const { index } = useSelect( ( select ) => select( 'core/block-editor' ).getBlockIndex( clientId, rootClientId ) );
+
 	const transferData = {
 		type: 'block',
 		srcIndex: index,
 		srcRootClientId: rootClientId,
 		srcClientId: clientId,
 	};
 
+	const { moveBlockToPage, getPageByOffset } = useMoveBlockToPage( clientId );
+
+	const isBlockAllowedOnPage = useIsBlockAllowedOnPage();
+
+	// This holds the currently highlighted element, if any
+	const hoverElement = useRef( { pageId: null, element: null, classes: [] } );
+
+	/**
+	 * Clear highlighting of pages.
+	 */
+	const clearHighlight = () => {
+		// Unhighlight old highlighted page.
+		if ( hoverElement.current.element ) {
+			hoverElement.current.element.classList.remove( ...hoverElement.current.classes );
+		}
+
+		// Reset current hover element
+		hoverElement.current = { pageId: null, element: null, classes: [] };
+	};
+
+	/**
+	 * On the page given by the offset, set classes indicating that an element drag on this page is in progress, which element is being dragged and whether a drop is allowed on this 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.
+	 */
+	const setHighlightByOffset = ( offset ) => {
+		// Get neighboring page.
+		const pageId = getPageByOffset( offset );
+		const hasHighlightChanged = pageId !== hoverElement.current.pageId;
+
+		if ( ! hasHighlightChanged ) {
+			return;
+		}
+
+		clearHighlight();
+
+		// Highlight page and mark whether drop is allowed or not.
+		if ( pageId ) {
+			// Drop is always allowed on the initial page (offset=0)
+			const isAllowed = offset === 0 || isBlockAllowedOnPage( blockName, pageId );
+			const classes = [
+				'amp-page-draggable-hover',
+				`amp-page-draggable-hover-${ blockName.replace( /\W/g, '-' ) }`,
+				isAllowed ? 'amp-page-draggable-hover-droppable' : 'amp-page-draggable-hover-undroppable',
+			];
+
+			const element = document.getElementById( `block-${ pageId }` );
+			element.classList.add( ...classes );
+
+			hoverElement.current = { element, pageId, classes };
+		}
+	};
+
+	/**
+	 * 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. Offset must be non-zero.
+	 * @param {Object} newAttributes  Object with attributes to update on element on new page.
+	 */
+	const dropElementByOffset = ( offset, newAttributes ) => {
+		const pageId = getPageByOffset( offset );
+		if ( ! pageId ) {
+			return;
+		}
+
+		if ( ! isBlockAllowedOnPage( blockName, pageId ) ) {
+			return;
+		}
+
+		moveBlockToPage( pageId, newAttributes );
+	};
+
 	return (
 		<Draggable
 			blockName={ blockName }
 			elementId={ blockElementId }
 			transferData={ transferData }
 			onDragStart={ onDragStart }
 			onDragEnd={ onDragEnd }
+			clearHighlight={ clearHighlight }
+			setHighlightByOffset={ setHighlightByOffset }
+			dropElementByOffset={ dropElementByOffset }
 		>
 			{
 				( { onDraggableStart, onDraggableEnd } ) => {
@@ -46,21 +128,13 @@ const BlockDraggable = ( { children, clientId, blockName, rootClientId, blockEle
 };
 
 BlockDraggable.propTypes = {
-	index: PropTypes.number.isRequired,
-	rootClientId: PropTypes.string,
-	clientId: PropTypes.string,
-	blockElementId: PropTypes.string,
-	blockName: PropTypes.string,
-	children: PropTypes.node.isRequired,
+	clientId: PropTypes.string.isRequired,
+	blockElementId: PropTypes.string.isRequired,
+	blockName: PropTypes.string.isRequired,
+	children: PropTypes.any.isRequired,
 	onDragStart: PropTypes.func,
 	onDragEnd: 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 BlockDraggable;
+

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

@@ -17,12 +17,21 @@ import { withSafeTimeout } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { getPixelsFromPercentage } from '../../helpers';
+import {
+	getPixelsFromPercentage,
+	getPercentageFromPixels,
+	getRelativeElementPosition,
+	isCTABlock,
+} from '../../helpers';
 import {
 	STORY_PAGE_INNER_WIDTH,
 	STORY_PAGE_INNER_HEIGHT,
+	STORY_PAGE_INNER_HEIGHT_FOR_CTA,
+	STORY_PAGE_MARGIN,
 } from '../../constants';
 
+const PAGE_AND_MARGIN = STORY_PAGE_INNER_WIDTH + STORY_PAGE_MARGIN;
+
 const { Image, navigator } = window;
 
 const cloneWrapperClass = 'components-draggable__clone';
@@ -61,13 +70,41 @@ class Draggable extends Component {
 	 * @param {Object} event The non-custom DragEvent.
 	 */
 	onDragEnd = ( event ) => {
-		const { onDragEnd = noop } = this.props;
+		const { clearHighlight, dropElementByOffset, blockName, setTimeout, onDragEnd = noop } = this.props;
 		if ( event ) {
 			event.preventDefault();
 		}
 
+		// Make sure to clear highlight.
+		clearHighlight();
+
+		// 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_MARGIN );
+
+			let baseHeight, xAttribute, yAttribute;
+			if ( isCTABlock( blockName ) ) {
+				baseHeight = STORY_PAGE_INNER_HEIGHT_FOR_CTA;
+				xAttribute = 'btnPositionLeft';
+				yAttribute = 'btnPositionTop';
+			} else {
+				baseHeight = STORY_PAGE_INNER_HEIGHT;
+				xAttribute = 'positionLeft';
+				yAttribute = 'positionTop';
+			}
+
+			const newAttributes = {
+				[ xAttribute ]: getPercentageFromPixels( 'x', newLeft, STORY_PAGE_INNER_WIDTH ),
+				[ yAttribute ]: getPercentageFromPixels( 'y', currentElementTop, baseHeight ),
+			};
+			dropElementByOffset( this.pageOffset, newAttributes );
+		}
+
 		this.resetDragState();
-		this.props.setTimeout( onDragEnd );
+		setTimeout( onDragEnd );
 	}
 
 	/**
@@ -76,10 +113,11 @@ class Draggable extends Component {
 	 * @param  {Object} event The non-custom DragEvent.
 	 */
 	onDragOver = ( event ) => {
+		const { setHighlightByOffset, blockName } = 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.
-		if ( 'amp/amp-story-cta' === this.props.blockName ) {
+		if ( isCTABlock( blockName ) ) {
 			this.cloneWrapper.style.top = top >= 0 ? `${ top }px` : '0px';
 		} else {
 			this.cloneWrapper.style.top = `${ top }px`;
@@ -91,6 +129,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_MARGIN;
+		const isOffLeft = cursorLeftRelativeToPage < -STORY_PAGE_MARGIN;
+		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( ( -STORY_PAGE_MARGIN - cursorLeftRelativeToPage ) / PAGE_AND_MARGIN ) :
+				Math.ceil( ( cursorLeftRelativeToPage - PAGE_AND_MARGIN ) / PAGE_AND_MARGIN )
+			);
+		}
+		setHighlightByOffset( this.pageOffset );
 	}
 
 	onDrop = () => {
@@ -108,9 +161,9 @@ class Draggable extends Component {
 	 */
 	onDragStart = ( event ) => {
 		const { blockName, elementId, transferData, onDragStart = noop } = this.props;
-		const isCTABlock = 'amp/amp-story-cta' === blockName;
+		const blockIsCTA = isCTABlock( blockName );
 		// In the CTA block only the inner element (the button) is draggable, not the whole block.
-		const element = isCTABlock ? document.getElementById( elementId ) : document.getElementById( elementId ).parentNode;
+		const element = blockIsCTA ? document.getElementById( elementId ) : document.getElementById( elementId ).parentNode;
 
 		if ( ! element ) {
 			event.preventDefault();
@@ -149,11 +202,18 @@ class Draggable extends Component {
 		this.cloneWrapper.style.transform = clone.style.transform;
 
 		// 20% of the full value in case of CTA block.
-		const baseHeight = isCTABlock ? STORY_PAGE_INNER_HEIGHT / 5 : STORY_PAGE_INNER_HEIGHT;
+		const baseHeight = blockIsCTA ? STORY_PAGE_INNER_HEIGHT_FOR_CTA : 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;
@@ -229,8 +289,11 @@ Draggable.propTypes = {
 	} ),
 	onDragStart: PropTypes.func,
 	onDragEnd: PropTypes.func,
+	clearHighlight: PropTypes.func.isRequired,
+	setHighlightByOffset: PropTypes.func.isRequired,
+	dropElementByOffset: PropTypes.func.isRequired,
 	setTimeout: PropTypes.func.isRequired,
-	children: PropTypes.node.isRequired,
+	children: PropTypes.func.isRequired,
 };
 
 export default withSafeTimeout( Draggable );

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

@@ -10,12 +10,10 @@ import { useSelect, useDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import { Reorderer } from '../';
-import { STORY_PAGE_INNER_WIDTH } from '../../constants';
+import { STORY_PAGE_INNER_WIDTH, STORY_PAGE_MARGIN } from '../../constants';
 import Indicator from './indicator';
 import './edit.css';
 
-// This is the sum of left (20px) and right (30px) margin.
-const TOTAL_PAGE_MARGIN = 50;
 const PAGE_BORDER = 1;
 
 const EditorCarousel = () => {
@@ -59,7 +57,7 @@ const EditorCarousel = () => {
 			wrapper.current.style.display = 'none';
 		} else {
 			wrapper.current.style.display = '';
-			wrapper.current.style.transform = `translateX(calc(50% - ${ PAGE_BORDER }px - ${ ( STORY_PAGE_INNER_WIDTH + TOTAL_PAGE_MARGIN ) / 2 }px - ${ ( currentIndex ) * TOTAL_PAGE_MARGIN }px - ${ currentIndex * STORY_PAGE_INNER_WIDTH }px))`;
+			wrapper.current.style.transform = `translateX(calc(50% - ${ PAGE_BORDER }px - ${ ( STORY_PAGE_INNER_WIDTH + STORY_PAGE_MARGIN ) / 2 }px - ${ ( currentIndex ) * STORY_PAGE_MARGIN }px - ${ currentIndex * STORY_PAGE_INNER_WIDTH }px))`;
 		}
 	}, [ currentIndex, isReordering, wrapper ] );