Save/output/preview templates with units and wrappers.

assets/src/edit-story/app/story/actions/useSaveStory.js

@@ -24,7 +24,7 @@ import { addQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 import { useAPI } from '../../api';
-import { getDefinitionForType } from '../../../elements';
+import { OutputPage } from '../../../output';
 
 /**
  * Creates AMP HTML markup for saving to DB for rendering in the FE.
@@ -34,18 +34,8 @@ import { getDefinitionForType } from '../../../elements';
  */
 const getStoryMarkupFromPages = ( pages ) => {
 	const markup = pages.map( ( page ) => {
-		const { id } = page;
 		return renderToString(
-			<amp-story-page id={ id }>
-				<amp-story-grid-layer template="vertical">
-					{ page.elements.map( ( { type, ...rest } ) => {
-						const { id: elId } = rest;
-						// eslint-disable-next-line @wordpress/no-unused-vars-before-return
-						const { Save } = getDefinitionForType( type );
-						return <Save key={ 'element-' + elId } { ...rest } />;
-					} ) }
-				</amp-story-grid-layer>
-			</amp-story-page>,
+			<OutputPage page={ page } />,
 		);
 	} );
 	return markup.join( '' );

assets/src/edit-story/components/canvas/canvasProvider.js

@@ -22,14 +22,15 @@ import PropTypes from 'prop-types';
 /**
  * WordPress dependencies
  */
-import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
+import { useCallback, useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { useStory } from '../../app';
 import { DEFAULT_EDITOR_PAGE_WIDTH, DEFAULT_EDITOR_PAGE_HEIGHT } from '../../constants';
-import UnitsProvider from '../../units/unitsProvider';
+import { TransformProvider } from '../transform';
+import { UnitsProvider } from '../../units';
 import useEditingElement from './useEditingElement';
 import useCanvasSelectionCopyPaste from './useCanvasSelectionCopyPaste';
 import Context from './context';
@@ -99,25 +100,6 @@ function CanvasProvider( { children } ) {
 
 	useCanvasSelectionCopyPaste( pageContainer );
 
-	const transformHandlersRef = useRef( {} );
-
-	const registerTransformHandler = useCallback( ( id, handler ) => {
-		const handlerListMap = transformHandlersRef.current;
-		const handlerList = ( handlerListMap[ id ] || ( handlerListMap[ id ] = [] ) );
-		handlerList.push( handler );
-		return () => {
-			handlerList.splice( handlerList.indexOf( handler ), 1 );
-		};
-	}, [ ] );
-
-	const pushTransform = useCallback( ( id, transform ) => {
-		const handlerListMap = transformHandlersRef.current;
-		const handlerList = handlerListMap[ id ];
-		if ( handlerList ) {
-			handlerList.forEach( ( handler ) => handler( transform ) );
-		}
-	}, [ ] );
-
 	const state = {
 		state: {
 			pageContainer,
@@ -136,16 +118,16 @@ function CanvasProvider( { children } ) {
 			clearEditing,
 			handleSelectElement,
 			selectIntersection,
-			registerTransformHandler,
-			pushTransform,
 			setPageSize,
 		},
 	};
 
 	return (
 		<Context.Provider value={ state }>
 			<UnitsProvider pageSize={ pageSize }>
-				{ children }
+				<TransformProvider>
+					{ children }
+				</TransformProvider>
 			</UnitsProvider>
 		</Context.Provider>
 	);

assets/src/edit-story/components/canvas/displayElement.js

@@ -30,8 +30,8 @@ import { useRef } from '@wordpress/element';
 import { getDefinitionForType } from '../../elements';
 import { elementWithPosition, elementWithSize, elementWithRotation } from '../../elements/shared';
 import StoryPropTypes from '../../types';
+import { useTransformHandler } from '../transform';
 import { useUnits } from '../../units';
-import useTransformHandler from './useTransformHandler';
 
 const Wrapper = styled.div`
 	${ elementWithPosition }

assets/src/edit-story/components/canvas/index.js

@@ -16,4 +16,3 @@
 
 export { default } from './canvas';
 export { default as useCanvas } from './useCanvas';
-export { default as useTransformHandler } from './useTransformHandler';

assets/src/edit-story/components/canvas/multiSelectionMovable.js

@@ -31,6 +31,7 @@ import Movable from '../movable';
 import { useStory } from '../../app/story';
 import objectWithout from '../../utils/objectWithout';
 import calculateFitTextFontSize from '../../utils/calculateFitTextFontSize';
+import { useTransform } from '../transform';
 import { useUnits } from '../../units';
 import { MIN_FONT_SIZE, MAX_FONT_SIZE } from '../../constants';
 import useCanvas from './useCanvas';
@@ -41,8 +42,9 @@ function MultiSelectionMovable( { selectedElements } ) {
 	const moveable = useRef();
 
 	const { actions: { updateElementsById } } = useStory();
-	const { actions: { pushTransform }, state: { pageSize: { width: canvasWidth, height: canvasHeight }, nodesById } } = useCanvas();
+	const { state: { pageSize: { width: canvasWidth, height: canvasHeight }, nodesById } } = useCanvas();
 	const { actions: { dataToEditorY, editorToDataX, editorToDataY } } = useUnits();
+	const { actions: { pushTransform } } = useTransform();
 
 	const [ isDragging, setIsDragging ] = useState( false );
 

assets/src/edit-story/components/canvas/pagepreview/index.js

@@ -24,8 +24,9 @@ import PropTypes from 'prop-types';
  * Internal dependencies
  */
 import useStory from '../../../app/story/useStory';
-import { getDefinitionForType } from '../../../elements';
-import { PAGE_WIDTH } from '../../../constants';
+import { TransformProvider } from '../../transform';
+import { UnitsProvider } from '../../../units';
+import DisplayElement from '../displayElement';
 
 const PAGE_THUMB_OUTLINE = 2;
 
@@ -55,27 +56,30 @@ const PreviewWrapper = styled.div`
 function PagePreview( { index, forwardedRef, ...props } ) {
 	const { state: { pages } } = useStory();
 	const page = pages[ index ];
-	const { width } = props;
-	// This is used for font size only, the rest is responsive.
-	const sizeMultiplier = ( width - PAGE_THUMB_OUTLINE ) / PAGE_WIDTH;
+	const { width, height } = props;
 	return (
-		<Page { ...props } ref={ forwardedRef } >
-			<PreviewWrapper>
-				{ page.elements.map( ( { type, ...rest } ) => {
-					const { id: elId } = rest;
-					// eslint-disable-next-line @wordpress/no-unused-vars-before-return
-					const { Preview } = getDefinitionForType( type );
-					return <Preview previewSizeMultiplier={ sizeMultiplier } key={ 'element-' + elId } { ...rest } />;
-				} ) }
-			</PreviewWrapper>
-		</Page>
+		<UnitsProvider pageSize={ { width, height } }>
+			<TransformProvider>
+				<Page { ...props } ref={ forwardedRef } >
+					<PreviewWrapper>
+						{ page.elements.map( ( { id, ...rest } ) => (
+							<DisplayElement
+								key={ id }
+								element={ { id, ...rest } }
+							/>
+						) ) }
+					</PreviewWrapper>
+				</Page>
+			</TransformProvider>
+		</UnitsProvider>
 	);
 }
 
 PagePreview.propTypes = {
 	index: PropTypes.number.isRequired,
 	forwardedRef: PropTypes.func,
 	width: PropTypes.number.isRequired,
+	height: PropTypes.number.isRequired,
 };
 
 export default PagePreview;

assets/src/edit-story/components/canvas/singleSelectionMovable.js

@@ -32,6 +32,7 @@ import Movable from '../movable';
 import calculateFitTextFontSize from '../../utils/calculateFitTextFontSize';
 import objectWithout from '../../utils/objectWithout';
 import getAdjustedElementDimensions from '../../utils/getAdjustedElementDimensions';
+import { useTransform } from '../transform';
 import { useUnits } from '../../units';
 import { MIN_FONT_SIZE, MAX_FONT_SIZE } from '../../constants';
 import { getDefinitionForType } from '../../elements';
@@ -49,8 +50,9 @@ function SingleSelectionMovable( {
 	const [ isResizingFromCorner, setIsResizingFromCorner ] = useState( true );
 
 	const { actions: { updateSelectedElements }, state: { currentPage } } = useStory();
-	const { actions: { pushTransform }, state: { pageSize: { width: canvasWidth, height: canvasHeight }, nodesById } } = useCanvas();
+	const { state: { pageSize: { width: canvasWidth, height: canvasHeight }, nodesById } } = useCanvas();
 	const { actions: { getBox, dataToEditorY, editorToDataX, editorToDataY } } = useUnits();
+	const { actions: { pushTransform } } = useTransform();
 
 	const minMaxFontSize = {
 		minFontSize: dataToEditorY( MIN_FONT_SIZE ),

assets/src/edit-story/components/canvas/useCanvasSelectionCopyPaste.js

@@ -76,8 +76,8 @@ function useCanvasSelectionCopyPaste( container ) {
 			const htmlContent = selectedElements
 				.map( ( { type, ...rest } ) => {
 					// eslint-disable-next-line @wordpress/no-unused-vars-before-return
-					const { Save } = getDefinitionForType( type );
-					return renderToString( <Save { ...rest } /> );
+					const { Output } = getDefinitionForType( type );
+					return renderToString( <Output element={ rest } box={ { width: 100, height: 100 } } /> );
 				} )
 				.join( '\n' );
 

assets/src/edit-story/components/transform/context.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export default createContext( { actions: {}, state: {} } );

assets/src/edit-story/components/transform/index.js

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default as TransformProvider } from './transformProvider';
+export { default as useTransform } from './useTransform';
+export { default as useTransformHandler } from './useTransformHandler';

assets/src/edit-story/components/transform/transformProvider.js

@@ -0,0 +1,75 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Context from './context';
+
+function TransformProvider( { children } ) {
+	const transformHandlersRef = useRef( {} );
+
+	const registerTransformHandler = useCallback( ( id, handler ) => {
+		const handlerListMap = transformHandlersRef.current;
+		const handlerList = ( handlerListMap[ id ] || ( handlerListMap[ id ] = [] ) );
+		handlerList.push( handler );
+		return () => {
+			handlerList.splice( handlerList.indexOf( handler ), 1 );
+		};
+	}, [ ] );
+
+	const pushTransform = useCallback( ( id, transform ) => {
+		const handlerListMap = transformHandlersRef.current;
+		const handlerList = handlerListMap[ id ];
+		if ( handlerList ) {
+			handlerList.forEach( ( handler ) => handler( transform ) );
+		}
+	}, [ ] );
+
+	const state = {
+		state: {
+		},
+		actions: {
+			registerTransformHandler,
+			pushTransform,
+		},
+	};
+
+	return (
+		<Context.Provider value={ state }>
+			{ children }
+		</Context.Provider>
+	);
+}
+
+TransformProvider.propTypes = {
+	children: PropTypes.oneOfType( [
+		PropTypes.arrayOf( PropTypes.node ),
+		PropTypes.node,
+	] ).isRequired,
+};
+
+export default TransformProvider;

assets/src/edit-story/utils/getPercentageFromPixels.js → assets/src/edit-story/components/transform/useTransform.js

@@ -15,25 +15,17 @@
  */
 
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import { PAGE_HEIGHT, PAGE_WIDTH } from '../constants';
+import { useContext } from '@wordpress/element';
 
 /**
- * Converts pixel value to percentage value based on the editor Page measurements.
- * This is necessary for responsive display in the front-end.
- *
- * @param {number} px Pixel value.
- * @param {string} axis Axis, either `x` or `y`.
- * @return {number} Value in percentage.
+ * Internal dependencies
  */
-function getPercentageFromPixels( px, axis ) {
-	if ( 'x' === axis ) {
-		return Number( ( ( px / PAGE_WIDTH ) * 100 ).toFixed( 2 ) );
-	} else if ( 'y' === axis ) {
-		return Number( ( ( px / PAGE_HEIGHT ) * 100 ).toFixed( 2 ) );
-	}
-	return 0;
+import Context from './context';
+
+function useTransform() {
+	return useContext( Context );
 }
 
-export default getPercentageFromPixels;
+export default useTransform;

assets/src/edit-story/components/canvas/useTransformHandler.js → assets/src/edit-story/components/transform/useTransformHandler.js

@@ -22,7 +22,7 @@ import { useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import useCanvas from './useCanvas';
+import useTransform from './useTransform';
 
 /**
  * @param {string} id Target element's id.
@@ -31,9 +31,7 @@ import useCanvas from './useCanvas';
  * @param {!Array=} deps The effect's dependencies.
  */
 function useTransformHandler( id, handler, deps = undefined ) {
-	const {
-		actions: { registerTransformHandler },
-	} = useCanvas();
+	const { actions: { registerTransformHandler } } = useTransform();
 
 	useEffect(
 		() => registerTransformHandler( id, handler ),

assets/src/edit-story/elements/image/display.js

@@ -27,9 +27,9 @@ import { useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { elementFillContent, getMediaProps } from '../shared';
-import { useTransformHandler } from '../../components/canvas';
 import StoryPropTypes from '../../types';
+import { elementFillContent, getMediaProps } from '../shared';
+import { useTransformHandler } from '../../components/transform';
 import { imageWithScale, getImageWithScaleCss } from './util';
 
 const Element = styled.div`