Font size util

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

@@ -51,7 +51,7 @@ function MultiSelectionMovable({ selectedElements }) {
     },
   } = useCanvas();
   const {
-    actions: { dataToEditorY, editorToDataX, editorToDataY },
+    actions: { fontSizeFromEditor, editorToDataX, editorToDataY },
   } = useUnits();
   const {
     actions: { pushTransform },
@@ -68,8 +68,8 @@ function MultiSelectionMovable({ selectedElements }) {
   }, [selectedElements, moveable, nodesById]);
 
   const minMaxFontSize = {
-    minFontSize: dataToEditorY(MIN_FONT_SIZE),
-    maxFontSize: dataToEditorY(MAX_FONT_SIZE),
+    minFontSize: fontSizeFromEditor(MIN_FONT_SIZE),
+    maxFontSize: fontSizeFromEditor(MAX_FONT_SIZE),
   };
 
   // Create targets list including nodes and also necessary attributes.

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

@@ -56,15 +56,15 @@ function SingleSelectionMovable({ selectedElement, targetEl, pushEvent }) {
     },
   } = useCanvas();
   const {
-    actions: { getBox, dataToEditorY, editorToDataX, editorToDataY },
+    actions: { getBox, fontSizeFromEditor, editorToDataX, editorToDataY },
   } = useUnits();
   const {
     actions: { pushTransform },
   } = useTransform();
 
   const minMaxFontSize = {
-    minFontSize: dataToEditorY(MIN_FONT_SIZE),
-    maxFontSize: dataToEditorY(MAX_FONT_SIZE),
+    minFontSize: fontSizeFromEditor(MIN_FONT_SIZE),
+    maxFontSize: fontSizeFromEditor(MAX_FONT_SIZE),
   };
 
   const otherNodes = Object.values(

assets/src/edit-story/components/library/textLibrary.js

@@ -27,6 +27,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { fontSizeFromData } from '../../units/dimensions';
 import { Section, MainButton, Title, SearchInput, Header } from './common';
 import { FontPreview } from './text';
 
@@ -95,6 +96,7 @@ function TextLibrary({ onInsert }) {
                 y: 5,
                 rotationAngle: 0,
                 ...preset,
+                fontSize: fontSizeFromData(preset.fontSize),
               })
             }
           />

assets/src/edit-story/units/dimensions.js

@@ -17,7 +17,11 @@
 /**
  * Internal dependencies
  */
-import { PAGE_WIDTH, PAGE_HEIGHT } from '../constants';
+import {
+  PAGE_WIDTH,
+  PAGE_HEIGHT,
+  DEFAULT_EDITOR_PAGE_HEIGHT,
+} from '../constants';
 
 /**
  * Rounds the pixel value to the max allowed precision in the "data" space.
@@ -87,6 +91,26 @@ export function editorToDataY(y, pageHeight) {
   return dataPixels((y * PAGE_HEIGHT) / pageHeight);
 }
 
+/**
+ * Converts a "data" font size value to the value in the "editor" space
+ *
+ * @param {number} size The value to be converted.
+ * @return {number} The value in the "editor" space.
+ */
+export function fontSizeFromData(size) {
+  return editorPixels((size * PAGE_HEIGHT) / DEFAULT_EDITOR_PAGE_HEIGHT);
+}
+
+/**
+ * Converts a "editor" font size value to the value in the "data" space
+ *
+ * @param {number} size The value to be converted.
+ * @return {number} The value in the "editor" space.
+ */
+export function fontSizeFromEditor(size) {
+  return editorPixels((size * DEFAULT_EDITOR_PAGE_HEIGHT) / PAGE_HEIGHT);
+}
+
 /**
  * Converts the element's position, width, and rotation) to the "box" in the
  * "editor" coordinate space.

assets/src/edit-story/units/unitsProvider.js

@@ -29,6 +29,8 @@ import {
   dataToEditorY,
   editorToDataX,
   editorToDataY,
+  fontSizeFromData,
+  fontSizeFromEditor,
   getBox,
 } from './dimensions';
 
@@ -44,6 +46,8 @@ function UnitsProvider({ pageSize, children }) {
         dataToEditorY: (y) => dataToEditorY(y, pageHeight),
         editorToDataX: (x) => editorToDataX(x, pageWidth),
         editorToDataY: (y) => editorToDataY(y, pageHeight),
+        fontSizeFromData: (size) => fontSizeFromData(size),
+        fontSizeFromEditor: (size) => fontSizeFromEditor(size),
         getBox: (element) => getBox(element, pageWidth, pageHeight),
       },
     }),