Add animation to core blocks. Whitelist animation attributes.

ampproject · Aug 30, 2018 · 6c569c8 · 6c569c8
1 parent 10826df
commit 6c569c8
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 56 deletions.
diff --git a/assets/js/amp-story-editor-blocks.js b/assets/js/amp-story-editor-blocks.js
@@ -197,14 +197,14 @@ var ampStoryEditorBlocks = ( function() { // eslint-disable-line no-unused-vars
 		if ( attributes.ampStoryPosition ) {
 			ampAttributes[ 'grid-area' ] = attributes.ampStoryPosition;
 		}
-		if ( attributes.animationType ) {
-			ampAttributes[ 'animate-in' ] = attributes.animationType;
+		if ( attributes.ampAnimationType ) {
+			ampAttributes[ 'animate-in' ] = attributes.ampAnimationType;
 
-			if ( attributes.animationDelay ) {
-				ampAttributes[ 'animate-in-delay' ] = attributes.animationDelay + 'ms';
+			if ( attributes.ampAnimationDelay ) {
+				ampAttributes[ 'animate-in-delay' ] = attributes.ampAnimationDelay + 'ms';
 			}
-			if ( attributes.animationDuration ) {
-				ampAttributes[ 'animate-in-duration' ] = attributes.animationDuration + 'ms';
+			if ( attributes.ampAnimationDuration ) {
+				ampAttributes[ 'animate-in-duration' ] = attributes.ampAnimationDuration + 'ms';
 			}
 		}
 
@@ -228,14 +228,14 @@ var ampStoryEditorBlocks = ( function() { // eslint-disable-line no-unused-vars
 				type: 'string'
 			};
 			// @todo We could map all the blocks to their tag and use attribute as source instead.
-			settings.attributes.animationType = {
+			settings.attributes.ampAnimationType = {
 				type: 'string'
 			};
-			settings.attributes.animationDelay = {
+			settings.attributes.ampAnimationDelay = {
 				type: 'number',
 				default: 0
 			};
-			settings.attributes.animationDuration = {
+			settings.attributes.ampAnimationDuration = {
 				type: 'number',
 				default: 0
 			};
@@ -260,7 +260,6 @@ var ampStoryEditorBlocks = ( function() { // eslint-disable-line no-unused-vars
 				InspectorControls = wp.editor.InspectorControls,
 				PanelBody = wp.components.PanelBody,
 				SelectControl = wp.components.SelectControl,
-				RangeControl = wp.components.RangeControl,
 				parentClientId = select.getBlockRootClientId( props.clientId ),
 				parentBlock;
 
@@ -284,53 +283,28 @@ var ampStoryEditorBlocks = ( function() { // eslint-disable-line no-unused-vars
 			}
 
 			if ( 'thirds' !== parentBlock.attributes.template ) {
-				// Return original.
-				return [
-					el( BlockEdit, _.extend( {
-						key: 'original'
-					}, props ) )
-				];
+				inspectorControls = el( InspectorControls, { key: 'inspector' },
+					el( PanelBody, { title: __( 'AMP Story Settings', 'amp' ), key: 'amp-story' },
+						component.getAnimationControls( props )
+					)
+				);
+			} else {
+				inspectorControls = el( InspectorControls, { key: 'inspector' },
+					el( PanelBody, { title: __( 'AMP Story Settings', 'amp' ), key: 'amp-story' },
+						el( SelectControl, {
+							key: 'position',
+							label: __( 'Placement', 'amp' ),
+							value: attributes.ampStoryPosition,
+							options: component.data.ampStoryPositionOptions,
+							onChange: function( value ) {
+								props.setAttributes( { ampStoryPosition: value } );
+							}
+						} ),
+						component.getAnimationControls( props )
+					)
+				);
 			}
 
-			inspectorControls = el( InspectorControls, { key: 'inspector' },
-				el( PanelBody, { title: __( 'AMP Story Settings', 'amp' ) },
-					el( SelectControl, {
-						label: __( 'Placement', 'amp' ),
-						value: attributes.ampStoryPosition,
-						options: component.data.ampStoryPositionOptions,
-						onChange: function( value ) {
-							props.setAttributes( { ampStoryPosition: value } );
-						}
-					} ),
-					el( SelectControl, {
-						label: __( 'Animation type', 'amp' ),
-						value: attributes.ampAnimationType,
-						options: component.data.ampAnimationTypeOptions,
-						onChange: function( value ) {
-							props.setAttributes( { ampAnimationType: value } );
-						}
-					} ),
-					el( RangeControl, {
-						label: __( 'Animation duration (ms)', 'amp' ),
-						value: attributes.ampAnimationDuration,
-						min: 0,
-						max: 5000,
-						onChange: function( value ) {
-							props.setAttributes( { ampAnimationDuration: value } );
-						}
-					} ),
-					el( RangeControl, {
-						label: __( 'Animation delay (ms)', 'amp' ),
-						value: attributes.ampAnimationDelay,
-						min: 0,
-						max: 5000,
-						onChange: function( value ) {
-							props.setAttributes( { ampAnimationDelay: value } );
-						}
-					} )
-				)
-			);
-
 			return [
 				inspectorControls,
 				el( BlockEdit, _.extend( {
@@ -340,5 +314,44 @@ var ampStoryEditorBlocks = ( function() { // eslint-disable-line no-unused-vars
 		};
 	};
 
+	component.getAnimationControls = function getAnimationControls( props ) {
+		var RangeControl = wp.components.RangeControl,
+			el = wp.element.createElement,
+			SelectControl = wp.components.SelectControl,
+			attributes = props.attributes;
+
+		return [
+			el( SelectControl, {
+				key: 'animation-type',
+				label: __( 'Animation type', 'amp' ),
+				value: attributes.ampAnimationType,
+				options: component.data.ampAnimationTypeOptions,
+				onChange: function( value ) {
+					props.setAttributes( { ampAnimationType: value } );
+				}
+			} ),
+			el( RangeControl, {
+				key: 'animation-duration',
+				label: __( 'Animation duration (ms)', 'amp' ),
+				value: attributes.ampAnimationDuration,
+				min: 0,
+				max: 5000,
+				onChange: function( value ) {
+					props.setAttributes( { ampAnimationDuration: value } );
+				}
+			} ),
+			el( RangeControl, {
+				key: 'animation-delay',
+				label: __( 'Animation delay (ms)', 'amp' ),
+				value: attributes.ampAnimationDelay,
+				min: 0,
+				max: 5000,
+				onChange: function( value ) {
+					props.setAttributes( { ampAnimationDelay: value } );
+				}
+			} )
+		];
+	};
+
 	return component;
 }() );
diff --git a/includes/class-amp-story-post-type.php b/includes/class-amp-story-post-type.php
@@ -126,7 +126,10 @@ public static function filter_kses_allowed_html( $allowed_tags ) {
 
 		// @todo This perhaps should not be allowed if user does not have capability.
 		foreach ( $allowed_tags as &$allowed_tag ) {
-			$allowed_tag['grid-area'] = true;
+			$allowed_tag['grid-area']           = true;
+			$allowed_tag['animate-in']          = true;
+			$allowed_tag['animate-in-duration'] = true;
+			$allowed_tag['animate-in-delay']    = true;
 		}
 
 		return $allowed_tags;

diff --git a/includes/sanitizers/class-amp-allowed-tags-generated.php b/includes/sanitizers/class-amp-allowed-tags-generated.php
@@ -13323,6 +13323,9 @@ class AMP_Allowed_Tags_Generated {
 		'amp-fx' => array(
 			'value_regex_casei' => '(fade-in|fade-in-scroll|fly-in-bottom|fly-in-left|fly-in-right|fly-in-top|parallax)(\\s|fade-in|fade-in-scroll|fly-in-bottom|fly-in-left|fly-in-right|fly-in-top|parallax)*',
 		),
+		'animate-in' => array(),
+		'animate-in-delay' => array(),
+		'animate-in-duration' => array(),
 		'aria-activedescendant' => array(),
 		'aria-atomic' => array(),
 		'aria-autocomplete' => array(),