Use amp-fit-text component in block edit context

ampproject · Aug 16, 2018 · d4ec3bd · d4ec3bd
1 parent 4a540a4
commit d4ec3bd
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/assets/css/amp-editor-blocks.css b/assets/css/amp-editor-blocks.css
@@ -2,3 +2,6 @@
 .is-amp-fit-text + .blocks-font-size > .components-font-size-picker__custom-input {
     display: none;
 }
+.edit-post-visual-editor amp-fit-text p {
+    font-size: inherit;
+}
diff --git a/assets/js/amp-editor-blocks.js b/assets/js/amp-editor-blocks.js
@@ -284,7 +284,8 @@ var ampEditorBlocks = ( function() { // eslint-disable-line no-unused-vars
 			var attributes = props.attributes,
 				name = props.name,
 				ampLayout,
-				inspectorControls;
+				inspectorControls,
+				WrappedBlockEdit;
 
 			ampLayout = attributes.ampLayout;
 
@@ -324,11 +325,25 @@ var ampEditorBlocks = ( function() { // eslint-disable-line no-unused-vars
 				];
 			}
 
+			WrappedBlockEdit = el( BlockEdit, _.extend( {
+				key: 'original'
+			}, props ) );
+
+			if ( -1 !== component.data.textBlocks.indexOf( name ) && props.attributes.ampFitText ) {
+				WrappedBlockEdit = el(
+					'amp-fit-text',
+					{
+						'min-font-size': props.attributes.minFont,
+						'max-font-size': props.attributes.maxFont,
+						height: props.attributes.height
+					},
+					WrappedBlockEdit
+				);
+			}
+
 			return [
 				inspectorControls,
-				el( BlockEdit, _.extend( {
-					key: 'original'
-				}, props ) )
+				WrappedBlockEdit
 			];
 		};
 	};

diff --git a/includes/admin/class-amp-editor-blocks.php b/includes/admin/class-amp-editor-blocks.php
@@ -140,6 +140,7 @@ public function enqueue_block_editor_assets() {
 			);
 
 			wp_enqueue_script( 'amp-mathml' );
+			wp_enqueue_script( 'amp-fit-text' );
 		}
 
 		wp_enqueue_script(