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 { SavePage } from '../save';
 
 /**
  * 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>,
+			<SavePage page={ page } />,
 		);
 	} );
 	return markup.join( '' );

assets/src/edit-story/app/story/save/index.js

@@ -0,0 +1 @@
+export { default as SavePage } from './savePage';

assets/src/edit-story/app/story/save/saveElement.js

@@ -0,0 +1,37 @@
+/**
+ * Internal dependencies
+ */
+import StoryPropTypes from '../../../types';
+import { getDefinitionForType } from '../../../elements';
+import { getBox } from '../../../units/dimensions';
+
+function SaveElement( { element } ) {
+	const { id, type } = element;
+
+	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+	const { Save } = getDefinitionForType( type );
+
+	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+	const { x, y, width, height, rotationAngle } = getBox( element, 100, 100 );
+
+	return (
+		<div
+			id={ 'el-' + id }
+			style={ {
+				position: 'absolute',
+				left: `${ x }%`,
+				top: `${ y }%`,
+				width: `${ width }%`,
+				height: `${ height }%`,
+				transform: rotationAngle ? `rotate(${ rotationAngle }deg)` : null,
+			} }>
+			<Save element={ element } />
+		</div>
+	);
+}
+
+SaveElement.propTypes = {
+	element: StoryPropTypes.element.isRequired,
+};
+
+export default SaveElement;

assets/src/edit-story/app/story/save/savePage.js

@@ -0,0 +1,27 @@
+/**
+ * Internal dependencies
+ */
+import StoryPropTypes from '../../../types';
+import SaveElement from './saveElement';
+
+function SavePage( { page } ) {
+	const { id } = page;
+	return (
+		<amp-story-page id={ id }>
+			<amp-story-grid-layer template="vertical">
+				{ page.elements.map( ( element ) => {
+					const { id: elId } = element;
+					return (
+						<SaveElement key={ 'el-' + elId } element={ element } />
+					);
+				} ) }
+			</amp-story-grid-layer>
+		</amp-story-page>
+	);
+}
+
+SavePage.propTypes = {
+	page: StoryPropTypes.page.isRequired,
+};
+
+export default SavePage;

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

@@ -14,52 +14,24 @@
  * limitations under the License.
  */
 
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-
 /**
  * Internal dependencies
  */
-import { getCommonAttributes } from '../shared';
+import StoryPropTypes from '../../types';
 
 /**
  * Returns AMP HTML for saving into post content for displaying in the FE.
  */
-function ImageSave( { id, src, width, height, x, y, rotationAngle, isFullbleed } ) {
+function ImageSave( { element: { src } } ) {
 	const props = {
 		layout: 'fill',
 		src,
 	};
-	const wrapperProps = {
-		id: 'el-' + id,
-	};
-	const style = getCommonAttributes( { width, height, x, y, rotationAngle } );
-	// @todo This is missing focal point handling which will be resolved separately.
-	if ( isFullbleed ) {
-		style.top = 0;
-		style.left = 0;
-		style.width = '100%';
-		style.height = '100%';
-	}
-
-	return (
-		<div style={ { ...style } } { ...wrapperProps }>
-			<amp-img className={ isFullbleed ? 'full-bleed' : '' } { ...props } />
-		</div>
-	);
+	return ( <amp-img { ...props } /> );
 }
 
 ImageSave.propTypes = {
-	id: PropTypes.string.isRequired,
-	src: PropTypes.string.isRequired,
-	width: PropTypes.number.isRequired,
-	height: PropTypes.number.isRequired,
-	x: PropTypes.number.isRequired,
-	y: PropTypes.number.isRequired,
-	rotationAngle: PropTypes.number.isRequired,
-	isFullbleed: PropTypes.bool,
+	element: StoryPropTypes.elements.image.isRequired,
 };
 
 export default ImageSave;